Small Question about resizing/scaling

[cach]

Hey, a TweenMax/Flash newb here.

 

I am working on a menu where when you mouse over on a MovieClip, it enlarges and gets highlighted, it works fine except that the stretching is always "anchored" on the center, and I need the clip to grow from the lower-left corner.

 

I don't know if this is something that must be coded or somehow set up on the flash IDE.

 

Anyways, here is the "enlarge" code:

function EnlargeCard (e:MouseEvent):void {
trace("In- "+e.target.name);
var currentMC:MovieClip = MovieClip(e.target);
TweenMax.to(currentMC, .8, {scaleY:2, ease:Back.easeOut});
//highlight!
TweenMax.to(currentMC, .3, {colorMatrixFilter:{saturation:1, brightness:1}});
TweenMax.to(currentMC, 1, {glowFilter:{color:0xffff00, alpha:1, blurX:10, blurY:10}});
}

[jamiejefferson]

TransformAroundPointPlugin *Really Green/Shockingly Green/Corporate membership required

 

TweenPlugin.activate([TransformAroundPointPlugin]);

var bottomLeft:Point = new Point(currentMC.x, currentMC.y + currentMC.height);
TweenMax.to(currentMC, .8, {transformAroundPoint:{point:bottomLeft, scaleY:2}, ease:Back.easeOut});

 

This creates a point at the bottom left point of currentMC, and the TransformAroundPointPlugin tweens the scaleY of currentMC to 2 while the bottom left point remains anchored in place. This should work ok no matter how the DisplayObject is defined in the IDE.

 

*Edit - I forgot the plugin requires membership. Carl's answer is the other solution; go with that if you don't have the plugin.

[Carl]

if you do not have access to the TransformAroundPoint plugin, the easiest thing to do is edit the symbol in the IDE and shift your artwork so that the registration point is in the bottom left hand corner:

[cach]

Thank you both! I managed to solve my problem.

This leads into another problem however.

 

You see, what I'm trying to do is a small card game. I have a movieclip on the stage called "hand" and that clip is made out of 8 smaller "card" clips. When I click on a "card" I want it to move to the center of the stage and get larger, the problem is that when I use Tweenmax to move the "card", it goes to the center of the "hand" and not to the center of the stage.

 

I guess I could try to calculate the real stage coordinates to position the card just right, but I was wondering if TweenMax can make this easier somehow.

 

Ah, I forgot to mention that "hand" is scaled down to 25% its original size, that makes things a little harder.

[Carl]

yes, that is a tricky scenario and a bit much to troubleshoot. I don't believe TweenMax has anything to handle that natively.

 

You should research the AS3 methods globalToLocal and LocalToGlobal which were designed to handle these situations of converting coordinates. here's a start:

http://livedocs.adobe.com/flash/9.0/Act ... alToLocal()

[cach]

Thanks for your help carl

 

In case someone is curious, you can get stage coordinates with something like:

var globalClipPosX:Number = (e.target as DisplayObject).localToGlobal(new Point()).x ;

Using that I managed to get the position I wanted.

 

I hit another snag however (hopefully is the last). Once the user zooms in on the card, they can press a button to cancel the Zoom and the card goes back into place, that works ok. Except if the user has the mouse over the card, or quickly points to other card in the hand (this triggers the highlight-enlarge tween) and that messes everything up.

 

I tried to use overwrite and/or killAllTweensOf in several different ways, but can't seem to get rid of this behaviour.

[Carl]

glad to hear you are getting closer.

 

as for the roll over other cards while zooming issue. you may want to just disable all other card/mouse events while the animation is happening.

 

during a zoom set a boolean like isZooming = true;

 

and then all the cards could have

 

if(!isZooming){

//do the tween as requested

}else{

trace("zoom in progress, chill out for one sec");

}