Flash Animation Learning Guide (Part II)

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, color, and opacity of shapes.

Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, and want them to morph together, all the shapes must be on the same layer. Otherwise, for some effects, you should shape tween each shape on separate layers if you do not want them to affect each other. Each rectangle‹the curtain effect in the background and the rectangle on top ­ tweens on its own separate layer.

To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart (Modify > Break Apart). To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

Note: To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape. For information, see the following section, Using Shape Hints with Shape Tweens.

To tween a shape:

  1. Create a new file and call it shapetween.fla.
  2. Select Frame 1 of Layer 1. This is where the animation will start.
  3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. For best results when you're starting out, the frame should contain only one drawing (such as a single oval shape).
  4. Select Frame 10 of Layer 1 and create a second keyframe (F6).
  5. Select the artwork on the Stage at Frame 10 and do one of the following:
  1. Select a frame in Timeline between Frame 1 and Frame 10.
  2. In the Property inspector (Window > Properties > Properties), select Shape from the Tween pop-up menu.
  3. Select an option for Blend:
Note: Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash reverts to distributive shape tweening.

Using Shape Hints with Shape Tweens
To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond to starting and ending shapes. For example, if you are tweening the letter M into the letter N, you can use a shape hint to mark corner of the letter's shape. Then, instead of the letters becoming a jumble of lines while the shape change takes place, each letter remains recognizable and changes separately during the shift.

To use shape hints:

  1. Create a shape tween (see the previous section, Creating Shape Tweens).
  2. Select Frame 1 of the layer with the animation on the Timeline.
  3. Select Modify > Shape > Add Shape Hint.
  4. Move the shape hint to an edge or corner that you want to mark.
  5. Select the next keyframe in the tweening sequence.
  6. Move the shape hint to the edge or corner in the ending shape that should correspond to the first location you marked.
Repeat this process to add additional shape hints. New hints appear with the letters that follow (b, c, and so on).

The SWF files animate the letter M into the letter N. The top SWF file does not use shape hints to morph the two letters, while the bottom SWF file uses shape hints to improve the morphing. Refer to the sample file shape_hints.fla, which is part of the animation_samples.zip archive that accompanies this article.

Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape. You can use up to 26 shape hints. Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when within a fill area or outside the shape (Flash ignores red shape hints).

For best results when tweening shapes, follow these guidelines:

Creating Frame-by-Frame Animations
A frame-by-frame animation changes the contents of the Stage in every frame and is best suited to a complex animation in which an image changes in every frame instead of simply moving across the Stage. This type of animation increases the file size more rapidly than tweened animation because Flash stores the values for each keyframe.

To create a frame-by-frame animation, you define each frame as a keyframe and create a different (typically modified) image for each frame. Each new keyframe on a layer typically contains the same contents as the keyframe preceding it because the contents of a frame are copied to the next keyframe when you select a frame and press F6. By selecting a frame and pressing F6, you can modify each new keyframe in the animation incrementally. The bee's wing moves only slightly so that a frame-by-frame animation was used to move the wing very slightly on sequential frames.

Often, you use the onion skin feature to view incremental changes between each keyframe. A motion tween has been applied to the lemur's arm and head. The onion skin tool enables you to view multiple frames of the animation at once.

To turn on onion skinning, click the Onion Skin or Onion Skin Outlines button near the bottom of the Timeline. Drag the markers above the Timeline to view multiple frames at once. The onion skin outlines are enabled for an animation on the Stage.

To create a frame-by-frame animation:

  1. Create a new file and call it framebyframe.fla.
  2. Select Frame 1 of Layer 1. This is where the animation will start.
  3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. You can also paste graphics from the Clipboard or import a file (such as an Adobe Illustrator illustration).
  4. Select the next frame on Layer 1 and create a second keyframe (F6). The contents of Frame 2 are the same as Frame 1 at this time.
  5. Alter the contents of this frame on the Stage to develop the next increment of the animation. You might select the graphic and move it a couple pixels to the right, add some new lines, or bend a line on a shape.
  6. To complete your frame-by-frame animation sequence, repeat Steps 4 and 5 until you've built the motion you want.
  7. To test the animation sequence, select Control > Play or Control > Test Movie.
