In this tutorial, we'll use a Flash template (a .fla file) to create a simple photo slideshow.

Note: The template used in this tutorial is 860 x 860, which is beyond the parameters for the Contribute Web templates we are using in this class. When the time comes for you to add a Flash slideshow to a Contribute template, you must make sure that the Flash slideshow you create is less than 660 pixels wide. I have a separate, Contribute-friendly template you can use if/when you need it.

1. To begin, visit the following page to see what a finished Flash slideshow looks like:

   http://www.theindependentpublisher.com/jr200/flash-slideshow.swf

2. The slideshow is made up of the following elements:
   • Header: This contains an area for the Project title, caption information and it contains "back" and "forward" buttons that let the visitor page through the slideshow.

   

   • Photo Area: This contains the photo (obviously) and a small slot for a photo credit (located along the upper-left side of the photo).

     

3. Now that you've seen a finished Flash slideshow, it's time to dive into the Flash slideshow .fla file.

   Start Flash. Under the "Open a Recent Item" menu choose the "Open" folder. A dialog box will appear. Look for a text field labeled File Name. Type the following in the File Name text field:

   \\Pages\Courses\fall06\jr200\

   A list of folders should appear. Select the folder with your name (it will be Firstname_Lastname), then select Flash-Materials > Slideshow-Materials.

4. Find the file titled "slideShowNoAudioTemplate.fla" (it may appear as "slideShowNoAudioTemplate"). Double click to open this file.

   

5. You will be presented with a screen that looks something like this:

   

6. Look up at the timeline toward the top of the screen. You will see four layers:

   

   Here's what each layer does:

   • actions: We won't be touching this layer. Flash uses "actions" to control navigation and other interactive elements.

   • buttons: This layer contains the small arrow buttons that let a user page forward or backward through the slideshow. We'll be discussing this layer later.

   • content: This is the layer where we'll be doing the most work. It contains the individual photos that make up the slideshow.

   • background: This layer contains the green background you see in the slideshow. You are welcome to change the color and other elements in this layer.

7. Our next step is to remove the default photos included in this slideshow and then add our own. To begin, click on the "Content" layer, then click on Keyframe 1 of the content layer. Your timeline should look like this:

   

8. Go to the toolbar and select the "Subselection Tool" . Note: Do not click on the "Selection Tool" (dark arrow). The Selection Tool selects more than we want.

9. Click once in the grey "off-stage" area, then click once on the photo on the stage. Press the Backspace key. The photo should disappear. The credit and caption information areas should still be visible. If they aren't, go to Edit > Undo Delete and make sure you only select the photo. You will need the credit and caption sections later.

10. Go back up to the timeline and click on the "content" layer. Select Keyframe 2 of the content layer.

11. Click once in the grey "off-stage" area, then click once on the photo on the stage. Press the Backspace key. The photo will disappear.

12. Go back up to the timeline and click on the "content" layer. Select Keyframe 3 of the content layer.

13. Click once in the grey "off-stage" area, then click once on the photo on the stage. Press the Backspace key. The photo will disappear.

14. Go back up to the timeline and click on the "content" layer. Select Keyframe 4 of the content layer.

15. Click once in the grey "off-stage" area, then click once on the photo on the stage. Press the Backspace key. The photo will disappear.

16. At this point, we have successfully removed the four default photos. Now we need to add our own.

17. Log in to WebCT and navigate to:

    JR200 > Lab Materials > Web Lab > Flash Materials > Flash Photos

