Create a Funky Menu

We will create a nice menu with an advanced mouseOver handler for the buttons.

This tutorial is actually inspired by the pretty cool one I saw
here
But there the person used a special pre-scripted class called "TweenMax". I will try to do it with my own custom class. The animation is a little different because I haven't used the Tween Class at all.

To begin create a New Folder in your .fla root directory and name it "script". Inside it create a file with the name "menuButton.as". Copy and paste the follwing code in it. This will give you the custom class

package script{

import flash.display.Sprite;
import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.DisplayObject;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.geom.ColorTransform ;
import flash.utils.Timer;


public class menuButton extends Sprite
{
/*the parent movie clip*/
private var button:MovieClip = new MovieClip();

/*name of the button*/
private var buttonName:String;

/*X coordinate of the button*/
private var X:Number;

/*X coordinate of the button*/
private var Y:Number;

/*text field to display the name*/
private var buttonText_txt:TextField=new TextField();

/*timer to monitor the random movements*/
private var timer:Timer = new Timer(100);

/*the constructor takes 3 parameters,the button
name and the x and y coordinates */
public function menuButton(str:String, xc:Number, yc:Number)
{
buttonName=str;
X=xc;
Y=yc;
}

/*create the button*/
public function getButton()
{
/*assign x and y coordinates*/
button.x = X;
button.y = Y;

/*create the background of a 8x4 array of
small squares*/
for(var i=0;i<4;i++)
{
for(var j=0;j<8;j++)
{
var rect:Sprite = new Sprite();
rect.graphics.beginFill(0x896434);
rect.graphics.drawRect(j*9,i*9,8,8);
rect.graphics.endFill();
button.addChild(rect);
}
}

/*format in which to display the name*/
var format:TextFormat = new TextFormat();
format.font = "verdana";
format.color = 0xFFFFFF;
format.size = 18;

/*create the text field and display the
button name*/
buttonText_txt.selectable = false;
buttonText_txt.x=2;
buttonText_txt.y=5;
buttonText_txt.text = buttonName;
buttonText_txt.setTextFormat(format);
buttonText_txt.autoSize = TextFieldAutoSize.LEFT;
button.addChild(buttonText_txt);

/*attach the button to the stage*/
addChild(button);

/*create mouse listeners*/
button.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
button.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
}

private function mouseOverHandler(e:MouseEvent) {
/*start the timer to start the random
movement of the background squares*/
timer.start();
timer.addEventListener(TimerEvent.TIMER,moveRandom);

/*loop through each of the small squares
set it to a random color and an alpha of 0.6*/
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);
var color:ColorTransform = obj.transform.colorTransform;
var randx = -30+Math.random()*60;
var randy = -30+Math.random()*60;
obj.x=randx;
obj.y=randy;
color.color=0x00000;
/*multiplying by 2 gives brighter colors*/
color.redMultiplier = Math.random()*2;
color.blueMultiplier = Math.random()*2;
color.greenMultiplier = Math.random()*2;
obj.transform.colorTransform = color;
obj.alpha =0.6;
}
}

private function mouseOutHandler(e:MouseEvent) {
/*stop the timer and the random movements*/
timer.stop();

/*restore previous values of x and y coordinates
and the color*/
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);
var color:ColorTransform = obj.transform.colorTransform;
color.color=0x896434;
obj.transform.colorTransform = color;
obj.x = Math.floor((i%8)/9);
obj.y = Math.floor(Math.floor(i/8)/9);
alpha = 1;
}
}

/*move the background squares randomly*/
private function moveRandom(e:TimerEvent) {
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);

/*find random values for x and y coordinates*/
var randx = -1+Math.random()*2;
var randy = -1+Math.random()*2;

/*assign the random coordinates*/
obj.x-=randx;
obj.y-=randy;
}
}


}


}

Now open your .fla file and hit Ctrl+J to bring up the Document Properties window.Change the height to 150 and the background color to 0x00000.
That done, select the first frame and hit F9. Copy and paste the following script

/*import the custom class*/
import script.menuButton;

/*this array will contain the names of all the buttons you want in your menu*/
var labels:Array=["Home","Gallery","Login","Submit"];

/*display the buttons*/
for(var i=0;i<labels.length;i++)
{
var b:menuButton = new menuButton(labels[i],100*(i+1),60);
b.getButton();
addChild(b);
}

Hit Ctrl+Enter to test your movie!

Download the .fla file