contents
 

project: Shape Hinting
 
   
 

description: In this tutorial you will learn how to apply Shape Hints and edit frames to refine your prior animation.

Files: The shape_hint.fla file is in the fla_files folder.
   
 
   
  step 1: Open shape_hint.fla (in your fla_files folder). (Figure A)
   
  A
   
  •Note: This is similar to the file you created by Step 11 in Shape Tween Basics.
   
  step 2: With the playhead over frame 1, Modify > Shape > Add Shape Hint. (Figure B)
   
  B
   
  step 3: A shape hint appears in the center of your object. (Figure C)
   
  C
   
  step 4: Move the playhead to frame 20 and notice that a shape hint also resides there. (Figure D)
   
  D
   
  step 5: Our intention is to remove the rotational element from the animation using these shape hints. (Figure E)
   
  E
   
  step 6: Watch the following movie to see where to position the shape hints. (Figure F)
   
  F
   
  •Tip: Placing the first shape hint at the upper left corner and working counterclockwise will give you optimal results.
   
  step 7: Modify > Shape > Add Shape Hint (Shift-Command-H) and watch the following movie to see where to place the next shape hint. (Figure G) (If you read the last tip you already know)
   
  G
   
  •Note: Notice how the shape hints change color? Yellow and green are good. Red means there's a problem. If a shape hint stays red try moving it a bit (and/or its partner) to remedy the situation. If all else fails, drag the shape hints off the stage and try again.
   
  step 8: Repeat the process until you've got shape hints at all the corners. (Figure H)
   
  H
   
  step 9: Save (Command-S) and Control > Test Movie (Command-Return) to check your results. (Figure I)
   
  I
   
  •Note: The rest of this tutorial deals with refining the animation. If that's not for you, feel free to jump to Shape Tweening Text now.
   
   
  step 10: To make the square pause on the stage, begin by clicking the keyframe on frame 20. (Figure J)
   
  J
   
  step 11: Duplicate the keyframe by Option-Dragging it to frame 30. (Figure K)
   
  •Tip: The frame(s) must be selected first. Pause. Hold down the Option key, click, and without releasing the mouse, drag the selection to a new location. Release the mouse then release the Option key. This is a terrific shortcut that will save you a lot of work and is well worth learning!
   
  K
   
  step 12: Click on the first keyframe. (Figure L)
   
  L
   
  step 13: Option-Drag it to frame 50. (Figure M)
   
  M
   
  *Note: The frame is colored green because it carried the Shape Tween with it. We'll deal with the problem in a few steps.
   
  step 14: Click on frame 30. (Figure N)
   
  N
   
  step 15: Apply a Shape Tween in the Properties Panel. (Figure O)
   
  O
   
  step 16: Control-Click on frame 60 and Insert Frame to allow our circle to linger on the stage before beginning to morph back into the square. (Figure P)
   
  P
   
  step 17: The dotted line represents a broken tween. (Figure Q)
   
  •Note: If we wanted to fix it, we could add a blank keyframe and an object to frame 60 but that won't help our animation so...
   
  Q
   
  step 18: Control-Click in the keyframe in frame 50 and Remove Tween. (Figure R)
   
  R
   
  step 19: The problem is fixed. (Figure S)
   
  S
   
  step 20: Add shape hints to the to the square in frame 30 and position them on both the square and the circle (in frame 50). (Figure T)
   
  •Tip: You can add all four shape hints at once with Shift-Command-H (pressed four times in succession).
   
  T
   
  step 21: Save (Command-S) and Test Movie (Command-Return). Your results should look exactly like the animation below. (Figure U)
   
  U
   
  step 21: With these skills you can shape tween any two (or three or more) objects. Successful shape hinting takes a bit more practice (and trial and error) though. Next we'll Shape Tween Text.
   
   
   
   
 
contents