Flex | Flash | Air | AS3
Sliding menu with actionscript 3 and TweenLite
June 3rd, 2009 in FlashThis 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.
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 http://blog.greensock.com/tweenliteas3/. 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.*;
content_mc.stop();
/************** Slide Menu **************/
var invisible_menu : Number = menu_mc.x;
var visible_menu : Number = 0;
menu_mc.addEventListener(MouseEvent.ROLL_OVER,showMenu);
menu_mc.addEventListener(MouseEvent.ROLL_OUT,hideMenu);
function showMenu(event:MouseEvent) :void{
TweenLite.to(menu_mc, .4, {x:visible_menu,ease:Linear.easeNone});
}
function hideMenu(event:MouseEvent):void {
TweenLite.to(menu_mc, .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 (event.target == menu_mc.alex_mc)
content_mc.gotoAndStop(1);
else if (event.target == menu_mc.marty_mc)
content_mc.gotoAndStop(2);
else
content_mc.gotoAndStop(3);
}
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 http://blog.greensock.com/tweenliteas3/).
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).
Jun 12th, 2009
What if you want to add more buttons for more pictures. What code would you use and what else would you modify?
Jun 19th, 2009
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 @ http://www.gurushare.com, but regardless, thank you again for a solid tutorial.
Jul 21st, 2009
[...] Read tutorial [...]
Nov 11th, 2009
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)
Nov 11th, 2009
@ DUANE : content_mc is the instance name of the movie clip that contains your 3 pictures. See Step 4 of the tut.
Jan 10th, 2010
when i extracted the zip file, there’s no gs directory. Please help me
Feb 6th, 2010
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/TweenLite.as
Mar 1st, 2010
How to apply slideing menu/button in as3.