18. Click on "picture1-traffic." A photo will appear. Right-click on the photo and select the "Save Picture As" option on the ensuing menu. Save the photo to your computer (make sure you save it in a location you'll be able to access later).

19. In WebCT, go back to the Flash Photos folder. Click on "picture2-flames." Right-click on the photo and save it in the same location you saved the first picture.

20. Go back to the Flash Photos folder and select "picture3-daisies." Right-click on the photo and save it in the same location you saved the other pictures.

21. Go back to the Flash Photos folder and select "picture4-carnival." Right-click on the photo and save it in the same location you saved the other pictures. You have now saved four pictures to your hard drive.

22. Go back to Flash. We're now going to take the four pictures we saved and add them to our Flash slideshow.

23. In Flash, select File > Import > Import to Library.

24. A dialog box will appear. Navigate to the location on your computer where you saved the four photos. You can import one photo at a time or you can select all of the photos and import them in a batch, like this:

    

25. Flash will import the photos to the library. The photos will not appear on the stage. You need to confirm that the photos have imported by checking the library (Window > Library or CTRL + L). You should see the four photos listed in the library:

    

26. Click on the "content" layer, then click on Keyframe 1.

27. Go to the library and click on "picture1-traffic." Drag an instance of "picture1-traffic" to the stage and position it however you like. The stage should look something like the following (Notice that the caption and credit areas are still visible -- you need to make sure your stage has these areas):

    

28. Click on the "content" layer, then click on Keyframe 2.

29. Go to the library and click on "picture2-flames." Drag an instance of "picture2-flames" to the stage.

30. Click on the "content" layer, then click on Keyframe 3.

31. Go to the library and click on "picture3-daisies." Drag an instance of "picture3-daisies" to the stage.

32. Click on the "content" layer, then click on Keyframe 4.

33. Go to the library and click on "picture4-carnival." Drag an instance of "picture4-carnival" to the stage.

34. You have just added four new pictures to the slideshow. At this point, your timeline should look like this:

    

35. You've done a lot of work on this file, so it's time to back it up. Go to File > Save.

36. Return to the Slideshow. It's time to add caption and credit information.

37. Click on the "content" layer, then click on Keyframe 1. Click on the Magnifying Glass tool and click on the stage to enlarge the caption/credit area.

38. Select the Text Tool . On the stage, double-click on the "Credit" area (the text is vertical).

39. Type in "Photo Credit: Your Name" (this is dummy text -- in your final project you need to type in the name of the copyright holder, or, if you took the photo, you will add your own name).

40. With the Text Tool still selected, double-click on the "Caption Information" area. Type in a caption that describes the picture (Note: Remember, pictures that show people should include the names of those people).

41. At this point, your stage should look something like the following. Note that the photo credit and caption areas have been edited.

    

42. Click on the "content" layer, then click on Keyframe 2. Add a photo credit and a caption for the second picture. Repeat this same process for Keyframes 3 and 4.

43. Save your file.

44. At this point we have successfully added four new photos to the slideshow and we have entered caption and credit information for each shot. You are welcome to continue customizing the slideshow by changing the header ("Project Title" is a pretty dull name for a project) and tweaking the background.

45. When you have tweaked to your heart's content, you can export your final slideshow. Go to File > Export > Export Movie. A dialog box will appear. Name the file whatever you like but make sure it has the extension ".swf" (e.g. Slideshow.swf).

    Flash will present you with a big list of options. For the time being, leave all the options set on their defaults and simply click the "OK" button. Flash will export the movie.

46. Your exported file is now ready to be added to a Web page. Instructions on doing this are available in Adobe Contribute Tutorial 4 (http://www.theindependentpublisher.com/jr200/contribute4.html).

    Reminder: The slideshow template used in this tutorial measures 860 x 860, which is too big for the default Contribute template we use in this class. I have a Contribute-friendly slideshow template you can use if/when you need it.

How to add more photos to your slideshow The default slideshow template only has room for four photos. If you want to add additional photos, here's what you need to do: For each additional picture you create, you need to make sure you have additional keyframes. This can be a little confusing, but a good way to think of it is to imagine each keyframe as a separate document that blends content from each layer. For example, if you go to the Actions layer and click on Keyframe 1, you'll see that a red line extends veritcally through the first keyframe of every layer: The red line extends through every layer, which means that whenever you click on Keyframe 1, you are seeing the content contained in the first keyframe of each layer. In this example, Keyframe 1 shows you content from the actions layer, the buttons layer, the content layer and the background layer. This is important to understand because if you add a keyframe to the content layer (we will do this in a moment), you also need to add keyframes to each additional layer to make sure all of the actions, buttons and background content remains intact. We're now going to duplicate keyframes for each layer. Click on the actions layer and then click on Keyframe 4. Right-click on Keyframe 4. In the menu that appears, select "Copy Frames." Make sure you are on the actions layer, then right-click on Keyframe 5. Select Paste Frames from the menu. Your timeline should look like this: Click on the buttons layer. This layer is a little tricky so follow along carefully. Click on Keyframe 2 of the buttons layer. Go to Insert > Timeline > Frame (or press F5). Your timeline should look exactly like this: You'll notice that the buttons layer looks different from all the other layers -- it has a grey rectangle that extends across Keyframes 2-4. This extended grey rectangle is a Flash shortcut. What you're doing is telling Flash to display the same content on the buttons layer across multiple keyframes. In this case, we're telling Flash to display the "Forward" and "Back" buttons whenever pictures 2, 3 and 4 are visible. Don't worry too much about this stuff. Just make sure your timeline looks like the example. Click on the content layer and then click on Keyframe 4. Right click on Keyframe 4. In the menu that appears, select "Copy Frames." Click on the content layer and then right-click on Keyframe 5. In the menu that appears select "Paste Frames." Click on the background layer and then click on Keyframe 4. Go to Insert > Timeline > Frame (or press F5). Your timeline should look like this: You have successfully added an extra keyframe for each layer. Now it's time to add another picture. Click on the content layer and then click on Keyframe 5. Look down at the stage and you'll see that the picture from Keyframe 4 has been duplicated in Keyframe 5. Select the Subselection Tool . Click once in the grey "off-stage" area, then click once on the photo on the stage. Press the Backspace key. The photo will disappear. Import a new photo to the library (File > Import > Import to Library), then drag an instance of the new photo to the stage (make sure you drag the instance to Keyframe 5 of the content layer). Insert caption and photo credit information. That's it! If you want to add more photos, go through these same steps.