Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Expanding/Contracting Buttons on MouseOver/RollOut

Posted on 2009-04-22
9
Medium Priority
?
3,273 Views
Last Modified: 2013-11-11
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.    
0
Comment
Question by:technicalcare
  • 4
  • 4
9 Comments
 
LVL 8

Assisted Solution

by:wal_toor
wal_toor earned 200 total points
ID: 24212724
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
 
LVL 3

Expert Comment

by:Craybe
ID: 24220268
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
 
LVL 3

Author Comment

by:technicalcare
ID: 24221056
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Expert Comment

by:Craybe
ID: 24221080
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
 
LVL 3

Expert Comment

by:Craybe
ID: 24221241
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
 
LVL 3

Author Comment

by:technicalcare
ID: 24221497
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
 
LVL 3

Accepted Solution

by:
Craybe earned 1800 total points
ID: 24221545
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
 
LVL 3

Author Comment

by:technicalcare
ID: 24221801
Works great, I appreciate both of your help.  Points inc.
0
 
LVL 3

Author Closing Comment

by:technicalcare
ID: 31573305
Really appreciate the help!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

HOW TO WARP A RASTER IMAGE AND ADD A REFLECTION USING ADOBE ILLUSTRATOR This tutorial is for experienced to advanced Adobe Illustrator users. Tools and Techniques that will be used in this Tutorial: Flatten Transparency (A) Envelope Distort (B…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question