Animator: XML Motion

Kind of a Holy-Grail for Flash Developers is to be able to turn a timeline animation into code and reuse the code on other graphic elements. Flash CS3 has taken a nice first step with the Animator class (fl.motion.Animator). Animator is used to tween an object via xml. The xml can be written from scratch (not so much fun) or generated from a timeline tween (much fun!!) via the Comands (menu) –> copy motion as xml.

Then you just reference the xml and the object you wish to tween in Animator’s constructor. In the demo fla I pasted the xml into the frame code var cbox_xml for simplicity, (normally we load xml externally and never put code blocks in frames).


import fl.motion.Animator
var abox_animator:Animator = new Animator(cbox_xml, abox);
abox_animator.play()


You can tween multiple properties and give each one a custom easing equation through the tween edit menu:

1. make a tween
2. click on one of the tween frames (not a key frame)
3. click edit in the Properties Panel
4. choose the property you want to make a custom ease for (position, rotation, scale, color, filters)
5. click on the graph to make keyframes and pull the line to make the slope you want

This could be useful if you need to apply the same tween to a variety of objects. We currently would do the same thing by making a timeline with a holder_mc and then attach a bitmap to the holder_mc. One thing we can do with XML motion that we could not do with the attach bitmap to tween method is change the tween on the fly. Using Flash’s E4X api for xml we can change the xml, creating dynamic variations for the tween.

My biggest disappointment was that while you can include the Colortransform filter in the XML; Colortransform data is not included when the xml is generated from the timeline. This is because the CS3 “ColorAdjust” filter gives you the options of (color, brightness, saturation, and hue) and then turns that into a ColorTransform call behind the scenes. You can use the old (flash7-8) color adjust properties ( brightness, tint, alpha, advanced). This seems like a step back to me, but it works.

download the demo fla and change the XML values or change the timeline tween and copy the xml motion from the Commands menu to make a new motion XML.

links
demo fla
Motion XML Elements
Animator class

-d