Kevin Hoyt

Flex has had effects since its initial release. The limitation of these effects is largely that they are all fundamentally linear in nature. You can move something in a straight line from Point A to Point B for example. You can fade a display object in and out, but again only as one continuously incremented/decremented animation. What if you wanted to move something along a curved path? What if you wanted to fade in and out at various levels along the path of that curve? Until Flash CS3, this is something that would have been particularly challenging, but we now have “Export Motion XML”.

You can start in Flash CS3 by building an animation in a series of frames along a single layer. For this example I’ve chosen to start with the Flash CS3 icon. Then I’ve added a motion guide and drawn a fairly consistent, yet quite curvaceous line. I put a couple keyframes across the timeline for a specific duration, and then snapped the icon symbol to either end of the motion guide. Selecting the first keyframe and specifying a motion tween results in a fancy animation. Welcome to Flash 101, I know, but an animation like this has historically been downright difficult to achieve using Flex.

Select the frames involved in the animation and then head to “Commands” menu. Here you’ll find some new options that you’ve never seen before Flash CS3. These new options allow you to copy, export and import the selected animation as XML. What? Huh? What happens is that Flash looks at the animation you’ve built frame-by-frame and then figures out where the symbol is located for each frame. It then builds an XML file that corresponds to those various positions. If there’s additional changes along the way, such as color effects, filters, or even changes in scale, that too will also be translated to XML.

Here’s where the Flex developers start to perk up - XML? Now we’re talking data, and I can do a lot with raw data!

Moving over to Flex then we’ll need to create a project and instantiate an HTTP service call to get the XML that’s just been generated for us by Flash. We’ll also need to add the series of ActionScript classes from the fl.motion.* package over to the Flex project. The main class we’re interested in is fl.motion.Animator, which has a method play() which takes the XML representation of the animation it is to play back, and the display object against which it should play it. Load the XML, and then supply it as an argument to Animator.play() along with whatever object on the display list that you want to move, and you are done. The animation designed in Flash can now playback in a Flex application.

Going back to this notion of raw data is where things get really interesting. You have an XML file that specifies a potentially very complex animation on a frame-by-frame basis. Of course with ActionScript 3 you also have native XML processing and E4X support. This means that you can change the source XML at any time, to whatever you’d like. Maybe you want to reverse the animation - just loop through the “Keyframe” nodes and reverse them! Maybe you want to inject some additional color effects or filters? Simply insert the appropriate nodes into the XML before you play the animation!

You’re also pointing the animation at any display object, which means the target could be an Image, a Canvas, a Button in a Canvas, or even a SWFLoader containing another Flash animation.

There’s no doubt that with Adobe Creative Suite 3, we’re beginning to see a vastly improved designer-developer workflow. The above animation was developed in Flash CS3, but is represented by nothing more than an XML file and a few display objects in Flex. I’ve left the next steps of runtime tweaking of the XML up to you. If you get creative, I’d drop me a message and show me what you’ve got! In the meantime here’s the source for your consideration.

This entry was posted on Wednesday, April 25th, 2007 at 8:35 am and is filed under Flash, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.