Animated Button (smooth) Help Please.

[sliilvia]

Hi all,
Last time I posted here everyone was very helpful so thought I'd try and see if anyone could help me again.
I'm trying to make 4 simple rectangular buttons. The buttons will be the standard 'home', 'contacts' etc. I am ok with the buttons themselves, but what I am after is a mouseover effect which makes the button grow slightly (smoothly). I can do it using a larger image as the down keyframe but it looks ugly and jerky.

Could anyone help me please with how to set out achieving this?

Many thanks

Silvia

[SergeantFlash]

Well, when making animated buttons I prefer to use Movie Clip symbols and writing the code for them myself. But, if you want to use a Button symbol, the best thing to do is on the roll-over/roll-out frames, add a Movie Clip symbol of a rectangle animating so it gets bigger/smaller. If you tell me the version of Flash you have, I can attach an .fla file containing a bunch of different button examples (note that I am not too good with AS 2.0, so I can only give you good examples using AS 3.0).

[orange gold]

make an animation of the rectangle growing.. then convert it to a movieclip symbol and copy and paste the movieclip inside where mouse over would be..

[sliilvia]

Robert, I'm using AS3. That would be really helpful if you could provide some examples that I could play around with. Many thanks for the replies.

Silvia

[snickelfritz]

On the stage:

Movieclip container instance name "btnGroup".
Nested within "btnGroup": 4 instances of the movieclip symbol "btn".
instance names: "btn1" "btn2" "btn3" "btn4".
This symbol is composed of a base movieclip, instance name: "btnBase", for the shape, size, and color of the button.
And a dynamic textfield, instance name: "btnLabel", for the button label.
A dynamic textfield, instance name: "stageText".

Download TweenMax.
Place the included "gs" directory in the same folder as your FLA.

Main timeline, frame1:
btnGroup.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);
btnGroup.mouseEnabled = false;
btnGroup.btn1.btnLabel.text = "Button 1";
btnGroup.btn2.btnLabel.text = "Button 2";
btnGroup.btn3.btnLabel.text = "Button 3";
btnGroup.btn4.btnLabel.text = "Button 4";

function btnClick(event:MouseEvent):void
{
stageText.text = event.target.btnLabel.text + " was Clicked!";
}

Movieclip symbol "btn" timeline, frame1:
import gs.TweenMax;
import gs.easing.*;

this.mouseEnabled = true;
this.buttonMode = true;
this.mouseChildren = false;

this.addEventListener(MouseEvent.MOUSE_OVER, btnOver, false, 0, true);
this.addEventListener(MouseEvent.MOUSE_OUT, btnOut, false, 0, true);

function btnOver(event:MouseEvent):void
{
MovieClip(parent).setChildIndex(this, MovieClip(parent).numChildren-1);
TweenMax.to(btnBase, .8, {scaleX:1.2, scaleY:1.2, ease:Elastic.easeOut});
}

function btnOut(event:MouseEvent):void
{
TweenMax.to(btnBase, .2, {scaleX:1, scaleY:1, ease:Quad.easeOut});
}

[SergeantFlash]

Below in the attachment is the .fla with the different button examples.

[SergeantFlash]

Here's the navigation menu:

[sliilvia]

Many thanks, I have PM'd you :)

[SergeantFlash]

Updated menu: