Student Showcase

We will take a look at your new work which is ready to share.

For the Animated Logo Assignment, we will discuss the following aspects of each:

  • Overall strength of the animation
  • Degree to which the file meets the needs of the assignment

Download

Shape Tweening Exercise Files

Shape Tweening

Scaling and Stretching

  • Shape tweens work on vector shapes, moving anchor points from one place to another.
  • Pressing Alt (Option) while resizing with the Free Transform tool makes the shape scale out from the center.
  • Shape tweens are typically green on the Timeline.
  • If you wish to create a Motion Tween, the items being tweened must be symbols. Flash can convert them for you, but it will make them into movieclips automatically whether you want that type of symbol or not.
  • Many times, Flash does not distinguish on its own which anchor points are the same from keyframe to keyframe.
  • Shapes can end up deforming between keyframes.
Exercise: Altering Shapes
  1. Open the BananaShape.fla file in the Symbol Exercise Files folder. Notice that there is nothing in the library. This is because the banana is composed of a single vector shape.
  2. Insert a keyframe at frame 10 on the banana layer (shortcut: F6 key). This effectively produces a copy of the artwork from frame 1 in frame 10 and makes the copy available for manipulation. Any changes you make to frame 10 will not affect frame 1, so you can always remove that second keyframe (right-click and Clear Keyframe) and start again from scratch.
  3. With frame 10 selected, the vector shape on that frame should also be selected. Use the Free Transform tool to drag the top of the banana’s bounding box up.
  4. Right-click within the frame span between frames 1 and 10, and select Create Shape Tween. Two things happen:
    • The span of frames turns green, indicating a shape tween. They will also gain an arrow pointing right, which tells you that the tween was successful.
    • The paper will update its visual state depending on where the playhead is currently placed.
  5. Drag the playhead to watch the banana get fatter and skinnier.
  6. Right-click within the green tween in the Timeline and select Remove Tween. The tween goes away.
  7. Let’s try agin tween. Right-click your frame span again and select Create Motion Tween. Motion tweening is not supported for shapes, and Flash gives you a sign that you’ve gone wrong. You’ll see and alert box that offers to convert your shape into a symbol.
  8. Click Cancel.
  9. Time for another mistake. Right-click your frame span again and select Create Classic Tween. Instead of green, your frame span will become purplish, and you’ll see two new symbols in the library—without a warning.
  10. Undo (Mac: Cmd+Z, PC: Ctrl+Z), then delete both graphic symbols from the library (click on a symbol and then on the trash can icon.
  11. Reapply a shape tween.
  12. Scrub the playhead to frame 10.
  13. Use the Free Transform tool to change the banana’s width too in this second keyframe.
  14. Preview the animation by scrubbing the playhead.
  15. Use the Free Transform tool in frame 10 to rotate the banana about 90 degrees in either direction.
  16. Scrub the payhead again and see how the banana ends up being deformed between frames 1 and 10. What you are seeing is a mad dash of anchor points deciding where to be in those intervening frames. This behavior can be a very useful thing.
  17. With the Subselection tool, click the edge of the banana in frame 10. You’ll see dozens of tiny squares that act as anchor points around the perimeter of the shape. All of these points exist in frame 1 as well, but they’re in different positions relative to one another.
  18. Save and close the file.

Shape Hints

Complete the LogoMorphNoHints.fla tutorial in Chapter 7: Shape Tweening, Shape hints p. 373.

  • For the best results in using shape hints, turn on object snapping (View > Snapping > Snap to Objects).
  • To create a Shape Hint, go to Modify > Shape > Add Shape Hint.
  • Shape hints come in two parts: a hint point for the original keyframe and a hint point for the destination keyframe.
  • Both halves will have the same lower-case letter in a small circle (starting with letter a for your first shape hint).
  • The use of too many anchor points and shape hints can choke slower computers.

Altering Gradients

Complete the GradientTween1.fla, GradientTween2.fla and BitmapFillTween.fla tutorials in Chapter 7: Shape Tweening, Altering gradients pp. 377-378. Edit each file in some way and save your changes.

  • To animate gradients, shape tweens are the only way to do it.
  • Shape tweens treat the gradient control points much like anchor points.
  • It’s best not to try to tween from one type of gradient to another (such as from linear to radial).
  • You can tween a shape and its gradient fill at the same time.
  • Bitmap fills are tweenable using shape tweens, as they are also manipulated with gradient control points and the Gradient Transform tool.