Learning ActionScript 3.0: Chapter 7, Motion
Pages: 1, 2, 3, 4, 5, 6, 7, 8

Available methods include several navigation options, which command the tween to stop, start, and resume playback, jump to the next, previous, first, and last frames of the animation, and play only until a specified point in the tween is reached. Events associated with the tween are fired when the animation is started, stopped, or resumed, when it loops or finishes, and even during the animation each time the screen is updated.

Select the easing class to use via the fl.transitions.easing package. Although specifying an easing class is required, one of the available options is None, so you don't have to apply an easing effect to your tween. The names and descriptions of available easing classes can be found in Table 7-1.

Each class has a minimum of three methods to cover easing in, easing out, and easing both in and out of the tween. All methods for each class support initial and final values of the property being animated, the duration of the easing, and the current time in the animation. Back also supports a value for the degree of overshoot beyond the target at the start and/or end of the animation, and Elastic adds support for the amplitude and period of the sine wave used to calculate the elasticity.

Section 7.5: Timeline Animation Recreations

While this isn't entirely an ActionScript solution, we'd like to cover Flash CS3's new Motion and Animator classes. These classes, and their supporting players, make it possible to replay animations that have been created previously in the timeline. Scripting purists may be more interested in perfecting their ActionScript skills than relying on the timeline to originate animations. However, this capability may be attractive to many Flash CS3 users, even coding curmudgeons, for two reasons.

First, it doesn't ultimately use the timeline but still makes it possible to reproduce complex animfations created there—including animations that might not be that easy to achieve strictly with ActionScript. Second, it offers a new path to improved designer-programmer collaboration. Designers can create timeline animations, and programmers can integrate that work into other projects without relying on the original timeline structure.

The foundation of this process exists in a feature called "Copy Motion as ActionScript 3.0." After creating a timeline tween, you can select the entire tween and then choose the Copy Motion as ActionScript 3.0 menu option from the Edit®Timeline menu. This copies to the clipboard all necessary information to recreate the tween with code. During the copy process, the feature prompts you for the tweened symbol's instance name with a convenient dialog—prepopulated if the instance name already exists.

Once the copy completes, you can paste the results in the Actions panel. All the ActionScript needed is included, and the motion is represented by XML information in the format required by the Motion class. A simple example, tweening a movie clip across the stage over 20 frames, follows:

1  import fl.motion.Animator;
2  var ball_xml:XML = <Motion duration="20" xmlns="fl.motion.*"
   xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
3      <source>
4           <Source frameRate="12" x="50" y="50" scaleX="1" scaleY="1"
            rotation="0" elementType="movie clip" instanceName="ball"
            symbolName="Ball">
5             <dimensions>
6                  <geom:Rectangle left="−10" top="−10" width="20"
                   height="20"/>
7              </dimensions>
8              <transformationPoint>
9                  <geom:Point x="0.5" y="0.5"/>
10              </transformationPoint>
11          </Source>
12      </source>
13
14      <Keyframe index="0">
15          <tweens>
16              <SimpleEase ease="0"/>
17         </tweens>
18     </Keyframe>
19
20      <Keyframe index="19" x="450"/>
21  </Motion>;
22
23  var ball_animator:Animator = new Animator(ball_xml, ball);
24  ball_animator.play();

Looking over the generated XML, you can pick out properties such as duration, frameRate, x and y coordinates, scale, and rotation. Also included are the display object type (movie clip), its instance name, and information about its dimensions, registration point, and transformation point. Finally, data about each keyframe is cited, including in which frame each resides, what kind of easing is used, and any information that has changed from keyframe to keyframe. In this case, only the x coordinate has been tweened, so the second keyframe itemizes only this property.

This excerpt is from Learning ActionScript 3.0. Learning ActionScript 3.0 gives you a solid foundation in the Flash language and demonstrates how you can use it for practical, everyday projects. The book does more than give you a handful of sample scripts, defining how ActionScript and Flash work. It gives you a clear look into essential topics such as logic, event handling, displaying content, migrating legacy projects to ActionScript 3.0, classes, and much more. Written for those new to the language, this book doesn't rely exclusively on prior knowledge of object-oriented programming (OOP). Instead, it helps you expand your skillset by first focusing on clear, concise examples in the timeline, evolving into OOP examples over time-allowing you to choose the programming approach with which you are most comfortable.

Note: The Keyframe property lists frames 1 and 20 as 0 and 19 because it stores the keyframes in an array, and ActionScript arrays are zero-based. For more information about arrays, see Chapter 2.

As you can see, everything you need to reproduce the tween is included in the XML, here stored in the variable ball_xml. The last two lines of this example include the instantiation of the Animator class, passing in the XML and target movie clip instance name. This class is responsible for playing back the animation, which occurs in line 24. To see the feature work, you can remove the tween from the timeline, place a movie clip with the same instance name on the stage, and test your movie.

Note: The properties copied and applied in this process are relative to the existing movie clip, so the x coordinate updates, for example, will start from the existing location of the movie clip.

This workflow is obviously not something you can carry over to runtime. However, you can do better. With the entire tween selected, you can use the Export Motion XML command found in the Commands menu. This saves the Motion XML only, without the ActionScript that accompanies the copy-paste workflow, into an external file. From there, you can build an Animator player all your own.

The following example reproduces a motion guide tween that traces the word "Flash" in script, with a ball movie clip. The original motion guide, which is the path the Animator class will retrace, can be seen in Figure 7-11. The figure shows two copies of the word because you later can use ActionScript to scale the animation, tracing the word at either size. The XML file needed to recreate this tween is quite long, so it cannot be reproduced here. However, the original file, handwriting.fla, is with the book's source code on the companion web site, and the animation has already been exported to handwriting.xml for easy download.

Figure 7-11: The motion guides used to create a tween that is recreated with the Animator class

This example creates a player that controls playback of the original animation in a new file. It requires nothing more than a movie clip to animate, and the Button component, which we'll use to create the controller buttons.

The first 10 lines of the script import the necessary classes, declare the needed variables, and create and position a ball movie clip from the library, but does not yet add it to the display list.

1  import fl.motion.*;
2  import flash.geom.*;
3  import fl.controls.Button;
4
5  var anim:Animator;
6  var isPaused:Boolean;
7  var isScaled:Boolean;
8
9  var ball:Sprite = new Ball();
10  ball.x = ball.y = 80;

The next segment covers the loading, and response thereto, of the external XML file. We'll cover this in greater detail in , but here's the essence of the matter. All URLs are handled consistently, passing through the URLRequest class. This class captures all HTML information, like MIME types, headers, and so on. In this case, we need only the URL file path to pass to the URLLoader class.

The information the URLLoader class loads can be text, raw binary data, or URL-encoded variables. In this case, the XML document is loaded as text. The event listener in line 13 reacts when this information has been completely loaded by calling the xmlLoaded() function.

11  var xml_url:URLRequest = new URLRequest("handwriting.xml");
12  var xml_loader:URLLoader = new URLLoader(xml_url);
13  xml_loader.addEventListener("complete", xmlLoaded, false, 0, true);

The xmlLoaded() function converts the loaded text to XML and instantiates the Animator class, passing both the XML and ball movie clip instance to the class. From this class, the motion object can provide information about the XML data that has been loaded. Because we know that the original tween includes color as well as position, we add line 17 to query the color in the first keyframe of that motion data, and set the initial color of the ball movie clip to that same color. This prevents the movie clip from appearing in its default color and then abruptly switching to the color of the first frame of the animation once it starts.