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.

 

12 Responses to Copy Motion to AS3 (ActionScript 3)

  1. Steve Werner says:

    Suggestion: Don’t use acronyms without defining them. I’m an Adobe consultant to teaches about Adobe products (but not Flash). It took me several minutes to figure out that “AS3” referred to ActionScript 3. Most people who read your blog aren’t going to realize that!

  2. Richard Galvan says:

    Steve is absolutely right, so I corrected the post. Thanks Steve.

  3. Erwin Verdonk says:

    @Steve: I’m no Adobe Consultant to teach about Adobe products, however I think you should suggest the same thing to the person(s) who created the acronym CS3 ;-).@Richard: Good explanation! This is very nice stuff indeed.

  4. Anson says:

    steve werner if you work for adobe you should be ashamed if you didnt know what as3 was.if this is a blog on flash, most people reading it should know what as3 is.

  5. Katie says:

    I knew..loloololBut then I am never hardly out of Adobe looking for news of their new software.But did you have to make AS3.0 so complicated for people?I have to admit that I don’t ‘do Flash’ but see some forums having difficulties.For instance some things I believe have changed:The way events work is completely different, Stage is no longer available in the normal way, ._x ._y ._alpha etc are now .x .y and .alpha, and so on.You no longer use attachMovie() or removeMovieClip(), you use addChild() and removeChild() etc.So it seems to a novice (me for example only ) that we have to learn all over again.Thanks for your time Galvan!

  6. Katie says:

    To Stevie on acronyms,Strange as it may seem we do exactly that on forums thats why I knew what Richard meant by AS3 although I would have put the 3.0 along side of it for version sake.To Richard:I’ll show how to do that next post.When please?

  7. P says:

    Woaw…you didn’t know what AS3 meant and you are visiting a Flash blog? Maybe you guys are in the wrong business. Seriously, that kinds of acronym should be an afterthought. Honestly, Steve, I hope you don’t charge much for consulting because THIS IS WHAT YOU GET PAID TO KNOW! Man that’s sad.

  8. P says:

    Honestly…”Most people who read your blog aren’t going to realize [what AS3 is]”. Are you serious? And you’re an Adobe consultant?!? For shame! How can you possibly call yourself that?

  9. marozet says:

    I’ve got a problem with “scaleX” and “scaleY” in motion xml.It produces random results when aplied through animator in flash. It never ends the same size. However “alphaMultiplier” works ok.Even when I do this just by “Copy motion as AS3.0” the end size of a movieclip is always different. Does anybody know a solution to this?

  10. Peter says:

    Funny…. The man posts an incredible article about a new feature in Flash, and all you folks see is that he typed AS3! Unreal!

  11. Stephen says:

    Why was I not informed of this earlier?! This is amazing!!

  12. Venesha says:

    Haha……….Same here!.
    This is really amazing !