Reusing and Modifying Symbol Instances

Cleaning up the Main Timeline is one good reason to move animation onto symbol timelines. An even better reason is to make it easier to reuse and modify instances of the animated symbols once you have them stored in your Flash Library.

On the CD-ROM 

To follow this example, you can start with the tweensModify_start.fla, or you can open the tweensModify_final.fla file from the Modify subfolder in the ch11 folder on the CD-ROM to see the final result of adding and modifying Movie Clip symbol instances.

In the tweensModify_start.fla example file, we have placed multiple instances of a starSpin Movie Clip on a new bkgrndStars layer in the Main Timeline to create some animated background elements (see Figure 11-31).

Figure 11-31: Movie Clips make it easy to place multiple instances of an animated element with different effects applied.

Controlling Symbol Instances with ActionScript

You can use ActionScript to control the playback of each element independently of the Main timeline. For example, rather than stopping everything on the Main Timeline, you can place a stop() action on the starSpin symbol timeline to hold the animation of the stars while the other elements continue to play (as shown in Figure 11-32, top). Any ActionScript placed directly on the symbol timeline will apply to all instances of the symbol. If you are working with Movie Clip symbols, you have the additional option of naming individual symbol instances and targeting them with ActionScript placed on a keyframe in the Main Timeline (as shown in Figure 11-32, bottom). This method enables you to stop the animation on some stars, while letting others continue to spin as the animation on the Main Timeline plays.

Figure 11-32: ActionScript can be added to symbol timelines (top) or used to target symbol instances (bottom) to control the playback of animated elements, independent of the Main Timeline.

On the CD-ROM 

To see the difference between adding ActionScript directly to a symbol timeline to stop all instances and targeting a specific named symbol instance with ActionScript on the Main Timeline, compare stopSymbol.fla (or .swf) with stopInstance.fla (or .swf).

Transforming Symbol Instances

As we discussed in previous chapters, you can modify the appearance of symbol instances without having to edit the contents of the original symbol. This can be helpful when you are working with static elements, but it really becomes indispensable when you are working with animated elements. Imagine the time it would take to copy and paste a series of tweens or a frame-by-frame sequence on the Main Timeline and then to edit the artwork on each keyframe just to change the scale or the color of your animated element each time you want to use it. Now be very happy that the little extra time spent moving your animated sequences off the Main Timeline and into symbols makes it possible to drag and drop your animated elements and then to scale, rotate, or apply Filters or Color effects to get endless variations without ever having to edit the original keyframe artwork.

On the CD-ROM 

We have included the original and the modified version of our example file so that you can see how the symbol instances were changed — compare tweensModify_start.fla and tweensModify_final.fla in the Modify subfolder in the ch11 folder of the CD-ROM.

In our example (see Figure 11-33), we have modified the appearance of some of the animated stars by transforming instances of the original starSpin Movie Clip.

Figure 11-33: By transforming symbol instances, you can add almost endless variation to the appearance of your animated sequences without having to modify any keyframe artwork.

The beauty of symbols is that you always have the option of modifying the appearance of individual symbol instances or making global changes by modifying the artwork in your original symbol. If you decide that an element should be changed every place that it appears, it is much quicker to edit the original symbol than it is to modify all of the symbol instances individually.

Tip 

If you decide that you want to keep the static shape, but not the animation or the link to the original symbol in the Library for some of the symbol instances you have placed on the Main Timeline, you can use Modify ð Break Apart (Ctrl+B or z+B) to "break" the link to the animated symbol. The original artwork (or static shape) will remain on the Stage, but any changes made to the original symbol in the Library will not be carried over to the now unlinked shape.

Reversing Tweens to Create Smooth Loops

The option of reversing a sequence of frames comes in handy when you are creating animation loops. You can reverse a tween or a frame-by-frame sequence as long as there is a keyframe at each end of the sequence that you select. One of the most common ways to achieve this is to copy a sequence of frames for an animation, place it on the Timeline immediately following the original sequence, and then apply the Modify ð Timeline ð Reverse Frames command to create a seamless loop. When the Timeline is played back, instead of completing one sequence and then jumping directly back to the starting keyframe, you will now have a second sequence that smoothes the transition from the final artwork back to the original artwork on the starting keyframe of the sequence.

On the CD-ROM 

To see how a straight tween can be modified to make a smoother loop, compare smile_start.fla with smile_loop.fla. These two files are in the Modify subfolder of the ch11 folder on the CD-ROM.

In our example, we used this technique to animate the mouth from a smile back to a surprised expression.

1. The first step is to copy and paste the frames for the smile animation. (You can place them on the same layer, but for clarity we have placed them on a layer directly under the original smile.)

   Note 

   To view the tween frames for the smile animation on the smileAnim timeline, double-click the smileAnim symbol in the Library or an instance of smileAnim on the Stage of the Main Timeline to open the symbol in Edit mode.

   You can select all the frames in the sequence and use the Copy Frames command, or hold down the Option (Alt) key while dragging the selected span to a new layer (or position on the Timeline). Make sure that the copied sequence is placed immediately following the original sequence (either on the same layer or on a new layer), as shown in Figure 11-34.

2. With all of the frames (and keyframes) of the copied sequence selected, choose Modify ð Timeline ð Reverse Frames from the application menu or from the contextual menu. Flash will automatically rearrange the order of the selected frames so that the animation is reversed, as shown in Figure 11-35. You can also make adjustments to the length of the sequence or apply different tween settings. For example, you may want to change Easing from In to Out or add some static frames to the end of the timeline to hold the worried expression a bit longer before it loops back to start the smile tween again.

Figure 11-34: Place the copied tween sequence immediately following the final keyframe of the original tween on the symbol Timeline.

Figure 11-35: After the sequence is reversed, you can make adjustments to polish the loop.

Note 

After the animation is reversed, you may find that a broken tween exists on the final keyframe in the reversed sequence. The animation will work fine as is, but to make your tween timeline cleaner, simply select the final keyframe and choose None from the Tween menu in the Property inspector to remove the "broken end" of the tween.

We could fill an entire book with illustrations of the various ways that you can move, edit, and recombine your animated sequences, but the basic principles are always the same. Use symbols to keep your files optimized and your options open. Nest symbols to keep your project organized. Try to keep your Main Timeline uncluttered and easy to modify by putting frame-by-frame animation and tweens on symbol timelines. Use Movie Clip symbols if you plan to target instances of the symbol with ActionScript. Apply Timeline Effects on symbol timelines or as the last step in your editing process if you want to layer different animation techniques. Use Filters rather than Timeline Effects whenever possible because they are more versatile and will not break as easily. Let Flash do as much work for you as possible, but don't be afraid to manually tweak animated sequences by inserting keyframes or modifying artwork. Use layers to keep elements organized and when you need to animate multiple items on the same span of the Timeline. Plan and design your animation in logical sections rather than in complex groups — you can add complexity by nesting multiple symbols. Avoid redundant work and keep your files small and easy to manage by reusing artwork and animation whenever possible.