Sliding menu with actionscript 3 and TweenLite

Sliding menu with actionscript 3 and TweenLite

This tutorial will show you step by step how to create a sliding menu that appears only when the user moves the mouse over. This tutorial uses the TweenLite engine.

View DemoDownload Source

1. First look at the demo to have in mind what we are going to create.

2. Create a new flash file (Actionscript 3.0) and save it as SlidingMenu.fla. Set the stage dimensions to 620×450 pixels.

3. Download the TweenLite engine at Extract the content of the zip file and place the gs directory in the same fla’s folder.

4. Content creation
First we create the content that will be displayed when buttons on the menu will be clicked. Rename “layer 1″ to “content”.
Create a new Movie clip (600×450) with 3 keyframes. Put in each frame a different content. In our case we have imported pictures from the movie Madagascar 2.
Align the content movie clip to the right of the stage. Give it an instance name of “content_mc”.

5. Menu creation
Create a new layer named “menu”. Take the rectangle tool and draw a rectangle of size 142×450. Convert it to a movie clip and give an instance name of “menu_mc”.

6. Double click on this movie clip. With the rectangle selected we apply an orangeish linear gradient (Color window) :


On the right stop, we set the alpha to 90%.


7. Still inside the menu_mc movie clip, we create a new layer named “buttons”. Select the Text tool, create a static text and type “ALEX”. Convert it to a Movie clip. Give an instance name of “alex_mc”.
Do the same for the buttons Marty and Melman (instance names : marty_mc, melman_mc).

8. Create a new layer. With the Text tool selected, create a static text and type “CHARACTERS”. In the properties panel, change its orientation to vertical:

Place the text to the right of the movie clip.

9. Go back to Scene 1. Place the menu that we’ve just created to an y coordinate of 0. For the x coordinate move the menu so that we only see “CHARACTERS” appears on the stage. In our case x equals -117.

10. Now that we have finished all the graphical part, it’s time to add the code.
Create a new layer at the top named “actions”. Open the actions panel and type the following code :

import gs.TweenLite;
import gs.easing.*;


/************** Slide Menu **************/
var invisible_menu : Number = menu_mc.x;
var visible_menu : Number = 0;


function showMenu(event:MouseEvent) :void{, .4, {x:visible_menu,ease:Linear.easeNone});

function hideMenu(event:MouseEvent):void {, .4, {x:invisible_menu,ease:Linear.easeNone});

/************** Content **************/
var array_menu : Array = [menu_mc.alex_mc, menu_mc.marty_mc,menu_mc.melman_mc];

for (var i:int=0; i<array_menu.length; i++) {
	array_menu[i].buttonMode = true;
	array_menu[i].addEventListener(MouseEvent.CLICK, showContent);

function showContent(event:MouseEvent):void{
	if ( == menu_mc.alex_mc)
	else if ( == menu_mc.marty_mc)

11. First we import the class of the Tweenlite engine and add a stop to the content_mc so that it doesn’t loop.

12. Slide menu code :
We declare 2 variables to store the x coordinate of the menu for the hidden state and the visible state.
We add the ROLL_OVER and ROLL_OUT event listeners to menu_mc. When the ROLL_OVER event is dispatched, the showMenu function create a tween so that the x coordinate of the menu is equal to the visible_menu variable.
We do the same for the hideMenu function except that the x coordinate is now equals to the invisible_menu variable. (For more informations on how to use the Tweenlite engine, visit

13. Content code:
We have declared an array that contains all the instance names of menu buttons.
Next, with a “for loop”, we loop throught this array and for each element of this array we :
- set its button mode to true so that a hand cursor appear when the mouse is over it.
- then add listener to the click event that when will occurred will call the showContent function .
The showContent function simply checks which button has dispatched the event so that the content_mc displays the matching content.

14. Alright, all is done. Now test the movie to see it in action. (Ctrl+Enter for windows, Cmd + Enter for Mac).

18 thoughts on “Sliding menu with actionscript 3 and TweenLite

  1. GuruShare

    This is a really great tutorial and thank you for creating it. If you feel like creating a video of this tutorial we have a $1000 USD contest running for the best video tutorial. We are a social learning network and we would love to have great work like this displayed for everyone to learn from. Check us out @, but regardless, thank you again for a solid tutorial.

  2. Pingback: Flash tutorials | Some Special Flash Effect |

  3. Duane

    im having problems with content_mc , what do i name content_mc ? because everytime i tell it the play an compile eather doesn;t compile and give me and error: 1120: Access of undefined property content_mc. or my 3 background pictures just keep skipping between each one really fast.

    (wrong email address first time around)

  4. kamil

    5001: The name of package ‘com.greensock’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. /Users/kamilnawratil/Documents/design/webDesign/pHmetron/phMetron/flash Element/com/greensock/

  5. Diego

    well, just like the other users, i have the same problem of Kamil and Jose, the scrip can´t find the files from TwinlLite. Anyway, the samples files (fla & swf) have the same problem, becouse the “gs” folder don´t have in the directory.
    You can help us whit that ??

    I am sorry for my very bad Inglish…

    Good luck

  6. admin Post author

    The Tweenlite engine has since been updated. Now you need to import it like this :
    import com.greensock.*;
    import com.greensock.easing.*;

    Hope it helps

  7. angeredil


    This example is very functional.

    How have the same effect in vertical with a low menu which goes up and goes down?

    Thank you !

  8. suraj shakya

    thank you for the tutorial but now since i am new to AS3 … i am having a problem …. unlike you .. i have video playing in each frame instead of images. So the first time it works like a charm but once i click the second link .. the audio from the first video keeps on playing … can you tell me how to unload the previous loaded clip? .. please do reply as i need to finish this project up asap :) ..thanks a lot again ….

  9. jb

    Does anyone know how I could use this script to produce two independent sliding menu’s on one page in the same action script?

  10. Pingback: 30+ Fantastic Adobe Flash Navigation & Menu Tutorials | Tutorials Share | Web & Graphic Design Tutorial Roundups

  11. DJockeyz

    import com.greensock.*;
    import com.greensock.easing.*;

    i’ve already import this, but the problem still exist. any solution ? Thanks btw

  12. rodaczek

    import com.greensock.*;
    import com.greensock.easing.*;

    it works,

    you’ve just need to extract folder “com” from greensock-as3 in the same fla’s folder.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>