DIFFERENT KINDS OF TWEENED ANIMATION

Keyframe is a frame where you can put changes in a button or animation. A keyframe is placed at important points in the Timeline. Flash creates the frames in between the keyframes. You will identify a keyframe by looking at the circles in a frame. If the layer has no graphics, the keyframe is also blank. CREATING SIMPLE MOTION TWEENING 1. Open the Flash Work Files folder and choose the tweened_animation.fla file, click open. 2. On the Library Panel, create an instance of the car symbol by dragging it from library panel to the stage.

3. 4. 5. 6.

Be sure to place the car object in the extreme left side of the stage as shown above. Rename Layer 1 by double clicking on it and type car layer. Click on frame 30 of car layer. Observe that the frame turned out to color blue when selected. Press F6 to insert a new keyframe. Observe that the first keyframe extended and additional keyframe was placed in frame 30.

7. While frame 30 is selected, move the car symbol to its new location on the right side of the stage using the Arrow Selection Tool.

8. Select the car layer to highlight all the frames. 9. From the Insert menu, go to Timeline, then Create motion tween. Or right click on the selected frames then choose Create motion tween command. Observe that the frames becomes color light blue and a straight arrow line appears. This means that your tweened animation is complete.

10. From the Control menu, click Play to watch your animation Or press Enter. To rewind the animation, choose Rewind from the Control menu Or Ctrl + Alt + Rto play again the series of your animation. CREATING ROTATION TWEENING 1. Open the Flash Work Files folder and choose the tweened_animation.fla file, click open. 2. Insert a new layer by clicking on the Layer Panel. Observe that you will have the second layer above the car layer.

3. Rename the second layer to wheel layer. 4. Select the frame 31 of wheel layer, and then press F6 to insert a new keyframe. 5. Drag an instance of the wheel symbol from the Library Panel to the Stage.

6. 7. 8. 9.

Select the frame 50 of wheel layer and press F6 to insert another keyframe. While frame 50 is selected, rotate the wheel using the Free Transform Tool. Select the wheel layer to highlight all the frames. From the Insert menu, go to Timeline, then Create motion tween. Or right click on the selected frames then choose Create motion tween command. Observe that the frames becomes color light blue and a straight arrow line appears. This means that your tweened animation is complete.

10. Click in any frame between frames 31 to 50. On the Properties Inspector, change the Rotation option to from Auto to CCW (Counter Clockwise). 11. Move the playhead to frame 31. 12. From the Control menu, click Play to watch your animation Or press Enter. To rewind the animation, choose Rewind from the Control menu Or Ctrl + Alt + Rto play again the series of your animation.

CREATING SIZE TWEENING 1. Open the Flash Work Files folder and choose the tweened_animation.fla file, click open. 2. Insert a new layer by clicking on the Layer Panel. Observe that you will have the third layer above the wheel layer.

3. Rename the third layer into earth layer. 4. Select the frame 51 of wheel layer, and then press F6 to insert a new keyframe. 5. On the Library Panel, create an instance of the earth symbol by dragging it from library panel to the stage.

6. Select the frame 80 of earth layer and press F6 to insert another keyframe. 7. While frame 80 is selected, scale the earth object using the Free Transform Tool. Click the scale option below the Toolbox. Try to double its size by dragging the handles in outward direction.

8. Select the earth layer to highlight all the frames. 9. From the Insert menu, go to Timeline, then Create motion tween. Or right click on the selected frames then choose Create motion tween command. Observe that the frames becomes color light blue and a straight arrow line appears. This means that your tweened animation is complete. 10. Move the play head to frame 51.

11. From the Control menu, click Play to watch your animation Or press Enter. To rewind the animation, choose Rewind from the Control menu Or Ctrl + Alt + Rto play again the series of your animation. CREATING MOTION PATH TWEENING 1. Open the Flash Work Files folder and choose the tweened_animation.fla file, click open. 2. Insert a new layer by clicking on the Layer Panel. Observe that you will have the fourth layer above the earth layer.

3. Rename the fourth layer into bee layer. 4. Select the frame 81 of bee layer, and then press F6 to insert a new keyframe. 5. On the Library Panel, create an instance of the bee symbol by dragging it from library panel to the stage.

6. Insert a Motion Guide layer by clicking from the Layer Panel. Observe that your bee layer is indented and the Guide: bee layer is added.

7. Select the frame 81 of Guide: bee layer and press F6 to insert a new keyframe. 8. While frame 81 of Guide: bee layer is selected, draw a motion path line using the Pencil Tool as show below:

9. Select frame 110 of Guide: bee layer and insert a new keyframe by pressing F6. 10. Select frame 110 of bee layer and insert a new keyframe also by pressing F6. Observe that the motion path line and the bee are now visible on your Stage. 11. Select frame 81 of bee layer and lock the bee symbol to the motion path by snapping the small black ring on the starting point of motion path line. Be sure that the Snap Modifier is active.

12. Select frame 110 of bee layer, then drag the bee symbol using an Arrow Selection Tool to the end of the motion path line. Be sure that the black ring is still snapped to the motion path line. 13. Using the Free Transform Tool, scale the bee symbol and make it smaller to create the illusion that as the bee flies away it also becomes smaller. 14. Select the bee layer to highlight all the frames.

15. From the Insert menu, go to Timeline, then Create motion tween. Or right click on the selected frames then choose Create motion tween command. Observe that the frames becomes color light blue and a straight arrow line appears. This means that your tweened animation is complete.

16. Select the Guide: bee layer. Hide the motion guide layer by clicking on the bullet of Guide: bee layer below the eye column. Observe that a red x appears on the bullet and the motion path line disappears.

17. Move the playhead to frame 81. 18. From the Control menu, click Play to watch your animation Or press Enter. To rewind the animation, choose Rewind from the Control menu Or Ctrl + Alt + Rto play again the series of your animation.

CREATING COLOR TWEENING 1. Open the Flash Work Files folder and choose the tweened_animation.fla file, click open. 2. Insert a new layer by clicking on the Layer Panel. Observe that you will have the sixth layer above the Guide: bee layer.

3. Rename the sixth layer into angry face layer. 4. Select the frame 111 of angry face layer, and then press F6 to insert a new keyframe. 5. On the Library Panel, create an instance of the angry face symbol by dragging it from library panel to the stage.

6. Select the frame 140 of angry face layer and press F6 to insert another keyframe. 7. While frame 140 is selected, select the angry face object on Stage and change the Color property from the Properties Inspector to Tint. 8. On the Tint color control box, choose the red color.

9. Select the angry face layer to highlight all the frames. 10. From the Insert menu, go to Timeline, then Create motion tween. Or right click on the selected frames then choose Create motion tween command. Observe that the frames becomes color light blue and a straight arrow line appears. This means that your tweened animation is complete. 11. Move the play head to frame 111. 12. From the Control menu, click Play to watch your animation Or press Enter. To rewind the animation, choose Rewind from the Control menu Or Ctrl + Alt + Rto play again the series of your animation.

CREATING SHAPE TWEENING 1. Open the Flash Work Files folder and choose the tweened_animation.flafile, click open. 2. Insert a new layer by clicking on the Layer Panel. Observe that you will have the seventh layer above the angry face layer.

3. Rename the seventh layer to morph layer. 4. Select frame 141 of the morph layer, then press F6 to insert a new keyframe. 5. On the Library Panel, create an instance of the circle symbol by dragging it from Library Panel to the Stage.

6. Shape tweening only applies to Shape objects, so we will break apart the symbol to shape by pressing CTRL + B. Observe that your object turns into a shape object. 7. Select frame 170 of morph layer, then press F7 to insert blank keyframe. 8. On the Library Panel, create an instance of the star symbol by dragging it from Library Panel to the Stage.

9. Press CTRL + B to break apart the symbol object into a shape object. 10. Select the morph layer to highlight all the frames. 11. From the Insert menu, go to Timeline, then Create Shape Tween. Or right click on the selected frames then choose Create Shape Tween command. Observe that the frames becomes color light green and a straight arrow line appears. This means that your tweened animation is complete.

12. Move the play head to frame 141. 13. From the Control menu, click Play to watch your animation Or press Enter. To rewind the animation, choose Rewind from the Control menu Or Ctrl + Alt + Rto play again the series of your animation. 14. Observe how your circle shape turns into star shape.

15. Your animation basics challenge is complete. Save this file in your own folder.

This activity guide is written by MARLON L. LALAGUNA of Gen. Tiburcio de Leon NHS for his Fourth Year students taking Computer Education IV.[ 16 February 2013]