contents
 

project: Animated Slideshow

 
   
 

description: In this tutorial you will learn how to create an animated slideshow

Files: Links to all files can be found below.

 
   
 
   
  step 1: Download the images and watch this movie (00.mov) to learn how to change the frame rate, resize the stage, import the images as a series, and reposition them using the Edit Multiple Frames feature. When done, you will have created the Flash movie shown below. (Figure A)
   
  A
   
 

note: You must first Save your Flash file before Control > Test Movie to see your results.

   
  step 2: Watch this movie (01.mov) to learn how to add and rename layers, insert a Stop Action (to prevent the movie from automatically playing), and resize the stage once again to make room for the navigational elements (buttons) we'll add in the next step. (Save your work at the end of each step!)
   
  step 3: Watch this movie (02.mov) to learn how to make a custom button with Over, Down, and Hit states then add the appropriate ActionScript and compare your results with the example shown at the end of the movie.
   
 

Note: Some students seem to have difficulty making the text button properly. Watch this movie for a more in-depth look at creating 3-stage buttons with a Hit state.

   
  step 4: Watch this movie (03.mov) to learn how to make the complimentary back button and script it to navigate as shown in the example at the end of the movie.
   
  step 5: Watch this movie (04.mov) to learn how Shift-Click to select and move multiple frames, add keyframes, the appropriate ActionScript to make the navigation seamless, and compare your results with the example shown at the end of the movie. If you encounter difficulties, download and compare your .fla file with this one.
   
  step 6: Save and close your .fla file when you've successfully completed the first 5 steps then open a new Flash document. We are going to create the slideshow shown below. (Figure B)
   
  B
   
  step 7: Watch this movie (05.mov) to learn how to change the frame rate and the stage size then import the image sequence in the 480_x_240 folder once again. This time, however, we will convert each jpeg to a symbol and then clear the stage as shown in preparation for a more interesting slideshow.
   
  step 8: Watch this movie (06.mov) to learn how to insert instances of the symbols (created in step 7) by accessing the Library. We will then position the instances on the stage, insert new keyframes, create motion tweens, and add easing to give our animation a more professional touch. (Repeat steps for images 03-08.)
   
  step 9: Watch this movie (07.mov) to first learn if you completed step 8 correctly. After confirming your success, change the Alpha (transparency) for each instance as shown and compare your results with the example shown at the end of the movie.
   
  step 10: Watch this movie (08.mov) to learn how to add a Label layer. (Repeat for 05-08.) We will use the labels later to maintain ActionScript that would otherwise be broken when further customizing this project.
   
  step 11: Watch this movie (09.mov) to learn how to add an Actions layer that will enable our slides to animate as intended. (Don't forget to add the very last Stop action!)
   
 

note: To quickly duplicate the Stop action keyframes, hold down the Option key as you drag. Notice the plus (+) sign next to the cursor.

   
  step 12: Watch this movie (10.mov) to learn how to add instances of our graphic symbols to a Buttons layer. We will use the Transform Panel to resize the instances and the Property Panel to position them properly.
   
  step 13: Watch this movie (11.mov) to learn how to convert the graphic instances into button instances. (Symbols are found in the Library. Instances of the symbols are placed on the Stage.)
   
  step 14: Watch this movie (12.mov) to learn how to create custom Up, Over, and Down states for our buttons by changing the Alpha of the graphic instances within the buttons. (Repeat for buttons 3-8.)
   
  step 15: Watch this movie (13.mov) to learn how to add ActionScript to each button so that it plays the appropriate slide via its label rather than its current frame position. This step will be critical at a later stage in this project. Check your results with the example shown below. (Figure C)
   
  C
   
  step 16: Watch this movie (14.mov) to learn how to further customize your buttons so that each becomes 10% larger and plays a sound on the Over state. Please be sure to label your layers correctly.
   
  step 17: Watch this movie (15.mov) to learn how to add a gradient to a portion of the background (which we will later animate in a most unexpected manner) and text to inform the user how to play the slideshow. (The latter feature will only appear on the first frame of our animation.) Check your results against the example show in step 6. If you're having trouble, here's the original .fla file. (Figure B)
   
   
 
contents