You are Here: Home / Flash / Create a Bouncing Me

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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link] 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:

1.import gs.*;
2.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.

1.var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];
2.
3.for (var i:int=0; i4. menu_array[i].buttonMode = true;
5. menu_array[i].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
6. menu_array[i].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
7. menu_array[i].addEventListener(MouseEvent.CLICK, clickHandler);
8.}

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.

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

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

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

8. Finally the clickHandler function is up to you.

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

01.import gs.*;
02.import gs.easing.*;
03.
04.var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];
05.
06.for (var i:int=0; i07. menu_array[i].buttonMode = true;
08. menu_array[i].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
09. menu_array[i].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
10. menu_array[i].addEventListener(MouseEvent.CLICK, clickHandler);
11.}
12.
13.function scaleUp(e:MouseEvent):void{
14. TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
15.}
16.
17.function scaleDown(e:MouseEvent):void{
18. TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
19.}
20.
21.function clickHandler(e:MouseEvent):void{
22. trace("Button clicked " + e.currentTarget.name);
23.}


[Trebuie sa fiti inscris si conectat pentru a vedea acest link] <= Source