Create a Slide Show with the Dreamweaver Timeline

The Dreamweaver Timeline uses layers and JavaScript to create animation and interactivity. To create a series of rotating images, prepare each image at the same size in a graphics program first (i.e., Photoshop, Fireworks, ImageReady, etc.). Then insert a layer on the page. This layer will serve as a placeholder for the rotating images.

To rotate the images:

1) Choose Insert...Image and select the image to appear when the page first loads

2) Open the Dreamweaver Timeline by choosing Window...Timeline

3) Select the image and choose Modify...Timeline...Add Object to Timeline

4) The Timeline contains 15 frames by default. Drag the animation bar to frame 25 by selecting the ending bullet (keyframe) and dragging.

5) Select frame 5 on the Timeline and choose Modify...Timeline...Add Keyframe

6) Change the image source by clicking on the folder icon on the Property Inspector. Select another image. This image will appear on frame 5 of the Timeline.

7) Select frame 10 and choose Modify...Timeline...Add Keyframe.

8) Change the image source again and select an image that will appear on frame 10.

9) Select frames 15 and 20 and add keyframes to each frame respectively. Then change the image SRC on the Property Inspector at each keyframe.

10) Scrub through the Timeline by dragging the playhead. Scrubbing allows you to see a preview of the animation at each keyframe.

11) Select the AUTOPLAY checkbox on the Timeline to play the animation automatically when the page loads. Select the LOOP checkbox on the Timeline to continuously play the timeline once the page is loaded.

12) Preview the animation in your browser.

This article could be read in
http://www.flawebdeb.com/septdebtip.htm and it was developed by Debbie Berg

More information on this topic could be found in

• Example 1
  
• Example 2
  
• Example 3
  

Example of Slide Show:
Sample Page

Sample files :
Zip File 1
Zip File 2

------------------------------------------------------------------------------------------------

From macromedia site:

You can use the Image Viewer to display a series of images. The Image Viewer is useful in personal websites as a slide-show viewer for vacation photos or in e-commerce sites to showcase product photos.

Note: Website visitors must have Flash Player 7 installed to see any Image Viewers in your pages.

To use the Image Viewer in your page:

1. Place the insertion point in your page where you want the Image Viewer to appear and do one of the following:
   • In the Flash Elements category on the Insert bar, click the Image Viewer icon.
   • Select Insert > Media > Image Viewer.

   The Save Flash Element dialog box appears.

2. Browse to a location in your site to save the element, enter a name for the element, and click Save.

   Note: It's a good idea to save the Flash element in the same Dreamweaver site as the page to which you are adding the Image Viewer.

   The Flash element placeholder appears in your page and the Tag inspector opens.

3. Select the Flash element placeholder. In the Tag inspector (Window > Tag inspector), click in the field beside the imageURLs parameter, and click the Edit Array Values icon at the end of the line.

   The Edit imageURLs dialog box appears.

4. Click the Minus (-) button to remove placeholder elements; click the Plus (+) button to add images.

   You can add JPEG or SWF files.

   Note: It's a good idea to use files that are located in the same Dreamweaver site as the page to which you are adding the Image Viewer.

5. You can use the Tag inspector to set other parameters for the Image Viewer.

   For more information about the parameters, see Image Viewer parameters.

   Note: You can also set properties for the Image Viewer in the Property inspector. For more information, select the Flash element, and click the Help icon in the Property inspector.

6. Click the Play button in the expanded Property inspector to start the Image Viewer, and use the following Image Viewer controls to view images:
   • Click the Next or Previous button to view sequential images.
   • Enter a number in the text box to skip to a specific image.
   • Click the Play button to view the images as a slide show; click the Stop button to stop the slide show format.
7. Click the Stop button in the expanded Property inspector to stop playing the Image Viewer.