In this tutorial you will learn how to create a simple timeline animation that covers five key moments in your education. This same concept can be applied to any timeline-based subject.

1. Before we begin assembling the timeline, we need to gather all of the outside material. This includes:
   • Photos we'll be using -- In this case, we'll be using stand-in photos from WebCT. Go to:

     WebCT > Lab Materials > Web Lab > Flash Materials > Timeline Photos

     Download each photo to your desktop. These photos have been cropped and optimized for this slideshow.

   • Captions and credits for each photo -- Open Microsoft Word and jot down five key moments in your education (e.g. first day of school, key classes or teachers, accomplishments, graduation, coming to Emerson, etc.). Write 20-30 words about each of these milestones.

2. Next, we need to take a look at a finished version of the timeline we're going to create. Go to:

   http://www.theindependentpublisher.com/jr200/flash-timeline-simple.swf

3. This timeline example represents the simplest form of timeline you can create. We'll be looking at more complex examples later, but for the time being we're going to focus on the core functionality of a timeline story.

   This particular timeline is made up of the following elements:

   

4. Now it's time to begin tweaking the timeline Flash template. 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 > Timeline-Materials

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

   

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

   

   Note: If you see a white box in the middle of the screen that reads "Milestone photo 5 goes here," you are viewing the end of the timeline animation. You need to use the horizontal scroll bar located beneath the timeline to zip back to the beginning of the animation:

   

7. Once you have moved to the beginning of the animation, look at the timeline. You will see five 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.

   • Button: This layer contains the button in the upper-right corner of the animation. This button lets the user progress through the steps of the timeline.

   • Content: This layer contains the photos, credits, headlines and captions we'll be using in this timeline. This is the layer where we'll be doing the most work.

   • Timeline: This layer contains the green/white dot that moves along the timeline at the bottom of the animation. You'll notice that the layer has a green background and a solid horizontal arrow. This signifies a Shape Tween (Note: Shape Tweens are covered in this tutorial).

   • Background: This layer contains the grey background you see in the timeline. It also contains the "Milestone 1-5" elements along the bottom of the animation. You can edit this area by selecting the "Background" layer.

8. Our next step is to remove the placeholder images included in this timeline and then add our own. To begin, click on the "Content" layer, then click on Keyframe 1 of the content layer.

9. 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.

10. Click once in the grey "off-stage" area, then click once on the "Milestone Photo 1 Goes Here" placeholder image on the stage. Press the Backspace key. The image 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 images. You will need the credit and caption sections later.

11. Go back up to the timeline and click on the "content" layer. Select Keyframe 20 of the content layer. Your timeline should look like this:

    

12. Click once in the grey "off-stage" area, then click once on the "Milestone Photo 2 Goes Here" placeholder image on the stage. Press the Backspace key. The image will disappear.

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

14. Click once in the grey "off-stage" area, then click once on the "Milestone Photo 3 Goes Here" placeholder image on the stage. Press the Backspace key. The image will disappear.

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

16. Click once in the grey "off-stage" area, then click once on the "Milestone Photo 4 Goes Here" placeholder image on the stage. Press the Backspace key. The image will disappear.

17. Go back up to the timeline and click on the "content" layer. Select Keyframe 75 of the content layer. (You may have to use the timeline's horizontal scroll bar to advance to Keyframe 75).

18. Click once in the grey "off-stage" area, then click once on the "Milestone Photo 5 Goes Here" placeholder image on the stage. Press the Backspace key. The image will disappear.

19. At this point, we have successfully removed the five default images. Now we need to add our own. Select File > Import > Import to Library.

20. A dialog box will appear. Navigate to the location on your computer where you saved the five photos from WebCT. You can import one photo at a time or you can select all of the photos and import them in a batch

21. 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 five photos listed in the library:

    

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

    Go to the library and click on "timeline-picture1-traffic." Drag an instance of "timeline-picture1-traffic" to the stage and position it within the guide lines. 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):

    

23. Click on the "content" layer, then click on Keyframe 20.

24. Go to the library and click on "timeline-picture2-flames." Drag an instance of "timeline-picture2-flames" to the stage. Position it within the guide lines.

25. Click on the "content" layer, then click on Keyframe 39.

26. Go to the library and click on "timeline-picture3-daisies." Drag an instance of "timeline-picture3-daisies" to the stage. Position it within the guide lines.

27. Click on the "content" layer, then click on Keyframe 57.

28. Go to the library and click on "timeline-picture4-carnival." Drag an instance of "timeline-picture4-carnival" to the stage. Position it within the guide lines.

