Author Archive: @rich_galvan

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.

Copy Motion to AS3 (ActionScript 3)

One of the new features we have in Flash CS3 is the ability to copy an animation on the timeline to AS3 (ActionScript 3). I am a big fan of this new feature let me show you why.

For example:

the animation that is illustrated above is a typical timeline animation. If you then right click on the timeline you would see the option to copy motion to AS3.

It then asks you to specify and instance name of the symbol to which you would like to apply this code too. Flash CS3 then places code into the clipboard. If you were to paste this code in the actionscript panel you would see:

import fl.motion.Animator;
var box_xml:XML =
<Motion duration="1" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="30" x="52" y="111.5" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="box">
<dimensions>
<geom:Rectangle left="0" top="0" width="92" height="77"/>
</dimensions>
<transformationPoint>
<geom:Point x="0.5" y="0.5"/>
</transformationPoint>
</Source>
</source>

<Keyframe index="0" tweenSnap="true" tweenSync="true">
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
</Motion>;

var box_animator:Animator = new Animator(box_xml, box);
box_animator.play();

Notice that the code in red is the only part that truly is AS3. The blue part is XML describing the animation.

To get this to work, just create a new AS3 document and paste the code on frame 1 of the timeline and drop any symbol on stage and call it’s instance ‘box’. Run the movie and you will see the symbol move across the stage.

Ok,so what’s so cool about this? well, first. It allows me to re-use an animation as many times as I want. It also allows a normal designer/animator to work with a developer that prefers to see everything in code. However, one of best parts is that it allows me to store my animations as external XML files.

If instead of right-clicking on the timeline, I would have gone to the command menu and selected "Export Motion’. I would then be able to save just the XML description to an external file.

ok, so now what. Well, lets say I saved my animation as swirl.xml, if I change my AS3 code a little. Like so:

 

import fl.motion.Animator;

var green_can_xml:XML = new XML();
var green_can_animator:Animator;
var XML_URL:String = "swirl.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);

function xmlLoaded(event:Event):void {
green_can_xml = XML(myLoader.data);
green_can_animator = new Animator(green_can_xml, green_can);
green_can_animator.play()
}

I can now have my flash movie load the animation at runtime and play it. This will allow me to change the behavior of the animation just by replacing an XML file. Cool huh? I’ll let you figure out all the uses fot it.

Oh, and in case you are wondering the same animation can then be applied to a component in Flex. I’ll show how to do that next post.

 

Flash Team at NAB

First, I want to apologize to those of you who wanted to leave comments to my previous posts but were not able too because commenting was not available. Normally I would blame the server or software for the glitch….but nope, it was all me.

Ok then, next topic. The Flash Team will be at NAB! Well, at least the Flash product management team will be there. In case you don’t know much about NAB, it is a wicked show. 100,000 of our best friends come together in Vegas to learn about electronic media. For those attending NAB please stop by and say hello; our booth number is SL3220. We will have a demo station for Flash CS3 Professional and be delivering several presentation in our theater that you might find interesting. I have listed a few of the Flash related topics below.

• Post Production Workflows with Adobe Production
Premium CS3
• What’s New in Adobe Premiere Pro CS3
• What’s New in Adobe After Effects CS3
• Adobe Flash CS3 for Video Professionals
• Audio for Video Professionals with Adobe Soundbooth CS3
• Video Streaming with Flash Media Server

Hope to see you there.

Welcome Flash CS3 Professional

Ok ladies and gentlemen, here it is at last! . It is a pleasure to officially introduce you to our latest release of Flash. FLASH CS3 Professional

 

This release has a lot of great new features and I will be covering all of them in some detail in this blog. But to start out I will point of 5 of the biggest.

  1. Photoshop and Illustrator import – you can now import all of your psd and ai files and not loose any fidelity while doing so.
  2. Support for ActionScript 3.0 – AS got faster, stronger, and better than ever.
  3. New UI - if you have a laptop this is a must have.
  4. Copy motion to AS3 – (one of my favs) this lets you take any animation that is on the timeline and convert it to ActionScript 3.0. You can then apply that animation to any symbol as pure code.
  5. New components - these are all new AS3 components that are much easier to skin. Just double click on the component and you have access to all the skin symbols.

So those are some of the major features, but we also added a few small tweaks and fixes to the tool. There is one in particular that I am really happy about, but instead of just telling you about it, lets see if any of you Flash gurus can figure this one out. We changed something in the documents property window (or something you can access from the documents property window)…can someone tell me what it is?

 

One last thing. Can someone shed some light into who is responsible for www.gettheglass.com  I love this site. Very nice work.

If you were wondering…

If I was going to blog again, then I hope this answers the question. Yes, I know. I really should do it more often, and I will. That’s a promise. I don’t like making excuses but its been a bit busy lately. The team has been hard at work getting our latest version of Flash ready and I’ve been on the road a lot talking to the press and attending shows. Speaking of shows, I was at GDC 2007(Game Developers Conference) in San Francisco a  few week ago. We had a small booth and we were showing Flash and Director. A few times I had the the StarWars papervision demo running on my computer , and it was amazing how many people were shocked when they learned it was all done in Flash and especially when I told them it was all code. PaperVision3D you rock!

If you haven’t seen it already definitely check it out. Also check out the ObstacleCourse game John Grden put together using the same idea. Very Cool.

I have to admit that some of the Papervision3D demos are some of the coolest demos I have seen lately. But please, if you know of any other great Flash sites or examples please share!

The last thing I am going to mention is that flying 6 hours cross country between Newark and SanFran on a 737 with a seat that doesn’t recline should be illegal! I’m done with Continental. nuf said.

Hello and welcome.

I would like to welcome you to this Flash Blog. I am Richard Galvan, the new technical product manager for Flash and I am excited to be able to share with you what Flash is all about as well as provide as place were people can share their thoughts about it. As many of you know, Mike Downey has moved to the Apollo team as Sr. Product Manager, where he will continue to expand the Flash frontiers. Woa, I think that sounded like a Star Trek intro…my bad. What I was getting too, is that I would like to thank Mike for all his hard work with Flash and I hope that Jennifer Taylor (new Group Product Manager for Flash) and I can keep the train rolling.

Let the games begin!