Figure 5-1 shows an example file viewed in the Timeline panel. This example uses many of the animation tools that will be explained in this chapter. As described in Chapter 1, there are two primary ways to organize assets in a Timeline: by vertical stacking order (layers) and by time (frames).

Horizontal spatial arrangement in a single frame is determined simply by where you place your assets on the Stage. You can set vertical stacking of overlapping assets by arranging them in a single frame and by bringing an asset forward or sending it backward (using Modify→Arrange) when they overlap. However, to animate objects in the Timeline panel, you place assets into discrete layers so that only the desired asset is included in the animation. This visual stacking arrangement will be familiar to users of Adobe Illustrator and Adobe Photoshop.

There are several layer types, not the least of which are the normal layer and guide layer discussed in Chapter 1. Normal layers have no unique functionality, and guide layers display content only during authoring (guide layers are excluded when SWFs are compiled). You can also organize layers into layer folders. This is handy when files have a large number of layers, because you can collapse the folder using the arrow to the left of the folder icon and hide all the layers therein.

While they are not specifically reserved layer types, two kinds of tweens reside in their own layers. Shape tweens are typically used to morph shapes, and classic tweens (formerly called motion tweens) are legacy animation types used to animate symbols, such as movie clips. The Flash CS4 Professional upgrade for the classic tween retains the name motion tween and has become a dedicated layer type. You will learn how to create both kinds of motion tweens in this chapter and even use both techniques in your ongoing portfolio project.

You can use a special kind of guide layer, called a classic motion guide, with classic tweens. Classic motion guide layers allow you to draw a path for an associated classic tween for the animated asset to follow. At the top of Figure 5-1, you can see the name and icon of the classic tween layer icon indented below the name and icon of the classic motion guide layer. This indicates a relationship between the two layers, and the guide is partially controlling the location of the asset in the classic tween.

For now, the final unique layer types you’ll learn about are the mask and masked layers. A mask layer can be used to show only select content from an underlying masked layer. At the bottom of Figure 5-1, you will notice another pair of associated layers. This time the name and icon of a masked layer—in this case, a shape tween—are indented below a mask layer.

There are three buttons beneath the layer icons and names in Figure 5-1. From left to right, these buttons let you create a new layer, create a layer folder, or delete a selected layer. To the right of the layer icons and names are three columns. Clicking in these columns in a layer of interest will, from left to right, show or hide the layer’s contents, lock layers to prevent further edits, and display all layer contents as colored outlines. For example, the red x indicates that the sections layer is hidden, the locks show that the mask and shape tween layers are locked, and the purple outline box indicates that the classic tween layer is displaying its contents in purple outlines.

The right half of Figure 5-1 is composed of the frames that make up the FLA’s Timeline, much like the frames of a film, with each showing only the content of a single frame of the total animation to the viewer at a time. Chapter 1 outlines the principle differences between keyframes and computer interpolated frames, but, as animation techniques add complexity, a broader overview is in order.

An ordinary frame is a frame in which no change occurs. Such frames might be empty or they may contain static, or unchanging, content. Within the Timeline panel, ordinary frames have no visual appearance other than a gray tint if the frame contains content. In Figure 5-1, for example, frame 18 of the sections layer (directly under the red playhead) is an empty frame, and frame 5 of the sections layer is an ordinary frame with static content.

A keyframe is a frame that contains animator-defined change. By definition, the first frame of every frame span is a keyframe, whether it contains content or not, because the animator has chosen to isolate that frame from its previous frame.

Traditional keyframes are marked with a circle. An empty circle represents an empty keyframe (frame 15 of the sections layer in Figure 5-1), while a filled black circle marks a keyframe that contains content (frame 1 of the same layer). A filled black diamond marks the new property keyframe, which is part of the new motion tween format. You’ll learn more about property keyframes when you read about motion tweens, but you can see property keyframe icons in frames 10 and 20 of the motion tween layer.

An interpolated frame is a frame in which content properties have been altered by the computer. Varying color tints indicate interpolated frames, depending on which kind of tween is at work. For example, frame 5 of the shape tween layer is tinted green to indicate that a shape is likely morphing from its original appearance in frame 1 to its final appearance in frame 23. Frame 5 of the motion tween layer is tinted light blue to show that it is part of the new Flash CS4 Professional motion tween. A movie clip in this layer may be moving between three positions set in frames 1, 10, and 20. Finally, frame 5 of the classic tween layer is tinted a purplish blue to show its inclusion in a legacy style motion tween. This layer may be tweening another property, such as scale, for example, between sizes set in frames 1, 10, and 23.

