Rotating Menu via ActionScript 3
February 6, 2009 by: smonteIn this tutorial, I will teach you how to create a rotating menu. This is a very basic form of the menu. You can edit your Flash movie easily, for example if you want to make the menu items visually more appealing. All the animation is done with ActionScript 3.0 as usual.
Setting up the environment
1. Create a new Flash ActionScript 3 file (500×300).
2. Draw a circle on the stage. Make it 25×25. I used white stroke and purple fill color. Feel free to choose your own colors!
3. Convert the circle into a movie clip. Use the following settings:
4. In the “Item” movie clip, create a dynamic text field in the center of the circle (in a new layer). Set the text to align center. Type some number in the text field.
5. Give the text field an instance name of “itemText”. Embed numerals:
6. Remove the Item movie clip from the stage. We will create all the items dynamically via ActionScript 3.
Moving into Actionsctipt
We will use an external class to represent an item.
7. Create a new ActionScript file. Copy and paste the following code.
package { import flash.display.MovieClip; public dynamic class Item extends MovieClip { public function Item() { } } }
8. Save the file named as “Item.as”. Remember to save it in the same directory where your flash movie is.
9. In the main timeline, create a new layer for ActionScript and paste the following code.
//Save the center coordinates of the stage var centerX:Number=stage.stageWidth/2; var centerY:Number=stage.stageHeight/2; //The number of items we will have (feel free to change!) var NUMBER_OF_ITEMS:uint=15; //Radius of the menu circle (horizontal and vertical) var radiusX:Number=200; var radiusY:Number=100; //Angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180; //How fast a single circle moves (we calculate the speed //according to the mouse position later on...) var angleSpeed:Number=0; //Scaling speed of a single circle var scaleSpeed:Number=0.0002; //This vector holds all the items //(this could also be an array...) var itemVector:Vector.<Item>=new Vector.<Item>; //This loop creates the items and positions them //on the stage for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) { //Create a new menu item var item:Item = new Item(); //Get the angle for the item (we space the items evenly) var startingAngle:Number=angleDifference*i; //Set the x and y coordinates item.x=centerX+radiusX*Math.cos(startingAngle); item.y=centerY+radiusY*Math.sin(startingAngle); //Save the starting angle of the item. //(We have declared the Item class to be dymamic. Therefore, //we can create new properties dynamically.) item.angle=startingAngle; //Add an item number to the item's text field item.itemText.text=i.toString(); //Allow no mouse children item.mouseChildren=false; //Add the item to the vector itemVector.push(item); //Add the item to the stage addChild(item); } //We use ENTER_FRAME to animate the items addEventListener(Event.ENTER_FRAME, enterFrameHandler); //This function is called in each frame function enterFrameHandler(e:Event):void { //Calculate the angle speed according to mouse position angleSpeed = (mouseX - centerX) / 5000; //Loop through the vector for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) { //Save the item to a local variable var item:Item=itemVector[i]; //Update the angle item.angle+=angleSpeed; //Set the new coordinates item.x=centerX+radiusX*Math.cos(item.angle); item.y=centerY+radiusY*Math.sin(item.angle); //Calculate the vertical distance from centerY to the item var dy:Number=centerY-item.y; //Scale the item according to vertical distance item.scaleY = (dy / radiusY); //If we are above centerY, double the y scale if (item.y<centerY) { item.scaleY*=2; } //Set the x scale to be the same as y scale item.scaleX=item.scaleY; //Adjust the alpha according to y scale item.alpha=item.scaleY+1.1; } }
Test your movie! I hope you learned something new from this. Remember, if you have any questions, don’t hesitate to ask in the forum.
Related tutorials:
Comments
15 Responses to “Rotating Menu via ActionScript 3”Leave a Reply
You must be logged in to post a comment.
good job
Nice tutorial… Thanx
Had to look real close, but noticed that the numbers in the background are flipped vertically (upside down).
Just FYI
I fixed some of the errors:
problem with the itemVector:
- I didn’t use a Vector. Instead I set up an Array. Simply write: var itemVector:Array = new Array (“1″, “2″, “3″, “4″,”5″);
You can delet “var NUMBER_OF_ITEMS:uint=15;” and write instead if the count of the Array is asked itemVector.length
Flipping Items:
item.scaleY*=2;
-It happens because of the negative scale number.
Solution: item.scaleY = (dy / radiusY)+2;
I also removed
//If we are above centerY, double the y scale
if (item.y
}
for that’s a more natural movement without.
Better Menuhandling:
As L-A sugested, it’s better for users if the items are floating towards the user not away from him.
Simple to do:
angleSpeed = -(mouseX – centerX) / 5000;
Hope this will help some of you guys
hi,
i getting variable error….
Please help me to figure out, thank you.
Hi,
I would like to point out that it is better for the menu to react by turning toward your cursor, and not away from it. This is a common misconception that breeds unusable menus (if it is finite, you can never really reach option one, because it stays on the left, and moving your cursor to the left makes it go out of reach).
Hi,
I followed you reach step but I got errors.
1.var itemVector:Vector.=new Vector.;
can u help me
Hi, thanks for the tutorial!
but I got 1 errors.
1. var itemVector:Vtor.=new Vector.;
can you help? Thanks!
Hey,
It’s not working, getting errors
Hi, I followed you reach step but I got 2 errors.- =new Vector.
- ;
i tried to retype the coding of those two, also tried to check help from the flash but it didn’t work.
1.var itemVector:Vector.
2.if (item.y
I’m using Adobe Flash CS3, if this will be different? because from your screen shot I think you used CS4 to do it.
Please help me to figure out, thank you.
Great article, thanks for the help.