Expanding/Contracting Buttons on MouseOver/RollOut

Below is another method of animation using Tweens, these run very smoothly and are easy to modify.  I would advise that you increase the frame rate of the movie to 24fps, at 12fps it will look choppy.

If you want to make it scale on the x axis just duplicate the line of code in the scalebutton function and change the tween name and "_yscale" to "_xscale"

You can download an example of the code (very basic) at http://www.craybe.com.au/ButtonTween.fla

Let me know if you would like more information on how to set up multiple buttons.

//The import command is for the animation it just needs to be on the same level as the button.
 
import mx.transitions.Tween;
import mx.transitions.easing.*;
 
button_height_original = 100
button_height_stretch = 200
 
//Commands for the button named "thebutton"
thebutton.onRollOver = function(){
	scalebutton(thebutton,button_height_stretch)
}
thebutton.onRollOut = function(){
	scalebutton(thebutton,button_height_original)
}
thebutton.onRelease = function(){
	//Enter code here for button action
	//move the button back to it's original size
	scalebutton(thebutton,button_height_original)
}
//include this action so if the user clicks on the button but lets go off the buttin it will still scale back
thebutton.onReleaseOutside = function(){
	scalebutton(thebutton,button_height_original)
}
 
//this function will animate the button on the _yscale
function scalebutton(buttonvar,new_size){
	//Tween(the button name, dimension to change, type of tween, original size, new size, speed
	var button_tween:Tween = new Tween(buttonvar, "_yscale", Strong.easeOut, buttonvar._yscale, new_size, 1, true);
}

Select allOpen in new window

I appreciate the answers, guys.  However, I'm having some issues integrating your code in my file.  I notice the first code is for CS3 AS2, but I am using CS4 and AS3, and probably should have mentioned that in my original post.  

I tried to use the second poster's code, but I'm having problems that I believe stem from the first two lines that import mx.transitions.  I'm getting the following script errors:

1172: Definition mx.transitions:Tween could not be found.
1172: Definition mx.transitions.easing could not be found.
1172: Definition mx.transitions:Tween could not be found.
1172: Definition mx.transitions.easing could not be found.
1046: Type was not found or was not a compile-time constant: Tween.
1180: Call to a possibly undefined method Tween.
1120: Access of undefined property Strong.
1120: Access of undefined property button_height_original.
1120: Access of undefined property button_height_stretch.
1119: Access of possibly undefined property onRollOver through a reference with static type flash.display:SimpleButton.
1119: Access of possibly undefined property onRollOut through a reference with static type flash.display:SimpleButton.
1119: Access of possibly undefined property onRelease through a reference with static type flash.display:SimpleButton.
1119: Access of possibly undefined property onReleaseOutside through a reference with static type flash.display:SimpleButton.
1120: Access of undefined property button_height_stretch.
1120: Access of undefined property button_height_original.
1120: Access of undefined property button_height_original.
1120: Access of undefined property button_height_original.
Warning: 1090: Migration issue: The onRollOver event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0.  You must first register this handler for the event using addEventListener ( 'mouseOver', callback_handler).

There are 4 of those last migration issues, so I'm assuming that my problem is also having to do with AS3.  Any ideas on how to fix those for AS3 so that I can get this up and running?

Thanks again, guys!

Yep you are right I am using AS2 in CS3 I will look to see if there is a Tween class equivalent in AS3 and repost.

Right I have adjusted the code to work in AS3.  New file is at http://www.craybe.com.au/ButtonTweenAS3.fla and new code below:

all that changed is the import library (from mx to fl) the event handler from buttons (apparently you have to use listeners now) and some slight adjustments to the tween dimension lable.

Hope this helps :-)

import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var button_height_original = 100
var button_height_stretch = 200
 
thebutton.addEventListener(MouseEvent.MOUSE_OVER, StretchOut);
thebutton.addEventListener(MouseEvent.MOUSE_OUT, StretchIn);
 
function StretchOut(evt:MouseEvent):void{
	scalebutton(thebutton,button_height_stretch)
}
 
function StretchIn(evt:MouseEvent):void{
	scalebutton(thebutton,button_height_original)
}
 
//this function will animate the button on the _yscale
function scalebutton(buttonvar,new_size){
	//Tween(the button name, dimension to change, type of tween, original size, new size, speed
	var button_tween:Tween = new Tween(buttonvar, "height", Strong.easeOut, buttonvar.height, new_size, 1, true);
}

Select allOpen in new window

This works great Craybe, I just have one more question.  How do I make the button expand upward instead of downward?  These buttons will be at the bottom of the stage, so I need them to pop up rather than down.  Once we get that in order, I'll be good to go!

Works great, I appreciate both of your help.  Points inc.

Really appreciate the help!