Using Tweens for Animation


Tweening is one of the most powerful Flash animation features. Whether you are creating character animation or motion graphics, or even the most basic button effect, you will find tweening indispensable. Once you have planned your animation and created the initial artwork, you can use Flash tweening to generate the transitional images between one keyframe and another. This is the tool that makes it possible for artists to quickly generate smooth, precise animation — without spending half their lives manually filling in unique graphics on every frame. Instead, you can establish a beginning point and an end point, and only make drawings, or key art, for each of those points. Then you let Flash interpolate and render, or tween, the changes between the keyframes. Tweening can be used to render changes in size, shape, color, position, and rotation. Unlike Timeline Effects, manual tweens are limited only by your imagination — anything is possible with the keyframed artwork that you set up.

Tweening also minimizes file size because you don't have to include unique information on each frame in the animation. Because you define the contents of the frames at the beginning and end point (keyframes), Flash has to save only those graphics, plus the values needed to make the changes on the frames in between. Basically, Flash has to store only the difference between the beginning frame and the endframe so that the images on the frames in between can be calculated and rendered.

The other significant benefit of using tweens to generate an animated sequence is that if you want to make a change, you only need to modify the beginning or end point and Flash will instantly update the images in between. Two kinds of tweens can be created in Flash — shape tweens and Motion tweens — each applied for specific purposes. Both tween types are represented on the Timeline by a colored fill with a continuous arrow on the span between the start keyframe and the end keyframe of the animation. Shape tweens are represented by a green fill and Motion tweens by a blue fill. If a tween is incomplete, either because the wrong tween type has been applied or because information on one of the defining keyframes is missing, the continuous arrow will be replaced with a dashed line.

The type of tween that you want to apply is selected from the Tween menu in the Property inspector. As shown in Figure 11-7, the options available for controlling the playback of the final tween depend on the type of tween selected.

image from book
Figure 11-7: When you specify a tween type in the Property inspector, the relevant options for controlling the tween appear.

Shape Tweening

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 only shape tween primitive 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.

On the CD-ROM 

The smileTween.fla example file is located on the CD-ROM in the shapeTween sub-folder of the ch11 folder.

Figure 11-8 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.

image from book
Figure 11-8: After a dot is drawn on keyframe 1 and an arc is drawn on keyframe 5, a Shape tween is applied to render the shapes on the frames in the span between — creating an animation.

Here are the steps for creating a Shape tween:

  1. Select the frame in which you'd like to start the animation. If it's not already a keyframe, convert it to one (F6).

  2. Then draw your starting image on the Stage (see Figure 11-9). Always remember that Shape tweening only works with shapes or Drawing Objects — not groups, symbols, or editable text. To Shape tween these items, you first need to break them into shapes (Modify ð Break Apart).

  3. Next, insert a keyframe (F6) on the Timeline where you want the animation to end, and modify the artwork to define the end point of the animation (see Figure 11-10). If you want to create the artwork in the final frame from scratch, then insert a blank keyframe (F7) instead of a keyframe that includes the artwork from the first keyframe.

  4. Select the keyframe at the beginning of the span that you want to interpolate with a Shape tween. Remember that results will be easiest to control and modify if you tween only one shape per layer.

  5. Open the Property inspector if it is not already available by choosing Window ð Properties from the application menu (Ctrl+F3 or z+F3).

  6. Choose Shape from the Tween drop-down menu. The span between the start keyframe and the end keyframe of your animation will display with a green fill and an arrow to indicate that a Shape tween has been applied, as shown in Figure 11-11.

  7. As shown previously in Figure 11-7, the (expanded) Property inspector panel updates to present two options for modifying the Shape tween:

    • Set the Ease slider if you want to vary the rate or speed of the animation. This is useful if you want to create the effect of acceleration or deceleration. If you want your animation to start slowly and progressively speed up, push the slider down to add an Ease In. This will cause In to display adjacent to the slider and will update the value field with a negative number (between -1 and -100). For an animation that starts fast and progressively slows, push the slider up to add an Ease Out. The word Out will appear and a positive number (between 1 and 100) will display in the value field. If you want the rate of your animation to stay constant, leave the slider in the middle (0). You can also type any number between -100 and 100 directly into the Ease value field.

    Note 

    We added an Ease In (-100) to the smileTween sample file to make the animation look a little more realistic.

    • Select a Blend type. Distributive blending creates smoother interpolated shapes, whereas Angular blending creates interpolated shapes that preserve corners and straight lines. If your end points contain shapes with corners and lines, select Angular blending. Otherwise, use the default Distributive blending.

  8. Preview the animation by choosing Control ð Play (Enter) from the application menu, or use Control ð Test Movie (Ctrl+Enter or z+Return) to publish an .swf file.