29. Click on the "content" layer, then click on Keyframe 75.

30. Go to the library and click on "timeline-picture5-milk." Drag an instance of "timeline-picture5-milk" to the stage. Position it within the guide lines.

31. Go to File > Save.

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

33. 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.

34. Select the Text Tool . On the stage, double-click on the "photo credit" area.

35. 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).

36. Go to your Word document with your captions and copy the first caption you wrote. Return to Flash. With the Text Tool, double-click on the "Insert caption information here ..." area. Paste in the caption from your Word document.

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

    

38. Click on the "content" layer, then click on Keyframe 20. Add a photo credit and a caption for the second picture. Repeat this same process for Keyframes 39, 57 and 75.

39. Save your file.

40. At this point we have successfully added five new photos to the timeline and we have entered caption and credit information for each shot. You are welcome to continue customizing the slideshow by changing the header, tweaking the background and making other edits.

41. When you're finished editing, you need to 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. timeline.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.

42. 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).

Advanced Timeline: Employing Motion Tweens The timeline we just created is a ridiculously simple example of a timeline's functionality. There's much more that can, and should, be done with timelines. For example, the following timeline adds additional animation to the basic timeline we just created: http://www.theindependentpublisher.com/jr200/flash-timeline-swoop.swf Notice that the pictures in this timeline "swoop" into position. This is done through a Motion Tween (a Motion Tween tutorial is available here). You can see how this timeline is developed by doing the following: Open 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 > Timeline-Materials. Find the file titled "TimelineTemplate1-photo-swoop.fla" (it may appear as "TimelineTemplate1-photo-swoop"). Double click to open this file. When the file opens, make sure you are at Keyframe 1. Your timeline and stage should look like this: You'll notice that in this .fla file, there's an additional layer: Photos. The Photos Layer is necessary because we're adding motion tweens to the timeline. All tweens must occur on their own layer (there cannot be any other material on the layer or the tween won't work). Because we're going to use a motion tween to make the photos "swoop" into place, we need to make sure these tweens all occur on the new Photos Layer. Click on the Photos Layer, Keyframe 9. Select the magnifying glass, then hold down the ALT key (near the spacebar on the keyboard) and click on the stage. The view will decrease and you'll see more of the stage, like this: Notice that the "Milestone Photo 2 Goes Here" placeholder image is located "off-stage" in the grey area. This is done so that in the final .swf file it will look like the image is "swooping" in from the side. Go to the Photos Layer, Keyframe 20. You'll see that the "Milestone Photo 2 Goes Here" placeholder image is now positioned on the stage, within the guide lines. This placement represents the end of a motion tween. In this tween, the "Milestone Photo 2 Goes Here" placeholder image started off-stage and then it swoops into place on the stage. The motion tween located on the Photos Layer, Keyframes 9-20 made this happen: Motion tweens are also used along the Photos Layer to make pictures 3, 4 and 5 "swoop" into view. If you look at the Photos layer, you should be able to identify the motion tweens between the following keyframes: Photos Layer, Keyframes 29-39 (this makes photo 3 "swoop"). Photos Layer, Keyframes 48-57 (this makes photo 4 "swoop"). Photos Layer, Keyframes 65-75 (this makes photo 5 "swoop"). If you want to experiment with the motion tweens in this TimelineTemplate1-photo-swoop.fla file, here's what you need to do: Log in to WebCT and go to Lab Materials > Web Lab > Flash Materials > Timeline Photos. Download the five photos to your hard drive (note: If you have already completed the first part of this tutorial, the photos are already on your computer). Go into Flash and go to File > Import > Import to Library. Select the five timeline photos and import them into your Flash library. Click on the Photos Layer, Keyframe 9. You'll see that the Milestone Photo 2 placeholder image is located off-stage. Go to the library and select "timeline-picture2-flames" and place an instance of this photo directly over the placeholder image off-stage. Right-click on the "timeline-picture2-flames" instance you just placed. In the menu that appears, select Arrange > Send Backward. The Milestone Photo 2 placeholder image should reappear. Click once on the placeholder image and press the Backspace key. The placeholder image should disappear. Go to the Photos Layer, Keyframe 20. Select the Subselection tool, click once in the grey off-stage area, then click once on the Milestone Photo 2 placeholder image on the stage. Press the Backspace key to delete the placeholder image. Go to the library and drag an instance of "timeline-picture2-flames" to the stage. Place the image within the guide lines. At this point, you have just edited the "swoop" motion tween for the second photo. Repeat this same process with photo 3 (Photos Layer, Keyframes 29 and 39), photo 4 (Photos Layer, Keyframes 48 and 57), and photo 5 (Photos Layer, Keyframes 65 and 75). When you're done, save your file and then go to Control > Test Movie (or press CTRL + Enter). As you progress through the timeline you should now see "swooping" pictures for Milestones 2-5.

