Lab02b
Advanced Technology
Page 1 of 9
‘Real’ Movie Clips and Motion Guides
(plus Shape Tweens)
Until Friday we viewed Movie Clips as static symbols that could be swapped to create animations or motion tweened in straight lines. In today’s lab we will see how to use animated movie clips and motion guides to enhance the quality of our animation. 1. Start Flash to create a new movie. 2. Save the new movie as Lab02b_logonid.fla. 3. Choose Insert – New Symbol.
4. Name the new symbol “BeachBall” and set the behavior to Movie Clip. 5. Make sure you are in symbol editing mode (See below. Another indication is that the stage will seem to have disappeared.)
6. Draw a circle with white fill and black stroke. 7. Center the circle. Choose Modify – Align – To Stage (unless it is already checked); then Modify – Align – Center Vertical; then Modify – Align – Center Horizontally.
8. Add two lines through the center of the circle. (see above) 9. Color the resulting fills to resemble a beach ball. (see above) 10. Exit symbol editing mode and return to the main timeline in Scene 1.We have now created a basic beach ball that we can use within another movie clip symbol to create a spinning beach ball. Hit Ctrl-S (the control and ‘s’ keys at the same time) to save and let’s get started…
Lab02b
Advanced Technology
Page 2 of 9
11. Choose Insert – New Symbol.
12. Name the symbol “SpinningBeachBall” and set the behavior to Movie Clip. 13. In symbol editing mode, add an instance of the BeachBall symbol to the stage. We are embedding the BeachBall symbol into the SpinningBeachBall symbol. This will allow us to create a rotation using the motion tweening feature of Flash. Up to this point I have discouraged the embedding of symbols because it tends to cause confusion early on, but NOW you are ready. (Oh, that magical NOW!) 14. Align the BeachBall instance to the center of the stage. (see step 7 above) 15. Rename Layer1 as BeachBall. Notice that we can edit inside a movie clip just like we can on the main timeline. 16. Insert a keyframe in frame 24 of the BeachBall layer. 17. Click in frame 1 of the BeachBall layer.
18. Choose Insert – Create Motion Tween. Creating the motion tween may also be accomplished by changing the Tween setting (in the Properties panel) to Motion. 19. Set the Rotate property to CW (clockwise?) and be sure the number of times is set to 1. This allows Flash to create the “tweens” needed to create the illusion of spinning.
20. To test the animation, choose Control – Play, or just hit Enter. 21. If successful please move on, otherwise exit symbol editing mode, delete the SpinningBeachBall symbol and try again from step 11. 22. Hit Ctrl-S to save your movie.
Lab02b
Advanced Technology
Page 3 of 9
23. Exit symbol edit mode and return to the main timeline. 24. Drag an instance of SpinningBeachBall to the stage. 25. Rename Layer1 as Ball. 26. Insert a keyframe in frame 60 of the Ball layer. 27. Hit Ctrl-S to save your movie. 28. Choose Control – Play, or hit Enter, to run the animation. HEY WAIT!!! I thought you said this thing was going to spin? I saw the symbol spin!?! What is going on? 29. RELAX. 30. Choose Control – Test Movie. In order to see the SpinningBeachBall’s nested animation you must test the movie (create an SWF) rather than playing the movie within the FLA. I told you it would work. Well okay, it doesn’t work perfectly. Notice that little hiccup (pause) as one rotation ends and the next one begins? That was created when we told Flash to rotate the ball exactly one time; the ball starts and ends in exactly the same position. This means that you get two frames of the same position when the movie clip transitions from one rotation to the next. We will fix this by having the rotation end a few degrees (15° = 360° / 24 frames; knew I picked 24 for a reason…) short of a full rotation in order to make the transition smooth. Fortunately, this will be easy to fix since we used a symbol. 31. Choose File – Close to end the movie test. 32. Double-click on SpinningBeachBall in the library to begin editing the symbol again. 33. Click on frame 24 of the BeachBall layer. 34. Choose Modifty – Transform – Scale and Rotate.
35. Enter -15 for degrees and make sure that scale remains at 100%.You could just as easily set the number of degrees to 345 to specify the rotation in a clockwise manner. 36. Hit Enter to play the symbol’s animation. Whoa! That’s more than one rotation. Since we told the computer to rotate 1 time it MUST complete a full rotation. Again, something we can fix easily.
Lab02b
Advanced Technology
Page 4 of 9
37. Change the number of times the ball rotates to 0 in the Properties panel.
38. Hit Enter to test the new settings. Note that there is nothing wrong with setting the value to 1 if you want a speedier rotation. You can even increase the value to make the ball spin faster. 39. Exit symbol editing mode and return to the main timeline. 40. Hit Ctrl-S to 41. Hit Ctrl-Enter (the control and enter keys at the same time) to test the movie. 42. Close the test movie. If the ball was spinning smoothly continue on, otherwise troubleshoot the problem. If all has gone well you now have a beach ball that sits in the middle of your stage rotating forever. Not very exciting, but it is an excellent start. What we want to do now is create a beach back drop for our beach ball. 43. Insert a new layer, named Beach, below the Ball layer in the main timeline. 44. Draw a beach scene in the Beach layer.
45. Lock the Beach layer so it doesn’t change. 46. Click in frame 1 of the Ball layer.
Lab02b
Advanced Technology
Page 5 of 9
47. Relocate the beach ball to the upper left hand corner of the stage. Position the ball so only a small portion is visible within the stage. 48. Click in frame 60 of the Ball layer. 49. Position the ball so it appears to have floated out to sea. 50. Click in the first frame of the Ball layer again. 51. Set the Tween property to Motion. 52. Hit Ctrl-S to save your movie. 53. Hit Ctrl-Enter to test your movie. Well, that is certainly better. But most things don’t move in a perfectly straight line. We need to create a more organic path for our object. In the past we would create lots of little key frames and move the ball little steps at a time. Now we will create a motion guide, a path, for the ball to follow. 54. Close the test movie. 55. Click on the Ball layer to select it. 56. Click on Add Motion Guide to add a Guide Layer.
57. Click on frame 1 of the Guide: Ball layer. 58. Draw a line from the initial position of the ball to the approximate position of the ball in the last frame. The line should exist for all 60 frames.
Lab02b
Advanced Technology
Page 6 of 9
Okay, wait! The ball is already traveling in a straight line. Don’t I want to draw some curves? 59. RELAX. We are getting there. 60. Draw three additional lines intersecting the original line as shown below.
61. Change to the Arrow Tool. 62. Bend and move the resulting line segments to create a series of bounces. 63. Delete the additional lines. 64. Hit Ctrl-S to save the movie.
Now for the hard part… we have to snap the ball to the path in order for the ball to follow the path.
Lab02b
Advanced Technology
Page 7 of 9
65. Click on frame 1 of the Ball layer. 66. Drag the ball away from the line. 67. Click the registration point (crosshair) of the ball and drag over the line. 68. A circle should appear and the ball will attempt to snap to (“hug”) the line. 69. Position the ball at the left end of the path you created.
70. Click on frame 60 of the Ball layer. 71. Click on the registration point of the ball. 72. Drag the ball over the path until it “snaps” to the right end of the line.
73. Hit Ctrl-S to save the movie. 74. Hit Ctrl-Enter to test the movie. Voila! You now have a rotating beach ball that follows a non-linear path.
Lab02b
Advanced Technology
Page 8 of 9
We have spent a lot of time discussing motion tweens. We started by creating simple translations and now we have graduated to creating rotations and complex path animations. You should experiment farther and see how motion tweens can be used to create color shifts. Alas, that is not the topic of this last section. Along with motion tweens, Flash provides shape tweens. Shape tweening is a process very much like morphing. (With the use of shape hints, shape tweening really IS morphing!) The key to shape tweening is that it requires “shapes”. Okay, okay, I know that sounds redundant and silly but let me explain. We have been using symbols to create animations. We can only create a motion tween if we have a symbol. I can’t just draw a circle and motion tween that circle on the stage without Flash informing me (by way of the dashed line) that I have attempted an unacceptable operation. However, Symbols are made from shapes, objects we have drawn. This means that while we cannot shape tween, or morph, between symbols, we can shape tween between two shapes. Let me show you what I mean… 1. Choose Insert – Scene in the Lab02b file you have open. 2. Rename Layer1 as Morph. 3. Draw a circle in the center of the stage. Mine has a blue fill with a black stroke.
4. Insert a blank keyframe in frame 15 of the Morph layer. 5. Draw a square in roughly the same position as the circle. Again I used a blue fill and a black stroke. You can use onion skin to help line up the rectangle with the circle.
6. Click on frame 1 of the Morph layer. 7. Set the Tween property to Shape. 8. Notice that the timeline has an arrow from frame 1 to frame 15 and the frames are now shaded green. (Motion tweens are shaded blue.) 9. Hit Enter to play the movie (Ctrl-Enter to test works fine also.)
Lab02b
Advanced Technology
Page 9 of 9
10. Click on frame 1 again and set the Tween property to None. 11. Click on frame 15 and delete the square. 12. Using the text tool add a large (72 point), bold letter to the stage. I chose PosterBodoni as the font because it was so “heavy” and the letter M because it is very wide. 13. Use onion skinning to line up the letter and circle.
14. Hit Ctrl-S to save the movie. 15. Click on frame 1 and set the Tween property to Shape. Wait a minute! Why is there no arrow? There is only a dashed line. It turns out that letters are not strictly shapes. In order to be editable, text boxes are really a hybrid mix between shape and symbol. We can fix this problem by breaking the letter apart so that the letter is only a shape. 16. Click on frame 15. 17. Select the letter. 18. Choose Modify – Break Apart. 19. Notice the arrow from frame 1 to frame 15 is now complete. 20. Hit Ctrl-S to save. 21. Hit Enter to watch the morph. 22. Experiment with the ideas below. 23. Submit your Flash movie as Lab02b_logonid.fla to the Handin folder. Great Job!!! There are plenty of other features you can play with. Try typing more than one letter in a textbox and breaking the textbox apart. What happens? Try breaking apart again. What happens? Start with a clean scene. Type a word in a textbox. Choose break apart. Choose distribute to layers. What happens? Recreate the circle and square morph. What happens if the circle is blue and the square is red? The sky is the limit with Flash. Try new things and show me what you discover.