Tweening Flash

Tweening is great for a couple of reasons. Tweened animation is a huge time-saver because it doesn’t require that you draw out your animation frame-by-frame. Instead, you establish endpoints and make drawings for each of those end points. Then you let Flash interpolate, or tween, the changes between them. Tweening also minimizes file size because you do not have to save the contents for each frame in the animation.

Because you only define the contents of the frames at each end point, Flash only has to save those contents, plus the values for the changes between the end points. Two kinds of tweens can be created in Flash Shape Tweens and Motion Tweens each with its own unique characteristics.

The Frames Panel
To work with tweens, you need to become familiar with the Frames Panel, shown below, which is used for choosing the kind of tween and for assigning the properties for each tween. Additionally, the Frames Panel is used for adding labels and comments to keyframes, which is most often associated with ActionScripting operations.

The Frames Panel, in three configurations: as a Label maker (A), when used for assigning properties for a Shape Tween (B), and when assigning properties for a Motion Tween (C).

The Frames Panel, in three configurations

Shape tweening
Shape tweening is useful for morphing basic shapes between end points. Flash can only shape tween shapes, so don’t even try to shape tween a group, symbol, or editable text it won’t work. You can shape tween multiple shapes on a layer, but for the sake of organization it’s clearer (and advised!) that each shape be put on its own layer. This makes it much easier to return to the animation later and to make changes, because it can be nearly impossible to figure out what’s going on if a number of tweens share the same layer. Shape tweening also enables you to tween colors.

You can see the progression across seven frames because onion skinning has been activated below shows. Although this appears similar to the frame-by-frame example as shown below, the two animations play quite differently. 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, make it one.
  2. Next, before drawing anything, add a second keyframe at the point on the timeline where you want the tween to complete.
  3. Shape tweening enables you to accomplish easy morphing of basic shapes.

    Shape tweening enables you to accomplish easy morphing of basic shapes.

  4. Now reselect the first keyframe, and then draw your starting image on the stage. Always remember that shape tweening only works with shapesnot groups, symbols, or editable text. To shape tween such an element, you first need to break it apart into shapes (Modify➪Break Apart).
  5. Next, select the second keyframe and draw your ending image on the stage.
  6. Open the Frames Panel by choosing Window➪Panels➪Frames. You can also select a frame between the end points and right-click to invoke the contextual menu. Choose Panels from the menu and then choose Frames from the ensuing submenu.
  7. Choose Shape from the Tweening drop-down menu. The panel updates to present several options for modifying the shape tween, as shown below:
    • Set the Easing slider if necessary. Easing determines the rate of your animation from start to finish. 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. This will cause In to display adjacent to the slider and will also cause a negative number to display in the numeric readout. For an animation that starts out fast, and then progressively slows, push the slider up, causing it to display Out and a positive number in the readout. If you want the rate of your animation to stay constant, leave the slider in the middle. You can also type in a number for the Easing value (–100 to 100).
    • Select a Blend Type. Distributive blending creates smoother interpolated shapes, whereas Angular blending creates interpolated shapes with corners and straight lines. If your end points contain shapes with corners and lines, select Angular blending. Otherwise, select Distributive blending, which is the default.
  8. Test the animation by selecting Control➪Play (Enter) from the menu.

Shape hints
Shape hints give you more control over complex Shape Tweens. They link corresponding points on each shape at both end points of the Shape Tween. The best way to see why shape hints are so useful is to actually work with them.

Shape hints are small, circled letters at the end points of a Shape Tween.

Shape hints are small, circled letters at the end points of a Shape Tween.

Using shape hints in a Shape Tween
To use shape hints, follow these steps:

  1. Create a more complex Shape Tween using the method described previously one that would not succeed without a few hints. For example, satisfactorily tweening from the shape of one numeral to another would usually require shape hints.
  2. Select the starting frame of your Shape Tween (you can’t initiate shape hints from the ending frame). Use Modify➪Transform➪Add Shape Hint, or press Ctrl/Command+Shift+H to add a shape hint. At first, theshape hint will appear as a red circle with a letter inside of it (the letters start with a and go to z) as shown in Figure above.
  3. Move the shape hint to where it’s needed try to visualize points that must correspond from shape to shape over the course of the tween.
  4. Now go to the last frame of your tween. You’ll see another small red circle with the same letter as your starting shape hint. Move this shape hint to the corresponding point to which the first shape hint will move during the Shape Tween. After you’ve placed the second hint, the initiating hint turns yellow and the final hint turns green.
  5. Play your movie (Control➪Play) to see how the shape hint affects the tweening.
  6. Continue adding shape hints until you’re satisfied with the results. Remember to match shape hints at the start and end frames a goes with a, b with b, and so on.
  7. To get a better idea of just what shape hints do, take a look at the sample in the shape hints folder of the ch11 folder on the CD-ROM. A good experiment is to compare the hinted example to the same example with all hints removed. You just might be amazed!

  8. After you’ve added the first hint, you can simply return to the initiating frame and right-click/Control+click the hint to invoke a contextual menu with options for further shape hinting, including Add Hint, Remove Hint, Remove All Hints, and Show Hints which is a toggle that’s on by default. When you want to see the shape hints again, just use this toggle or View➪Show Shape Hints. To remove all the shape hints, you can also use Modify➪Transform➪ Remove All Hints.

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