image from book
Figure 11-9: The contents of the first keyframe in your span will define the starting point for the Shape tween.

image from book
Figure 11-10: The contents of the final keyframe after your span will define the ending point for the Shape tween.

image from book
Figure 11-11: On the first keyframe, specify Shape as the tween type with the Property inspector Tween menu.

Tip 

If the overall speed of the tween seems too fast or too slow, you can extend or reduce the length of the span. The fastest way to increase the span on all visible layers is to move the Playhead to the center of the span, make sure none of the frames are selected on any of the layers and that the layers are all unlocked, then use the F5 key to add more frames. We added five frames to the overall span of the smileTween sample to slow the animation down.

Note 

If you accidentally assign the wrong tween type to the start keyframe of your animation or if you delete the artwork on the start or the end keyframes, you will notice that the arrow icon on the Timeline is replaced with a dashed line, and a yellow warning icon appears in the Property inspector. This indicates that the tween is broken or incomplete. To restore the tween, it is usually best to select the first keyframe and choose None from the Tween menu in the Property inspector. Then check your Timeline and your artwork to make sure that you have shapes on both a beginning and an end keyframe for Flash to interpolate. When you think all the elements are in place, select the first keyframe and choose Shape from the Tween menu in the Property inspector to reapply the tween.

Adding Shape Hints

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 our example, we have added a keyframe at the end of the span with the eyes of the character changed from circles to stars. We want the animation to be a smooth transition from the rough circle to the star shape in each eye. As shown in Figure 11-12, a basic Shape tween results in some odd inbetween shapes.

image from book
Figure 11-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 inbetween 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 inbetween 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 11-12 with Figure 11-13 to see the improvement that Shape Hints can make in the precision of inbetween shapes.

image from book
Figure 11-13: Placing shapes on individual layers and adding Shape Hints to control the way that Flash renders inbetween shapes improves the precision of Shape tweens.

On the CD-ROM 

To compare the difference made by adding Shape Hints to the animation, open eyeTween. fla (or .swf) and eyeTweenHints.fla (or .swf) from the shapeHints subfolder in the ch11 folder on the CD-ROM.

Caution 

When you are copying and pasting a span of frames into a new Timeline — such as from the Main Timeline to a Movie Clip timeline — Flash disconnects the Shape Hints from the shape. When pasting is confined to a single timeline, hints stay as you placed them.

Shape Hints can only be added 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:

  1. Begin by selecting a shape on the starting keyframe and choosing Modify ð Shape ð Add Shape Hint from the application menu (Shift+Ctrl+H or Shift+z+H).

  2. Flash places a small red circle, labeled with a letter a, onto the Stage — this is your first Shape Hint. Additional Hints can be added and they will also be identified alphabetically.

  3. To specify a point on your starting shape, use the Selection tool to select and move the first Hint (a) — position it on an area of the shape (for example, a corner or a curve) that you want to match up with an area on the final shape, as shown in Figure 11-14.

  4. When you move the Playhead to the final keyframe of your Shape tween, you will see a lettered Hint that matches the one that was placed on the starting keyframe. Position this Hint with the Arrow key so that it marks the area of the final shape that should match up with the area specified on the starting shape. The Hint will only be recognized by Flash if it attaches correctly to the artwork. You will know that your Hints are positioned properly when their fill color changes from red to green on the final keyframe (see Figure 11-15) and from red to yellow on the starting keyframe.

  5. Preview the new inbetween shapes by scrubbing the Timeline (dragging the Playhead with the Selection tool to review frames in the tweened sequence).

  6. Continue to add or reposition Hints until Flash renders the inbetween shapes correctly.

  7. To remove an individual Hint, drag it off the Stage with the Selection tool. To remove all Hints from an active keyframe, choose Modify ð Shape ð Remove All Hints from the application menu. A shortcut is to right-click (Control+click on Mac) any of the Hints to invoke the contextual menu, as shown in Figure 11-16, for these and other options as you are working.

image from book
Figure 11-14: Shape Hints positioned on a shape in the starting keyframe for a Shape tween

image from book
Figure 11-15: Shape Hints aligned to points on a shape in the ending keyframe of the tween

