In
this tutorial, I will teach you how to create a rotating menu. The end
result is seen above. 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 (500x300).
2. Draw a circle on the stage. Make it 25x25. 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.
