Thursday, November 11, 2010

Create smoothly zooming buttons in Flash using AS3

Today we will create buttons that smoothly increase when you roll over them.

Here is an example:


I have a movieclip of the button, which includes a button symbol (with two graphics for mouse up and mouse over) and a dynamic text field over it. The text field is called "t", and the button is "btn".

Now, I just duplicated this movie clip on stage 3 times, called them "bt_1", "bt_2" and "bt_3". Here is the code:

addNav(bt_1, "Start game");
addNav(bt_2, "About");
addNav(bt_3, "Links");

function addNav(mc, tex):void
{
mc.t.mouseEnabled=false;
mc.t.text=tex;
mc.btn.addEventListener(MouseEvent.ROLL_OVER, r_over);
mc.btn.addEventListener(MouseEvent.ROLL_OUT, r_out);
mc.addEventListener(Event.ENTER_FRAME, goer);

var goScale:Number=1;

function r_over(MouseEvent):void
{
goScale=1.2
}
function r_out(MouseEvent):void
{
goScale=1
}
function goer(Event):void
{
if (mc.scaleX < goScale)
{
mc.scaleX+=(goScale-mc.scaleX)/3;
mc.scaleY+=(goScale-mc.scaleY)/3;
}
if (mc.scaleX > goScale)
{
mc.scaleX-=(mc.scaleX-goScale)/3;
mc.scaleY-=(mc.scaleY-goScale)/3;
}
}
}

As you can see, I use one function to manage the effect and just apply this function to all 3 buttons on stage.

Hope this was helpful. Thanks for reading!

No comments:

Post a Comment