Width/Height Properties For TransformAroundCenter/Point

[JonDum 2 Likes (Newbie)]

Goal: Take a UIComponent and do this: TweenLite.to(bleh, 1, { transformAroundCenter:{width:800, height: 600} })

 

Possible?

 

I tried hacking it in TransformAroundPoint, but I'm not really getting what the whole changeFactor(n:Number) does.

[GreenSock 12,333 Likes (Superhero)]

I don't see why not. Why did you need to "hack" transformAroundPoint? Can you post an example project with the broken tween? (super simple is fine - no need to post your production files). You did activate the plugin first, right?

[JonDum 2 Likes (Newbie)]

<?xml version="1.0" encoding="utf-8"?>
			creationComplete="application1_creationCompleteHandler(event)">	

 

The button resizes from its flash registration point instead of its center.

[GreenSock 12,333 Likes (Superhero)]

This is likely because of the fact that Flex doesn't fully instantiate its objects quickly enough, even when creationComplete is fired! Totally annoying. I'd consider it a bug. But if you wait for at least a frame or two, the buttons should accurately report their bounds with getBounds(). So again, this isn't a problem with TransformAroundCenter - it's the Flex framework.

[JonDum 2 Likes (Newbie)]

Are you saying it's reporting the wrong getBounds after each frame? Or just when the tween is initialized?

 

I tried delaying both the plugin being activated and the tween being called. Same results.

 

Also, in TransformAroundPoint's onInitTween() I see no case logic for width/height, only x/y & scaleX/scaleY. So shouldn't setting width/height inside a transformAroundCenter:{} block act normally as if it wasn't in any plugin at all?

[JonDum 2 Likes (Newbie)]

bump.

[GreenSock 12,333 Likes (Superhero)]

Sorry - totally missed this thread.

 

I did some more testing and it looks like the problem has to do with the fact that the Flex Button object doesn't adjust its local coordinate system when you change the width/height properties. This makes it impossible to utilize the globalToLocal() and localToGlobal() methods to align things accurately. For example, if you create a 100x100 Sprite and put a tiny circle at exactly 20 pixels from its top left corner (inside of it) and position the Sprite's top left corner at 50,50, that means your little nested circle would be at the x,y coordinates of 70,70 visually on the stage. Then if you change the Sprite's width/height to 200x200 (double the size), the nested circle would now appear at 90,90 since the internal coordinates system of the Sprite doubled in relation to the stage.

 

However, in Flex's Button object, when you alter the width/height, the local coordinate system doesn't change at all! So that little circle would still appear at 70,70 instead of 90,90. Here's proof:

 

<br><br>			import flash.geom.Point;<br>			import mx.events.FlexEvent;<br><br>			protected function tits_clickHandler(event:MouseEvent):void<br>			{<br>				button.width = 50;<br>				button.height = 20;<br><br>				var p:Point = new Point(20, 20);<br>				var before:Point = this.globalToLocal(button.localToGlobal(p));<br><br>				button.width = 200;<br>				button.height = 100;<br><br>				var after:Point = this.globalToLocal(button.localToGlobal(p));<br><br>				trace("before: "+before+", after: "+after); //SAME!<br>			}<br><br>		]]><br>

 

Basically, I create a Point that reflects local coordinates inside the button (20,20). Then I use localToGlobal() and globalToLocal() to translate that point to the coordinate system of the parent. In this case, since the button is at 400,300, the point would get translated to 420,320. As you can see, after altering the width/height, the coordinate remains exactly the same.

 

One easy solution is to use scaleX/scaleY instead of width/height so that the internal coordinates move as the scaling occurs. But the down side is that you may not want everything to scale (like the button outlines and text). So I hacked away at the plugin and figured out a workaround that involves creating a proxy Sprite and altering its width/height instead and then copying the values over to the target (well, it's actually a lot more complicated than that, but that's the general idea). I just uploaded a new version of the TransformAroundPointPlugin (which TransformAroundCenterPlugin extends) which you can get by logging into your Club GreenSock account at https://www.greensock.com/account/. According to my tests, the workaround is doing its job, although it added about 50% more to the plugins file size (not that it's huge now - it was pretty small to begin with). Let me know if it works well for you.

[nouatzi 0 Likes (Newbie)]

Hi everybody,

I'm facing the same problem in Flash AS3, with UI Components from fl.controls :

import fl.controls.Button;

TweenPlugin.activate([TransformAroundCenterPlugin]);

var myButton:Button;

myButton = new Button();
myButton.setSize(100, 50);
myButton.move(200, 200);
myButton.label = "Validate";
myButton.addEventListener(MouseEvent.ROLL_OVER,onOver,false,0,true);
myButton.validateNow();
mainCTR.addChild(myButton);  // mainCTR : it's my container

private function onOver(e:MouseEvent):void {
 myButton.removeEventListener(MouseEvent.ROLL_OVER,onOver);
 myButton.addEventListener(MouseEvent.ROLL_OUT,onOut,false,0,true);
 TweenMax.to(myButton,1,{transformAroundCenter:{scaleX:1.5,scaleY:1.5}});
}

private function onOut(e:MouseEvent):void {
 myButton.removeEventListener(MouseEvent.ROLL_OUT,onOut);
 myButton.addEventListener(MouseEvent.ROLL_OVER,onOver,false,0,true);
 TweenMax.to(myButton,1,{transformAroundCenter:{scaleX:1,scaleY:1}});
}

It's still acting with the original registration point.

I have notice that

trace(myButton.getBounds(myButton))

returns

(x=0, y=0, w=100, h=50)

, so I took a look on my

com\greensock\plugins\TransformAroundCenterPlugin.as

and tried to manually set things with :

bounds.x = target.x;
bounds.y = target.y;

but without success...

Any idea ?

Thanks

[GreenSock 12,333 Likes (Superhero)]

That's another bug in Adobe's stuff. Here's the proof:

 

var myButton:Button = new Button();
myButton.setSize(100, 50);
addChild(myButton);

var mySprite:Sprite = new Sprite();
addChild(mySprite);

var point:Point = new Point(50,25);
trace("mySprite at scale 1: "+mySprite.localToGlobal(point));
mySprite.scaleX = mySprite.scaleY = 2;
trace("mySprite at scale 2: "+mySprite.localToGlobal(point));

trace("myButton at scale 1: "+myButton.localToGlobal(point));
myButton.scaleX = myButton.scaleY = 2;
trace("myButton at scale 2: "+myButton.localToGlobal(point));

 

You'll see that it traces out:

mySprite at scale 1: (x=50, y=25)
mySprite at scale 2: (x=100, y=50)
myButton at scale 1: (x=50, y=25)
myButton at scale 2: (x=50, y=25)

 

Notice that the global x/y values don't change for the Button instance even after you double the scale.

 

To get around this, you could simply wrap your button instance(s) in a Sprite because the Sprite doesn't have the bug in it.

[nouatzi 0 Likes (Newbie)]

Yes, I've tried this, and it's working, I mean it did Transform Around Center. But with the mouse over the component, it keeps animating from my onOver and onOut functions. I know it's a boundary issue due to the transformation, that I've already solved earlier with a Shape button, by using some customized container...

I thought I could use "easily" those UIcomponents from fl.controls with some of your really nice tweening....

Well, knowing that UIcomponents are AS3, I've located the UIcomponents.as on my Flash folder. So do you think it could "easy" to modify some stuff inside it to solve that problem for all my UIcomponents ? And what could I modify ?

[GreenSock 12,333 Likes (Superhero)]

I thought I could use "easily" those UIcomponents from fl.controls with some of your really nice tweening....

Well, knowing that UIcomponents are AS3, I've located the UIcomponents.as on my Flash folder. So do you think it could "easy" to modify some stuff inside it to solve that problem for all my UIcomponents ? And what could I modify ?

No, I don't think it would be an "easy" fix in there. Frankly I'm not very familiar with the guts of those components and I'm not sure exactly what you'd have to change, but I doubt it would be quick or easy. Sorry, I wish I had a simple answer for you