Jump to content
Search Community

TweenMax scale from visual center?

bonassus test
Moderator Tag

Recommended Posts

I want to use TweenMax's scale property to scale a displayObject from 0 to 1, which works fine. But I also want the object to scale from its center. the displayObject's registration point is located on it's upper left corner so its currently scaling from there. Is there a way to make it scale from the visual center of the displayObject's center with out moving it's registration point?

 

TweenMax.fromTo(displayObject,1,{visible:true,scale:0},{scale:1,ease:Back.easeOut})

Link to comment
Share on other sites

Sure, that's exactly what the TransformAroundCenter plugin is for - see an interactive demo in the Plugin Explorer. It's for "Really Green" Club GreenSock members or higher, though - http://www.greensock.com/club/. Otherwise, you'd need to either change your clip's registration point or wrap it in another Sprite and then offset its x/y so that the container's registration point is in the center. The plugin makes it very easy though.

Link to comment
Share on other sites

I found another way.

 

TweenMax.fromTo(mc,1,{scale:0,x:posX ,y:posY},
{scale:1,x:posX - mc.width/2 ,y:posY - mc.height/2});

 

does the same thing as:

 

mc.ScaleX = 0;
mc.ScaleY = 0;
TweenLite.to(mc, 1, {transformAroundCenter:{scaleX:1, scaleY:1}});

Link to comment
Share on other sites

  • 6 months later...

How would one use TransformAroundCenter continuously? I tried with a timer but it stops for some reason. What's the right way to make it scale from 100% continuously higher or lower to a threshold? Is Repeat needed or a callback?

 

Thanks.

Link to comment
Share on other sites

Could you clarify what you mean? You said continuously (which doesn't sound like a tween because a tween always implies a starting and ending point) but you also said until it hits a threshold. If you're trying to tween to a particular value, what's the problem - why not do a regular tween? Is it that you don't know how long you want the tween to take? I'm confused :(

Link to comment
Share on other sites

Hi, Thanks for taking a look at this.

 

I guess I'm trying to scale continuously, from center, with easing. My use case is: we have an app that lets people upload an image and scale up to whatever x/y scale they want and to shrink the image to a threshold of 20%, so the image does not vanish. They do this on a mouse_down with timer (continuously until mouseUp) and simply scaling the xscale/yscale +=.02 pixels every 100 ms. I'd like their to be easing but you can't write something like :

TweenLite.to(_container, .4, {scale:+=.02, ease:Quad.easeOut});

 

While I could write a simple tween for this, it's a big problem that my registration point is top left too because for some reason I cannot change it in the loader by offsetting the height/width because I'm doing my own resize - so it's scaling from top left. I'd love to take advantage of transform from center for this reason. I thought about using autoFit area rather than my resize code and possibly using that to scale as well. There seems to be some overlap with transformFromCenter and autofit area, no? Maybe I should just use 'scale' ? But again, not sure how to make that keep scaling on a mouse down.

 

Thanks again!

Link to comment
Share on other sites

I'm still baffled. If you're wanting to tween up 0.02 every 100 milliseconds AND ease it, that doesn't make sense. Tweening 0.02 every 100 milliseconds is linear. If it's linear, it cannot also be easing. If you want to tween the image to 20% over the course of 1 second, for example, and you want it to ease out, couldn't you simply do this?:

 

TweenLite.to(image, 1, {transformAroundCenter:{scaleX:0.2, scaleY:0.2}, ease:Quad.easeOut});

Are you just having a hard time figuring out what the duration should be?

 

AutoFitArea seems unnecessary here. Also, if you want to load an image and make its registration point in the center, you could use LoaderMax's ImageLoader to load it and set the centerRegistration:true special property.

 

Maybe I'm missing something obvious here (if so, my apologies) - does anyone else understand the dilemma?

Link to comment
Share on other sites

Sorry, now I understand why you're baffled. My app is an image editor and one of the functions is scaling up/down. You are correct, I don't know how long the duration would be so I guess this isn't a tween, per se. I'd like to scale x/y proportionately from center , until a MOUSE_UP event is fired, at which point easing would kick in and then stop the scaling process. Does that make any sense?

Link to comment
Share on other sites

Ah, okay. I see. You could still use tweens. In fact, it'd probably be more efficient to use tweens anyway. When the user clicks on the button (MOUSE_DOWN), you could generate a tween and figure out the duration based on the scale and how far it has to go until it hits your threshold. Kinda like this (untested):

 

var speed:Number = -0.2; //scale change per second
var minScale:Number = 0.2; //minimum scaleX allowed

function mouseDownHandler(event:MouseEvent):void {
   var currentScale:Number = mc.scaleX;
   var duration:Number = Math.abs( (currentScale - minScale) / speed );
   TweenLite.to(mc, duration, {scaleX:minScale, scaleY:minScale, ease:Linear.easeNone});
}

function mouseUpHandler(event:MouseEvent):void {
   var currentScale:Number = mc.scaleX;
   if (currentScale > minScale) {
       var newScale:Number = Math.max( minScale, currentScale + speed);
       var duration:Number = Math.abs( (currentScale - minScale) / speed ) * 0.8; //multiply by 0.8 to account for the ease. Tweak this number to whatever you need to avoid a change in the initial velocity
       TweenLite.to(mc, duration, {scaleX:newScale, scaleY:newScale, ease:Quad.easeOut});
   }
}

Link to comment
Share on other sites

Hi guys,

 

I've been looking into a similar problem.... I have a mc that I need to smoohtly zoom in and out of and after days (kid you not, I spent like 2 weeks on this now) of searching I came across tweenmax.... even so I couldn't for the life of me figure it out, but the latest code posted by greensock cleared some stuff up.

 

I tweaked it to make it work for my purposes, it's in AS2 + my coding skills aren't great so I expect it contains some duplicate and redundant statements, but it works! :)

 