image from book
Figure 11-16: The contextual menu offers some options for working with Shape Hints.

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 ð Show Shape Hints (Alt+Ctrl+H or Option+z+H) — this option is only available if the layer and keyframe that contain the Hints are currently active.

Motion Tweening

Motion tweening is useful for animating groups, symbols, Drawing Objects, and editable text; however, it cannot be used to animate primitive shapes. As the name suggests, Motion tweening is applied to move an item from one place to another, but it's capable of much more. Motion tweening can also be used to animate the scale, skew, or rotation of items; as well as the color and transparency of a symbol.

Note 

Motion tweening can only be applied to one item per layer — use multiple layers to motion tween multiple items in the same span of the Timeline.

New Feature 

The little Object Drawing (J) toggle in the options area of the Tools panel will make your production process more streamlined if you are drawing items to animate. Objects can be Shape tweened or Motion tweened without being converted into symbols or broken apart into raw shapes. This new Flash 8 art type is more flexible than standard symbol types or 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, then choose Modify ð Combine Objects ð Union from the application menu.

The pacing of a Motion tweened sequence can be modified at any point — simply insert a keyframe for each phase of the animation. In addition to the scale and Color effect settings applied directly to the symbol instance, you can adjust the settings in the Property inspector that control Easing (or pace of interpolation for the tween) and rotation on each keyframe of a Motion tween. So, if you use a tween to move a symbol from frame 1 to frame 10 and stop the tween on frame 11, you can have the symbol sit still for 10 frames (no tween), and then start a new tween (of this same symbol on the same layer) with rotation or an alpha fade from frames 20 to 30. The possibilities are almost endless.

New Feature 

Flash 8 includes a new Edit button in the Properties panel that invokes a dialog box for controlling Motion tweens with velocity curves. This feature takes the concept of Easing to a new level by enabling you to adjust the speed of an animation along a curved line that covers the entire span of a tween. With velocity curves, you have frame-by-frame control of your animation without adding extra keyframes to a tween. You can also use curves to control the speed of interpolation for individual characteristics of a tween such as color and Filters, as we show 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 inbetweens you need in a sequence.

On the CD-ROM 

Create your own file from scratch, or open motionTween_start.fla from the MotionTween subfolder of the ch11 folder on the CD-ROM. To view the final animation, open motionTween_final.fla (or .swf) from the same location.

Here's how to create a Motion tween:

  1. Select the frame in which you'd like to start your animation. If it's not already a keyframe, make it one by choosing Insert ð Timeline ð Keyframe (F6).

  2. Draw or import the image that you want to tween. Just remember that you can only Motion tween groups, symbols (including imported bitmaps — which are, by default, symbols), Objects, and editable text (a text block).

    • If you are using a raw shape, group it, convert it to an Object, or turn it into a symbol.

    • If you already have the element as a symbol in your current Library, you can just drag an instance from the Library onto the Stage. Place each symbol that you want to animate on a separate layer, as shown in Figure 11-17.

    • If you are using editable text or an Object, you don't have to do anything — it's already an element that can be Motion tweened.

  3. Select the frame where you want the tween to end and make it a keyframe by choosing Insert ð Timeline ð Keyframe (F6).

  4. Make any modifications to the symbols that you want animated on the beginning and end keyframes, as shown in Figure 11-18. Remember that you can move tweened elements, as well as scale, skew, and rotate them.

    Tip 

    If you're working with symbols, you can also use the Color Effect menu to modify Tint, Alpha, and Brightness. The new Flash 8 Filters are great for adding effects to tweened text or symbols.

    Caution 

    Alpha effects and intensive Filters in Motion tweens will slow most fps (frames per second) settings. The only way to make sure that the fps is honored, no matter how intensive the animation might be, is to use a stream sync sound that loops over the course of any critical fps playback. For more on the relationship between streaming sounds and fps rate, see Chapter 15, "Adding Sound."

  5. There are three different ways that you can apply a basic Motion tween to a span between two keyframes:

    • Select the beginning keyframe, and then open the Property inspector (Window ð Properties) and use the Tween menu to specify a Motion tween.

    • Right-click (Control+click on Mac) any frame between the two keyframes and select Create Motion Tween from the contextual menu.

    • Select the beginning keyframe or any frame in the span and choose Insert ð Timeline ð Create Motion Tween from the application menu.

    image from book
    Read This Before Using Create Motion Tween

    If you have not converted your artwork into symbols before using the Create Motion Tween command, Flash automatically converts any item in the selected keyframe into a symbol with the generic name of Tween followed by a number (Tween1, Tween2). Although this might seem like a handy shortcut, it actually creates a mess that you will need to clean up later.

    Because the symbols are auto-created and named, you will not have the same control over how your Library is organized and how your artwork is optimized. It is much better to analyze the most efficient way to convert your artwork into symbols and to reuse those symbols as much as possible than to allow Flash to make generic symbols that may be redundant. As with all elements in your Flash project, it is also much more useful to assign meaningful names to your symbols that will help you navigate the project when you need to make edits.

    Manually creating and naming your own symbols before assigning a tween to specific keyframes helps avoid redundant or confusing items being added to your document (.fla) Library. If you make a habit of using the Property inspector to assign tweens, you will always be reminded if you haven't converted an element into a symbol.

    image from book

  6. Select the first keyframe of your Motion tween and use the options in the Property inspector to add more control to the final tween, as shown in Figure 11-19. We applied an Ease Out value of 100 to the sample motionTween file to make the eye motion look more natural.

    • Ease: Ease settings control the interpolation pattern of a tween. A default setting of 0 will interpolate the changes in the motion tween at a consistent rate from beginning to end. Increasing the Ease value (within a range of 1 to 100) will make the change start more quickly then gradually slow down — creating an Ease Out. Decreasing the Ease value (within a range of -1 to -100) will make the change start more slowly and gradually speed up — creating an Ease In. Easing in works well to build anticipation, and Easing out works well to make items settle more naturally at the end of a motion.

      New Feature 

      As you try different Ease values, you may realize that you'd like your tween to Ease In and Ease Out, but still move quickly in the middle. In older versions of Flash, this was possible in timeline animation, but it required adding additional keyframes and adjusting the Ease values on separate keyframes until the final motion looked right. To create a natural looking tween that Eased in and Eased out required at least six keyframes! Luckily, Flash 8 solves this problem with the Edit panel, providing custom easing control that uses a visual curve to map the rate of interpolation in a tween. Using curves to adjust easing anywhere along a tween rather than applying fixed values only on keyframes opens up a whole range of creative possibilities and makes the process a lot more fun.

    • Rotate: You can rotate tweened items using this option. Select a rotation type from the drop-down menu and then type the number of rotations in the value field. Automatic rotation rotates your item in the direction that requires the least amount of motion, while Clockwise and Counterclockwise rotate your item in the indicated direction. In both cases, the rotation will be completed as many times as you specify in the value field. If you type 0 in the entry field, or select None from the drop-down menu, no rotation will occur (other than rotation that has been applied to the symbol with the Transform panel).

    • Orient to path: When your item follows a path (or Motion guide), turning this selection on forces the item to orient its movement to that path. We discuss paths in the next chapter.

    • Sync: When this setting is activated on a tween, you can replace the symbol in the first keyframe and it will automatically be updated in the remaining frames and in any other synchronized keyframes that follow. This setting is also important if your animation is contained within a Graphic symbol. Flash recalculates the number of frames in a tween on a Graphic symbol's Timeline so that it matches the number of frames available on the Main Timeline. Sync ensures that your animation loops properly when the animated symbol is placed in the Main Timeline, even if the frame sequence in the Graphic symbol is not an even multiple of the number of frames assigned to the symbol in the Main Timeline.

      Tip 

      You can tell if a tweened sequence is synchronized by observing that the vertical lines separating the keyframes from the span are not visible when this setting is applied.

    • Snap: This option snaps your animated item into alignment with a Motion guide. We discuss Motion guides in Chapter 12, "Applying Filters and Effects."

  7. Other elements can be Motion tweened on the same span of the Timeline, as long as they are on separate layers (see Figure 11-20). You can interpolate different features on each tween and also apply any control settings that you wish — Flash reads and renders the Motion tween on each layer independently.

image from book
Figure 11-17: The artwork on the first keyframe of the span you want to Motion tween should be a text box, a group, an Object, or a symbol on its own layer — anything except a raw shape will work.

image from book
Figure 11-18: Modify the features of the symbol on the end keyframe that you want to interpolate with a Motion tween.

image from book
Figure 11-19: Several options for Motion tweens are available in the Property inspector.

image from book
Figure 11-20: Multiple items can be animated simultaneously by creating tweens on individual layers.

Note 

