Saturday, 5 May 2012

Tsunami menu effect in Actionscript 3

In this post I will create a quick and dirty Tsunami menu effect in Actionscript 3. I have used movie clips on the stage and Actionscript code in the timeline to create this effect. I have also used the TweenNano class for the tweening.

Step 1

Open a new AS3 flash file. Then create your menu items on the stage. I have used the Rectangle tool to create the menu items. Convert your menu items into movie clips (F8) and select the centre registration point. Then give them the following instances name accordingly: m1, m2, m2 etc.

Step 2

On the timeline insert a new layer called Actions. Then in the Actions panel enter the following code.

//import the TweenNano class.
import com.greensock.TweenNano;
import com.greensock.easing.*;

//The main and secondary scale numbers.
const MAINSCALE:Number = 1.7;
const SECONDARYSCALE:Number = 1.3;

//Array to hold the menu items.
var menuItems:Array = new Array(mc1, mc2, mc3, mc4, mc5);  

//For loop to add the mouse over and mouse out listener to the menu items.
for(var i:uint = 0; i < menuItems.length; i++){
 menuItems[i].buttonMode = true;
 menuItems[i].addEventListener(MouseEvent.MOUSE_OVER, mOver);  
 menuItems[i].addEventListener(MouseEvent.MOUSE_OUT, mOut);    

//This function moves the moused over movie clip to the top of the display list.
//The mouse overed movie clip will scale the scaleX and scaleY properties
//to the 'main scale number' while the movie clips to the left and right will 
//scale to the 'secondary scale number'. If the movie clip is the first or last menu
//item then only the menu item next to it will get scaled.
function mOver(e:MouseEvent):void
 var target:MovieClip = as MovieClip;
 var index:int = menuItems.indexOf(;
 setChildIndex(target, numChildren - 1);
 if(index == 0){[index], 0.6,   {scaleX:MAINSCALE, scaleY:MAINSCALE, ease:Sine.easeOut});[index + 1], 1, {scaleX:SECONDARYSCALE, scaleY:SECONDARYSCALE});
 else if(index == menuItems.length - 1){[index], 0.6,   {scaleX:MAINSCALE, scaleY:MAINSCALE, ease:Sine.easeOut});[index - 1], 1, {scaleX:SECONDARYSCALE, scaleY:SECONDARYSCALE});
 else{[index], 0.6,   {scaleX:MAINSCALE, scaleY:MAINSCALE, ease:Sine.easeOut});[index + 1], 1, {scaleX:SECONDARYSCALE, scaleY:SECONDARYSCALE});[index - 1], 1, {scaleX:SECONDARYSCALE, scaleY:SECONDARYSCALE});

//This function returns the movie clips back to there orginal size. 
function mOut(e:MouseEvent):void
 for(var i:uint = 0; i < menuItems.length; i++){[i], 1, {scaleX:1, scaleY:1});

Step 3

Export movie Ctrl + Enter.

Note if you have not selected the centre registration point and have the registration point at the default top left -your menu items will tween from the top left. If you are a club Greensock member you can use the TransformAroundCenter class to tween from centre of the movie clip if your registration point is top left. An example can be seen at this post.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP