[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3627
  • Last Modified:

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
0
hotlazydaze
Asked:
hotlazydaze
  • 5
  • 3
1 Solution
 
Antonio EstradaCommented:
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 EstradaCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 EstradaCommented:
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
 
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now