Editing Your Animations
In Flash 8 you can use various tools to edit your animations, such as commands to insert frames, modify keyframes, onion-skinning tools, and the ability to move your animations around timelines.

After you create a frame or a keyframe, you can move it elsewhere in the active layer or to another layer, remove it, and make other changes. Only keyframes are editable. You can view tweened frames, but you can't edit them directly. To edit tweened frames, you change one of the defining keyframes or insert a new keyframe between the beginning and ending keyframes. You can drag items from the Library panel onto the Stage to add the items to the current keyframe.

To display and edit more than one frame at a time, use onion skinning, covered next.

Inserting and Modifying Frames
To insert frames in the Timeline, do one of the following:

To delete or modify a frame or keyframe, do one of the following: Using Onion Skinning
Normally, Flash displays one frame of the animation sequence at a time on the Stage. To help you position and edit a frame-by-frame animation, you can view two or more frames on the Stage at once. The frame under the playhead appears in full color, while surrounding frames are dimmed, making it appear as if each frame were drawn on a sheet of translucent onion-skin paper and the sheets were stacked on top of each other. Dimmed frames cannot be edited.

To simultaneously see several frames of an animation on the Stage, click the Onion Skin button. All frames between the Start Onion Skin and End Onion Skin markers (in the Timeline header) are superimposed as one frame in the Document window.

To control onion skinning display, do any of the following:

Note: Locked layers (those with a padlock icon) aren't displayed when onion skinning is turned on. To avoid a multitude of confusing images, you can lock or hide the layers you don't want onion skinned.

To change the display of onion skin markers, click the Modify Onion Markers button and select an item from the menu:

Moving an Entire Animation
If you need to move an entire animation on the Stage, you must move the graphics in all frames and layers at once to avoid realigning everything.

To move the entire animation to another location on the Stage:

  1. Unlock all layers. To move everything on one or more layers but nothing on other layers, lock or hide all the layers you don't want to move.
  2. Click the Edit Multiple Frames button in the Timeline.
  3. Drag the onion skin markers so that they enclose all the frames you want to select, or click Modify Onion Markers and select Onion All.
  4. Select Edit > Select All.
  5. Drag the entire animation to the new location on the Stage.
Using Timeline Effects
Flash includes prebuilt Timeline effects that enable you to create complex animations with a minimal number of steps. You can apply Timeline effects to the following objects: Note: Timeline effects share some of the same names as filter effects; however, they are completely different features. Timeline effects are automated vector animations you apply to the previously mentioned objects. Filter effects are static effects you apply to objects and animate in various ways by applying code or motion tweens.

Adding a Timeline Effect
When you add a Timeline effect to an object, Flash creates a layer and transfers the object to the new layer. The object is placed inside the effect graphic, and all tweens and transformations required for the effect reside in the graphic on the newly created layer. The new layer automatically receives the same name as the effect, appended with a number that represents the order in which the effect is applied, out of all effects in your document.

When you add a Timeline effect, a folder with the effect's name is added to the Library, containing elements used in creating the effect.

To add an effect to an object:

1  Do one of the following to add a Timeline effect:

2  Effects available for the type of object you've selected appear as active menu choices.

3  In the dialog box that appears for the effect, view the effect preview based on default settings. Modify the default settings as desired, and then click Update Preview to view the effect with the new settings.

4  When the Timeline effect appears as desired in the preview window, click OK.

Editing a Timeline Effect
You edit Timeline effects using the Effect Settings dialog box:

1  Select the object associated with the effect on the Stage.

2  To open the Effect Settings dialog box, do one of the following:

3  In the Effect Settings dialog box, edit the settings you want to edit, and click OK to apply your settings.

Deleting a Timeline Effect
You use the context menu to delete Timeline effects. Right-click (Windows) or Control-click (Macintosh) the object on the Stage that has the Timeline effect you want to remove, and select Timeline Effects > Remove Effect from the context menu.