this is an extract from my original project, just has the zoom in/out functionality.

 

you will need a mc and 2 buttons on stage.

 

main code:

import com.greensock.TweenMax;
import com.greensock.easing.*;
FastEase.activate([Linear, Quad, Strong]); //not sure if this helps with the default tween?
//any comments on fastEase would be appreciated:)

_global.base=this;

var isMouseDown:Boolean = false;
var speed:Number = 1.1; 
var maxScale:Number = 100; //maximum scaleX allowed
var minScale:Number = 25; //minimum scaleX allowed
// this is because I'm inserting a bitmap that starts off displayed at 25%

mc._xscale=mc._yscale=25;

var duration:Number = 0;
var CurrentScale:Number = mc._xscale;
var newScale:Number=0;

this.onMouseDown = function() { isMouseDown = true; }
this.onMouseUp = function() { isMouseDown = false; }

////////////////////////////////////////////////////////////////////////////
//TWEENS

tweenzoomin=function(){
TweenMax.to(mc, duration, {_xscale:maxScale, _yscale:maxScale, useFrames:true});
} //no easing defined - found that default works best..

tweenzoomout=function(){
TweenMax.to(mc, duration, {_xscale:minScale, _yscale:minScale, useFrames:true});
}//no easing defined - found that default works best..

zoomease=function(){
TweenMax.to(mc, duration, {_xscale:newScale, _yscale:newScale, ease:Quad.easeOut, useFrames:true});
}

////////////////////////////////////////////////////////////////////////////

killall = function(){//found it necessary to kill all tweens in the project file, though this might work without it
				TweenMax.killAll(false, true, true);
				}
////////////////////////////////////////////////////////////////////////////

 

 

 

Zoomin button

on(press){
this.onEnterFrame = function() {
	if(isMouseDown){	
						currentScale = mc._xscale;
						if(currentScale<(maxScale-15)){//easeing kicks in at 85% of scale
											duration = Math.abs( (maxScale - currentScale)/ speed  );
											tweenzoomin();
											}
											else
											{
											killall();
											newScale = maxScale 
											duration =  8; //8fps
											zoomease();
												}
					}

									}

}

on(release, releaseOutside){
						delete onEnterFrame;
						killall();
						currentScale = mc._xscale;
					 	 if (mc._xscale < maxScale) { 															
													newScale = Math.min( maxScale, currentScale + 3);
													duration =  12 //12fps
													zoomease();
														}
						}

 

 

zoomout button

 


on(press){
this.onEnterFrame = function() {
	if(isMouseDown){	
						currentScale = mc._xscale;
						if(currentScale > (minScale+15)){//easeing kicks in below 40% of scale(40 to 25)
											duration = Math.abs( (currentScale-minScale)/ speed  );
											tweenzoomout();
											}
											else
											{
											killall();
											newScale = minScale 
											duration =  8 //8fps
											zoomease();
											}
					}

									}

}

on(release, releaseOutside){
						delete onEnterFrame;
						killall();
						currentScale = mc._xscale;
					 	 if (mc._xscale > minScale) {
							 						newScale = Math.max( minScale, currentScale - 3);
													duration =  12 //12fps
													zoomease();
														}			


}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...