Using Copy Motion to ActionScript 3 with Flex

Previously I blogged about using the new Copy Motion to ActionScript 3 feature. Now I I would like to show you how to take that feature and extend it to Flex.

I have included my FFanimaotr flex project that has a working sample of this. You must have Flex and Flash CS3 installed for this to work since we need the Animator class that ships with Flash CS3. Just import the project to Flex and it should work.

Here is the Flex code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="xmlService.send()" layout="absolute" height="492">

<mx:HTTPService url="{ combo.selectedItem + ‘.xml’ }" resultFormat="e4x" id="xmlService"/>

<mx:Script>

<![CDATA[
import fl.motion.Animator;


public var my_animator:Animator = null;

private function animate():void {


if (my_animator) my_animator.rewind();
my_animator = new Animator(XML(xmlService.lastResult),moveThis);
my_animator.play();


}

]]>
</mx:Script>

<mx:Button x="130" y="10" label="Animate" click="animate()" fillColors="[#810713, #810713]"/>
<mx:ComboBox x="10" y="10" id="combo" change="xmlService.send()">
<mx:dataProvider>
<mx:String>blurSwirl</mx:String>
<mx:String>bounce</mx:String>

</mx:dataProvider>
</mx:ComboBox>
<mx:DataGrid x="23" y="88" id="moveThis" width="368" height="238">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

I have enclosed two xml animation files called blurswirl.xml, which is the same example I used in my previous blog, and bounce.xml. You can use your own if you want, just add your animation file to the bin folder in the Flex project and change the name in the Flex code (in Green). Remember that you create animation xml files by selecting an animation on the timeline and then use the "Export Motion XML" command under the command menu.

Ok, so the part I need to point out is that if you want to create your own flex project then the trick is to add the Flash CS3 class path to your Flex project so that it knows where to go get the animator class. Normally the path (in Windows) is C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ActionScript 3.0\Classes, but if you installed Flash CS3 in a different location you would need to adjust the path. On a Mac look for the same folder but starting from your application folder. You add this to your Flex project by going to the Project properties and adding the class path to the "Source Path" tab under "Flex Build Path".

Ok, so how does this work? simple, you just run the same AS3 code that I showed before (in Red). Except this time you tell it to animate a Flex component. In this case I am using the calendar component, but feel free to replace it with any component (SWFloader, VideoDisplay, etc) just make sure to give it an ID of "moveThis".

The only thing I am doing a bit different than what I did in my Flash CS3 example is calling Animator’s rewind function. as in:

if (my_animator) my_animator.rewind();

I am doing this so that when you select a different animation the component you are animating doesn’t continue from where it finished and fly off the page.

My example is actually more complicated than it needs to be. I am using a combo box with two animations you can select from. When one is selected it calls my animate function with in tern loads the XML file and then uses the Animator class to apply the animation to any component that has an ID of "moveThis".  The beauty is that its all at runtime.

Play around with it. See what you can do with it and if you think you have something cool please share.