As with Shape tweens, the arrow icon on the Timeline span of your Motion tween will be replaced with a dashed line if the tween is broken or incomplete. A common mistake with Motion tweens is to try to animate multiple elements on the same layer. To restore the tween, it is usually best to select the first keyframe and choose None from the Tween menu in the Property inspector. Then check your Timeline and your artwork to make sure that you have only a single group, Object, or symbol (not a shape) on a layer with both a beginning and an end keyframe for Flash to interpolate. When you think all the elements are in place, select the first keyframe and chose Motion from the Tween menu in the Property inspector to reapply the tween.

Adjusting Tweens with Custom Easing

For more precise control over the pacing and appearance of a Motion tween, use the Edit button in the Property inspector to invoke the new Custom Easing controls. (See Figure 11-21.) By default, the Use one setting for all properties check box is selected and the Property menu (shown in Figure 11-21) is grayed out. Using one setting for all properties applies one curve to all the features of your tween — this is consistent with the results you get from standard easing where the color, shape, position, and any other differences between the starting keyframe and the ending keyframe of your tween will be interpolated at the same rate. If you deselect the check box, it is possible to apply individual curves to the various properties of the tweened element — we'll discuss these options in the next section.

image from book
Figure 11-21: Custom Easing enables curve-based control of Motion tweened elements. The default diagonal line creates an even transformation across the span of a tween by mapping the percentage of change consistently to the number of elapsed frames.

When you are first using Custom Easing, you might find it less confusing to experiment with the default setting left on. Even one curve can get pretty complicated as you add control points and adjust the curve handles — it will be easier to see how these changes affect the animation if you work with one combined curve rather than several individual curves.

Tip 

If you set Easing with the value field or the slider control in the main Property inspector and then click the Edit button, the value of Ease In or Ease Out that you apply will be rendered in the Custom Easing curve. This is a good way to get an idea of how the visual curve control relates to the standard easing values.

Figure 11-22 illustrates an Ease In and an Ease Out translated into individual curves. The vertical axis is marked to track the transformation of the tween as a percentage of the total span, while the horizontal axis is marked to track the progress of the tween on a frame-by-frame basis. If you want an item to Ease In and then Ease Out within the same tween, you'll have to use the Custom Easing controls to combine these two curves into a curve that changes direction.

image from book
Figure 11-22: An Ease value of -100 (In) set in the Property inspector translates to a gently sloped or concave line in the Custom Easing curve (top). An Ease value of 100 (Out) translates as a gently rounded or convex line (bottom).

Adjusting anchor points along the curved line in the grid created by the intersection of the percent complete axis and the frames elapsed axis enable you to "shift time" — want a transformation to be 75 percent finished by the time a 20-frame tween gets to frame 10? Simply add an anchor point to your curve at the Frame 10 marker and drag the anchor point upward to force the curve to cross the 75% line (instead of the 50% line that it was at by default).

Here are the steps to go from a standard Ease In to a combined Ease In/Ease Out using the Custom Easing Edit option:

On the CD-ROM 

Create your own file with a motion tween on the Main Timeline, or open customEasing_start.fla from the MotionTween subfolder of the ch11 folder on the CD-ROM. To view the final animation, open customEasing_final.fla (or .swf) from the same location.

  1. Open the sample file and select the first keyframe of the motion tween with the Selection tool.

  2. In the Property inspector, set the Ease value to -100 (In) and then click the Edit button to translate the Ease (In) setting to a curve. The line should look like the first curve in Figure 11-22 — a smooth concave line.

    Caution 

    A little bug keeps the easing values set in the Property inspector from being translated to the Custom curve dialog box, unless you bump the values before clicking the Edit button by clicking in the Ease value field and pressing Return (or Enter), or moving the slider to a different value before setting it back to -100. This workaround is only necessary if you want to translate an existing easing value (from a previous edit session) to a custom curve. If during a single edit session, you use the Property inspector to enter a new easing value, and then click the Edit button, Flash will read these values and map them to a custom curve.

  3. Click the start anchor point of the line (lower-left) to invoke the edit handle. Drag the edit handle along the bottom of the graph (the 0% tween line) until the handle extends to the frame 10 marker. Your curve should now look like Figure 11-23.

  4. Use the play/stop button in the lower-left corner of the Edit window to preview the custom tween settings — you might have to drag the Edit window out of the way so you can see the animation on your artwork in the Document window. At this point, the animation does have an Ease In on the animation, but it isn't anything special yet.

  5. Drag the edit handle on the end anchor point (top-right) downward along the right edge (the frame 20 marker) to adjust the curve until it looks similar to the curve in Figure 11-24 — a reverse curve. Click the play button again to preview your results. You should now have a gradual Ease In and Ease Out within the span of the original tween.

