Question

Expanding/Contracting Buttons on MouseOver/RollOut

Asked by: technicalcare

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.    

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2009-04-22 at 07:38:46ID24345318
Tags

flash

Topics

Illustration Software

,

Adobe Flash

,

ActionScript

Participating Experts
2
Points
500
Comments
9

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. ActionScript text Animation
    www.Lunarmedia.com/home.html is a site that boasts that they have figured out how to use actionscript to animate long strings of text and by the looks of the site they must have. Doing it character by character would be excruciatingly slow. I'm relatively new to flash and d...
  2. Detect mouse RollOver and RollOut with actionscript
    So here is my problem I have built a movie with some sliding buttons that react to MouseOver events. But the problem is that if you run your mouse over them quickly they stay all the way out instead of sliding back in. Right now its all done with tweening and using Mouse ev...
  3. Flash Button:  Question regarding "Animation in MouseOv…
    Hello. This is my first time accessing this website. Althought it is a bit confusing, I hope I am asking a question the right way. Onto the question, I am creating a Flash button where: - MouseOver on the button will play Movie #1. - MouseOut on the button wil...
  4. Tricky animated button
    Hi guys, Here's the deal. Flash intro. Movie plays and stops and I got that part done. I want a Enter button that animates in a continous loop and plays a looping sound fx when moused over; the animation stops when the mouse is gone. So I have this small Flash made of a litt...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: wal_toorPosted on 2009-04-23 at 01:08:53ID: 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");
}

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:

Select allOpen in new window

 

by: CraybePosted on 2009-04-23 at 15:10:52ID: 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);
}

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

Select allOpen in new window

 

by: technicalcarePosted on 2009-04-23 at 18:11:46ID: 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!

 

by: CraybePosted on 2009-04-23 at 18:21:20ID: 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.

 

by: CraybePosted on 2009-04-23 at 19:13:46ID: 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);
}

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

Select allOpen in new window

 

by: technicalcarePosted on 2009-04-23 at 20:20:39ID: 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!

 

by: CraybePosted on 2009-04-23 at 20:36:44ID: 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


 

by: technicalcarePosted on 2009-04-23 at 21:48:45ID: 24221801

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

 

by: technicalcarePosted on 2009-04-23 at 21:49:29ID: 31573305

Really appreciate the help!

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...