I can create an outline animation effect for an image (character) using advance masking effects.

Transcription

1 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 3: Understand the difference between vector and bitmap graphics. 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, masking, etc. I can create an outline animation effect for an image (character) using advance masking effects. 1. Create a new folder on your drive, name it: Flash Lab #9. 2. Download and save the files bg.png and chr1.png to the new folder. 3. Open Adobe Flash. Begin a new ActionScript 3.0 file. Use the stage size 600 width, 500 height, Color: White, fps = Click File, Import, Import to Library. Choose the files bg.png and chr1.png and add to the library. 5. Change the Layer 1 name to background Add two more layers on top of the background layer and name them character and character_outline 6. Drag the file bg.png to the background layer. 7. Click Window, Align to center the stage using the align panel. Align horizontal and vertical center. Keep in mind that to align any item to the center of the stage, check on the Align to stage check box. 8. From the library, drag the file chr1.png to the character layer in frame Press Cntrl-C to copy the image from the character layer to the character_outline layer. 10. Position both of the characters so that they are in the middle of the background and on top of each other. 11. Break apart (Cntrl-B) the image on the chracter_outline layer. 12. Now Select the Magic Wand Tool which is a sub tool of the lasso tool.

2 13. Select the transparent area of the image using magic wand tool, then press delete. 14. Reselect the image in case of any remaining unnecessary parts of the image remains; remove unnecessary parts using erase tool from the toolbox. 15. Select the image and fill with any solid color. 16.

3 17. Now select the Ink Bottle Tool from the toolbox to create an outline of the shape. 18. Click on the image in frame 1 (NOT the frame, but the image) of the character_outline layer. Click on the edge in the shape using Ink Bottle tool. It will create an outline around the shape. Now open the properties panel, to open the properties panel, Go to the Window menu > Select the properties. Go to the FILL AND STROKE > Stroke and set the Stroke color to black and the value to Add a new layer on top and name it mask shape

4 20. Go back to the character_outline layer and select the solid fill shape (except the outline). Press Ctrl-X to cut the image out. 21. Go to the new mask shape layer and choose Edit, Paste in Place. 22. Select the outline view icon on the mask shape layer to see the shape in as outline. By doing this you can see the other objects behind it. 23. Insert two new layers above the character layer, and name them mask character and fade bar 24. Again, insert a new layer above the character_outline layer and name it mask outline Save As Lab #9.fla.

5 25. Create a lime green rectangle on the mask outline layer as shown in the example below. Copy the rectangle (Cntrl-C), then go to the mask character layer and choose Edit, Paste in Place (see the images below): 26. Go to the fade bar layer and create a rectangle filled with the gradient color of black and white.

6 27. Stay on the fade bar layer and open the color panel (Window, Color) and insert a new color bucket in the middle of the white bar. Change all three color buckets to white (#FFFFFF) 28. Set color alpha to zero percent (A: 0%) for two outer buckets. Do not change the middle bucket. 29. Right-click on the rectangle and free transform it so that it is tall enough to fill the bottom of the character s shoes. 30. Now go to the Tools panel and select the Gradient Transform Tool.

7 31. You will see two blue lines as given in the image. Currently these blue lines will be horizontally placed. Click on the white small circle and rotate it to vertical. 32. Right-click on the rectangle and free transform to make it larger to hide the top edge of green rectangle so that when the masking will play, the edge will not be visible. 33. Reorder the layers as follows from top to bottom: mask shape, fade bar, mask character, character, mask outline, character outline, and background. 34. On each layer, insert a Insert a new frame on frame 100 by pressing F5 on all layers.

8 35. Now select frame 50 of the four top layers (mask shape, fade bar, mask character, and character) and press F6 to insert new key frames. 36. Again select the four top layers frames before frame 50 and press delete to remove the frames. 37. On mask outline layer, insert a new key frame on frame 50 by pressing F Lock all the layers except the mask outline layer. On frame 50 on the mask outline layer, select the green rectangle and increase the height to cover the character outline. Save As Lab #9.fla.

9 39. Now, right-click between frames 1 and 50 and select Create Shape Tween. 40. Select the mask outline layer. Right-click and select Mask. *this will create a mask layer below the mask outline layer 41. Unlock all the layers. Insert a new key frame (F6) in frame 100 on both the fade bar and mask character layers. 42. Lock all the layers except the mask character layer. On the mask character layer in frame 100, increase the height of the rectangle to cover the character.

10 43. Unlock all the layers. On frame 100, select the fade bar rectangle and move it to the top just above the character s head. Keep in mind to hide the green rectangle top edge. 44. Create a Shape Tween between frames 50 and 100 of fade bar and mask character layers. 45. Now select the mask character layer and right click, then select Mask. 46. Now select the mask shape layer and right click, then select Mask. 47. In the end, to give some breathing period in when the animation lasts, insert a new key frames (press F6) on all the layers on frame Select from the menu, File, Publish Settings. Check Flash (.swf) and GIF Image. Click on GIF Image on the left. Output file: Lab 9.gif, check to Match movie, Playback choose Animated, Loop continuously, check Smooth. Now, click Publish at the bottom of the window. 49. Open the Windows file system and right click on the file: Lab 9.gif. Choose to open the file in a browser to view the animation (open in IE, FireFox, Chrome, Safari, etc). 50. STUDENT ASSESSMENT: Use Captain America.png or Tyrant.png Use one of the following backgrounds to go with your character: Cool_Unreal.jpg, Dragon_Back.jpg, Halo5.jpg, or Blooded_Shield.jpg Apply what you ve learned to create a character animation of Captain America or Tyrant. Save as Lab #9 Assessment.fla. 51. When completed, select from the menu, File, Publish Settings. Check Flash (.swf) and GIF Image. Click on GIF Image on the left. Output file: Lab #9 Assessment.gif, check to Match movie, Playback choose Animated, Loop continuously, check Smooth. Now, click Publish at the bottom of the window.