Name: Date: Multimedia Graphics and Web Publishing Mr. Dietzler Flash Topics TWEENING AND MOTION GUIDES TWEENING: Motion Tweening: The most basic type of tweening is Motion Tweening in which you specify a starting position and ending position over a set number of frames and Flash creates the steps for you. For example, let s animate the StickGuy symbol to move across the screen using a Motion Tween. The animation will take place over 15 frames and, for fun, we will have him become smaller and flip upside-down : 1. 2.
3. 4. 5. 6.
1. This is the initial setup before the motion Tween. 2. Right click (control click) on frame 15 (or the frame you wish the Motion Tween to end) and insert a Keyframe. 3. Click directly on Frame # 1 4. Go down to the Properties window and click on the dropdown box where it says Tween. Select Motion. 5. This is what your timeline should look like after inserting the Keyframe. 6. Now with frame 15 selected, move the StickGuy symbol to the new location. You may choose to turn on Onion Frames at this time to see the result. Use the Free Transform tool to rotate and resize the symbol. 7. Hit the return key to view the finished Motion Tween. Wherever a Motion Tween exists, specific properties of the tween can be set by clicking on the first frame of the Motion Tween and looking at the Properties Inspector; Some important things to observe are: 1. The Ease amount specifies whether the animation starts out quick and ends slow (postitive number), starts out slow and ends quick (negative number) or is uniform (zero). 2. The Rotate option will allow you to rotate the symbol by the specified whole number CW (Clockwise) or CCW (Counter Clockwise). 3. The Orient to path, Sync, and Snap options will be helpful for Motion Guides below. Motion Guides: Motion Guides go hand-in-hand with Motion Tweening. They allow us to specify the path on which the symbol travels from the beginning of the Motion Tween to the end instead of moving in a straight line. The instructions below show how to do this and they begin right where the Motion Tween of the StickGuy symbol left off:
1. 2. 1. With layer 1 of the Motion Tween selected, click on the Add Motion Guide button shown. This adds a new layer above the layer of your animation that says Guide Layer. 2. Select frame 1 of the Guide Layer and with one of the drawing tools (such as the Oval Tool, Rectangle Tool or Pencil Tool (as was used above) draw the path you wish the symbol to follow. 3. Click on the last frame of the Motion Tween and move the symbol to where in the path you wish the symbol to end. Hit Return to view the animation. NOTE:. The path you draw on the Guide Layer will NOT show up in the movie.
Shape Tweening: Another type of tweening will not only allow use to move objects from one spot to another in the movie, but morph the graphics from one form to another. This is called Shape Tweening. The most important thing to note about Shape Tweening is that it only works with normal graphics, NOT symbols. This is due to the complexity of some symbols versus others. Below is a set of instructions to morph a square object into a circle object using a Shape Tween: 1. 2. 3.
4. 5. 1. For the initial setup, simply draw a blue square with a black border on the left side of the stage. 2. Right click (control click) on frame 15 (or whatever frame you want the animation to end) and select Insert Blank Keyframe. This inserts a Keyframe with nothing on it, allowing us to draw a new shape. 3. With frame 15 selected, draw a yellow circle with a black border on the bottom right of the stage. 4. Now select frame 1 (or the frame where want the Shape Tween to begin) and go down to the Properties Inspector. Select Shape from the drop-down box next to Tween. 5. Hit the Return key to view the animation. You may also wish to turn on Onion Skins to see the step-by-step animation.
SHAPE HINTS: Sometimes the Shape Tween you create doesn t quite turn out the way you intended. This is because Flash guesses at what the best way to morph the shape should be. To try and help the process, we can use Shape Hints. First, go to View Show Shape Hints (Control+Apple+H). Next, click on the first frame of the Shape Tween. Now go to Modify Shape Add Shape Hint (Shift+Apple+H). If done correctly, a little circle with a letter will appear in your shape. The goal is to drag this marker onto an edge or corner in the initial shape that is not morphing correctly and tell it where that spot should end up in the last frame of the Shape Tween. If you click on the last frame you will see the same circle with a letter in it. Move this circle to where the initial circle should end up. By repeating this process, you can define how the Shape Tween should take place to give it a better look. TYPE TWEENING: It is worth mentioning that letters and words created with the Text Tool can be morphed using a Shape Tween even though they are initially created as Symbols (with the light blue box surrounding them). This is done by Breaking Apart the text TWICE before applying the Shape Tween. The following two steps illustrate this. Note: For a single letter, you need only Break Apart using step 2: 1.
2. 1. Type the text onto the stage then right click on the text and select Break Apart from the menu that pops up. 2. Right click once more and choose Break Apart. After the text has been broken apart, go through the steps of the Shape Tween above, creating a Blank Keyframe. On this Blank Keyframe, you can add a new letter or word for the Shape Tween but make sure you Break Apart the new text as well. Some extra hints and shortcuts: 1. Double check you are in the Scene when you double click an object, sometimes you go into edit mode for that object. Before you animate something, make sure you are back in the scene. 2. Holding down Shift while drawing shapes or lines will always guarantee a uniformly sized shape (square or circle) in addition to straight lines. Also, if you want to move an object to a different side of the screen but in a straight line, hold Shift. To put is simply, holding Shift is invaluable in terms of quick and easy drawing and editing. 3. To see your movie in a continuous Loop (over and over again), go to Control Loop Playback. 4. Always look at the bottom of the Tools Palette for some extra features for each tool. For example, with the Lasso Tool selected, you can also access a Magic Wand tool and a Polygon Lasso tool. 5. If you made many mistakes and want to start all over, you can double click the eraser tool to delete everything on the stage. 6. Hide other layers while your working with detain on a single layer by clicking the dot below the eyeball symbol in the Timeline. 7. ALWAYS look at the Properties Inspector to get a reminder of what you are currently working with in the movie.