image from book
Figure 11-23: An Ease In curve with the start anchor handle extended along the 0% axis

image from book
Figure 11-24: You can drag the edit handles on the start and end anchor points of the curve to change the direction and the height of the curve.

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

  • Diagonal lines continue in an even motion: The more closely the percentage of change matches the progression in frames, the more even the transformation will be.

  • Gradual curves can add smooth acceleration or deceleration: A reverse curve that creates gradual slopes at the beginning and end as well as a steeper pitch in the middle will create an EaseIn/Ease Out effect.

  • Bumps in a curve can add a stuttering motion: For example, if an anchor point at the frame 10 marker is set at the 50% change line and you add an anchor point at the frame 15 marker that is set to pull the curve back down to the 25% tween line, you will cause the tween to progress and then reverse and then progress again at a quicker rate to reach 100% transformation by the last frame of the tween.

  • Flat (horizontal) lines add pauses: The frames continue, but the percentage of change is forced to plateau or hold at a specific point of transformation.

  • Vertical lines create quick jumps: The percentage of change has to increase, but it doesn't have any frames to gradually make the change.

Using Multiple Custom Easing Curves

Now that you've had a chance to try working with a combined Custom Easing curve, you are probably curious about what happens when you deselect the default check box in the Edit panel. The Property menu (shown in Figure 11-21) makes it possible to edit individual tween curves to control the various properties or characteristics of your tweened item.

The default diagonal curve is loaded for each available property so that Flash can do it's best to render the changes at an even rate from the first keyframe to the last keyframe in your tween.

Caution 

Deselecting the default Use one setting for all properties check box resets all curves to the standard diagonal line. If you have spent time working on a custom easing curve that is being applied to all the properties of your tween (the default setting) and you decide to deselect the Use one setting for all properties check box, be sure to use the Copy command (Ctrl+C or z+C) to save your curve in the buffer so that you can Paste it (Ctrl+V or z+V) back in to the curve view for the specific property you want to control.

You can modify the curves of any of these properties should you want them to be rendered at a different pace to create a custom tween effect:

  • Position: This controls the pace at which an item moves from one spot to another in your tween. It is possible to reverse an item's movement but it will always end up in the final keyframed position; so it doesn't really work to create true bounce effects but it can be used to add overlapping motion.

  • Rotation: If you have entered any rotation settings in the Property inspector, they can be paced by creating a custom easing curve. This curve will also control the rate of rotation if there is any difference in orientation between an item in the first keyframe and the last keyframe of a tween.

  • Scale: Any differences in size between the item in the first keyframe and the last keyframe of a tween can be interpolated at different rates. You can adjust the curves to create various patterns of scaling. Unfortunately, adjusting the custom easing curve between only two keyframes is not sufficient to create anticipation in an animated motion.

  • Color: You can control any color changes from one keyframe to the next in a tween by shifting the custom easing curve. You can make color changes using the Advanced Color settings in the Property inspector or by using Filters.

  • Filters: If Filters have been applied to create changes in an item's appearance in the span of a tween, the pattern of change can be adjusted with custom easing.

In most cases, you will only need to create custom curves for one or two properties to achieve a very polished final result. The possibilities can be a little overwhelming at first and the flexibility of custom easing curves might work against you — as you modify the curves in myriad ways, it can be difficult to keep track of which curves work best for specific effects. Fortunately, there are a few tricks that can help as you experiment:

  • Use the Property inspector controls first because these are a little less complicated. The settings you apply with the Property inspector will be translated into curves that you can use as a starting point when you launch the Custom Easing window.

  • Copy and Paste curves from one property to another if you have created a custom easing setting that you like and you want another property to progress in the same pattern. Simply use the Copy (Ctrl+C or z+C) command while viewing your edited curve, then use the Property menu to change views, and then apply the Paste (Ctrl+V or z+V) command to instantly shift the curve to match your custom settings. This technique also works to copy a custom easing curve from one tween to another.

  • If a curve gets too complicated or you change your mind, just press the Reset button to get back to the default curve.

As with anything else, it pays to start simple. Experiment with changing the easing curve of one property and if you get something you like, save it 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 rather than having to re-create a curve from scratch each time.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net