To add a keyframe to the Timeline, select the frame that you want to convert into a keyframe and then do one of the following:

Tip

If you need to make a sequence of keyframes, but you would rather not have to press F6 or F7 repeatedly to create individual keyframes, you can select a range of frames and use the Modify

The basic steps for creating a frame-by-frame animation are as follows:

Traditional animators worked on layers of transparent cels using a light table. This made it possible for them to create consistent drawings and to plan the pacing of movement in a sequence of cels. As you move from keyframe to keyframe in Flash, you might feel that you are working blind because you can see the artwork only on the current frame. If you are creating artwork for a sequence of related keyframes, it is crucial to have some visual indication or "map" of the changes from frame to frame. Fortunately, Flash has an effective digital version of the traditional light table — this handy feature is called onion skinning. In Flash, onion skinning enables you to see several frames of your artwork displayed at one time. The onion skin markers on the timeline determine the number of frames that are visible. You can turn onion skinning on or off whenever you need to by using the toggle buttons at the bottom of the Timeline window. As shown in Figure 10.4, there are actually two options for onion skinning: Onion Skin or Onion Skin Outlines.

The current frame (indicated by the position of the playhead) is displayed at 100 percent opacity, while the other frames in the sequence are displayed at a slightly reduced opacity or as outlines, depending on the Onion Skin button you have selected.

The number of frames that are included in the onion skin display can be controlled either by choosing a setting from the Modify Onion Markers menu (shown in Figure 10.5) or by selecting the round marker handles with the Selection tool and sliding them to a new position on the Timeline. The number of frames that you select from the Modify menu is shown before and after the current frame — so in our example with Onion 2 selected, the onion markers actually span five frames (the current frame, plus two frames on each side).

One of the drawbacks of manually creating unique artwork on every frame is that changes can be very time consuming. If you decide to change the color or size of an element or perhaps edit out a feature of your artwork, repeating this edit on every frame of a sequence is tedious and labor intensive.

Tip

