Thursday, August 20, 2009

Video: Transform Effects in Flex 4

Flex effects: a transforming experience......

Transform Effects in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show covers the new "transform effects" in Flex 4, which allow you to move, rotate, and scale Flex objects (components and graphics objects). Similar effects (Move and Rotate) exist in Flex 3 already, but these effects were completely overhauled in Flex 4 to make it easier to get them to do the right thing.

One of the problems with the previous implementations of Move and Rotate is that they would sometimes clobber each others' results. If you think about it, both effects are affecting the (x,y) location of an object, so if the effects are giving conflicting advice, you may not get what you really wanted. For example, a Rotate effect in Flex 3 would rotate around the center of the object by default, meaning that the (x,y) location of the object would change as it rotated around that center point. Meanwhile, a Move effect on that same object would be giving conflicting advice on how to move that (x,y) point. The results tended to be unpredictable at best.

In Flex 4, we've combined Rotate and Move, along with the new Scale effect (essentially a replacement for the old Zoom effect). Now, instead of separate effects individually setting overlapping properties on the target object, they all combine internally into one single "transform effect" instance and combine their operations into a single transform operation that sets the location, rotation, and scale of the object.

And of course, the effects also benefit, like the other Flex 4 effects, from the ability of the Animate effect to target arbitrary target objects (useful in the world of Flex 4, where we may have graphical objects in our application instead of just UIComponents).

Here's the video:

Here is the demo application:

And here is the source code.

Finally, here's where you can find the CodeDependent videos on iTunes.

My favorite part of the video: I got to use the words "junta" and "cahoots" - how often does that opportunity present itself?

Enjoy.

3 comments:

Unknown said...

Great Tutorial - as usual :-). For a rotation how can I define a registration point. In flex 3 as I try to rotate a button - it picks the default registration point which is top left corner but I want to rotate the button at the center of the button. Now one more thing - as a new child is added in a container I want a smooth transition. As an example I am using a vbox a container and as the program runs I add children to it. I am using addchildren to add the children and as a child it added it is just popped on the top of the vbox. I do not want it that way. How can I make it smooth so that the child slides in from the top and takes its place on the top of the vbox

Chet Haase said...

@Viv: The transform effects have 2 ways to specify a transform point. Note that this is not the same as the registration point (because it doesn't change that point), but works the same during the effect (the operation will happen around the specified point during the effect itself).
1) autoCenterTransform: this flag specifies whether the transform should happen around the 2D 'center' (width/2,height/2) of the object.
2) transformX/Y/Z: these properties define a hard-coded point to transform around. This is closest to what you want for a registration point. These only kick in if autoCenterTransform is false (which it is by default).

As far as the effect you want to achieve, there are various ways to go about this. For example, you could do a Resize effect on that item to expand it's height after it is added. Might make a good future video episode...

Chet.

Unknown said...

Hi Chet,

Can you also use the two methods you have described to set the axis of rotation for transformations that do not occur within an effect? For example: if I want to set the rotationY property on UIComponent to rotate around the center of the parent container, rather than the left hand side of the parent container.