Flash Vertical 3D Carousel with ActionScript 3 and XML | FlashMyMind

Vertical 3D Carousel with ActionScript 3 and XML

May 9, 2009 by: smonte

In this tutorial I’ll teach you how you can create an attractive vertical 3D carousel by using XML and ActionScript 3. We first set up everything ready on the Flash stage, then make the XML file and finally add some ActionScript 3. Check out the end result!

Get TweenMax

We will use TweenMax for the animation of the menu items. Therefore, download TweenMax for AS3. TweenMax will save us a lot of time from coding the animations ourselves! Save the “gs” folder to the same location where your .fla file will be located.

New Document

Create a new Flash ActionScript 3 document with the following properties.

Flash document properties

Menu Item Shape

Draw a rounded rectangle on the stage with the following properties (the hex code for the fill color is #A3320C). I used a value 5 for the rounded corners.

Menu Item Movie Clip

Convert the rectangle to a movie clip (select the rectangle and hit F8). Name it “Menu Item” and set the registration point to the center. Also link the rectangle to a class named “MenuRectangle”. We link the menu item to a class because we’ll be creating these menu items via ActionScript.

Text Layer

Double click the menu item movie clip on the stage. You should now be “inside” the movie clip. Now create a new layer named “menu text”.

Flash text layer

Menu Item Text

In the “menu text” layer create a dynamic text field so that it’s on top of the rectangle shape. Type some text in it and set the following properties. Note that we give the text field an instance name of “menuText“.

Embedding Characters

In order for the text to look smooth in the Flash movie we need to embed some characters. So while the “menuText” text field selected, click the “Character Embedding” button and embed uppercase and lowercase characters (embed more if you’ll use more characters).

Embedding characters in Flash

Final Touch to the Stage

Now go back to the main timeline and remove the menu item movie clip from the stage. Your stage should be completely empty now.

Creating the XML File

Now we’re ready to create the XML file from which we will load the menu item labels and URLs where they link to. With your favorite text editor type the following.

 
>
 
    >
 
        >
            >Home>
            >http://tutorials.flashmymind.com>
        >
        >
            >Tutorials>
            >http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/>
        >
        >
            >Forum>
            >http://tutorials.flashmymind.com/forum/>
        >
        >
            >About>
            >http://tutorials.flashmymind.com/about/>
        >
        >
            >Home>
            >http://tutorials.flashmymind.com>
        >
        >
            >Tutorials>
            >http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/>
        >
        >
            >Forum>
            >http://tutorials.flashmymind.com/forum/>
        >
        >
            >XML>
            >http://tutorials.flashmymind.com/about/>
        >
        >
            >Home>
            >http://tutorials.flashmymind.com>
        >
        >
            >Tutorials>
            >http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/>
        >
        >
            >Forum>
            >http://tutorials.flashmymind.com/forum/>
        >
        >
            >About>
            >http://tutorials.flashmymind.com/about/>
        >
        >
            >Home>
            >http://tutorials.flashmymind.com>
        >
        >
            >Tutorials>
            >http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/>
        >
        >
            >Forum>
            >http://tutorials.flashmymind.com/forum/>
        >
        >
            >XML>
            >http://tutorials.flashmymind.com/about/>
        >
        >
            >Home>
            >http://tutorials.flashmymind.com>
        >
        >
            >Tutorials>
            >http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/>
        >
        >
            >Forum>
            >http://tutorials.flashmymind.com/forum/>
        >
        >
            >About>
            >http://tutorials.flashmymind.com/about/>
        >        >
            >Home>
            >http://tutorials.flashmymind.com>
        >
        >
            >XML>
            >http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/>
        >
 
    >
 
>

The structure of the XML file is simple. For each item we specify the label and the URL where it should link to. Save this file to a location you’ll remember.

ActionScript – Loading the XML

On the main timeline type the following code in the first frame.

//Import TweenMax
import gs.*;
 
//The path to the XML file (use your own here)
var xmlPath:String = "http://tutorials.flashmymind.com/XML/carousel-menu.xml";
 
//We'll store the loaded XML to this variable
var xml:XML;
 
//Create a loader and load the XML. Call the function "xmlLoaded" when done.
var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);
 
//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {
 
        //Make sure that we are not working with a null variable
        if ((e.target as URLLoader) != null ) {
 
                //Create a new XML object with the loaded XML data
                xml = new XML(loader.data);
 
                //Call the function that creates the menu
                createMenu();
        }
}

We first import TweenMax because we need it later on in the animation. Then we specify where the XML file is located, modify this to fit your settings. Then we load the XML file and call the xmlLoaded() function. In the xmlLoaded() function we create a new XML object from the loaded XML data. Finally we call the function createMenu() which we’ll look at next.

ActionScript – Creating the 3D Menu

Type the following code.

//We need to know how many items we have on the stage
var numberOfItems:uint = 0;
 
//This array will contain all the menu items
var menuItems:Array = new Array();
 
//Set the focal length
var focalLength:Number = 350;
 
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
 
//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;
 
//Radius of the circle
var radius:Number = 128;
 
//This function creates the menu
function createMenu():void {
 
        //Get the number of menu items we will have
        numberOfItems = xml.items.item.length();
 
        //Calculate the angle difference between the menu items (in radians)
        var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180;
 
        //We use a counter so we know how many menu items have been created
        var count:uint = 0;
 
        //Loop through all the  nodes in the XML
        for each (var item:XML in xml.items.item) {
 
                //Create a new menu item
                var menuItem:MenuItem = new MenuItem();
 
                //Calculate the starting angle for the menu item
                var startingAngle:Number = angleDifference * count;
 
                //Set a "currentAngle" attribute for the menu item
                menuItem.currentAngle = startingAngle;
 
                //Position the menu item
                menuItem.xpos3D = 0;
                menuItem.ypos3D = radius * Math.sin(startingAngle);
                menuItem.zpos3D = radius * Math.cos(startingAngle);
 
                //Calculate the scale ratio for the menu item (the further the item -> the smaller the scale ratio)
                var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);
 
                //Scale the menu item according to the scale ratio
                menuItem.scaleX = menuItem.scaleY = scaleRatio;
 
                //Position the menu item to the stage (from 3D to 2D coordinates)
                menuItem.x = vanishingPointX + menuItem.xpos3D * scaleRatio;
                menuItem.y = vanishingPointY + menuItem.ypos3D * scaleRatio;
 
                //Add a text to the menu item
                menuItem.menuText.text = item.label;
 
                //Add a "linkTo" variable for the URL
                menuItem.linkTo = item.linkTo;
 
                //We don't want the text field to catch mouse events
                menuItem.mouseChildren = false;
 
                //Assign MOUSE_OVER, MOUSE_OUT and CLICK listeners for the menu item
                menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
                menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
                menuItem.addEventListener(MouseEvent.CLICK, itemClicked);
 
                //Add the menu item to the menu items array
                menuItems.push(menuItem);
 
                //Add the menu item to the stage
                addChild(menuItem);
 
                //Assign an initial alpha
                menuItem.alpha = 0.3;
 
                //Add some blur to the item
                TweenMax.to(menuItem,0, {blurFilter:{blurX:1, blurY:1}});
 
                //Update the count
                count++;
        }
}

There is quite a bit of code here, but it’s actually really straightforward. We first declare some more variables that we need. In the createMenu() function we loop through all the items found in the XML file. We position the items in a 3D circle and then convert the 3D coordinates into 2D coordinates.

We assign a label to each item and create a “linkTo” attribute which will save the URL for each menu item.

Next let’s look at the mouse event handlers.

ActionScript – Mouse Event Handlers

Type the following functions.

//This function is called when a mouse is over an item
function mouseOverItem(e:Event):void {
 
        //Tween the item's properties
        TweenMax.to(e.target, 0.1, {alpha: 1, glowFilter:{color:0xffffff, alpha:1, blurX:60, blurY:60},blurFilter:{blurX:0, blurY:0}});
}
 
//This function is called when a mouse is out of an item
function mouseOutItem(e:Event):void {
 
        //Tween the item's properties
        TweenMax.to(e.target, 1, {alpha: 0.3, glowFilter:{color:0xffffff, alpha:1, blurX:0, blurY:0},blurFilter:{blurX:1, blurY:1}});
}
 
