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. / INSTRUCTION SHEET
Flash Lab #5
Create a Picture Slideshow
“I can use brightness, tint, and alpha color effects to create a picture slideshow.”
Shortcut Hint: Use F8, Convert to Symbol, Graphic, to use advanced (color effect) properties.

Hint: Use F8, Convert to Symbol, Graphic, to use advanced (color effect) properties.

  1. Create a new folder on your drive, name it: Flash Lab #5.
  2. Download and save the files“pic1.jpg through pic7.jpg” to the new folder.
  3. Open Adobe Flash. Select File, New. Choose ActionScript 3.0. Keep the default settings: Width 450px, Height 300px (use Pixels). Frame rate: 12 fps (frames per second). Background color: Light Blue. Click OK.
  4. Click File, Import, Import to Library. Choose “pic1.jpg through pic7.jpg” and add (click OK) to add to the library.
  5. Rename Layer 1 to “picture 1” Drag “pic1.jpg” from the library and move onto the stage to frame 1. Position the picture so that it fills the entire screen.
  6. In Frame 1… Now, CLICK ON THE PICTURE, NOT the Layer! Choose Modify, Convert to Symbol (F8). Name: picture 1, Type: Graphic, click OK
  7. Press F6 on frames 15, 45, and 60 to copy the new graphic symbol to these key frames.
  8. Select frame 1, then click on the picture. Open the Properties window and choose under Color Effect, Style: Alpha. Change to about 20%
  9. Now, select frame 60 and then click on the picture. Open the Properties window and choose under Color Effect, Style: Brightness. Change to about 70%
  10. Save as: “Lab 5.fla”
  11. Select all the frames on the picture 1 layer (frames 1 through 60). Then right-click and choose “Create Classic Tween”
  12. Add a new layer and name it “picture 2” Go to frame 50 and press F7 (insert blank keyframe). Drag “pic2.jpg” from the library and move onto the stage. Position the picture so that it fills the entire screen.
  13. In Frame 50… Now, CLICK ON THE PICTURE, NOT the Layer! Choose Modify, Convert to Symbol (F8). Name: picture 2, Type: Graphic, click OK
  14. Press F6 on frames 70, 100, and 115 to copy the new graphic symbol to these key frames.
  15. On the picture 2 layer, select frame 50 and then click on the picture. Open the Properties window and choose under Color Effect, Style: Alpha. Change to about 50%
  16. On the picture 2 layer, select frame 115 and then click on the picture. Open the Properties window and choose under Color Effect, Style: Tint. Change the Tint amount to about 80%

  17. On the picture 2 layer, select frames 50 – 115. Then, right-click and choose “Create Classic Tween”
  18. Add a new layer and name it “picture 3” Go to frame 105and and press F7 (insert blank keyframe). Drag “pic3.jpg” from the library and move onto the stage. Position the picture so that it fills the entire screen.
  19. In Frame 105… Now, CLICK ON THE PICTURE, NOT the Layer! Choose Modify, Convert to Symbol (F8). Name: picture 3, Type: Graphic, click OK
  20. On picture layer 3, Press F6 (create keyframe) on frames 120, 150,and 165to copy the new graphic symbol to these key frames.
  21. On the picture 3 layer, click on frame 105. Now, click on the picture and open the properties window. Select Color Effect, Tint: 90%, Red: 0, Green: 255, Blue: 255.

  22. On picture layer 3, click on frame 165. Now, click on the picture and open the properties window. Select Color Effect, Style: Brightness, Bright: 90%

  23. On the picture 3 layer, select frames 105 – 165. Then, right-click and choose “Create Classic Tween”

  24. Save again. Select from the menu, File, Publish Settings. Check Flash (.swf) and GIF Image. Click on GIF Image on the left. Output file: Lab 5.gif, check to Match movie, Playback choose Animated, Loop continuously, check Smooth. Now, click Publish at the bottom of the window.
  25. Open the Windows file system and right click on the file: Lab 5.gif. Choose to open the file in a browser to view the animation (open in IE, FireFox, Chrome, Safari, etc).
  26. STUDENT ASSESSMENT: Add four more layers to Flash Lab #5 for pictures 4 through 7 (pic4.jpg, pic5.jpg, pic6.jpg, pic7.jpg). Add key frames (F6) and Color Effects to each picture layer to complete the picture slide show for seven (7) total pictures. Save as: “Lab 5 Assessment.fla” Publish as .swf and .gif.