Subscribe By RSS | Email

Flex | Flash | Air | AS3
Tutorials, Resources,
Tips & Tricks

Create a Bouncing Menu with AS 3.0

September 11th, 2009 in Flash

Learn how to create a menu with actionscript 3 and the Tweenlite engine that bounces up and down when the user interacts with it.

1. Create a new flash file (AS3) and save it as bouncing_menu.fla.

2. Rename “layer 1″ to “menu” and create your menu items. Convert them to movieclip with registration point at the center and give each an instance name of “item1_mc”, “item2_mc” etc…

3. We will use the Tweenlite engine so first go to http://blog.greensock.com/tweenliteas3/ to download it.
Extract the zip file and get the gs directory. Place this directory at the same level of your flash file.

4. Create a new “actions” layer and open the actions panel.
In order to use the TweenLite engine and its easing properties, write the following statements:

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

5. Next declare an array to store all the menu items and loop through this array to add to each item the Mouse Event listeners.

var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];

for (var i:int=0; i<menu_array.length; i++) {
	menu_array[i].buttonMode = true;
	menu_array[i].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
	menu_array[i].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
	menu_array[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

6. For the scaleUp function, use Tweenlite to make the scaleX and scaleY properties of the menu item hovered twice bigger and choose the Bounce.easeOut value for the ease property to create our desired effect.

function scaleUp(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
}

7. For the scaleDown function do the same except that you set the scale properties to their initial values which is 1.

function scaleDown(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

8. Finally the clickHandler function is up to you.

9. Here’s the final code, test the movie to see it in action.

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

var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];

for (var i:int=0; i<menu_array.length; i++) {
	menu_array[i].buttonMode = true;
	menu_array[i].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
	menu_array[i].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
	menu_array[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

function scaleUp(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
}

function scaleDown(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent):void{
	trace("Button clicked " + e.currentTarget.name);
}

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!