If you haven’t played with the Animate class in Flex 4 yet then be prepared. It’s fantastic. It’s just like the Flex 3 Animation would have been if it had been done right. Yeah, Flex 3 was sort of tossed together and that states crap they fed us was, well, inedible. But not any more. The difference is like the Original star ship Enterprise compared to the Rebooted Enterprise. Remember how the original Enterprise never looked right for any angle and didn’t move at all? But the Rebooted Enterprise can come out of warp in the atmosphere of Titan and majestically lift out of the cloud cover like it ain’t no thing at all. That’s the difference between Flex 3 to Flex 4 animations. Except we didn’t have to wait 40 damn years for them to get it right.

I present to you here a simple little explorer to play around with animating some text. The GRAY text is where the animation will start from and the BLACK text is where it will come to a stop. You can use the sliders to move the two <Labels> to the spots you want them and then engage.

Setting up the animations couldn’t be easier. Below is the basic form that I follow for all the properties I want to animate:

<s:Animate
    id="ani"
    target="animatedLabel"
    duration="1000">
    <s:SimpleMotionPath
       property="x"
       valueFrom="0" valueTo="250" />
</s:Animate>

Check out the source code. Couldn’t be easier . . . well I guess it could be easier if you could just tell your computer to animate a property for you just like the crew of the Enterprise can tell the ships computer to move the ship. But that’s probably a few versions away.

I’m just getting warmed up on Flex 4. Much more to come in the near future.