Smooth scale in and out of movieclip on rollover using AS3

Hi,

I am trying to find out how to do a smooth expansion and contraction of a movieclip when it is rolled over using AS3. I have found a few ways to do it with AS2 but not with AS3. It needs to always revert back to it's original size when the mouse moves off the clip as some examples get stuck if you move the mouse too quickly. A great example of what I want can be seen at: http://www.42goodthings.com/

Thanks
hotlazydazeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Antonio EstradaTech Leader / Senior Web DeveloperCommented:
Here's an example of it:

You can download the *.fla here: http://vulturous.110mb.com/eefiles/SmoothZoomAS3.fla

And here's the code:

<code>

-V
import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var totalButtons:Number = 100;
var lastXPosition:Number = 20;
var lastYPosition:Number = 20;
var animationDuration:Number = .1;
var i:Number = 0;
 
for(i=0;i<=totalButtons;i++) {
	var customButton:CustomButton = new CustomButton();
	customButton.txt.text = String(i+1);
	customButton.x = lastXPosition;
	customButton.y = lastYPosition;
	customButton.isAnimating = false;
	lastXPosition += customButton.width;
	if(lastXPosition+customButton.width >= stage.stageWidth) {
		lastXPosition = 20;
		lastYPosition += customButton.height;
	}
	addChild(customButton);
	customButton.addEventListener(MouseEvent.MOUSE_OVER, isOver);
	customButton.addEventListener(MouseEvent.MOUSE_OUT, isOut);
	customButton.addEventListener(MouseEvent.MOUSE_DOWN, isDown);
}
 
function isOver(event:MouseEvent):void {
	var obj:Object = new Object();
	if(event.target is CustomButton) {
		obj = event.target;
	} else {
		obj = event.target.parent;
	}
	if(!obj.isAnimating) {
		var overTween:Tween = new Tween(obj,"scaleX",Strong.easeIn,obj.scaleX,1.5,animationDuration,true);
		var overYTween:Tween = new Tween(obj,"scaleY",Strong.easeIn,obj.scaleY,1.5,animationDuration,true);
		obj.parent.setChildIndex(DisplayObject(obj),obj.parent.numChildren-1);
	}
}
 
function isOut(event:MouseEvent):void {
	var obj:Object = new Object();
	if(event.target is CustomButton) {
		obj = event.target;
	} else {
		obj = event.target.parent;
	}	
	var outTween:Tween = new Tween(obj,"scaleX",Strong.easeIn,obj.scaleX,1,animationDuration,true);	
	var outYTween:Tween = new Tween(obj,"scaleY",Strong.easeIn,obj.scaleY,1,animationDuration,true);
	obj.isAnimating = false;
}
 
function isDown(event:MouseEvent):void {
	var obj:Object = new Object();
	if(event.target is CustomButton) {
		obj = event.target;
	} else {
		obj = event.target.parent;
	}	
	trace("Click on: " + obj.txt.text);	
}

Open in new window

0
hotlazydazeAuthor Commented:
Hi Vulturous,

Thanks for your time.

Your method doesn't have the fluidity that I'm after and when you move the mouse around quicky it doesn't really respond. Also, it is quite easy to get a button stuck in it's expanding state. I am looking to re-create the flowing effect achieved at http://www.42goodthings.com/.

Is there a way to adjust your code to achieve this?

Thanks

Simon
0
Antonio EstradaTech Leader / Senior Web DeveloperCommented:
You can change the following line:

var animationDuration:Number = .1;

to a smaller number to make the animation quicker... I just tried it with .01 and it doesn't lag even when doing it really quick, the downside is that the animation isn't really appreciated at all.

-V
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

hotlazydazeAuthor Commented:
Yes, that makes it responsive but like you say then you lose the animation effect. I am looking to achieve both responsiveness and duration. Is there a way to modify your code to do this?
0
hotlazydazeAuthor Commented:
Hi Vulturous,

Any chance of some more help with this? I have raised the points available to get the result that I need.

Thanks

Simon
0
Antonio EstradaTech Leader / Senior Web DeveloperCommented:
Sorry, been quite away for the past few days, haven't really checked anything EE related. Here's a modified code that keeps duration and responsiveness. Hope it works for you:

<code>

-V
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
 
var totalButtons:Number = 100;
var lastXPosition:Number = 20;
var lastYPosition:Number = 20;
var animationDuration:Number = .1;
var i:Number = 0;
 
for(i=0;i<=totalButtons;i++) {
	var customButton:CustomButton = new CustomButton();
	customButton.txt.text = String(i+1);
	customButton.x = lastXPosition;
	customButton.y = lastYPosition;
	customButton.isAnimating = false;
	lastXPosition += customButton.width;
	if(lastXPosition+customButton.width >= stage.stageWidth) {
		lastXPosition = 20;
		lastYPosition += customButton.height;
	}
	addChild(customButton);
	customButton.mouseChildren = false;
	customButton.addEventListener(MouseEvent.MOUSE_OVER, isOver);
	customButton.addEventListener(MouseEvent.MOUSE_OUT, isOut);
	customButton.addEventListener(MouseEvent.MOUSE_DOWN, isDown);
}
 
function isOver(event:MouseEvent):void {
	var obj:Object = new Object();
	obj = event.currentTarget;
	if(!obj.isAnimating) {
		obj.isAnimating = true;
		var overTween:Tween = new Tween(obj,"scaleX",Regular.easeIn,obj.scaleX,1.5,animationDuration,true);
		var overYTween:Tween = new Tween(obj,"scaleY",Regular.easeIn,obj.scaleY,1.5,animationDuration,true);
		obj.parent.setChildIndex(DisplayObject(obj),obj.parent.numChildren-1);
		overTween.addEventListener(TweenEvent.MOTION_FINISH, overFinished);
	}
}
 
function overFinished(event:TweenEvent):void {
	event.currentTarget.obj.isAnimating = false;
}
 
function isOut(event:MouseEvent):void {
	var obj:Object = new Object();
	obj = event.currentTarget;
	obj.isAnimating = true;
	var outTween:Tween = new Tween(obj,"scaleX",Regular.easeIn,obj.scaleX,1,animationDuration,true);	
	var outYTween:Tween = new Tween(obj,"scaleY",Regular.easeIn,obj.scaleY,1,animationDuration,true);
	outTween.addEventListener(TweenEvent.MOTION_FINISH, outFinished);
}
 
function outFinished(event:TweenEvent):void {
	event.currentTarget.obj.isAnimating = false;
}
 
function isDown(event:MouseEvent):void {
	var obj:Object = new Object();
	obj = event.currentTarget;
	trace("Click on: " + obj.txt.text);	
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hotlazydazeAuthor Commented:
That's perfect now. Thanks so much for your help ;-)
0
hotlazydazeAuthor Commented:
Just as an afterthought...

I  wondered how the guys at http://www.42goodthings.com/ had manged to make the effect look so smooth and I realised that they expand the clips quickly but let them shrink at a slower rate. So, by adding another variable to the above code called animationDurationOut and assigning it a higher number you can achieve this affect. It makes a real difference to the end result.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.