The Find and Replace panel (Edit

Figure 10.4. Onion Skin shows grayed out or ghosted artwork on multiple frames, and Onion Skin Outlines shows colored outlines of the artwork on multiple frames. It's hard to see the "color" here, but notice that the lines are thinner with Onion Skin Outlines (right).

Figure 10.5. You can control the number of frames visible when onion skinning is turned on with the Modify Onion Markers menu or by dragging the onion skin markers to a new position on the Timeline.

Fortunately, Flash provides a Timeline option that can make repeated edits on multiple frames much more efficient. Edit Multiple Frames enables you to see and select items on multiple frames for simultaneous modification. As shown in Figure 10.6, the Edit Multiple Frames option is turned on with the toggle button below the Timeline. When this feature is active, you can use any of the selection methods (Selection tool, Lasso, application menu, or shortcut keys) to select the parts of your artwork that you want to move, modify, or delete. This feature is especially helpful for edits that need to be consistent from frame to frame, such as moving all of your artwork to a new position in your layout.

Tip

Using the Lock feature to protect layers that you don't want to edit makes it much easier to select and edit multiple elements on specific layers. Using the Lasso tool or the Selection tool to drag-select items on the Stage includes only items on unlocked layers in your selection. The Select All command (Edit

Figure 10.6. With Edit Multiple Frames toggled on, you can select elements on individual keyframes in a sequence (left) to be modified simultaneously (right).

The frames visible and available for selection are marked by a gray span on the timeline with start and end handles. You can adjust the number of frames included in the span with the Selection tool by clicking and dragging the round handles on the timeline to a new position.

Shape tweening is useful for morphing basic shapes — for example, turning a square into a circle, or animating the drawing of a line by tweening from a dot to a finished line. Flash can shape tween only raw shapes or drawing objects, so don't even try to shape tween a group, symbol, or editable text — it won't work. You can tween multiple shapes on one layer, but for the sake of organization and animation control, it's best to put each shape on its own layer. This enables you to adjust the speed and length of shape tweens individually and also makes it much easier to figure out what's going on if you need to edit the file later.

Tip

The Object Drawing (J) toggle in the options area of the Tools panel makes your production process more streamlined if you are drawing items to animate. Drawing objects are a more flexible art type, but they can still be shape tweened like raw shapes. You can make objects with any of the normal drawing tools as long as you select the Object Drawing toggle. If you want to convert a raw shape into an object after it is drawn, select the shape, and then choose Modify

Figure 10.7 shows an animated "smile" created by interpolating the graphics between a dot and a curved stroke with a shape tween. Flash nimbly handles this simple transition, rendering a gradually extending line on the frames between the dot of the pursed mouth and the final curve of the smile.

Here are the steps for creating a shape tween:

Because Flash calculates the simplest way to interpolate from one shape to another, you occasionally get unexpected results if the shapes are complex or extremely different from one another. Shape tweening becomes less reliable the more points there are to be calculated between the defined keyframes. In the example, I have added a keyframe at the end of the span with the eyes of the character changed from circles to stars. I want the animation to be a smooth transition from the rough circle to the star shape in each eye. As shown in Figure 10.12, a basic shape tween results in some odd in-between shapes.

Figure 10.12. When a shape tween is added to create an animation from one keyframe to another, the transition artwork that Flash generates may not look how you expect it to.

One way of making the in-between artwork more precise is to insert keyframes in the middle of the shape tween so that you can manually adjust the shapes that Flash has generated. Another option that enables you to control a tween without modifying any artwork is to add shape hints for Flash to follow when rendering the in-between shapes. Shape hints enable you to specify points on a starting shape that should match with specified points on the final shape. This helps Flash to "understand" how the shapes are related and how the transitional images should be rendered. Compare Figure 10.12 with Figure 10.13 to see the improvement that shape hints can make in the precision of in-between shapes.

Figure 10.13. Placing shapes on individual layers and adding shape hints to control the way that Flash renders in-between shapes improves the precision of shape tweens.

Shape hints can be added only to artwork on keyframes that define the beginning and ending points of a shape tween. To add shape hints to the artwork in a shape tween, follow these steps after you have created a basic shape tween:

Tip

If the shape hints are not visible after you have placed them, make sure that the Show All Hints option in the contextual menu is toggled on, or use the application menu to choose View

Figure 10.16. The contextual menu offers some options for working with shape hints.

Motion tweening is useful for animating Movie clips, Graphic symbols, and editable text; however, it cannot be used to animate groups, drawing objects, or raw shapes (unless these are first converted into Movie clip or Graphic symbols). As the name suggests, motion tweening is applied to move an item (or target object) from one place to another, but it's capable of much more. Motion tweening can also be used to animate the scale, skew, rotation, color, or transparency of a symbol. Flash filters and the new 3-D properties available in Flash CS5 can also be animated with motion tweens, as described later in this chapter.

Like a shape tween, a motion tween is more efficient than frame-by-frame animation because it doesn't require unique content for each frame of animation. Yet it is not appropriate for all effects — sometimes you'll need to use either frame-by-frame animation or shape tweening to create the kind of in-betweens you want in a sequence.

Here's how to create a motion tween:

In addition to the changes that you can make to an animated target object on the Stage by using the Selection tool and the Transform panel, there are some specialized options available in the Properties panel when you select a motion tween span (blue shaded frames on a tween layer). These settings can be used to add finesse to an animation after you have your basic motion tween working:

Figure 10.19. Basic options for motion tweens are available in the Properties panel when a tween span is selected in the Timeline.

When you apply a motion tween to a target object, the tween span is rendered on a special tween layer — you'll notice that the standard layer icon changes from a simple page to something that looks like a square in motion. If the target object is the only element on the original layer when you apply a motion tween, the layer converts from a standard layer into a tween layer. However, if there are other elements on the original layer, the target object moves to a new auto-inserted tween layer created by Flash. In either case, the tween span occupies the same number of frames in the tween layer as the target object occupied on the original layer. The exception to this rule occurs when the target object occupies only one frame in the original layer, in which case Flash adds enough frames to the tween span to create one second of animation. That is, if the frame rate of your Flash movie is 24 fps, the default length for auto-created tween spans will be 24 frames.

Other elements can be motion tweened on the same span of the Timeline, as long as they are on separate layers (see Figure 10.20). You can interpolate different features on each tween and also apply any control settings (property keyframes or keyframes) that you want — Flash reads and renders the motion on each tween layer independently.

Figure 10.20. Multiple items can be animated simultaneously by creating tweens on individual layers.

Tween layers restrict some authoring options to protect the tween span:

As you work with content on tween layers, there are some special workflows that will help you manipulate motion tween spans:

One of the most elegant aspects of the object-based motion tween model is that motion paths are auto-created on the same layer as the target object. Points along the path correspond to frames in the tween span, and the position or shape of the path can be changed at any point in the tween.

To create and edit a motion path in a motion tween span, follow these steps:

Even after you have succeeded in modifying a motion path in a tween span, you may find that the movement of the animated element is not exactly as you would like. Fortunately, you can modify how a target object follows a motion path in a few different ways.

Using Orient to path

The first control to consider is found in the Properties panel when the first keyframe of your motion tween is selected. The Orient to path check box (shown in Figure 10.23) creates property keyframes on every frame of the tween to track changes in rotation (z-axis), helping the target object stay oriented as it follows a curved path and keeping it headed along the path. When Orient to path is not active, an animated item maintains the same orientation throughout the tween, with no relation to the curves or loops in the path.

Figure 10.23. By default, a tweened item maintains the same orientation as it moves along a curved path (left). Selecting Orient to path keeps an animated item headed along the curves or loops in a motion path (right).

Registration and center point alignment

The second important factor that determines how an animated element moves along a motion path is where the registration point of the symbol is located. By default, the registration point is generally at the center of the symbol, but this may not be the point of the item that you want to snap to the path. To modify the alignment of a target object, you can modify the registration point of the symbol (see Figure 10.24).

To modify the registration point of a tweened symbol on a motion path, follow these steps:

1. Select the symbol on the first keyframe of the tween.

2. Activate the Free Transform tool in the Toolbox, and drag the registration point (small white circle icon) to a new location. You'll see the motion path move to snap-align to the new registration point on the target object. You may have to select the motion path and move it back into position in relation to the Stage or artwork on other layers, but the target object also moves and the new registration point remains locked to the path.

Figure 10.24. When Free Transform is active, you can modify the registration point that defines how a target object tracks along a motion path without changing the alignment of the artwork in relation to the symbol center point.

As many of us had to learn the hard way, animation is not as easy as it looks. Something as simple as a bounce or a dimensional zoom requires attention to timing and scale — and if the animation is going to have any dimension or character, physical properties of weight and density need to be conveyed as the object moves or reacts to other elements in the scene. Although experienced animators can create believable motion without breaking a sweat, this can be a tall order for even the most skilled graphic designer or programmer. In an attempt to make the learning curve a little less steep, Adobe has included a collection of starter animation presets. These ready-made object-based motion tweens can be previewed and applied from the Motion Presets panel (Window

To apply a Motion preset, follow these steps:

Figure 10.25. The Motion Presets panel

You can modify the animation created by a motion preset in the same way you would modify any other motion tween. If you end up with a customized result that you want to save and use again, simply select the tween span or the target object and use the contextual menu to choose Save as Motion Preset. You can also click the page icon at the bottom of the Motion Presets panel to save your selected tween as a preset. Motion presets are stored as XML files in the following directory locations:

Motion preset XML files can also be exported or imported, using the Motion Presets panel.

Note

For more detailed information about working with custom motion presets, including how to create a preview for a custom XML file, refer to Adobe Help: Using Flash CS5 Professional

Note

If you are working with classic tweens, the Copy Motion and Paste Motion commands can be a helpful shortcut for reusing animation patterns. These commands can be found in the contextual menu when a tween span is selected, or in the Application menu under Edit

As in the Properties panel, you can control what property values are visible in the Motion Editor by expanding and collapsing sections of the panel with the property layer controls. When a property layer arrow is twirled down, the property name, value setting (for current position in the tween span), Ease setting (if any), and visual tween curve (plotted across the frames of the current tween span) are all visible. To facilitate editing in the tween curve area of the panel, you can click any expanded layer a second time to expand the layer view even farther. The number of frames visible in the tween curve area and the height of expanded and collapsed layers can be modified with the Grid display controls (bottom-left corner of Figure 10.26) to suit your screen size (or eyesight):

The tween curves in the Motion Editor track changes in object properties over the life of your tween span. Most properties can be modified independently from frame to frame (changes can be locked in by using a property keyframe or they can be interpolated in a curve from one control point to the next). Tween curves can be edited in a similar way to strokes (or motion paths), using the Selection tool or the Pen tool:

Although tween curves and eases appear on the same grid, they are edited differently. Tween curves are generated when you make any changes to a tweened property, and they enable you to edit the curve directly to adjust the rate of change for a specific property at any time. Eases are preset interpolation patterns that enable you to control the percentage of change that happens in each section of a tween span; you can also think of this as the pattern of the change. Easing is applied only if you want the rate of interpolation for a specific property (or all tweened properties) to change over the span of a tween. If you want the interpolation to be spread evenly on all frames that come between one property keyframe and the next, you don't have to add any easing.

Eases are managed in the Eases section at the bottom of the Motion Editor and applied by using the Ease menu for each property layer (shown in Figure 10.26). As discussed in the Animation Strategies chapter of this book, animation relies heavily on physics and the laws of the natural world. For this reason, Adobe was able to anticipate some of the ease patterns that you might find most useful and include them in the Eases submenu (available when you click the plus icon (+) at the top of the Eases section of the Properties panel). Any eases that you add to the Eases section of the Motion Editor are available in the Ease menu for each property in the layers above. For Figure 10.26, I added just two of the ready-made eases that ship with Flash CS5 to the Eases section of the panel to give you an idea of how different these patterns can be. I also applied the Bounce pattern to the tween for the Y value of the Basic motion property so that you can see how the dotted ease pattern overlays the original tween curve.

It takes some practice to get the feel for using easing curves to control tweens, but I'm sure you can already see how many more options for different styles of motion you'll have if you use easing:

After you add an ease to a tween property, you can still edit the tween curve (either in the Motion Editor or by making changes to the target object on Stage or in the Timeline), and the ease curve responds, but it keeps its basic shape. Ease curves can be modified in the Eases section of the Motion Editor by changing the hot text values within the allowable range for each ease pattern: Patterns with one long curve enable you to push the pattern from one end of the tween to the other and flip the pattern by changing the value from negative to positive (making it an ease in or an ease out), while repeating patterns with discrete sections joined by corner points enable you to set the number of repeating sections in the pattern.

If you need to go beyond the ease patterns that ship with Flash CS5, you can select the Custom option at the bottom of the Add Ease menu in the Motion Editor. This adds a Custom layer in the Eases section with an editable (solid rather than dotted) line loaded in the graph area. You can use the Selection or Pen tool to modify this line with Bezier handles or by adding additional curve or corner points. Custom patterns are available in the Ease menus for any of the property layers, and changes that you make to your patterns update on any layers that you've added them to.

As with anything else, it pays to start simple. Experiment with changing the ease curve of one property, and if you get something you like, copy it to a new custom ease layer before you move on with another modification. If a curve works great to create an interesting effect on one property, try applying it to something else. Before long, you will have a library of files with cool tween patterns that you can copy and paste from, instead of having to re-create a curve from scratch each time.

I describe the process for working with 3-D symbol properties in Chapter 9, but you can take this feature a step farther and animate the changes you make to 3-D position or rotation. If you have already created a 3-D symbol on the Stage by applying the 3D Rotation (W) or 3D Translation tool (G) to a Movie clip, you can use the 3-D symbol as a target object for a motion tween. Changes made to the target object on the Stage by using the 3-D settings or tools create property keyframes that are interpolated in the tween span and displayed in the Motion Editor along with other properties.

A great way to get started with 3-D animation is to try one of the motion presets that tween 3-D properties. After you apply a motion preset (as described earlier in this chapter), you can modify any of the settings or curves in the Motion Editor. I used the motion preset for 3D Rotation ("spiral-3D" from the Default Presets folder in the Motion Presets panel) as a starting point in our example file. This motion preset animates the target object around the z-axis, but the final result is that the object ends up looking backward in the end frame of the tween, as shown in Figure 10.27.

To create a more seamless looping animation, I used two different approaches:

Although describing these changes takes up a lot of page space, it really is just a couple of quick editing steps, and you can see how much time is saved by using motion presets and the Motion Editor rather than creating animation from scratch. The key to success when working with animation (2-D or 3-D) is to first understand the individual properties and how changes in their value modify the appearance of your target object. Testing property changes first by using a nonanimated target object enables you to plan the key positions in your animation. If you then work with the Motion Editor, you will have a better idea of which curves you need to modify and the values to enter on property keyframes to get the animated result you are hoping for. If you know where you want to start and how you want to end, Flash does a pretty great job of figuring out all the steps in between to render smooth animation.

Certainly, it is more efficient to plan your project structure before you begin adding animation so that you can nest animation in symbols as you create the project, but Flash is flexible enough to enable you to optimize the organization of your animation sequences even after you have strewn them around on the Main Timeline.

To illustrate how tweens are moved from the Main Timeline to symbol timelines, I will modify a file called tweensTimeline.fla, which includes layers with shape tweens, motion tweens, and classic motion tweens keyframed on the Main Timeline.

To reorganize a file (.fla) that has animation built on the Main Timeline, follow these steps:

In the previous section I suggested copying your animation sequences from the Main Timeline to be pasted into individual symbol timelines — even though this results in redundant content. The rationale for leaving the original sequences on the Main Timeline rather than cutting them as you move content into separate symbols is that they provide a useful reference for where the symbol instances should be placed on the Stage and how they should be arranged on the Main Timeline. The simplest way to "rebuild" your animation, using the nested symbols you have created, is to insert a new layer for each symbol on the Main Timeline directly above the original sequence that was copied. As you drag each symbol instance onto the Stage, you can align the artwork with the original sequence on the Stage and also determine how many frames the symbol should occupy on the Main Timeline.

Figure 10.34. When you use Paste Frames to place the content from the Clipboard into your symbol, layers and keyframes are preserved.

Using the example from the previous section, I show you how to replace the tweened sequences on the Main Timeline with nested symbol instances:

In the previous example, I moved the timeline animation sequences to Graphic symbol timelines to make it easier to preview the animation on the Main Timeline. However, in most production contexts, it is best to use Movie clip symbols to hold animation because instances of Movie clips can be targeted with ActionScript. Also, Movie clip timelines loop independently of the Main Timeline, so you can repeat an animation sequence as many times as you want, either by holding on a single frame of the Main Timeline or by extending the span of the Movie clip so that it remains visible as the Main Timeline continues to play. In the next section, I work with Movie clip symbol instances to demonstrate how to reuse animated symbols and how to add some variation to the instances.

Realistic physics can be automatically added to IK animations using the new Spring feature. To add Spring, first select a frame span for an IK animation, and then make sure the Enable Springs box is checked in the Properties panel (Figure 10.44). Spring can then be applied to individual bones through the SPRING section of the Properties panel once a bone is selected (Figure 10.45). The Strength value controls the power of the spring effect (higher values mean more extreme springs), and the Damping value controls the decrease of the spring effect over time. A damping value of 0 allows the spring to continue indefinitely, while a value of 100 slows the spring effect over the least amount of frames.

Figure 10.44. Enable Springs must be checked in the Properties panel when an animation is selected in the Timeline for an animation to allow Spring effects.

Figure 10.45. Control the spring effect using Strength and Damping in the Properties panel after a bone is selected.

One example of a spring in action is a pendulum animation. To best apply the spring effect, start the armature animation in the pose you want at the beginning, and after a few frames, define the end pose for the animation. Instead of applying the spring effect in between the start and end frames, Flash applies the effect over many (sometimes hundreds) of frames, so you will need to expand the about of frames by extending the number of frames in the Timeline in order to see the full animation. In the pendulum example in Figures 10.46 and 10.47 the pendulum is at the top of a swing on frame 1, the finished pose is on frame 5, and the Timeline is extended to 500 frames. With a spring strength of 100 and damping of 50, Flash creates the left swing animation, and the pendulum swings back and forth until it comes to a stop in the middle (Figure 10.48).

Figure 10.46. The pendulum posed to the top-right on frame 1

Figure 10.47. The pendulum posed to the desired end of the animation on frame 5

Figure 10.48. The animated pendulum showing spring in the Flash Player

Up to this point, I have worked with bones using symbols, but bones can be added to shapes as well. However, the way that bones interact with symbol instances is quite different from the way they control the movement of a shape. To create an IK armature inside of a shape, follow these steps:

Figure 10.49. A simple filled shape drawn in merge or object drawing mode can be transformed into an articulated shape by adding an IK armature with the Bone tool.

As with bones added to symbol instances, bones added to a shape will be saved on a new pose layer that can be used to animate the articulated IK armature. A preview of our example shape (with bones added) being moved into a new pose is shown in Figure 10.50.

One challenge of animating shapes with IK bones is that the outline of the shape will sometimes distort or fracture as you move the skeleton. The companion tool for the Bone tool, called the Bind tool (Z), helps you control how the shape relates to the bones in your armature. The way these two tools work together is similar to how the Subselection tool works with the Pencil or Pen tool. After you have created an armature inside of a shape with the Bone tool, you can use the Bind tool to select a bone and see the related control points along the edges of the shape highlighted (with a yellow outline). You can also use the Bind tool to select individual points along the edge of the shape and see the related bone or bones highlighted (with a yellow outline). These two different views of the armature-shape relationship are shown in Figure 10.51.

Figure 10.50. Moving one bone in the armature drags the other bones along in a continuous chain that controls the motion and form of the articulated shape. Changes to the shape will be saved as property keyframes on the pose layer to create an animation of the motion.

Figure 10.51. Bones can be selected with the Bind tool to show the points that are bound to them (left), or points can be selected with the Bind tool to show which bone(s) they are bound to (right).

In this way, you can get a clearer idea of how the shape is tied or bound to the bones. More important, you can reassign points or bind them to different bones within the armature. To do this, simply click a point on the edge of the shape with the Bind tool and drag the yellow highlight to the bone that you want it to be tied to, or conversely, you can click a bone with the Bind tool and then drag highlights to specific points along the edge of the shape. Either way, you will be able to adjust the way that the shape reacts to changes in the position of the bones. Keep in mind that points can be bound to more than one bone. The Bind tool is most helpful for smoothing out distortion around joints that are very close together, where outline points may be connected to the wrong bone(s).

Although the IK tools (the Bone tool and the Bind tool) make the task of animating related shapes infinitely easier, they do not eliminate the learning curve for creating this type of animation. It takes a lot of experience to make the most of IK and to anticipate exactly how an armature should be designed and tuned to support different shapes and poses.

We're all waiting for the day when intensive animation plays as smoothly on the Web as it does when output for offline viewing. That day is getting closer with every build of the Flash Player. Flash 8 introduced a feature to optimize playback of complex vector graphics in Movie clip or Button symbols by caching them as bitmaps, or surfaces, at runtime. The benefit of caching complex vectors as bitmaps is that the Flash Player does not have to tie up the CPU by constantly redrawing these background vectors as other elements are animating in front of them. Your animation will play back faster and smoother. You can apply this option with ActionScript or by selecting a Movie clip (or Button) instance in the Document window and selecting the check box in the Properties panel to Use runtime bitmap caching.

Runtime bitmap caching optimizes Web playback only for Flash movies with complex background images that are static or panned vertically or horizontally. The position, but not the content, of the cached symbol can change without requiring the Flash Player to redraw the vector information. Bitmap caching fails if the Movie clip (or Button symbol) is larger than 2880 pixels in any direction or if the Movie clip is rotated. You will not notice a significant improvement with bitmap caching on simple vector graphics. Before you publish your final Flash movie, it is always best to test with bitmap caching turned on and turned off to see which delivers the best performance for the specific graphics and animation in your file.

As I mention previously, when you're designing with Flash for the Web, use raster (bitmap) images with a careful eye on their file size. But for broadcast output, there's no limit. Not only can you use as many images as you'd like (within system constraints), but also doing so makes a richer, far more attractive finished product. And, unlike the SWF format, when they're output as raster video, even animations built with a lot of bitmaps play at the proper frame rate. So move, animate, scale, and rotate them — even play sequences of them. The sky and RAM are the only limits.

I could fill an entire book with illustrations of the various ways that you can move, edit, and recombine your animated timeline 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. Let Flash do as much work for you as possible, but don't be afraid to manually tweak animated sequences by applying custom tween curves, inserting property 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.