Advanced Web Page Design STANDARD 5 The student will use commercial animation software (for example: Flash, Alice, Anim8, Ulead) to create graphics/web page. Student Learning Objectives: Objective 1: Draw, color, and edit objects. Objective 2: Use layers. Objective 4: Understand the importance and use of a timeline and/or storyboard. Objective 5: Understand animation concepts: tweening and/or morphing, motion paths, behaviors and/or actions, library, import graphics. INSRUCTION SHEET Flash Lab #1 Creating Classic Motion Tweens (basic animation) I can create basic animation using the classic motion tween tool. Shortcut Hint: Press F6 to create a Keyframe 1. Create a new folder on your drive, name it: Flash Lab #1. Copy the following four (4) assets (images) to the folder: basketball.png, football.png, soccer.png, softball.png 2. Open Adobe Flash. Select File, New. Choose ActionScript 3.0. Change the Width to 800px, Height to 600 px (use Pixels). Frame rate: 24 fps (frames per second). Background color: White. Click OK. 3. Click File, Import, Import to Library. 4. Browse and select all four (4) images in your folder to Import to the Library. Click OK. 5. Change the Window Size (Scene 1) to Fit in Window 6. Create three (3) new layers in the Timeline Window and rename each layer from bottom to top: dribble, throw, kick, hit
7. Click on the bottom layer (dribble). From the Library, drag basketball.png onto the stage as shown. 8. Right-click on the image and choose Free Transform. Make the image much smaller and move to the bottom left corner of the stage. 9. Click on Frame 30 and press F6 to create a new Keyframe (Insert, Timeline, Keyframe) 10. Stay on Frame 30 and move the basketball to the far bottom right corner of the stage. 11. Select the entire layer dribble by clicking on the word dribble. Now, right-click between the keyframes and choose Create Classic Tween (If you did it correctly, the keyframes will turn blue with an arrow between Frame 1 and Frame 30) See the picture below:
12. Create keyframes (press F6) at frames 5, 10, 15, 20, and 25. 13. Click on View, Rulers. Click on Frame 5 and move the basketball up so that the bottom is aligned with vertical ruler, pixel 500. 14. Repeat step 13 above on frames 15 and 25 and move the basketball up so that the bottom is aligned with vertical ruler, pixel 500. 15. Now, view the dribble animation by clicking on frame 1 and pressing Enter. 16. Save as: Lab 1.fla (a flash file). 17. Click on the throw layer, frame 1. From the library drag the football onto the stage. Use the corner handle to rotate the ball and move the football so that part of it is off stage left as shown below: 18. Click on frame 30 and press F6 to create a keyframe. Now move the football so that part of it is off stage right and rotate as shown: 19. Click on frame 15 and press F6 to create a new keyframe. Move the football up to the top center of the stage (as shown on the right). 20. Select the entire layer throw by clicking on the word throw. Now, right-click between the keyframes and choose Create Classic Tween (If you did it correctly, the keyframes will turn blue with an arrow between Frame 1 and Frame 30) 21. Click on frame 1 on the throw layer. View the properties window (Window, Properties). Expand the Tweening Panel. Change Ease to 75, Rotate to CW x 2 (change to 2 times). *Easing will speed up or slow down the animation at the frame in which it is applied.
22. Click on frame 15 on the throw layer. View the properties window (Window, Properties). Expand the Tweening Panel. Change Ease to -75, Rotate to CCW x 2 (change to 2 times). 23. Click on frame 30 on the throw layer. View the properties window (Window, Properties). Expand the Tweening Panel. Change Ease to 75, Rotate to CW x 2 (change to 2 times). 24. Click on the kick layer, frame 1. From the library drag the soccer ball onto the stage. Use the corner handle to rotate the ball and move the soccer ball so that completely off stage left (bottom) as shown below: 25. Click on the kick layer, frame 30. Move the soccer ball so that completely off stage, bottom right. Select the entire layer kick by clicking on the word kick. Now, right-click between the keyframes and choose Create Classic Tween 26. Select frame 1 on the kick layer. View the properties window (Window, Properties). Expand the Tweening Panel. Change Ease to - 100, Rotate to CW x 50 (change to 50 times). Press Enter from frame 1 to view the animation. 27. Click on the hit layer, frame 1. From the library drag the softball onto the stage. Use the corner handle to size the ball down to a small size and move the softball so that it s in the top right corner of the stage as shown on the far right: 28. Click on frame 30 and press F6 to create a new keyframe. Move the softball to the bottom left corner of the stage and use the handles to make the softball very large (as shown on the right).
29. Select the entire layer hit by clicking on the word hit. Now, right-click between the keyframes and choose Create Classic Tween 30. Click on frame 30 on the hit layer. View the properties window (Window, Properties). Expand the Tweening Panel. Change Ease to -100, Rotate to CCW x 5 (change to 5 times). 31. Choose Modify, Document, then change the Stage color to Black. Click OK. 32. Press Cntrl-S to Save. 33. Select from the menu, File, Publish Settings. Check Flash (.swf) and GIF Image. Click on GIF Image on the left. Output file: Lab 1.gif, check to Match movie, Playback choose Animated, Loop continuously, check Smooth. Now, click Publish at the bottom of the window. 34. Open the Windows file system and right click on the file: Lab 1.gif. Choose to open the file in a browser to view the animation (open in IE, FireFox, Chrome, Safari, etc). 35. STUDENT ASSESSMENT: Use Google Images to find four images of your favorite animated characters. Use the classic motion tween tools including easing and looping clockwise and counterclockwise to create your own animation. Save as: Lab 1 Assessment.fla Publish as.swf and.gif (File, Publish Settings, Publish)