transformAroundCenter doesn't work on a Flex Image container

[Eris419]

I can't seem to get transformAroundCenter to work on a Flex Image container.

 

Here's the Greensock code:

TweenMax.to(newsImage, .25, 
				new TweenMaxVars().transformAroundCenter({
					scale:newScale
				})
			);

 

Here's the Flex code:

 

Here's the plugin activation code:

TweenPlugin.activate([DropShadowFilterPlugin, TransformAroundCenterPlugin]);

 

I'm building an app to let a user view a larger image inside a mask clipped box. It's just like those product image viewers on e-commerce sites. The Image container is user-draggable/repositionable. I'm trying to build zoom in/out buttons so the user can zoom in on the image. However, when TransformAroundCenter tweens the image, it moves the image from whatever position it was on the screen to 0,0 and then applies a scale tween to it. What I want it to do is scale from the center of the image.

 

I've been wracking my brain on this for the past 3-4hrs. Anyone have any suggestions?

[Eris419]

I found out that the parent container (newsImageBox) is what's messing it up. I was using a Box container instead of a Canvas container. The Box container automatically aligns its children.

 

One thing I have a question about though, where do you add the ease type so it follows the proper format for transformAroundCenter tweens?

 

Another minor annoyance is that the animation isn't very smooth. IE, it appears to be tween the object to the center and scaling it but the combination of both animations appears "step like" or "jittery" instead of smooth. Any ideas on how to optimize it?

[GreenSock]

I found out that the parent container (newsImageBox) is what's messing it up. I was using a Box container instead of a Canvas container. The Box container automatically aligns its children.

Yep, that makes sense. Sounds like Flex was trying to be helpful but it was screwing things up

 

One thing I have a question about though, where do you add the ease type so it follows the proper format for transformAroundCenter tweens?

Since you're using the TweenMaxVars object, you'd simply add it in the chain, like this:

TweenMax.to(newsImage, .25,
              new TweenMaxVars().transformAroundCenter({scale:newScale}).ease(Strong.easeOut)
           );

 

 

Another minor annoyance is that the animation isn't very smooth. IE, it appears to be tween the object to the center and scaling it but the combination of both animations appears "step like" or "jittery" instead of smooth. Any ideas on how to optimize it?

Flex is notoriously sluggish and bloated - that has nothing to do with the tweening engine. Make sure your frame rate is high enough (I'd recommend at least 30fps, maybe even 60fps). Optimization is a huge topic in and of itself, and there are TONS of techniques. Hopefully just adjusting the frame rate in your project will solve things. Oh, and keep in mind that if any objects have filters applied, Flash forces their cacheAsBitmap property to true which will only allow them to render on whole pixels. On slow tweens, that can cause things to look jerky even though [once again] that has nothing to do with the tweening engine. To fix that, either don't use filters or try using BlitMask/FlexBlitMask: http://www.greensock.com/blitmask/

 

Happy tweening.