Finally, although not a keyframe, the end of a frame span is marked by a vertical rectangle. This serves no other purpose than as a visual indicator that an ordinary frame span has ended. Frames 14 and 23 of the sections layer mark the end of content-filled and empty frame spans, respectively.

Adding and removing frames

Prior to adding frames, the Timeline panel is restricted to working only with frame 1. You can’t even move the playhead through the Timeline panel beyond the last frame. Although you can draw static illustrations in a single frame or control animations with ActionScript, Timeline-based animations require a minimum of two frames.

To add frames to a single layer, click in the layer where you want to insert the frame and press F5 (Insert→Timeline→Frame), shown in Figure 5-2a. If you click in an existing frame, a frame will be added at that point. If you click beyond all existing frames, additional frames will be added up to that point. For example, if you start with a new empty file containing only frame 1, and want the Timeline to contain 20 frames, click in frame 20 and press F5.

Figure 5-2. Adding frames to one layer (a), select layers (b), and all layers(c)

The process is similar for adding frames to more than one layer of the Timeline at once. Instead of clicking once in a single frame, drag through all the layers in which you will insert frames (Figure 5-2b). To insert new frames between existing frames in all layers, click in the number span atop the Timeline to position the playhead. By not clicking in a specific layer, frames will be added to all layers at the position of the playhead (Figure 5-2c). This technique will only work within existing frame spans, however, because the playhead can’t move past the last frame in the Timeline.

Finally, to remove frames, select the frames you want to remove (by dragging your mouse over them or Shift-+clicking the first and last frames) and press Shift-+F5 (Edit→Timeline→Remove Frames).

Warning

Removing frames will literally remove the frames, not the contents of the frames, and will shorten the entire frame span. If you only want to remove the contents of a frame, click once to select the frame span in question and delete. If you want to remove the contents from a segment of a frame span, insert keyframes at the start and end of the segment so you can then delete only that portion of the content.

Below the frames, in the bottom of the Timeline panel shown in Figure 5-1, is a series of frame editing controls. The first button will scroll the Timeline panel to center the frame in which the playhead currently resides.

The next two buttons will turn on onion skin preview and show the onion skin frames in outline view. Onion skin preview allows you to display frames to the left and/or right of the current frame in a muted image or outline, depending on your setting (Figure 5-3). The additional frames are rendered right on the Stage, showing the current frame in the context of its surrounding frames.

Figure 5-3. Onion skinning enabled, showing two frames behind and two frames ahead of the current frame

This feature gets its name from the translucency of onion skin. The more layers of onion skin you must look through, the harder it is to see the content. Therefore, the frames farthest from the playhead are the least opaque. The onion skin feature is discussed further in Chapter 10 when working with inverse kinematics armatures.

The next control allows you to edit multiple frames at once and will be explained in greater detail later in this chapter.

The final button offers a quick setting to modify the onion and edit multiple markers that appear on top of the frame numbers. These markers change the number of frames that appear to the left and right of the playhead when using the onion skin or edit multiple frames features. You can manually drag the markers to show any number of frames, but this quick menu will show two, five, or all the frames surrounding the playhead. It also allows you to anchor the visible frames (even when you move the playhead) and show the markers all the time, even when the features are not in use.

The three editable values that conclude the array of controls are the current playhead position measured in frames, the frame rate (the speed at which the playhead moves through frames) measured in seconds, and the current playhead position measured in seconds. The playhead in Figure 5-1 is in frame 18 and the frame rate of the file is 24 frames per second, so the playhead is resting at 0.7 seconds of elapsed playback time.

In some cases, particularly when working with a sequence of several keyframes, you face the prospect of having to edit many frames. For example, assume you are working on a frame-by-frame animation and later decide that you want to move the art in every other frame down a bit on the stage. This would ordinarily require you to move the playhead to every other frame and repeatedly select the frame’s contents and make the adjustments. What’s more, you would have little context from the surrounding frames during the editing process.

Fortunately, the Edit Multiple Frames feature allows you to work in as many keyframes as you like, not only making it possible to edit the frames’ content, but also to see each frame on the Stage at the same time. To do this, click the Edit Multiple Frames button at the bottom of the Timeline. Brackets will appear to the left and right of the playhead. You can drag these brackets to set the number of editable frames to the left and right of the playhead. Thereafter, you can work in any of the included frames.