//This function is called when an item is clicked
function itemClicked(e:Event):void {
 
        //Navigate to the URL that's assigned to the menu item
        var urlRequest:URLRequest=new URLRequest(e.target.linkTo);
        navigateToURL(urlRequest);
 
}

As you can see we animate an item when the mouse moves over or out of an item. We use TweenMax to make our lives a little easier! You can easily add more animations using TweenMax . Play around with the values to see how the menu will look like.

When an item is clicked we navigate to the URL that was assigned to the menu item.

ActionScript – Moving the Carousel

Type the following code to add the movement of the carousel.

//Add an ENTER_FRAME listener for the animation
addEventListener(Event.ENTER_FRAME, moveCarousel);
 
//This function is called in each frame
function moveCarousel(e:Event):void {
 
        //Calculate the angle speed according to mouseY position
        angleSpeed = (mouseY - stage.stageHeight / 2) * 0.0002;
 
        //Loop through the menu items
        for (var i:uint = 0; i < menuItems.length; i++) {
 
                //Store the menu item to a local variable
                var menuItem:MenuItem = menuItems[i] as MenuItem;
 
                //Update the current angle of the item
                menuItem.currentAngle += angleSpeed;
 
                //Calculate a scale ratio
                var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);
 
                //Scale the item according to the scale ratio
                menuItem.scaleX=menuItem.scaleY=scaleRatio;
 
                //Set new 3D coordinates
                menuItem.xpos3D=0;
                menuItem.ypos3D=radius*Math.sin(menuItem.currentAngle);
                menuItem.zpos3D=radius*Math.cos(menuItem.currentAngle);
 
                //Update the item's coordinates.
                menuItem.x=vanishingPointX+menuItem.xpos3D*scaleRatio;
                menuItem.y=vanishingPointY+menuItem.ypos3D*scaleRatio;
 
        }
 
        //Call the function that sorts the items so they overlap each other correctly
        sortZ();
}
 
//This function sorts the items so they overlap each other correctly
function sortZ():void {
 
        //Sort the array so that the item which has the highest 
        //z position (= furthest away) is first in the array
        menuItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
        //Set new child indexes for the item
        for (var i:uint = 0; i < menuItems.length; i++) {
                setChildIndex(menuItems[i], i);
        }
}

Here is where all the magic happens. In each frame we rotate the carousel according to the mouse position. We calculate new 3D coordinates and then convert them into 2D coordinates. We’re actually only changing the y and z coordinates since this is a vertical carousel.

In the sortZ() function we assign new child indexes according to the z-coordinates of the items. This way the items overlap each others correctly giving us the effect of 3D.

Final Words

That’s the end of this tutorial, I hope you enjoyed it! Check out the .fla file if you want to take a closer look at the movie. And if you have any questions concerning the tutorial, please post them in the forum, not in the comments!

Download .fla

Related tutorials:

Filed under: ActionScript 3 Advanced
Tags: 3D, Menu, XML and ActionScript

Comments (21)

Comments

21 Responses to “Vertical 3D Carousel with ActionScript 3 and XML”

batterycentury says:

December 11, 2009 at 6:23 pm

Great post, this is cool, I will copy that, thanks.

Log in to Reply
uggs outlet says:

December 10, 2009 at 11:28 pm

Good sharing. I like your post. Thanks for share your thoughts.
Wholesale and retail are both acceptable to us. Welcome to our site and free to look! Thank you and wish you a

nice day. Good Luck!

Log in to Reply
mita says:

December 9, 2009 at 6:08 am

i have action script2.0 & i like this flash very much but i want to do it in action script2.0.can u plz help me out.

Log in to Reply
cosmic22 says:

November 25, 2009 at 11:25 pm

nice tutorial but i have a question i have made my site in dreamweaver but what I want to know is how do i apply this my dreamweaver site

Log in to Reply
Michael Agbodeka says:

November 20, 2009 at 4:54 am

My Swf does not play on any other machine apart from mine…& i can’t understand why…..i installed flash player 10 on five different machine but it just wont play…all it does is show a balck background…..i even save ma work in flash 9, but it still wont play on any other machine…..i runned a clean installation on ma pc & tried it, the flash objects did not show, but rather asked for plugins…then i installed flash player 10, & it works only on my machine perfectly…WHY? I SERIOUSLY NEED AN ANSWER TO THIS…oh it also doesn’t load the link i specify in the XML file properly…it wont load any image or flash object in the link its supossed to got to…

Log in to Reply
- David says:
  
  December 15, 2009 at 5:04 am
  
  If you still need an answer to this, it sounds like you havnt taken the xml file along with the swf file to the other machines. The xml file needs to be in the same location as the swf (unless specified), otherwise there won’t be anything to display.
  
  Log in to Reply
Dugum Gunu says:

October 29, 2009 at 4:46 am

very nice post .. i love you flashmymind.com … tnx

Log in to Reply
j000 says:

October 27, 2009 at 8:27 am

Cool tutorial I’m gonna have to try this one out. Thanks for sharing

Log in to Reply
Hydro says:

October 22, 2009 at 11:03 pm

I think there is an error in the part where you calculate the angle difference for each item. It works in this example, but it’s bad math as your items will not be evenly spaced in 3D space.

I changed it to (Math.PI * 2) / numberOfItems, this works everytime.

Log in to Reply
Fabio says:

October 14, 2009 at 2:50 pm

We can do this carousel in vertical (with this perspective)

Log in to Reply
xaanaax says:

September 29, 2009 at 4:48 am

hmm cannot open file as well in flash cs3:/ “unexpected file format” how to open the file?

Log in to Reply
Peter says:

September 15, 2009 at 8:46 am

Hello!

Nice tut i just have a question:

What do I have to change so it loads a swf instead on opening a Url on a new page.

Thank You

Log in to Reply
medussa says:

September 15, 2009 at 6:44 am

hallo , i realy want to learn how to make a Vertical 3D Carousel, and the tutorial was excellend ,but i have Macromedia Flash8, do i have to buy the new falsh cs3 or above?

PS\please excuse my english, is not my mother lanquage\

Log in to Reply
nick says:

August 22, 2009 at 10:22 am

Very nice tutorial. I would like to snap in the front a selected items so i was trying to build a function that moves the carousel at certain point according to the clicked item, but i’m not getting anywhere so far. any advice?
thanks.
nick

Log in to Reply
Chat says:

August 6, 2009 at 4:08 pm

Hi,

thanks for the tutorial. it’s works well. if our site is fully flash, then how we link pages, becouse we have to call frames not the html pages how do we do that. if you can please send me that code.

thank’s

Log in to Reply
Bruce Gilbert says:

June 8, 2009 at 12:16 pm

Hi, thanks for the tutorial. I followed the steps and get the following compile error. Not sure why?

TypeError: Error #1010: A term is undefined and has no properties.
at FlashMenu_fla::MainTimeline/createMenu()
at FlashMenu_fla::MainTimeline/xmlLoaded()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/flash.net:URLLoader::onComplete()

also I tried downloading the .fla file and could not open. Same problem as others here. I am using CS3 Professional.

Log in to Reply
CojuteOnLine.Com says:

June 1, 2009 at 3:04 pm

It looks great your Vertical 3D Carousel, but do we have flash 8, and can’t open the fla. It is possible to convert in an older version?? or we are not follow all the steps to properly open it?

Could you help us please!

Log in to Reply
Ghetto says:

May 28, 2009 at 6:51 am

can u pls post the file in adobe flash CS3 professional format??
actually i’m unable to open it,

it says unexpected file format, pls help

reply

Log in to Reply
Sooham says:

May 22, 2009 at 4:01 am

thanks for ur toturials
its a simply teach me…

Log in to Reply
sg.mpls says:

May 15, 2009 at 6:46 am

I always take one pill of aspirin after having read your tutorials…headache..lol….kidding. As usual, good job, man! Thank you for sharing.

Log in to Reply
STVProductions says:

May 11, 2009 at 8:29 am

Nice tut. the only thing I am wondering is Why Someone Would Use Such A Ugly Rotator On One’s Page :O. You cant even improve it by giving it a different design, its just ugly to have as navigation :O. But still, nice tut mkay!

Log in to Reply