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.

7 Responses to Using Copy Motion to ActionScript 3 with Flex

  1. salim says:
    July 23, 2007 at 10:32 pm

    I am getting 1180 errorType was not found or was not a compile-time constant: Animator

  2. Andrew Spaulding says:
    July 26, 2007 at 8:35 pm

    It’s nice to see a sample of Copy Motion used outside of an FLA. Nice integration with Flex!Cheers.

  3. Chris Charlton says:
    August 28, 2007 at 10:50 am

    This is how we did the Motion XML Previewer over at http://www.motionxml.com – give us feedeback! :)

  4. einam says:
    September 17, 2007 at 5:31 am

    Hi!is there any revealable inside info about the flash-to-illustrator export issue? (the fact that there is no way to move complex paths from flash to ai without destroying vectors/colors) Fixing that would change many lives!thanx

  5. dominic says:
    November 14, 2007 at 1:09 am

    This is great. Maybe i wont have to mess about with those darn flex effect so much now.Big question thow, is there a way to set props for the flash animation from flex? …Like say i make a tween in flash that moves a component along a curvy motion guide path. Could i set the start and end point from flex. maybe even use it in a custom effect and set it as a components moveEffect???That would be stunning!!!

  6. John D says:
    October 30, 2008 at 2:05 pm

    Thank-You Galvan, this is exactly what I was looking for.jdd

  7. roikr says:
    December 24, 2008 at 7:12 am

    thanks man,it really helped me.I also managed to use it with flex component move effect.the idea is to create an fl.motion object using an XML file and to interpolate it within penner easing function.