The top of Figure 5-5 shows the feature enabled at the bottom of the Timeline panel detail (the button just to the right of the playhead, under frame 8, is pushed in, meaning the feature is active). The editable frames are set to two to the left and two to the right of the playhead. The selected movie clips on the Stage at the bottom of the figure, as well as the highlighted frames in the Timeline, show that content in frames 5, 7, and 9 are selected. They have been moved down 10 pixels, creating the desired effect.

Figure 5-5. The Edit Multiple Frames feature allows simultaneous editing of more than one frame at a time—in this case, the two frames on either side of the current frame

In addition to copying and pasting content from a single frame, it is also possible to cut, copy, and paste the frames in their entirety. Doing so will preserve the frames’ contents, but also keyframes, tweens, layer properties, and more.

For example, if you selected five frames and used the standard Copy feature, you would only copy the content from the current frame—the frame in which the playhead resides. However, if you selected those same five frames and used the Copy Frames feature, you could then paste five frames with all their content and attributes intact.

You can access the Copy Frames command through the application menu (Edit→Timeline→Copy Frames) or by right-clicking (Windows) or Control-clicking (Mac) the selection (Figure 5-6). You can then paste frames using the Paste Frames option found in the same menus.

Figure 5-6. Using the Copy Frames feature instead of the traditional Copy feature

This is really handy when you realize, after a lot of hard work, that you want all the animations you finished in the main Timeline to be in a movie clip instead. In that case, you can copy (or cut, if you prefer) all the frames, create a movie clip, double-click to edit that movie clip, and then paste all the frames into the movie clip. All of the layers, frames, and contents will be recreated inside the movie clip. Copying and pasting frames is also convenient when you want to create an animation of repeating frames.

The only tricky part of the process is when you want to replace frames with a paste. In the aforementioned examples, you are likely creating frames where none previously existed, such as when adding content to an empty movie clip. However, if you need to overwrite existing frames, you must first select the frames you want to replace. If you fail to do this, you will be adding to the existing frames, rather than replacing them, and your frame span will grow, possibly affecting frame synchronization later on.

Figure 5-7 shows the steps required to replace frames with a paste. The first step, (a), is to select the desired frames by dragging over them with your mouse and copying them. The next step, (b), is to select the frames you wish to overwrite using the same selection procedure. The final step, (c), is to paste the frames into the selection.

Figure 5-7. Copying and pasting frames to repeat a frame sequence; (a) select four frames and use the Copy Frames feature, (b) select frames to be replaced, and (c) use Paste Frames

When using symbols in animations, it can be very convenient to automatically replace a symbol without otherwise affecting animation properties. For example, if you had to replace a symbol by deleting it and adding a new symbol in its place, you would then have to reapply any properties such as location, rotation, scale, and so on, that defined the animation’s characteristics. This is not only tedious, but you run the risk of not accurately reproducing all the original symbol’s properties. Alternately, if you edited the symbol, any unrelated instance of the symbol would also be changed.

Enter the Swap Symbols feature to protect the integrity of your symbols and save you time and frustration. This feature does exactly what its name implies. After selecting a symbol on the Stage, click the Swap button at the top of the Properties panel (Figure 5-8) to swap the original symbol with a replacement from the Library.

Figure 5-8. The Swap Symbols button in the Properties panel

The Swap Symbol dialog that appears (Figure 5-9) has a list and preview thumbnail of all symbols that you can swap for the original. The Duplicate Symbol button (at the bottom of the dialog) allows you to duplicate the original and swap the copy for the prior symbol instance, all in one step. This is useful when you want to edit the original symbol in one or more uses, but can’t change it throughout the entire file.

Figure 5-9. The Swap Symbol dialog shows available symbols to replace the original; the Duplicate Symbol button is located at the bottom of the dialog

If you look carefully at the shape tween in Figure 5-12, the square appears to rotate as it changes into a circle. However, the shape is not really rotating, it is simply distorting in an unexpected way during the morph. This is because the main control points for the square are at its corners, while the main control points for the circle are at the top, bottom, left, and right of the circle. As such, when the shape tween process attempts to change the square into the circle, it tries to move the control points about 45 degrees counterclockwise to meet up with the similar points on the circle.

This is a simple, easy-to-demonstrate example of distortions that occur during morphs, but the effects can actually be much worse. Flash often needs a little help—a few instructions to assist the morphing process—so the algorithm knows what kind of morph you had in mind. Shape hints are markers that you place on the original and final shapes to match up control points during the morph. For example, you can place a hint at the upper-left corner of the square and in the same approximate northwest position on the edge of the circle, and Flash will try to synchronize the position of the two points during the morph.

