Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Animating with XML in Flash CS3

Last updated Oct 17, 2003.

Animation is fundamental to Flash. It’s the reason that Flash gained so much popularity in its early days. ActionScript 1 didn’t have any animation support, but ActionScript 2 brought power to developers who wanted to add animation to dynamic content with the Tween object. However, ActionScript 2 had some limitations when creating externally-driven Flash movies through XML. With the introduction of ActionScript 3, animations can be driven by XML structures called Motion XML. In this article, we’ll take a look at how to create animations generated by Motion XML, using the Animator and MotionEvent classes offered in ActionScript 3. The source code for this article can be downloaded here.

The first thing that we need to determine is what we want our animation to do. Let’s create a box that rotates across the screen clockwise with a slight ease. The length of the animation will be 10 frames, and our movie will be 12 fps. To make this happen, we’ll define an XML file, using Motion XML to explain how this animation is going to take place (see Listing 1).

Listing 1 Defining a Motion XML file.

<Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">

    <source>
       <Source frameRate="12" x="0" y="0" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="Symbol 1">

           <dimensions>
              <geom:Rectangle left="0" top="0" width="50" height="50"/>

           </dimensions>
           <transformationPoint>
              <geom:Point x="0" y="0"/>
           </transformationPoint>

       </Source>
    </source>

    <Keyframe index="0" rotateDirection="cw" rotateTimes="1">

       <tweens>
           <SimpleEase ease="0.8"/>
       </tweens>
    </Keyframe>

    <Keyframe index="5" x="200" y="200"/>

</Motion>

Once we’ve created the Motion XML structure, we can start to work in Flash. The first thing we’ll do in Flash is create a MovieClip to animate. Let’s create a simple box as shown in Figure 1.

Next, we’ll convert the box to a MovieClip and assign a class—let’s call it Box—and add it to a package called shape (see Figure 2).

Because the box is a MovieClip, we’ll extend the MovieClip class. The Box class won’t need any particular functionality; it will simply define the box so that we can create instances of it with ActionScript (see Listing 2).

Listing 2 Creating a simple Box class.

package com.krishadlock.shape
{
    import flash.display.MovieClip;

    public class Box extends MovieClip
    {
       public function Box():void
       {
       }
    }
}

Once we have a Box class associated with the box, we’ll create a Document class to tie the movie together. The Document class will be connected to the movie via the Properties window (see Figure 3).

The Document class will need to import the necessary packages and classes. We’ll be using the Animator and MotionEvent classes to animate the box, the MovieClip class as a superclass, and the Event, URLLoader, and URLRequest classes to load the Motion XML.

In the constructor, load the motion.xml file using URLLoader and URLRequest instances. When the XML is loaded, an event called onAnimationLoaded will be fired. The onAnimationLoaded method will retrieve the XML and assign it to an XML property called animationXML. In order to assign the animation to a box, we’ll add a Box instance to the document through the addChild method and create an Animator instance based on the Motion XML and box. The play method will start the animation and allow us to fire motion events—in this case, we’re firing a Motion_END event. Listing 3 shows the code.

Listing 3 Defining the Document class.

package com.krishadlock
{
    import fl.motion.Animator;
    import fl.motion.MotionEvent;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    import com.krishadlock.shape.Box;

    public class Document extends MovieClip
    {
       private var animator:Animator;

       public function Document():void
       {
           var animationLoader:URLLoader = new URLLoader();
           animationLoader.addEventListener(Event.COMPLETE, onAnimationLoaded);
           animationLoader.load(new URLRequest("motion.xml"));
       }

       private function onAnimationLoaded(e:Event):void
       {
           var loader:URLLoader = URLLoader(e.target);
           var animationXML:XML = new XML(loader.data);

           var box:Box = Box(addChild(new Box()));
           animator = new Animator(animationXML, box);
           animator.play();
           animator.addEventListener(MotionEvent.MOTION_END, onMotionComplete);
       }

       private function onMotionComplete(e:MotionEvent):void
       {
           trace("onMotionComplete");
       }
    }
}

This may seem like a lot of work to create a silly rotating box, but this functionality has major benefits when creating dynamic Flash movies. Externally generated animations can be used for building templates, Motion XML can be reused for other movies, and ultimately you’ll save lots of time you’d otherwise spend writing redundant code. To find more information on animating with XML, visit the Flash help files and search Motion XML. You’ll find details on the tags and what each one defines.