Archive for June, 2007

Adobe® AIR extension for Flash CS3!

YES! its coming.

I should end my blog there, but since I don’t want to be lynched let me give you a peek at what to expect.

We are planning to release an extension for Flash CS3 that will allow you to author for
Adobe® AIR. We are planning to do a prerelease at the same time as the next public release of the runtime. It will be made available as a download on our Labs site.

No, I don’t have a date.

You will be able to select AIR as the version type under the Publishing settings.

Then you will have a new "AIR – Application Settings" option in the commands menu.

Click to enlarge

This will allow anyone to quickly start authoring for Adobe AIR with Flash CS3. Looking forward to having it out to you soon.

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.