About Scripting Animation
You can use ActionScript 2.0 to add animation to your Flash applications instead of using motion or shape tweens on a timeline. The following sections show you how to use code to animate instances, such as changing the transparency and appearance of the instance, and moving the instance around the Stage.

For information on using the Tween and TransitionManager classes to further automate code-based animations, see the following section, Using the Tween and TransitionManager Classes. These classes help you add advanced easing equations and transition animations to movie clip instances in your application. Many of these effects are difficult to recreate using ActionScript without these prebuilt classes because the code involves writing complex mathematical equations to achieve the effect.

The animation uses code to tween the bee horizontally across the Stage. Notice the easing that has been applied to the motion as well. This animation uses very few lines of code to achieve this effect.

Note: Issues regarding frame rate discussed in the earlier section, About Frame Rate and Animation, also apply to scripted animation.

Fading a Movie Clip
When you work with movie clips on the Stage, you might want to fade the movie clip in or out instead of toggling its _visible property. The following examples, taken from the Flash documentation, show you a variety of simple ways to use ActionScript to create animation.

The following procedure demonstrates how to use an onEnterFrame event handler to animate a movie clip. To fade a movie clip by using code:

  1. Create a new Flash document called fade1.fla.
  2. Draw some graphics on the Stage using the drawing tools, or import an image to the Stage (File > Import > Import to Stage).
  3. Select the content on the Stage and select Modify > Convert to Symbol.
  4. Select the Movie Clip option and click OK to create the symbol.
  5. Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.
  6. Select Frame 1 of the Timeline and add the following code to the Actions panel: 

    img1_mc.onEnterFrame = function() {
       img1_mc._alpha -= 5;
       if (img1_mc._alpha <= 0) {
          mg1_mc._visible = false;
          delete img1_mc.onEnterFrame;
       }
    };
    This code uses an onEnterFrame event handler, which is invoked repeatedly at the frame rate of the SWF file. The number of times per second that the event handler is called depends on the frame rate at which the Flash document is set. If the frame rate is 12 fps, the onEnterFrame event handler is invoked 12 times per second. Likewise, if the Flash document's frame rate is 30 fps, the event handler is invoked 30 times per second.
  7. Select Control > Test Movie to test the document. The movie clip you added to the Stage slowly fades out.
You can modify the _alpha property by using the setInterval() function instead of an onEnterFrame event handler, as the next procedure shows. To fade an object by using the setInterval() function:
  1. Create a new Flash document called fade2.fla.
  2. Draw some graphics on the Stage, or import an image to the Stage (File > Import > Import to Stage).
  3. Select the content on the Stage and select Modify > Convert to Symbol.
  4. Select the Movie Clip option and click OK to create the symbol.
  5. Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.
  6. Select Frame 1 of the Timeline and add the following code to the Actions panel: 

    var alpha_interval:Number = setInterval(fadeImage, 50, img1_mc);
    function fadeImage(target_mc:MovieClip):Void {
       target_mc._alpha -= 5;
       if (target_mc._alpha <= 0) {
          target_mc._visible = false;
          clearInterval(alpha_interval);
       }
    }
    The setInterval() function behaves slightly differently than the onEnterFrame event handler because the setInterval() function tells Flash precisely how frequently the code should call a particular function. In this code example, the user-defined fadeImage() function is called every 50 milliseconds (20 times per second). The fadeImage() function decrements the value of the current movie clip's _alpha property. When the _alpha value is equal to or less than 0, the interval is cleared and the fadeImage() function stops executing.
  7. Select Control > Test Movie to test the document. The movie clip you added to the Stage slowly fades out.
To move an instance on the Stage by using code:
  1. Create a new Flash document called moveClip.fla.
  2. Change the frame rate of the document to 24 fps in the Property inspector. The animation is much smoother if you use a higher frame rate such as 24 fps.
  3. Select Frame 1 of the Timeline and add the following code to the Actions panel: 

       // Create a movie clip instance.
    this.createEmptyMovieClip("img1_mc", 10);
    var mcl_obj:Object = new Object();
    mcl_obj.onLoadInit = function (target_mc:MovieClip):Void {
       target_mc._x = Stage.width;
       target_mc.onEnterFrame = function() {
          target_mc._x -= 3;  // decrease current _x position by 3 pixels
          if (target_mc._x <= 0) {
             target_mc._x = 0;
             delete target_mc.onEnterFrame;
          }
       };
    };
    var img_mcl:MovieClipLoader = new MovieClipLoader();
    img_mcl.addListener(mcl_obj);
       // Load an image into the movie clip
    img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
    img1_mc);
    This code example loads an external image from a remote web server and, when the image is fully loaded, animates it horizontally across the Stage. Instead of using an onEnterFrame event handler, you could use the setInterval() function to animate the image.
  4. Select Control > Test Movie to test the document. The image loads and then animates from the right side of the Stage to the upper-left corner of the Stage.

Using the Tween and TransitionManager Classes
When you install Flash Basic 8 or Flash Professional 8, you also install two powerful classes: the Tween and TransitionManager classes. This section describes how to use these classes with movie clips and Macromedia V2 components (included with Flash MX 2004 and Flash 8) to add animation easily to your SWF files.

If you create a slide presentation or form application with Flash Professional 8 (ActionScript 2.0 only), you can select behaviors that add different kinds of transitions between slides, which is similar to when you create a PowerPoint presentation. You add this functionality into a screen application by using the Tween and TransitionManager classes, which generate ActionScript that animates the screens depending on the behavior you choose.

You can also use the Tween and TransitionManager classes outside of a screen-based document in either Flash Basic 8 or Flash Professional 8. For example, you can use the classes with the component set of version 2 of the Macromedia Component Architecture, or with movie clips. If you want to change the way a ComboBox component animates, you can use the TransitionManager class to add some easing when the menu opens. You can also use the Tween and TransitionManager classes, instead of creating motion tweens on the Timeline or writing custom code, to create your own animated menu system.

Note: The Tween and TransitionManager classes are available only in ActionScript 2.0, but these classes are available in both Flash Basic 8 and Flash Professional 8.

Tween Class
The Tween class enables you to use ActionScript to move, resize, and fade movie clips easily on the Stage by specifying a property of the target movie clip to be tween-animated over a number of frames or seconds. The Tween class also enables you to specify a variety of easing methods. Easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. For example, the options on a drop-down list component you create might gradually increase their speed near the beginning of an animation as the options appear, but slow down before the options come to a full stop at the end of the animation as the list is extended. Flash provides many easing methods that contain equations for this acceleration and deceleration, which change the easing animation accordingly.

The Tween class also invokes event handlers so your code may respond when an animation starts, stops, or resumes or increments its tweened property value. For example, you can start a second tweened animation when the first tween invokes its Tween.onMotionStopped event handler, indicating that the first tween has stopped.

TransitionManager Class
The TransitionManager class and the effect-defining transition-based classes enable you to apply impressive transition animation effects quickly to slides and movie clips.

As its name implies, the TransitionManager class manages transitions by implementing animation events. It enables you to apply one of 10 animation effects to movie clips. The transition effects are defined in a set of transition classes that all extend the base class mx.transitions.Transition.

Combining Animation, Filters, and the Tween Class
You can use ActionScript, such as the Tween class, to animate filters at runtime, which enables you to apply interesting, animated effects to your Flash applications. In the following example, you see how to combine the Blur filter with the Tween class to create an animated blur that modifies the Blur filter between a value of 0 and 10 at runtime.

To animate blurs using the Tween class:

  1. Create a new Flash document and save it as animatedfilter.fla.
  2. Add the following ActionScript to Frame 1 of the Timeline: 

    import flash.filters.BlurFilter;
    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    this.createEmptyMovieClip("holder_mc", 10);
    holder_mc.createEmptyMovieClip("img_mc", 20);

    var mclListener:Object = new Object();
    mclListener.onLoadInit = function(target_mc:MovieClip) {
       target_mc._x = (Stage.width - target_mc._width) / 2;
       target_mc._y = (Stage.height - target_mc._height) / 2;
       var myTween:Tween = new Tween(target_mc, "blur", 
       Strong.easeInOut, 0, 20, 3, true);
       myTween.onMotionChanged = function() {
          target_mc._parent.filters = 
    	  [new BlurFilter(target_mc.blur, target_mc.blur, 1)];
       };
       myTween.onMotionFinished = function() {
          myTween.yoyo();
       }
    };
    var my_mcl:MovieClipLoader = new MovieClipLoader();
    my_mcl.addListener(mclListener);
     my_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
    holder_mc.img_mc);
    The preceding code is separated into three sections. The first section imports the required classes and packages. The second section creates a nested movie clip that is used to load an image and apply filters to the holder movie clip. The final section creates a new MovieClipLoader instance and a listener for the movie clip loader.

    The listener object defines a single event handler function, onLoadInit, which is started once the image successfully loads and is available on the Stage. First the image is repositioned to the center of the Stage and then a new Tween object is created that animates the movie clip and applies a Blur filter of 0 and 10.

  3. Select Control > Test Movie to test the Flash document.
Combining Animation and the Drawing API
You can combine the Drawing API with the Tween and TransitionManager classes to create some excellent animated results, and you only have to write a small amount of ActionScript. For more information on the Tween and TransitionManager classes, see the previous section, Using the Tween and TransitionManager Classes.

The following procedure loads a JPEG image and dynamically masks the image so you can reveal the image slowly after it loads by tweening the image's mask.

To animate dynamic masks:

  1. Create a new Flash document and save it as dynmask.fla.
  2. Add the following ActionScript to Frame 1 of the Timeline: 

    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    var mclListener:Object = new Object();
    mclListener.onLoadInit = function(target_mc:MovieClip) {
       target_mc._visible = false;
       // Center the image on the Stage.
       target_mc._x = (Stage.width - target_mc._width) / 2;
       target_mc._y = (Stage.height - target_mc._height) / 2;
       var maskClip:MovieClip = target_mc.createEmptyMovieClip("mask_mc", 20);
       with (maskClip) {
          // Draw a mask that is the same size as the loaded image.
          beginFill(0xFF00FF, 100);
          moveTo(0, 0);
          lineTo(target_mc._width, 0);
          lineTo(target_mc._width, target_mc._height);
          lineTo(0, target_mc._height);
          lineTo(0, 0);
          endFill();
       }
       target_mc.setMask(maskClip);
       target_mc._visible = true;
       var mask_tween:Object = new Tween
       (maskClip, "_yscale", Strong.easeOut, 0, 100, 2, true); };
       this.createEmptyMovieClip("img_mc", 10);
    var img_mcl:MovieClipLoader = new MovieClipLoader();
    img_mcl.addListener(mclListener);
     img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
    img_mc);
    This code example imports the Tween class and each of the classes in the easing package. Next it creates an object that acts as the listener object for a MovieClipLoader instance that's created in a later section of the code. The listener object defines a single event listener, onLoadInit, which centers the dynamically loaded JPEG image on the Stage. After the code repositions the image, a new movie clip instance is created within the target_mc movie clip (which contains the dynamically loaded JPEG image). The Drawing API code draws a rectangle with the same dimensions as the JPEG image within this new movie clip. The new movie clip masks the JPEG image by calling the MovieClip.setMask() method. After the mask is drawn and set up, the mask uses the Tween class to animate, which causes the image to slowly reveal itself.
  3. Save the Flash document and select Control > Test Movie to test the SWF file.
Note: To animate _alpha in the previous example instead of _yscale, tween the target_mc movie clip directly instead of the mask movie clip.

You can use alpha masks if you apply runtime bitmap caching. See an sample FLA file demonstrate this feature on the Flash Samples page (http://macromedia.com/support/documentation/en/flash/fl8/samples.html#alpha_mask ).

Instructional Media Development (IMD)
Macromedia Documentation
Editor: Jen deHaan
www.flash8forums.com

Reviewer: Chris Georgenes
www.mudbubble.com

© 2008 SYS-CON Media