Thursday, 1 October 2009

Fading menu in Actionscript 3

In this tutorial you will learn how to create a fading navigation menu with Actionscript 3.0. This is an update from the previous AS2 navigation menu. Some knowledge of basic buttons and opening URL’s are needed for this tutorial. You will also need the tweenLite plugin from

Fading menu in Actionscript 3.0

Step 1

Open a new Flash AS3 file.
Select the Rectangle tool (R) and drag and rectangle shape on the stage like below. I have used #00CBFF colour with a 3pt black stroke for my rectangle. Once, you have created one rectangle, copy and paste as many rectangles as you need for the menu items.

Step 2

Select Text tool (t) and type the names of the menu items inside the rectangles as shown below. I have used Verdana Bold font, but you can use whatever font you wish.

Step 3

Convert each of your rectangles into movie clips (F8) and give them the following instance names accordingly: home_mc, tutorials_mc, subscribe_mc and contact_mc. For more information on buttons checkout the basic button tutorials.

Step 4

On the timeline create a new layer called “Actions”. Then open up the Actions panel and enter the following code:

//Import the tweenlite package
import gs.TweenLite;

var menu_movement:int = 25;
var initial_menu_position:Number =(change this value for the x position of buttons);

//Array to hold all the button instances.
var buttonsArr:Array=new Array(home_mc, tutorials_mc, subscribe_mc,contact_mc);

//Function to control the rollover and rollout effect.
function rollMenu(menuOption:MovieClip):void {

menuOption.addEventListener(MouseEvent.ROLL_OVER, showMenu);
menuOption.addEventListener(MouseEvent.ROLL_OUT, hideMenu);

function showMenu(event:MouseEvent):void {, 1, {x:menuOption.x+menu_movement,alpha:1});
function hideMenu(event:MouseEvent):void {, 1, {x:initial_menu_position,alpha:0.5});

//For loop to move the menu items as well as intial sets the transpareny to 50%.
for each(var item in buttonsArr) {

Step 5

Test your navigation menu Ctrl + Enter. Now mouse over the menu items and you should see them turn opaque and move slightly to the right.

You should now have a basic navigation menu in Actionscript 3.0.


Anonymous 27 November 2009 at 20:55  

I followed your step but action said "var initial_menu~~~"this is line is wrong and the code is 1084.

iliketo 28 November 2009 at 03:19  


An Error #1084 is a syntax error. This means you either have a “{“ missing or you have a semicolon instead of a colon. It could also mean you have a word or character misspelled. Or it could be a syntactical error which is something you can instantiating.

Can you post the full line of code that has the mistake?

Humesy 25 February 2010 at 14:49  

i have followed your tutorial exactly and seem to have the same problem as the above comment and can't get it to work.
Code 1084 syntax error;
It doesn't seem to recognize this line;
var initial_menu_position:Number =(change this value for the x position of buttons);.
Could you help as i would like to fix this problem and get it to work, as it is frustrating me, and i like the finished result :)


iliketo 5 March 2010 at 10:28  


You need to have some common sense when working through my tutorial. You cannot simply copy and paste the code. It says "change this value for the x position of buttons", so this needs to be a number.

eg. var initial_menu_position:Number = 10;

This is so that it can return to its original position when the mouse is rolled off the menu item.

Katie Walshaw 1 February 2012 at 12:02  

Which parts are we supposed to change or delete? I think I changed all the right parts but doesn't work when I test it and says stuff like:
1172: Definition gs: Tweenlite could not be found
1120: acces of undefined property tweenlite
1120:Access of undefined property events_but. <--- (name of my button)
(same for all other named buttons)
need to do this for my school work to please reply!

iliketo 2 February 2012 at 01:14  


I wrote this post back in 2009 when the tweenlite package was gs.TweenLite. Since then the package has changed to com.greensock.

Change the import statement to

import com.greensock.TweenLite.

As for the Error 1120, take a look at this post

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP