Jan 21, 2011
Posted on Jan 21, 2011 in Hints and Tips | 5 comments
During this tutorial, we’ll use the Project Panel in Flash to create a vertical animated AS3 menu. The whole process will allow you to easily customize all aspects of the menu using the parameterized constructors. Read on to learn more!
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Create a New Project
Start by creating a new project. Open Flash and go to File > New, then select Flash Project. The Project panel will appear.
In the Projects dropdown select New Project. Type the project name “AnimatedMenu”. In the Root Folder, browse and choose where you want to save your project; you can select an already existing folder or create a new one. Make sure the ActionScript version is set to ActionScript 3.0 and click Create Project.
Step 2: Add the Classes Folder
Now that the project is created, we are going to add a new folder to group in it our classes. Still in the same panel “Project” press the “New Folder” icon in the bottom, name the new folder “Classes” and click Create Folder.
Step 3: Install TweenLite
During this tutorial we will use the TweenLite classes from GreenSock for tweening, so we need to add it to our project. Download it and extract it, place it in your project folder (so you will have AnimatedMenu/com/greensock/).
Now if you refresh the Project panel you should see this structure:
Step 4: Create a New Flash File
Click the “New File” icon in the Project panel to create a new file, name it “AnimatedMenu.fla” (make sure that the File Type is Flash File) and click Create File.
Set the stage size to 600x350px.
Step 5: Create a New ActionScript File
Select the Classes folder and click the “New File” icon, set the File Type to ActionScript, name it “Main”. This will be our document class, if you are not familiar with document classes this Quick Tip on using a document class will help you.
Step 6: Set a Relative Source Path
This will allow us to use any class located in our Classes folder without the need to change the package name. Go to File > ActionScript Settings and click the plus button “Add New Path” and write the relative path ‘./Classes’.
Step 7: Start Coding the Main.as File
Inside the package Classes, import the Sprite Class and use it to extand the class “Main”. Here is the code :
package Classes
{
import flash.display.Sprite;
public class Main extends Sprite
{
Step 8: Declare the Variables
These are the variables we will use (MenuItem is an ActionScript class that we will create later)
private var item1:MenuItem;
private var item2:MenuItem;
private var item3:MenuItem;
private var item4:MenuItem;
Step 9: The Constructor
Now we are going to code the constructor, it contains the code that will be executed when this class is called.
public function Main():void
{
Step 10: Create Four Menu Items
Instantiate the MenuItem class to create four menu items with different colors, labels, functionalities and positions:
//Create four instances of the MenuItem class and spacify the parameters (x,y,color,label,URL).
item1 = new MenuItem(100,60,0x28D9E9,"Home page","http://active.tutsplus.com/");
item2 = new MenuItem(140,150,0xA8FA2D,"Services","http://psd.tutsplus.com/");
item3 = new MenuItem(120,240,0xFC30FC,"About me","http://net.tutsplus.com/");
item4 = new MenuItem(160,330,0xEE2B2B,"Contacts","http://vector.tutsplus.com/");
You can change the URLs to point to other sites.
Step 11: Add the Items to the Stage
This code simply adds the four items created earlier to the stage.
//Add the items to the stage.
addChild(item1);
addChild(item2);
addChild(item3);
addChild(item4);
Now we are done with the Main class, here is the full code of this class.
package Classes
{
import flash.display.Sprite;
public class Main extends Sprite
{
private var item1:MenuItem;
private var item2:MenuItem;
private var item3:MenuItem;
private var item4:MenuItem;
public function Main():void
{
//Create four instances of the MenuItem class and spacify the parameters (x,y,color,label,URL).
item1 = new MenuItem(100,60,0x28D9E9,"Home page","http://active.tutsplus.com/");
item2 = new MenuItem(140,150,0xA8FA2D,"Services","http://psd.tutsplus.com/");
item3 = new MenuItem(120,240,0xFC30FC,"About me","http://net.tutsplus.com/");
item4 = new MenuItem(160,330,0xEE2B2B,"Contacts","http://vector.tutsplus.com/");
//Add the items to the stage.
addChild(item1);
addChild(item2);
addChild(item3);
addChild(item4);
}
}
}
This class is too short to do all the functions that our menu is supposed to do, so we will create the “MenuItem.as” class that contains the necessary functions for our menu.
Step 12: Create the MenuItem.as
Add a new ActionScript 3 file in the Classes folder exactly like you did for the Main.as. Name it “MenuItem.as”.
Step 13: Import Classes
These are the classes that we need to import for our new class. Don’t forget you can always look them up in the LiveDocs.
package Classes
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.*;
import com.greensock.TweenLite;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.text.TextField;
import flash.media.Sound;
import flash.net.navigateToURL;
import flash.net.URLRequest;
Step 14: Class and Variables
Declare the MenuItem class (should have the same name as its File name “MenuItem”) and extend the Sprite class.
public class MenuItem extends Sprite
{
These are the variables that we need at the moment, later we will add some others as we progress in this tutorial.
private var rect1:DynamicMovie = new DynamicMovie(); //Use the DynamicMovie class instead of Sprite class.
private var rect2:DynamicMovie = new DynamicMovie(); //This allow us to change the registration point.
private var rect3:DynamicMovie = new DynamicMovie(); //So we can rotate the rectangels around their centers.
private var X:Number;
private var Y:Number;
private var Color:uint;
DynamicMovie is an AS3 class based on an old AS2 class written by Darron Schall; this AS3 class extends MovieClip and adds a new set of properties (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2) that allow you to manipulate the sprite based on a contextual registration point that can be set using the setRegistration() method.
We need this class to rotate the rectangles around their centers. So let’s place it.
Step 15: Add the DynamicMovie Class
You find this class in the source folder of this tutorial or you can download it from oscartrelles.com, then just place it in the Classes Folder so that it can be recognized by our code.
Step 16: The Constructor
This is the constructor of the MenuItem.
public function MenuItem(posX:Number, posY:Number,color:uint,Title:String,URL:String)
{
//Get the position and color parameters.
X = posX;
Y = posY;
Color = color;
// Call the addRect function to add 3 rectangles with the specified parameters.
addRect(rect1,X-12,Y,360,62,Color,0.3,3);
addRect(rect2,X-4,Y,360,62,Color,0.4,0);
addRect(rect3,X,Y,360,62,Color,0.7,-2);
}
Step 17: addRect() Function
This function is responsible for drawing the rectangles according to the given parameters: position, width, height, color, alpha and rotation.
private function addRect(rect:DynamicMovie,X:Number, Y:Number, width:Number, height:Number,color:uint, alpha:Number, rotation:Number)
{
rect.setRegistration(X+(width/2),Y+(height/2));
rect.graphics.beginFill(color,alpha);
rect.graphics.drawRect(X,Y,width,height);
addChild(rect);
rect.rotation2 = rotation;
}
Now you can test it and you will see this:
Sure, we can’t call it a menu if we don’t add some labels. We’ll deal with that in the next step.
Step 18: Add a Dynamic TextField
Head back to your AnimatedMenu.fla file and add a new symbol (Ctrl + F8); name it “Text_mc” and select “Export for ActionScript”.
Now inside this symbol add a 160x30px Dynamic TextField using the Text Tool (T). This is the font I used: Creampuff Regular, 24px, #FFFFFF. Name the instance “txtLabel”.
Select the TextField and go to Window > Align (Ctrl + K) and hit the buttons “Align left edge” and “Align top edge” (make sure that the checkbox “Align to stage” is selected)
Step 19: Embed the Font
After creating the text field with the specified font we should embed it to display the text properly.
So go to Text > Font Embedding, give it a name (for example “Font1″), select the Creampuff font from the Family combo box, in the Character ranges select all of the Uppercase and the Lowercase, then press the “plus” button located in the left section. See the image below:
Step 20: Add Labels
To add labels to the menu items we are going to instantiate the Text_mc MovieClip. Add this line of code to the variables in the MenuItem.as file.
private var txt:Text_mc = new Text_mc();
Now we should assign to the TextField the title given in the constructor’s parameters.
Add this code to the end of the constructor.
//Assign a title to the TextField and place it.
txt.txtLabel.text = Title;
txt.x = X + 70;
txt.y = Y + 16;
addChild(txt);
This is what you should get:
In the next steps we will add some functions to animate the menu.
Step 21: Menu Button
To turn our menu item into a button we should add a transparent rectangle over it and set the buttonMode to true. So add this variable to the variable list.
private var menuButton:DynamicMovie = new DynamicMovie();
In the end of the constructor add this code:
//Use the addRect function to draw a transparent rectangle over the menu item.
addRect(menuButton,X-10,Y-5,380,80,Color,0,0);
buttonMode = true;
Step 22: Add Event Listeners
Add the following event listeners to the menuButton at the end of the constructor.
menuButton.addEventListener(MouseEvent.MOUSE_OVER,mouseOver);
menuButton.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
menuButton.addEventListener(MouseEvent.CLICK,mouseClick);
Step 23: Mouse Over
This function will be called when the mouse is over the menuButton.
private function mouseOver(e:MouseEvent)
{
var timeline:TimelineLite = new TimelineLite();
//Rotate the rectangels.
new TweenLite(rect1,.3,{rotation2:-4});
new TweenLite(rect2,.3,{rotation2:0});
new TweenLite(rect3,.3,{rotation2:5});
//Tween the text.
timeline.append(new TweenLite(txt,.3,{x:X+45,scaleX:1.1,scaleY:1.1}));
timeline.append(new TweenLite(txt,.3,{x:X+70,alpha:1}));
//Add a Glow Filter to the text.;
new TweenMax(txt,.3,{glowFilter:{color:0xffffff,alpha:1,blurX:5,blurY:5,strength:1,quality:3}});
}
Here we are using the GreenSock classes TimelineLite and TweenMax to animate the button. Search the Activetuts+ site for more tutorials featuring GreenSock.
Step 24: Mouse Out
When the mouse is out this function will return the menu to its initial position.
private function mouseOut(e:MouseEvent)
{
var timeline:TimelineLite = new TimelineLite();
//Rotate the rectangles to their initial position.
new TweenLite(rect1,.3,{rotation2:3});
new TweenLite(rect2,.3,{rotation2:0});
new TweenLite(rect3,.3,{rotation2:-2});
//backward the text animation.
timeline.append(new TweenLite(txt,.3,{x:X+65,alpha:.9}));
timeline.append(new TweenLite(txt,.3,{x:X+70}));
new TweenMax(txt,.3,{glowFilter:{color:0xffffff,alpha:0,blurX:0,blurY:0,strength:0,quality:3}});
}
Step 25: Mouse Click
This function will open the specified URL when the menu item is clicked.
private function mouseClick(e:MouseEvent)
{
//Open the requested URL.
navigateToURL(new URLRequest(myURL));
}
You should add this variable to the variables list.
private var myURL:String;
And add this instruction to the constructor.
myURL = URL;
This is what you should get. Roll over the menu to see the animation.
Now let’s add a cool bubbles effect.
Step 26: The Bubbles Effect
This function will create a number of bubbles with a random position, size and alpha in two directions. This is the code:
private function bubbles(position:Number,direction:Number)
{
//Create 50 bubbles, you can modify the number to get more or less bubbles.
for (var i=0; i<50; i++)
{
var bubble:DynamicMovie= new DynamicMovie();
//Set the registration point for the current bubble.
bubble.setRegistration(X+position,Y);
//Give the bubble the same color as the menu item and a random alpha (but greater than 0.2).
bubble.graphics.beginFill(Color,Math.random()+0.2);
//draw a circle with a random position and radius.
bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5);
//add the bubble at the third index so that it is under the menuButton.
addChildAt(bubble,3);
//Tween the Bubble randomly according to the direction.
new TweenLite(bubble,Math.random() + 1,{x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut});
}
}
Step 27: Call the Bubbles Function
We need to call the bubbles() function when the mouse rolls over the menu item. So add this code to the mouseOver() function:
//Left bubbles.
bubbles(70,1);
//Right bubbles
bubbles(270,-1);
This is what we get:
Step 28: Import the Sound Effect
We are going to finish by adding a sound effect to the menu when it is rolled over by the mouse. To do so, download the sound from here (download the mp3 file). Then import it to the library, File > Import > Import to Library. Rename it to “MySound.mp3″.
Open its properties and click Advanced; the window will display extra content, select “Export for ActionScript” and name the Class “MySound”.
Step 29: Add the Sound Effect to the Menu
To add the sound effect instantiate the sound imported earlier to the library and play it. Place this code in the mouseOver() function.
var mySound:MySound = new MySound();
mySound.play();
We are done with our menu! Here is the full code of the MenuItem.as :
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.*;
import com.greensock.TweenLite;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.text.TextField;
import flash.media.Sound;
import flash.net.navigateToURL;
import flash.net.URLRequest;
public class MenuItem extends Sprite
{
private var rect1:DynamicMovie = new DynamicMovie();//Use the DynamicMovie class instead of Sprite class.
private var rect2:DynamicMovie = new DynamicMovie();//This allow us to change the registration point.
private var rect3:DynamicMovie = new DynamicMovie();//So we can rotate the rectangels around their centers.
private var menuButton:DynamicMovie = new DynamicMovie();
private var X:Number;
private var Y:Number;
private var Color:uint;
private var txt:Text_mc = new Text_mc();
private var myURL:String;
public function MenuItem(posX:Number, posY:Number,color:uint,Title:String,URL:String)
{
//Get the position and color parameters.
X = posX;
Y = posY;
Color = color;
myURL = URL;
// Call the addRect function to add 3 rectangles with the specified parameters.
addRect(rect1,X-12,Y,360,62,Color,0.3,3);
addRect(rect2,X-4,Y,360,62,Color,0.4,0);
addRect(rect3,X,Y,360,62,Color,0.7,-2);
//Assign a title to the TextField and place it.
txt.txtLabel.text = Title;
txt.x = X + 70;
txt.y = Y + 16;
addChild(txt);
//Use the addRect function to draw a transparent rectangle over the menu item.
addRect(menuButton,X-10,Y-5,380,80,Color,0,0);
buttonMode = true;
menuButton.addEventListener(MouseEvent.MOUSE_OVER,mouseOver);
menuButton.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
menuButton.addEventListener(MouseEvent.CLICK,mouseClick);
}
private function addRect(rect:DynamicMovie,X:Number, Y:Number, width:Number, height:Number,color:uint, alpha:Number, rotation:Number)
{
rect.setRegistration(X+(width/2),Y+(height/2));
rect.graphics.beginFill(color,alpha);
rect.graphics.drawRect(X,Y,width,height);
addChild(rect);
rect.rotation2 = rotation;
}
private function mouseOver(e:MouseEvent)
{
var timeline:TimelineLite = new TimelineLite();
var mySound:MySound = new MySound();
mySound.play();
//Rotate the rectangels.
new TweenLite(rect1,.3,{rotation2:-4});
new TweenLite(rect2,.3,{rotation2:0});
new TweenLite(rect3,.3,{rotation2:5});
//Tween the text.
timeline.append(new TweenLite(txt,.3,{x:X+45,scaleX:1.1,scaleY:1.1}));
timeline.append(new TweenLite(txt,.3,{x:X+70,alpha:1}));
//Add a Glow Filter to the text.;
new TweenMax(txt,.3,{glowFilter:{color:0xffffff,alpha:1,blurX:5,blurY:5,strength:1,quality:3}});
//Left bubbles.
bubbles(70,1);
//Right bubbles
bubbles(270,-1);
}
private function mouseOut(e:MouseEvent)
{
var timeline:TimelineLite = new TimelineLite();
//Rotate the rectangles to their initial position.
new TweenLite(rect1,.3,{rotation2:3});
new TweenLite(rect2,.3,{rotation2:0});
new TweenLite(rect3,.3,{rotation2:-2});
//backward the text animation.
timeline.append(new TweenLite(txt,.3,{x:X+65,alpha:.9}));
timeline.append(new TweenLite(txt,.3,{x:X+70}));
new TweenMax(txt,.3,{glowFilter:{color:0xffffff,alpha:0,blurX:0,blurY:0,strength:0,quality:3}});
}
private function mouseClick(e:MouseEvent)
{
//Open the requested URL.
navigateToURL(new URLRequest(myURL));
}
private function bubbles(position:Number,direction:Number)
{
//Create 50 bubble, you can modify the number to get more or less bubbles.
for (var i=0; i<50; i++)
{
var bubble:DynamicMovie= new DynamicMovie();
//Set the registration point for the bubble.
bubble.setRegistration(X+position,Y);
//Give the bubble the same color as the menu item and a random alpha but upper than 0.2.
bubble.graphics.beginFill(Color,Math.random()+0.2);
//draw a circle with a random Position and Radius. ;
bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5);
//add the bubble at the third index to be under the menuButton.;
addChildAt(bubble,3);
//Tween the Bubble randomly according to the direction.
new TweenLite(bubble,Math.random() + 1,{x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut});
}
}
}
}
And here is the final result:
Conclusion
Now you can create your own menu and customize it by adding more menu items, changing the colors, changing the text…
The menu was coded in a separate ActionScript class which allows you to use it easily in other projects.
I want to thank you for reading; I hope you enjoyed it!
View full post on Activetuts+