Figure 5-13 shows four shape hints applied to the square-to-circle example discussed previously. A single hint can be referenced in both keyframes by noting the letter of the hint. In this case, the hints are marked a, b, c, and d in both frames.

Figure 5-13. Shape hints in the first keyframe (top) and last keyframe (bottom) of a shape tween

When you place hints, they turn yellow in the first keyframe and green in the second keyframe. In Figure 5-13, the fourth hint has yet to be positioned, and remains red in both keyframes.

After successfully placing shape hints in both frames, Flash tries to match up each pair during the shape tween, resulting in a morph between square and circle that no longer appears to rotate (Figure 5-14). If desired, you can compare your work to shape_tween_02.fla.

Figure 5-14. The shape tween, after using shape hints, with the apparent rotation distortion corrected

You can use up to 26 shape hints, remove shape hints by dragging them off the stage in either keyframe, and remove all shape hints by using the Modify→Shape→Remove All Hints menu command. You can also display shape hints that are no longer visible using the View→Show Shape Hints menu command. For these hints to be visible, you must unlock the shape tween layer and the frame in one of the keyframes using the hints.

One of the nicest things about the new motion tween format is the degree to which you can dynamically alter the tween just by tinkering on the Stage. Previously, you inserted a property keyframe just by dragging the symbol in the last frame. You can edit the tween’s motion path just as easily. In many respects, the tween’s motion path behaves just like a regular stroke.

Figure 5-22 shows a motion path being dragged into an arc using the Selection tool and Flash’s natural drawing techniques. You can grab a motion path anywhere along its length and distort it just as you would any other line.

Figure 5-22. Dragging a straight motion path into an arc with the Selection tool

The Subselection tool is being used in Figure 5-23 to edit the motion path as if it were a Bézier curve created with the Pen tool. You can move each keyframe independently or drag its control handles to distort the shape of the curve. (In Figure 5-23, a third keyframe was added to the center of the tween to show additional control handles for demonstration purposes.)

Figure 5-23. Using the Subselection tool to manipulate the motion path as a Bézier curve

As when working with regular strokes, if you click and release to select the path (rather than immediately dragging the path to reshape it), you can then drag the entire animation around on the Stage without creating or changing a property keyframe or further editing the path. Finally, you can draw motion paths from scratch, but not while editing the tween; you must create the path first, as described in the next section.

When working with a motion tween, you can use the Selection tool to drag the motion path and use the Subselection tools to manipulate the path’s control handles. However, you can’t actually draw in the motion tween layer. To apply a hand-drawn motion path, you must first draw a stroke in another layer as you ordinarily would, using any preferred drawing method. Figure 5-24 shows just such a stroke.

Figure 5-24. A standard stroke drawn in a tapering sine wave shape

Once the path is complete, you can simply copy the stroke and paste it into the motion tween layer. Flash may ask you if you want to replace the existing motion path, which you can decide on a case-by-case basis. If you proceed with the paste, the motion guide will take on the shape of the stroke you drew, and the frames will be distributed across its length (Figure 5-25).

Figure 5-25. The stroke from the previous figure pasted into a motion guide to become a custom motion path

If the stroke you drew is too complex to be recreated with the number of frames allotted to the tween, Flash will prompt you to simplify the curve by optimizing it or resampling it across the available frames. Optimizing the path is recommended as a first step, but experimentation with both options may yield different results.

Roving keyframes

When editing motion paths, watch out for signs of stuttering motion. This can be caused when the distances the object must travel between keyframes are not proportional to the number of frames allotted. Figure 5-26, for example, shows a tween in which half its distance must be covered in approximately one-third of the frames. This causes the first half of the tween to move quicker than the last half of the tween, with an abrupt change at frame 4.

Figure 5-26. Irregular motion caused by the same amount of distance traveled in differing numbers of frames

A new Flash CS4 feature called roving keyframes solves this problem. Roving keyframes are specific to motion paths and are not linked to frames in the Timeline. Flash will disassociate roving keyframes from the Timeline and automatically adjust their positions to create more uniform motion throughout the tween.

Figure 5-27 shows the same tween depicted in Figure 5-26, but using roving keyframes. The motion has become much more consistent.

Figure 5-27. Overcoming irregular motion with roving keyframes

Roving keyframes only work with x and y properties, as well as the z property you will learn about in Chapter 8. To enable roving keyframes, right-click (Windows) or Control-click (Mac) a motion tween and choose Motion Path→Switch keyframes to roving from the pop-up menu (Figure 5-28). You can disable roving keyframes by selecting the Switch keyframes to non-roving option.

Figure 5-28. Enabling roving keyframes using the mouse’s context-sensitive menu

