INF1070: Hypermedia Tools 1 Assignment 3: Tween Animation in Flash Save your project files in a folder called: 3_flash_tweens Tweens in Flash :: Introduction Now that you ve learned to draw in Flash, it s time to animate. You made use of layers in Fireworks and in the previous Flash assignment. Now, it s time to add another dimension to your work time. As we increase the number of layers and the amount of time, we increase the complexity and level of interaction with our audience. containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead. Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. The playhead indicates the current frame displayed on the Stage. As a document plays, the playhead moves from left to right through the Timeline. The Timeline status displayed at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame. The playhead moves through the timeline as a document plays to indicate the current frame displayed on the Stage. The Timeline header shows the frame numbers of the animation. To display a frame on the Stage, move the playhead to the frame in the Timeline. Let s look at the Adobe online material to learn more. 1 To add time, we will work with Flash s built-in timeline feature. The Timeline organizes and controls a document s content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. Layers are like multiple film strips stacked on top of one another, each To display a specific frame when you re working with a large number of frames that can t all be displayed in the Timeline at once, move the playhead along the Timeline. To go to a frame, click the frame s location in the Timeline header, or drag the playhead to the desired position. To center the Timeline on the current frame, click the Scroll To Playhead button at the bottom of the Timeline. 1 http://help.adobe.com/en_us/flash/10.0_usingflash/wsd60f23110762d6 b883b18f10cb1fe1af6-7f84a.html - WSd60f23110762d6b883b18f10cb1fe1af6-7f83a Jasper Place High School pete.mackay@epsb.ca 1
Parts of the Timeline A. Playhead B. Empty keyframe C. Timeline header D. Guide layer icon E. Frame View pop up menu F. Frame-by-frame animation G. Tweened animation H. Scroll To Playhead button I. Onion-skinning buttons J. Current Frame indicator K. Frame Rate indicator L. Elapsed Time indicator A keyframe 2 is a frame where a new symbol instance appears in the Timeline. A keyframe can also be a frame that includes ActionScript code to control some aspect of your document. You can also add a blank keyframe to the Timeline as a placeholder for symbols you plan to add later or to explicitly leave the frame blank. To add a keyframe to the timeline, rightclick on the frame number and choose Insert Keyframe. You can also use the keyboard shortcut F6. A tween 3 is an animation that is created by specifying a value for an object property in one frame and another value for that same property in another frame. Flash calculates the values for that property in between those two frames. The term tween comes from the words in between. For example, you can place a movie clip on the left side of the Stage in frame 1 of the Timeline, and then move that movie clip to the right side of the Stage in frame 20. When you create a tween, Flash calculates all the positions of the movie clip on Stage in between the two positions, right and left, that you specified. You end up with an animation of the movie clip moving from the left side of the Stage to the right side, from frame 1 to frame 20. In each frame in between, Flash moves the movie clip one 20th of the distance across the Stage. There are several types of tweens: 1. Motion Tween objects move from one location to another on the stage. 2. Alpha Tween objects change levels of transparency (0% = transparent and 100% = opaque) 3. Tint or Color Tween objects change colors 4. Shape Tween objects actually change their shape! 2 http://help.adobe.com/en_us/flash/10.0_usingflash/ WSd60f23110762d6b883b18f10cb1fe1af6-7ec8a.html 3 http://help.adobe.com/en_us/flash/10.0_usingflash/ WSd60f23110762d6b883b18f10cb1fe1af6-7d8aa.html Jasper Place High School pete.mackay@epsb.ca 2
Tweens in Flash :: The Motion Tween Let s try a motion tween together: 1. Open a Flash document and draw a ball on the upper left hand of the stage. Change the name of the layer from Layer 1 to Motion Tween: 5. All that remains is for you to move the ball to its final destination on this motion tween. (Notice that the playhead is now on the last frame of the tween ) 2. Double-click the ball you drew (to select both the line and fill) and convert it to a symbol. (Modify > Convert to Symbol) or press F8: 6. Press Enter and watch your ball move. Want to speed it up? Then drag the timeline from frame 40 back to frame 20. A shorter time permitted means that the distance will be covered more quickly. Drag forward to slow it down 3. Now that the object is a symbol, we can add a motion tween by right-clicking on it. 4. The biggest change will occur in your timeline Flash extends the Motion Guide layer by 40 frames. (1 second, so depending on your framerate, this may be more or less. Jasper Place High School pete.mackay@epsb.ca 3
There is another little line between the start and finish points. This is called the Spline Path and you can manipulate it with your Selection tool to change the path of travel. 7. Pull the spline path over a bit to curve the path of the ball s travel. Tweens in Flash :: The Alpha Tween At any point along the timeline, the ball will have a corresponding point on the spline path. And you can change the properties of this ball at any one of these points. Let s fade out the ball as it moves towards the end of the spline path. 1. Select the ball and look in the Property Inspector for a section called Color Effect. You ll find there, a pick-list. Choose Alpha from that list. Now, the ball s path is no longer the shortest distance it is curved. 8. Save your Motion Tween as: 3a_motion_tween.fla and publish it as 3a_motion_tween.swf. 2. Alpha is another term for the amount of transparency an object has. An alpha value of 0 means that the object is totally transparent; while a value of 100 means that the object is entirely opaque. Move the slider to about 20%. 3. Hit Enter and see your ball fade as it nears the end of its path. 4. Save your Alpha Tween as: 3b_alpha_tween.fla and publish it as 3b_alpha_tween.swf. Jasper Place High School pete.mackay@epsb.ca 4
Tweens in Flash :: The Tint Tween 1. Open your old 3_Motion_Tween.fla document and choose Tint from the same Color Effect pick list. Tweens in Flash :: The Shape Tween Shape tweens are a different kind of cat They are applied to simple, raw vector shapes. That means no symbols! 1. Start a new Flash document. Create a ball again but this time, do not turn it into a symbol. Make the ball 75px x 75px and place it at x=20 and y=20. 2. Your ball will change colors. Pick something different from your original color and test your movie. It s easy to do a quick test by just pressing Enter. The ball will move on the stage. If you wanted to see what the real movie is like, then hit ctrl-enter ( -Return on a Mac). The movie will play in a Flash Player window. It will also repeat that s ok for now. 2. Right-click on or about frame #30. Choose Insert Blank Keyframe. 3. Now, on that blank keyframe, draw a box (75x75 at x20 and y20). 4. And then click somewhere in the timeline between the two keyframes. Choose Insert Shape Tween. Test your movie. The ball turns into a square. You can also use shape tweens to change colors and position on the stage or you can combine different features. Remember this works best with simple raw vector shapes 5. Save your Tint Tween as: 3c_tint_tween.fla and publish it as 3c_tint_tween.swf. 6. Save your Shapw Tween as: 3d_shape_tween.fla and publish it as 3d_shape_tween.swf. Real Life Example: Here s a little project I was hired to do a few years ago. The client wanted an animated logo that looked like it was being colored in. How did I do it? You guessed it shape tweens in Flash! Here s the URL where you can find it (if it s still there when you read this ) http://www.artworksalberta.org/ Jasper Place High School pete.mackay@epsb.ca 5
Tweens in Flash :: Your Turn Task One: Demonstrate the Different Tweens Follow along in class as we learn the different tweens motion, alpha, tint and shape. When we finish the practice techniques, you should have the following files saved and published 3a_motion_tween.fla 3a_motion_tween.swf 3b_alpha_tween.fla 3b_alpha_tween.swf 3c_tint_tween.fla 3c_tint_tween 3d_shape_tween.fla 3d_ shape _tween Task Two: Apply the Different Tweens Explore the drawing tools of Flash and create a short animation of a bumblebee flying around the screen and landing on a flower. Let the cartoonist in you show - create a background with scenery. Use tweening and Spline paths to complete the work. Save and publish your work as: 3e_bumblebee.fla 3e_ bumblebee.swf Students who did well in this task previously: Put each element on its own layer and named the layers. Did not create shape tweens from symbols. Created motion, alpha, and tint tweens with symbols. Tried to animate the bee s wings as well as its path. (nested symbols demo) Symbols were named in the Library. INF1070_Hypermedia_Tools_I 3- Flash Tweens Marking Guide Comments: Content & Layout /28 You created and published a motion tween Yes (2) - - - (1) - - - (0) No You created and published an alpha tween Yes (2) - - - (1) - - - (0) No You created and published a tint tween Yes (2) - - - (1) - - - (0) No You created and published a shape tween Yes (2) - - - (1) - - - (0) No You created and published a bumblebee as directed Yes (2) - - - (1) - - - (0) No Your work has an appealing layout, alignment and consistency. Yes (2) - - - (1) - - - (0) No Coolness Factor of your Bumblebee Project Very Cool (10) - (8) - (6) - (4) - (2) - (1) Pretty Basic Stuff TOTAL FOR THIS ASSIGNMENT /28 Jasper Place High School pete.mackay@epsb.ca 6