Rotating Menu via ActionScript 3

February 6, 2009 by: smonte

In 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.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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!

Item cirlce

3. Convert the circle into a movie clip. Use the following settings:

Convert circle into a movie clip

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.

Item text field

5. Give the text field an instance name of “itemText”. Embed numerals:

Character embedding

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.

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Related tutorials:

  1. Rotating Mouse Trail with ActionScript 3
  2. Vertical 3D Carousel with ActionScript 3
  3. ActionScript 3 Drawing API
  4. Menu with ActionScript 3
  5. Vertical 3D Carousel with ActionScript 3 and XML



Filed under: ActionScript 3 Advanced
Tags:

Comments

15 Responses to “Rotating Menu via ActionScript 3”
  1. dreannight says:

    good job

  2. Sonner says:

    Nice tutorial… Thanx

  3. Unknown User says:

    Had to look real close, but noticed that the numbers in the background are flipped vertically (upside down).

    Just FYI

    • Janine says:

      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:
      -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<centerY) {
      item.scaleY*=2;
      }

      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

  4. avinash says:

    hi,

    i getting variable error….

    Please help me to figure out, thank you.

  5. L-A says:

    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).

  6. ramarao says:

    Hi,
    I followed you reach step but I got errors.
    1.var itemVector:Vector.=new Vector.;

    can u help me

  7. wallis says:

    Hi, thanks for the tutorial!
    but I got 1 errors.
    1. var itemVector:Vtor.=new Vector.;
    can you help? Thanks!

  8. Binu says:

    Hey,

    It’s not working, getting errors

  9. Michelle says:

    Hi, I followed you reach step but I got 2 errors.
    1.var itemVector:Vector.<Item>=new Vector.<Item>;
    2.if (item.y<centerY) {
    i tried to retype the coding of those two, also tried to check help from the flash but it didn’t work.
    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.

  10. Matt says:

    Great article, thanks for the help.

Leave a Reply

You must be logged in to post a comment.