A motion tweened item can be started and stopped as much as you want simply insert a keyframe for each change of pace. Using the easing controls can further finesse this pacing control of Motion Tweens. Furthermore, the kind of tween can be changed; for example, the symbol can be tweened to rotate in the opposite direction. 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, and then start a new tween (of this same symbol on same layer) from frames 20 to 30.

The possibilities are almost endless. A Motion Tween. Is more efficient 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 or shape tweening to accomplish what you have in mind.

The extent of a Motion Tween is revealed here with Onion Skin outlines.

The extent of a Motion Tween is revealed here with Onion Skin outlines

Create a Motion Tween
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 selecting Insert➪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), and editable text (a text block).
    • If you are using an image, group it or turn it into a symbol.
    • If you already have the image as a symbol in your movie’s Library, you can just drag it from the Library onto the stage.
    • If you are using editable text, you don’t have to do anything it’s already an item.
  3. Select the frame where you want the tween to end and make it a keyframe by selecting Insert➪Keyframe (F6).
  4. Position your images in the two end points. Remember that you can move tweened elements, as well as scale, skew, and rotate them. If your end point images are symbols, you can also use the Effects Panel to apply color effects to them.
  5. Right-click/Control+click a frame between your two end points and select Create Motion Tween. Test your animation by choosing Control➪Test Movie.
  6. Open the Frames Panel by choosing Window➪Panels➪Frames. You can also select a frame between the end points and right-click to invoke the contextual menu. Choose Panels from the menu and then choose Frames from the ensuing submenu.
  7. Choose Motion to make it a Motion Tween. The animation involves both diminishing scale and deceleration to mimic the moon as it moves further away. Open the easing source file folder located in the ch11 folder on the CD-ROM. Look inside the Frame Properties dialog, under the Tweening tab. Pay special attention to the Easing option.
  8. Using the Easing option to decelerate animation

    Using the Easing option to decelerate animation

    • Rotate: You can rotate your items using this option. Select a rotation type from the drop-down menu and then type the number of rotations in the entry 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 entry field. If you type 0 in the entry field, or select None from the drop-down menu, no rotation will occur.
    • Orient to path: When your item follows a path, turning this selection on forces the item to orient its movement to that path.
    • Synchronize: This option ensures that your animation loops properly in the Main Movie. It forces the animation to loop properly even if the sequence is not an even multiple of the number of frames occupied by the symbol in the Main Movie’s Timeline. This is only important if your animation is contained within a graphic symbol.
    • Snap: This option snaps your animated item to a Motion Guide.

Motion Tweened effects
Because symbol instances have properties that can be manipulated separately from their root symbol, it’s possible to scale, rotate, and skew an instance. This feature of symbols makes it possible to generate a wide range of animated effects that rely almost entirely upon the file efficiency of Flash symbols. While this is indeed great, it gets even better: There’s one more class of instance properties that can be tweaked these properties are tint, brightness, alpha (or opacity), and advanced combinations of all three.

Using the chromatic options of the Effects Panel in concert with motion tweening gives you great control over the color and opacity of symbol instances in your animations, with good file size economy too. Our lunar example has been modified to slowly become the fabled blue moon.

Using the chromatic options of the Effects panel along with motion tweening

Using the chromatic options of the Effects panel along with motion tweening

As shown below, the Effects Panel enables you to control color and opacity of motion tweened symbol instances. There are five iterations of this panel, each of which is accessed from the Effect drop-down. If you look closely, you’ll notice that nearly all of the sliders have the capability to reduce a value by a negative percentage.

The Behavior drop-down of the Effects Panel is shown with four of the five Behaviors and their many options. The fifth behavior, None, has been omitted.

The Behavior drop-down of the Effects Panel is shown with four of the five Behaviors and their many options

Here’s a rundown on the gamut of controls that are available in this colorful workhorse of a panel:

  • None: Use this when you don’t want to use this control.
  • Brightness: Use this control to adjust the brightness of the selected instance, on a relative scale that ranges from black to white, which is represented as –100 percent to +100 percent.
  • Tint: Use this control to color (or tint) an instance with a singular color. The tint color that’s to be applied can be chosen from the Swatches Panel, which is accessible from the Tint Color button. Alternative methods of choosing the tint color are by entering numeric values in the R, G, B fields, or by adjusting the associated R, G, B sliders. After the tint color is set, the intensity of the tint can be adjusted with the Amount control which can also be operated as an entry field or as slider.
  • Alpha: Use this control to adjust the alpha, or transparency, of the selected instance on a relative scale that ranges from completely transparent to fully visible, which is represented as 0 percent to 100 percent.
  • Advanced: This truly is the advanced control, and it may take some getting used to. It enables you to adjust the R, G, B, and alpha values independently.The controls on the left are used to adjust values on a relative scale meaning that adjustments are relative to the current colors. The colors on the right are used to adjust values subject to constant values meaning that an absolute value, ranging from 0 to 255, can be assigned for R, G, B, or A. When used independently (that is, without tweaking the other bank of controls) these controls are intuitive. When used in conjunction with each other, they become quite powerful, albeit confusing at first blush. We suggest that you take some time, experiment, and take notes your effort will be repaid in many colorful instances.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics