Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Web Design

Use the Flash Project Panel‏ to Build a Dynamic AS3 Menu

This post is part of a series called GreenSock Tweening Platform.
Create an Organic Dissolve With Perlin Noise
Creating a Virtual Joystick for Touch Devices

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.

simple Flash menu tutorial

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.

simple Flash menu tutorial

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.

simple Flash menu tutorial

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:

simple Flash menu tutorial

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.

simple Flash menu tutorial

Set the stage size to 600x350px.

simple Flash menu tutorial

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.

simple Flash menu tutorial

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 > Publish Settings, select the Flash tab, then click ActionScript Settings. Click the plus button "Add New Path" and write the relative path './Classes'.

simple Flash menu tutorial

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 :

Step 8: Declare the Variables

These are the variables we will use (MenuItem is an ActionScript class that we will create later)

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.

Step 10: Create Four Menu Items

Instantiate the MenuItem class to create four menu items with different colors, labels, functionalities and positions:

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.

Now we are done with the Main class, here is the full code of this class.

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

simple Flash menu tutorial

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.

Step 14: Class and Variables

Declare the MenuItem class (should have the same name as its File name "MenuItem") and extend the Sprite class.

These are the variables that we need at the moment, later we will add some others as we progress in this tutorial.

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.

simple Flash menu tutorial

Step 16: The Constructor

This is the constructor of the MenuItem.

Step 17: addRect() Function

This function is responsible for drawing the rectangles according to the given parameters: position, width, height, color, alpha and 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".

simple Flash menu tutorial

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)

simple Flash menu tutorial

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:

simple Flash menu tutorial

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.

Now we should assign to the TextField the title given in the constructor's parameters.

Add this code to the end of the constructor.

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.

In the end of the constructor add this code:

Step 22: Add Event Listeners

Add the following event listeners to the menuButton at the end of the constructor.

Step 23: Mouse Over

This function will be called when the mouse is over the menuButton.

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.

Step 25: Mouse Click

This function will open the specified URL when the menu item is clicked.

You should add this variable to the variables list.

And add this instruction to the constructor.

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:

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:

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

simple Flash menu tutorial

Open its properties and click Advanced; the window will display extra content, select "Export for ActionScript" and name the Class "MySound".

simple Flash menu tutorial

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.

We are done with our menu! Here is the full code of the MenuItem.as :

And here is the final result:


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!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.