In addition to obvious properties such as x and y location, scale, and rotation, you can apply simple color effects to symbols and animate them using motion tweens. When you select a symbol, you can access color effects through the Properties panel (Figure 5-29). The Style menu in the Color Effect section of the panel contains four color effects:

Figure 5-29. Applying an alpha color effect in the Properties panel

Just as you saw earlier when changing the x property in your first motion tween, changing a color effect during a motion tween will automatically create a property keyframe. Here, for example, is a simple process for fading in a movie clip, which also demonstrates a nice feature of motion tweens: automatic frame spans. If you need to review any of these steps, refer back to the beginning of this section.

Notice that frames were automatically added for you! When a frame span doesn’t already exist to convert to a motion tween, Flash will add one second’s worth of frames for the motion tween to occupy. So, if your frame rate is the default 24 frames per second, you will end up with 24 frames.

Scrub through the Timeline, and you will see the movie clip fade in from transparent to opaque over the course of the animation. Compare your file to alpha_tween.fla from the companion source files.

Any keyframe created in the Timeline panel will appear in the Motion Editor panel, and adding property keyframes in the Motion Editor is just as easy. The playhead at the top of the Graph column in Figure 5-33 corresponds to the playhead in the Timeline panel. You can use the playhead to scrub through the animation and stop at any frame.

At any point, you can add a keyframe by clicking the diamond shape in the center of the Keyframe column. The left image in Figure 5-33 indicates that there is a property keyframe only to the left of the playhead (see arrows), and that the current frame is not a property keyframe (no diamond icon is visible). After clicking the diamond icon (in the right image), the current frame becomes a property keyframe.

Figure 5-33. Manually adding a property keyframe in the Motion Editor

Another way to add property keyframes is to hold down the Ctrl key (Windows) or Command key (Mac) and click anywhere on the property curve. Similar to the Pen tool, you can add a keyframe where none existed before or delete a keyframe that already exists. Additional curve editing options are discussed in the next section.

The Graph column of the Motion Editor panel contains, well, a graph. The horizontal axis represents time, in frames. The vertical axis represents the value of the property, with higher values at the top of the axis, just like a normal graph. A straight dashed line and the value of the property represent an unedited property.

Consider, however, a one-second animation that lasts 24 frames with a frame rate of 24 frames per second, and changes only the x property to move a movie clip across the Stage from 1 to 500. The graph of this animation (Figure 5-34) starts at the lower-left corner (a time of 1 frame, or 0 seconds, and an x value of 0) and ends at the upper-right corner of the graph (a time of 24 frames, or 1 second, and an x value of 500).

Figure 5-34. A Motion Editor property graph showing the x coordinate move from 0 to 300 in 24 frames

Using the property curve, you can control the value of the property in any frame. Figure 5-35 shows more examples of x property curves, including one that shows the x position offstage to the left in negative territory.

Figure 5-35. More Motion Editor graphs of x property change over 24 frames, with a property keyframe at frame 12; 0 to 300 to 300 (top), 0 to 300 to 0 (middle), 300 to −300 to 300 (bottom)

In addition to working directly with keyframes, you can edit the curve to edit the animation as a whole, including interpolated frames. To do so, edit the curve in the same way that you would use the Pen tool to edit strokes on the Stage (for more information, see Chapter 2). Each property keyframe is similar to a point on the curve, and the interpolated frames run along the rest of the curve.

Figure 5-36, for example, shows the default keyframe at the start of every frame span in frame 1, and a single property keyframe at frame 11. All frames between 1 and 11 and from 12 to 24 are interpolated frames. The curve in Figure 5-36 was created by holding down the Ctrl key (Windows) or Command key (Mac), clicking near the middle of the line, and dragging down and to the right forming the curve.

Figure 5-36. Manually editing a Motion Editor property graph

Cursor feedback and modifier-key use for editing property curves is pretty consistent with stroke editing on the Stage. Because you must select a motion tween for the Motion Editor to remain active, you will typically be using the Selection tool when you begin working with a property curve. However, the Motion Editor will handle the behavior of your mouse machinations, based on context.

When the cursor resembles the Subselection tool cursor (a hollow arrow), you can drag the entire curve or individual keyframes around. Hold the Shift key when dragging keyframes to constrain their movement in left-right or up-down directions. If you hold down the Ctrl (Windows) or Command (Mac) key, the cursor will resemble the Pen tool, allowing you to add new points and remove existing points. Dragging with this mouse/key configuration lets you create curves, as discussed previously and shown in Figure 5-36. Finally, you can hold down the Alt (Windows) or Option (Mac) key while clicking to change a keyframe marker to a corner point, straightening the curve surrounding the point, just as you would alter a point on a stroke with the Pen tool.

Right-clicking (Windows) or Control-clicking (Mac) on a point allows you to remove a keyframe or switch between roving keyframes (indicated on the graph by a circle) or the default nonroving keyframes (indicated on the graph by a square). You can also set the curve segment to the left or right of a point to a straight line.

If you right-click or Control-click in the area behind the graph, you can easily reset the property, reverse the keyframes, or copy and paste the curve from one property to another.

In simple terms, easing is a slow acceleration or deceleration that lends realism to motion animation.

In this chapter, you’ll look at two ways to apply easing: through the Motion Editor and Properties panels. Adding easing in the Motion Editor can be a bit of a challenge the first time. It will help you if you remember a few things:

Figure 5-38 shows an example of this workflow, and the sections that follow discuss how to apply easing curves in greater detail. Figure 5-38 shows the Motion Editor after applying the wave motion preset to a movie clip. Near the bottom of the panel you can see that the preset has added a new layer called Sine Wave in the Eases section.

Figure 5-38. The Motion Editor after applying the Wave Motion Preset to a tween; note the Sine Wave easing preset at the bottom of the figure and its application to the y property of the tween

In the Ease column in Figure 5-38, the pop-up lists for each property show that no easing is used except with the y property, where the pop-up list shows the Sine Wave easing curve, and you can see a dotted line that runs behind the y property curve in the Graph column. The dotted line differentiates the easing curve from the property curve and further emphasizes the fact that you cannot edit the easing curve where it has been applied.

The easiest way to learn how easing curves work is to create your own, so that process is discussed in the next section. However, this is not required. You can always add any of the 16 existing easing presets to the Motion Editor menus and apply them to properties as described in the upcoming exercise. For now, familiarize yourself with creating your own curves, whether you intend to use them frequently or not.

Preparing an easing preset, whether it’s custom or not, involves two steps: creating or using a curve, and determining the strength of the ease. In all cases, begin the process by adding a preset using the plus (+) menu in the Ease section of the Motion Editor. For a preset to be accessible to all properties, choose it from the menu by name. To create a custom preset, select Custom from the menu. In both cases, the curve will be added to the Ease section.

Editing your own custom easing curve requires the same process as editing a Bézier curve on the Stage and has been discussed in the Editing Property Curves in the Motion Editor section. Figure 5-39 shows a custom curve with two control handles.

Figure 5-39. Drawing a custom easing curve in the Motion Editor

In addition to being comfortable with Bézier curve editing techniques, you need to understand a small difference between easing and property graphs. The x-axis of the easing graph is measured in frames, just like the property graphs. However, the y-axis represents the degree to which the tween is complete, measured in percent, rather than the changing value of a particular property.

For example, the lower-left corner of the graph is 0% complete at the first frame of the tween. The upper-right corner of the graph is 100% complete at the final frame of the tween. The ease curve depicted in Figure 5-39 is based on the same 24-frame example used throughout the discussions on the Motion Editor. It will slowly ease into the animation, reaching approximately 20% complete at frame 10, move relatively quickly through the animation, reaching approximately 80% complete by frame 15, and then slowly ease out of the animation over the last 9 frames, reaching 100% complete at frame 24.

Once you’re satisfied with your easing curve, you need to set the strength of the easing that will be applied to a property. As with properties, this value is set in the numeric entry field in the Values column of the panel.

For simple preset ease settings, this is a value between −100 and 100. Negative values ease into an animation, resulting in slower change at the beginning of the curve. Positive values ease out of an animation, increasing the easing applied to the end of a curve. For wave presets, such as Sine Wave and Sawtooth Wave, the value determines the number of half-cycles the wave makes during the duration of the tween. Finally, for custom ease settings, the value is the percent complete at any point throughout the curve.

Because you must create an easing preset and add it to a list of available settings for use in any property, and because you must set the strength value of the ease at its time of creation, it’s not possible to vary the strength from use to use. The only way to accomplish this is to create multiple copies of the ease curve, each with different values. Unfortunately, it’s not currently possible to rename any ease setting, even the custom settings you create, so you’re stuck with remembering which setting is which by number.

After you have created the curve and set its strength, you can apply the setting to a property. Figure 5-40 shows the custom ease curve created in Figure 5-39 being applied to the x property. In the Ease column, access the custom setting from the pop-up menu; the dotted line showing the ease appears behind the property curve. In this example, the x value changes from 0 to 300, but does so at a pace based on the easing curve applied.

Figure 5-40. Applying a custom easing curve to a property in the Motion Editor

One of the really cool things about this implementation of custom easing curves is that the easing curve doesn’t have to end at 100%. This was a limitation of the prior custom easing editor, which you’ll learn about later on, but is not a factor in the new easing model. By creating an easing curve that does not finish at 100%, you can end your tween and leave properties at any desired values.

For example, Figure 5-41 shows an x property curve from 0 to 300. Without easing applied, the movie clip from this example will move from an x of 0 to an x of 300 in 24 frames. However, when the easing is applied, the movie clip will move from 0 at frame 1 to approximately 300 at frame 12 (because the easing curve reaches approximately 100% at that point) and then back to 0 at frame 24 (because the easing curve returns to 0% at the end of the tween).

Figure 5-41. Applying a custom easing curve to a property in the Motion Editor

Combining different properties with different easing curves can result in some interesting effects. A quick way to glance over sample settings is to apply the motion presets to a temporary file and look at the Motion Editor every time you try a new preset. After a handful of peeks at the inner workings of the presets, you’ll be able to read the Motion Editor pretty easily.

Although it’s possible to draw elaborate easing curves that factor in the locations and values of every property keyframe, this can be quite involved for complex animations. In some cases, when per-keyframe easing is required, the limitations of one ease per property tween in the Motion Editor will be a major annoyance. In those circumstances, it may be easier to use the classic motion tween format. The portfolio project demonstrates this scenario. Most animations will use the new motion tween format, but the rotating viewing wheel will use classic motion tweens so keyframe-specific easing can be employed.

Adding a stock easing effect to a classic motion tween is very much like adjusting the very properties you tweened. Click in the first keyframe of the tween and, in the Properties panel, adjust the Ease value in the Tweening section (Figure 5-44). The value ranges from −100 (maximum ease in), to 0 (no easing), to 100 (maximum ease out). For more information about the difference between easing in and out, including sample motion paths, see the Easing section, earlier in this chapter. Sample files called classic_tween_ease_in.fla and classic_tween_ease_out.fla have been provided for you to compare against your own efforts.

Figure 5-44. Applying easing to a classic tween in the Properties panel

Once you’ve had some experience with the differences between easing in and out, try to add another classic motion tween sequence, perhaps by practicing the Copy and Paste Frames processes discussed earlier in this chapter. Save a copy of your basic classic tween file first, as you’ll want to work with the simple version when learning about motion paths near the end of this chapter. After saving a copy, apply different easing effects to each keyframe, and you’ll be prepared for your work on the portfolio project later on. Compare your tests to the classic_tween_ease_in_out.fla source file for an example of multiple keyframe easing.

Although applying stock easing effects to classic motion tweens is as straightforward as changing property values, sometimes a simple ease isn’t enough. To achieve other easing effects, such as an effect that simulates bouncing, you need to draw a custom easing curve.

Although not as powerful as the new custom easing curves, you may prefer to use classic easing because of its per-keyframe application benefit. To create a custom easing curve, click the pencil icon to the right of the easing value, shown in Figure 5-44. This will open the Custom Ease In / Ease Out editor shown in Figure 5-45.

Figure 5-45. Drawing a custom classic easing curve in the easing editor via the Properties panel

Editing the custom classic easing curve is similar to creating an easing preset in the Motion Editor panel, including the values on the x- and y-axes of the graph, and the Bézier curve editing features. However, there is one limitation with the legacy format. Classic easing curves must end at 100% complete. That is, just like the Motion Editor easing curves, the first keyframe is in the lower-left corner of the graph at 0% complete and frame 1. You can add additional property keyframes, but the last keyframe must be anchored to the upper-right corner of the graph, at the end of the tween and 100% complete.

Another point worthy of discussion is that you can apply different easing curves to each property in the classic easing editor, just as you can in the Motion Editor. If you disable the Use one setting for all properties feature at the top of the editor, the adjacent menu offers the chance to create a unique curve for position, rotation, scale, color, and filters. Switching among these properties in the menu will also switch among any associated custom curves created.

The final significant difference between classic tweens and motion tweens applies to the use of a motion guide. It is not possible to simply paste a motion guide into a classic tween. Instead, you must paste it into a dedicated motion guide layer type, shown in Figure 5-46.

Figure 5-46. Transforming a layer with a stroke into a classic motion guide layer

If you scrub through your Timeline, you’ll see that the movie clip now follows the path you drew. Compare your work to the classic_tween_motion_guide.fla source file.

As the final experiment of the chapter, before working on the portfolio project, set up your tween so the animated object orients itself along the direction of the motion guide. This is ideal for elements that need to appear to be pointing in the direction in which they are traveling.

For example, think of a plane flying across the Stage and performing a 360-degree loop as it moves from left to right. Without orienting the object to the path, it would begin to fly right, appear to float upward parallel to the ground as it entered the loop, then fly backward at the top of the loop, and finally fall out of the loop and continue to fly to the right. On the other hand, if you oriented the plane to your path, the plane would appear more correctly to fly straight up, point left as it flew upside down, dive downward, and then swoop out of the loop and on its way.

To achieve the best results when trying this feature, edit your movie clip so it has a clear, correct orientation. For example, draw an arrow that will appear to point in a specific direction. If you prefer, continue with the classic_tween_motion_guide.fla source file. Then click in the first keyframe of the tween and, in the Tweening section of the Properties panel, enable the Orient to path option. Your movie clip should now follow your path with the correct orientation throughout.

You can also apply the Orient to path option to the Flash CS4 Professional version of motion tweens. After the motion tween is complete, select it in the Timeline and enable the feature in the Rotation section of the Properties panel.

With the portfolio navigation fresh in your mind, it’s a good idea to start building your main file with the repeating structure for each portfolio section.

Beyond screen-specific assets, the project includes interface elements used throughout the portfolio. In this Project Progress segment, you’ll define frame spans for these elements and animate them with two kinds of tweens.

Earlier, you added a stop action to the content frame of each portfolio section and a script at the end of each section that tells the playhead to jump to a frame specified in the nextSection variable. Now you must add a script that will enable the buttons to populate that destination variable and play through the current section on to the next.

You will learn more about ActionScript, including more detail about this very script, in the next chapter. However, this code is included here because it’s required to successfully test your tweens. Scrubbing through the Timeline is adequate, but it can’t effectively show easing and doesn’t give you an accurate picture of how your tweens look. By testing your file, you can see if any tweaks are required and adjust any tween values as needed.

Rather than just including this script as is, a brief explanation will follow. However, expect to learn and retain more about this code in the next chapter. For now, type this script into frame 99 of the actions layer. It’s fine if you want to wait to look over the script after reading Chapter 6, but even a vague understanding of how this code works may make it easier to grasp when covering more detail later:

1 var nextSection:String;
2
3 navigation.home.addEventListener(MouseEvent.CLICK, onNavigate);
4 navigation.gallery.addEventListener(MouseEvent.CLICK, onNavigate);
5 navigation.lab.addEventListener(MouseEvent.CLICK, onNavigate);
6 navigation.help.addEventListener(MouseEvent.CLICK, onNavigate);
7
8 function onNavigate(evt:MouseEvent):void {
9     nextSection = evt.target.name;
10    play();
11 }

Here’s a cursory look at how this script functions, with a more detailed explanation to follow in Chapter 6. Line 1 creates the variable that will hold the desired portfolio destination each time the user clicks a button.

Lines 3 through 6 assign specific code (lines 8 through 11) to each button. The buttons are named home, gallery, lab, and help, and all reside inside the navigation movie clip. The code is executed when the user clicks on the button. The click event includes both actions of pressing the mouse button down (mouse down) and releasing it (mouse up).

Finally, after each user interaction, the script can tell which button was chosen because it was the target of the user’s mouse click. The name of that button is put into the destination variable and the playhead is set in motion.

When the playhead reaches the end of the section, the frame script you created earlier sends the playhead to the frame label that has the same name as the clicked button.

You’ve put a lot of effort into the project this chapter, so it’s time to test your work. You should now be able to click any of the four navigation buttons and start the wheel rotating. After the motion blur fades in and out, the wheel should stop rotating on the desired frame.

So far, you’ve only created content for the Home and Lab sections, and haven’t yet powered the Lab section with ActionScript. However, if you can successfully revisit the Home and Lab screens, your script is likely working. A further indication of success, when visiting the empty Gallery and Help screens, is that the rotation of the wheel changes with each section. Between the four sections, and including the art visible between frames as the wheel rotates, you should see the entire wheel.

Again, if you want to, compare your work to the online portfolio at the companion website, or to the portfolio_06_02.fla source file.

The next chapter will serve primarily as a primer for the ActionScript language, so no new work will be added to the portfolio project. However, the chapter will not be void of project progress. You will review the ActionScript you’ve learned so far and revisit the button navigation script you just added, as well as the script used in the Home screen assets you created in Chapter 1 and Chapter 2.