Expanding/Contracting Buttons on MouseOver/RollOut

Hi,

I am creating a navigation menu in Flash in which my client wants an animation for the buttons on mouse over and on mouse roll out.  On mouse over, the button should grow taller, and on mouse roll out it should go back to the original size.  

The problem I'm running into is that I know how to create a movie and insert it into the "Over" tab of the button menu, but I cannot get the animation to slowly return to it's original dimensions.  Instead, it just snaps back to the starting shape abruptly, which is something I want to avoid.

I've tried coding for ScaleX and ScaleY, but I'm a novice at flash, especially the ActionScript part.  I also found the following code on this site, but am unaware of how to implement it.

on (rollOver) {
      this.gotoAndPlay("up");
}
on (rollOut) {
      this.gotoAndPlay("down");
}

In both cases, the button just flickers and does not grow as it should.  

Any help would be greatly appreciated, and while I await an answer I'll keep looking for new ways to get this working.    
LVL 3
technicalcareAsked:
Who is Participating?
 
CraybeCommented:
No problems, all you need to do is open the button and move the graphic so that the center mark is at the bottom centre of the selection.  To see what I mean look at this picture:  http://www.craybe.com.au/button.jpg  (sorry just did that quickly)

Edit the button, select the box and with Align to Stage on press the bottom align button.  That should do it :-)  Good luck with your project and let me know if I need to be more clear.  You can get an updated version of the flash file at http://www.craybe.com.au/ButtonTweenAS3Upwards.fla


0
 
wal_toorCommented:
Hellow,

Whell, to get something like this you need some pieces of action scripting. First you need a function to tell a movieclip to scale in, or out. Then each button needs to call this script when the mouse is over or off.

I have created a sample flash file where you can see this in action. Please rename the .fla.txt extension to .fla (CS3, AS2 file)

Hope this works for you.
// ---- function to scale buttons in or out
 
var scaleSpeed:Number = 3; // the higher, the slower the movement is
var originalScale:Number = 100; // default scaling of the buttons
var maxScale:Number = 150; // maximim scaling of the buttons
 
function scaleButton(scaleTo:Number, scaleClip:MovieClip){
	scaleClip.onEnterFrame = function(){
		// smooth scaling
		this._xscale = this._yscale += (scaleTo-this._xscale)/scaleSpeed;
		// stop when scale is finished, remove onEnterFrame function
		if(Math.round(this._xscale) == scaleTo){
			delete this.onEnterFrame;
		}
	}
}
 
// ---- make button actions for button 1
 
_root.button_1.onRollOver = function(){
	scaleButton(maxScale, this);
}
_root.button_1.onRollOut = function(){
	scaleButton(originalScale, this);
}
_root.button_1.onDragOut = function(){
	scaleButton(originalScale, this);
}
_root.button_1.onRelease = function(){
	trace("do stuff from button 1");
}
 
// ---- make button actions for button 2
 
_root.button_2.onRollOver = function(){
	scaleButton(maxScale, this);
}
_root.button_2.onRollOut = function(){
	scaleButton(originalScale, this);
}
_root.button_2.onDragOut = function(){
	scaleButton(originalScale, this);
}
_root.button_2.onRelease = function(){
	trace("do stuff from button 2");
}
 
// ---- make button actions for button 3
 
_root.button_3.onRollOver = function(){
	scaleButton(maxScale, this);
}
_root.button_3.onRollOut = function(){
	scaleButton(originalScale, this);
}
_root.button_3.onDragOut = function(){
	scaleButton(originalScale, this);
}
_root.button_3.onRelease = function(){
	trace("do stuff from button 3");
}

Open in new window

zoombuttons.fla.txt
0
 
CraybeCommented:
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);
}

Open in new window

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
technicalcareAuthor Commented:
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!
0
 
CraybeCommented:
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.
0
 
CraybeCommented:
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);
}

Open in new window

0
 
technicalcareAuthor Commented:
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!

0
 
technicalcareAuthor Commented:
Works great, I appreciate both of your help.  Points inc.
0
 
technicalcareAuthor Commented:
Really appreciate the help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.