Deconstructing a Very Advanced Timeline In the last part of this tutorial we're going to take a look at an advanced timeline that blends a variety of tweens, images and text. To begin, view the finished timeline here: http://www.theindependentpublisher.com/jr200/advancedTimelineTemplate.swf Click the "Next Stop" button in the lower-right corner to progress through the timeline. Notice how the photo of Nellie Bly moves across the map. Also notice, as Nellie moves, the timeline "status bar" at the bottom of the screen also moves. When you are finished looking at the Nellie Bly timeline, open 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 > Timeline-Materials. Find the file titled "advancedTimelineTemplate.fla" (it may appear as "advancedTimelineTemplate"). Double click to open this file. Immediately, you'll notice that this .fla file's Flash timeline is very long. A long timeline is common in advanced and intricate projects. It can take some time to get used to working along a horizontal timeline, so spend a moment using the timeline scroll bar to move back and forth. This timeline project looks complicated, but the basic elements are things we have already encountered in this tutorial. For example: Go to the Button Layer, Keyframe 1. This layer contains the Next Stop button in the lower-right corner of the project. This button has the exact functionality as the buttons we used earlier in this tutorial. The only difference is that the button itself has a nicer design than the bare-bones buttons we used. Go to the Caption Layer, Keyframe 1. When you are on this layer, you should see a caption for "November 14, 1889" appear on the stage. These captions are built very similarly to the captions we used in conjunction with the photos in the earlier tutorials. The material in this caption is a simple paragraph that "appears" on a certain keyframe -- we used this same technique when we added captions to Photos 1-5 in the earlier tutorials. Go to the Content Layer, Keyframe 1. You'll notice that this entire layer has a purple background and a solid horizontal arrow, which are the marks of a Motion Tween. This tween is used to guide the photo of Nellie Bly across the map -- when she moves from one geographic location to another, the motion tween is the method that is making this happen. One key difference in the motion tweens used in this project and the ones we used earlier is that these motion tweens are set to execute over different "distances." The tweens themselves correspond to the geographic jumps that Nellie made -- some of these jumps are longer than others. You can see the difference in the tween lengths by grabbing the timeline's horizontal scroll bar and slowly scrolling to the right. Take note of the different sizes of the purple motion tweens. Short lengths represent "short" tweens. Long lengths represent "long" tweens. Go to the Timeline Layer, Keyframe 1. You'll notice this layer has a green background and a solid horizontal arrow -- these are the marks of a Shape Tween. This shape tween is used to create the "status bar" in this project. As Nellie moves from place to place, the shape tween in the status bar moves horizontally across the bottom of the screen. Go to the Background Layer, Keyframe 1. Part of what makes this project look more advanced is that it has an image of a map as its background. The earlier parts of this tutorial used a solid grey background, which gave the timelines a simplistic look. Adding an image-based background to Flash is quite easy: You simply import a cropped and optimized image into the library, then you add that image to the Background Layer, Keyframe 1. What we're going to do now is explore this project and edit a few components. We'll start with an easy one: Go to the Content Layer, Keyframe 1. Double click on the caption dated November 14, 1889. In the screen that appears, select the text tool and change the text in the caption (change it to whatever you like). When you're done, look up at the tool bar and click on "Scene 1" to return to the main Flash project. (Note: When you double-clicked on the caption you edited a symbol -- that's why you were taken to a different screen and that's why you need to click on "Scene 1" to return to the main project area; all of the captions in this project are saved as symbols). Next, you need to edit the caption for Nellie's "Day 24, December 8, 1899" entry. This will require you to "scrub" the timeline until you find this particular area (note: "scrubbing" requires clicking and holding on the red rectangle at the top of the timeline and then moving the mouse to the right -- you'll notice that the timeline scrubs quickly, so you'll need to vary the speed to see the captions.) One hint: The December 8 caption is located after keyframe 250. Finally, I want you to find the keyframe that deals with Nellie's arrival in San Francisco. In an email, tell me the Day Number and the Date she arrived. Also, answer this question: What disease is mentioned in the caption for this day? You can send your answers to macslocum@gmail.com. Be sure to include "Nellie Bly Answer" in the subject. That's it!