Creating Simple Slideshows

---

Slideshows are a popular way to display images, and there are lots of methods to set them up. In Dreamweaver, you can use the Timelines panel to trigger Swap Image to switch slides or set up your images in layers and use Show-Hide Layers to do effectively the same thing.

About the Timelines panel

Timelines use DHTML to change the properties of layers and images over time. No plugin, ActiveX control, or Java is required, but JavaScript is used. Timelines involve frames that mark time as the Timeline is played. In the context of Timelines, a frame is a moment in time and you may set the number of frames that play (frames per second) in any timeline. Using a Timeline, you may change the position, size, visibility, and stacking order of a layer.

Behaviors may be added to a Timeline that triggers in a specific frame. For example, you could trigger a Swap Image in Frame 10, 20, 30, and so on, or have one of a series of layers show while the others hide by using the Show-Hide Layers behavior. A special channel of frames is reserved for adding behaviors, as shown in Figure 44-5.

Figure 44-5: The Behavior channel is used to add JavaScript functions. They are triggered when the playback enters the frame, and use an onFrame event.

Swap Image slide show

Because a slide show is just a series of images that change one after the other, the Swap Image behavior is an obvious candidate for powering the show.

1.  Habitat Alert site   Use the Site panel to select slideshow\swap_image _done.htm and press F12 to preview. Watch as the slideshow plays through. Besides Swap Image, Set Text ® Set Text of Status Bar was also added to provide a caption for each slide, as shown in Figure 44-6.

   
   Figure 44-6: Slides with captions

2. When done, close the finished version and open swap_image_ slideshow.htm. Choose Window ® Others ® Timelines to open the Timelines panel. Name the Timeline slideshow.

3. Select the bird image in the HTML document. Note that the image is named "slide" so that you can refer to and control it with JavaScript. Click in Frame 1 of the slideshow Timeline's behavior channel and click Add (+) to add the Swap Image behavior.

4. In the Swap Image dialog box, select the slide image from the Images list.

5. Browse to the sharedimages\circlbirds folder and select  circlepic0.jpg. This is the same image that is already in place in the document. You add it to the Timeline so that when the Timeline loops, that image displays. The image inserted into the document will not reappear. Close the dialog box, leaving Preload Images checked.

6. To add the status bar caption, click Add (+) Set Text ® Set Text of Status Bar. In the field provided, type An immature Black-Crowned Heron. and close the dialog box by clicking OK.

   Caution 

   Note that the event for both of the behaviors is onFrame1. When working with Timelines and adding behaviors, it is critical that you always click into Frame 1 of any animation channel prior to making any modifications to the HTML document, especially if you are adding behaviors not related to the Timeline itself. Failure to do this may result in non-Timeline behavior events being onFrame# rather than onClick, onMouseOver and the like.

7. Click into Frame 5 and repeat Steps 5 and 6, but this time choose  circlepic1.jpg and set the status bar text to A nesting Blue Heron gathers twigs for the nest. Note now that the events for both behaviors are onFrame5.

8. Repeat the steps for each slide using the information from Table 44-1 as you add images and status bar captions.

   Table 44-1: Slide Show Images and Info

   Frame Number	Image File Name	Status Bar Caption
   1	circlepic0.jpg	An immature Black-Crowned Heron.
   5	circlepic1.jpg	A nesting Blue Heron gathers twigs for the nest.
   10	circlepic2.jpg	Patience is a virtue for the stalking Blue Heron.
   15	circlepic3.jpg	A very young Night Heron.
   20	circlepic4.jpg	A noise startles the young Black Heron.
   25	circlepic5.jpg	You can find the Great Blue Heron stalking fish in wetland habitats.
   30	circlepic6.jpg	The male brings nesting materials to the female Blue Heron.

9. After you added all the images and captions, set the frames per second to 1. This means that each slide will display for 5 seconds. For a longer interval, drag the behaviors to different frames; for example, move the behaviors to 1, 10, 20, 30, and so forth to get a 10-second interval.

10. Check the Autoplay option in the Timelines panel. A dialog box (Figure 44-7) lets you know that the behavior Timeline ® Go To Timeline Frame is being added. Check the Don't Show option to avoid seeing this dialog box again.

    
    Figure 44-7: The Autoplay dialog box

11. Check the Loop option to cause your Timeline to repeat. The Loop dialog box (Figure 44-8) lets you know that the Timeline® Go To Frame action will be added to enable the loop. Because this action is added in the frame just after your last slide behaviors, grab the Loop behavior and drag it to a later frame. If each slide is five frames apart, move it five frames past your last slide.

    
    Figure 44-8: The Loop dialog box

12. Save and preview to check out your slideshow.

    Tip 

    Be sure you preview in all your target browsers because different browsers display status bar messages in different locations. Keep the message short.

Show-Hide Layers slide show

You can create a similar slide show by placing each image into its own layer and using the Show-Hide Layers behavior to show one of a group of layers. If you preview  s-h_slideshow_done.htm (in the slideshow folder of the Chapter 44 site), you can see that this slide show works just like the one using the Swap Image feature, except no status bar caption was added. Layers were added over the circlepic image. Each layer contains one of the slide images. To create the layers, follow these steps:

1. Open  show-hide_slideshow.htm from the slideshow folder.

2. In Design view, grab the Draw Layer tool from the Insert bar/Common panel and click and drag to draw the layer. When you let up, the layer appears and is named Layer 1 in the Property inspector and the Layers panel.

3. Rename the layer pic0. You may double-click the Layer1 name in the Layers panel or the Property inspector to change the name.

4. Select the layer by its small handle (top-left of layer). Move the layer over the circle picture area (the position should be Left 0 and Top 119). There are several ways to move a layer:

   • With its handle.

   • By selecting the layer, and using the Property inspector to change the L (left) and T (top) coordinates.

   • By selecting the layer and using the arrow keys to move 1px per key press. Holding the Shift key down changes the increment to 10px.

5. Click into the layer and add the image sharedimages\ circlebirds\circlepic0.jpg.

6. Select the layer again. Because you already have the image inside the layer selected, you can use the Tag selector to select the layer container. Layers display in the Tag selector with the <div> tag and CSS ID, as in <div#pic0>. Copy the layer (Edit ® Copy) and paste it six times (Edit ® Paste). Be sure your cursor is outside the layer before you paste, otherwise you'll paste inside the layer.

7. In the Layers panel, you should see seven pic0 layers. Double-click the layer second from the bottom of the list and rename it pic1. Move up a layer and name that one pic2, and so on until you have pic6.

8. Clicking the Layer panel's eye icon sets layer visibility. Use the master icon at the top of the layer list to set all the layers to hidden (closed eye). There are three settings. Open-visible, closed-hidden, and no eye-inherit.

   All the layers should be hidden because you will show one layer at a time. If you click into the document (not on a layer) the layers all disappear. The visible bird image is the actual image in the HTML layout.

9. Use the Layers panel to select any layer except the bottom one. A hidden layer displays in the document if it is selected to facilitate working in the layer. Double-click the image in the layer and change it to  circlepic1.jpg. Repeat selecting each layer and changing the copied image to one of the slides, working your way up the Layers list.

10. Add a Timeline (Windows®Others®Timelines), naming it slideshow.

11. Click add (+) to add the Show-Hide Layer behavior to Frame 1 of the Behavior channel. Use the buttons (Figure 44-9) to set all layers except pic0 to Hide. Set pic0 to Show. Close the dialog box. Allowing 5-10 frames between behaviors, add the Show-Hide Layers behavior, each time showing only the appropriate layer while hiding all the others.

    
    Figure 44-9: The Show-Hide behavior dialog box

12. When finished, enable Autoplay and Loop, and move the Loop behavior 5-10 frames to the right to allow the last "slide" layer to display.

13. Save and preview. You could easily add a Set Text of Status Bar caption to each behavior frame as you did in the Swap Image slideshow.

    Tip 

    Add comments to your code when using layers (or any complex structures) so that the page code is easy to understand and edit. For example, <!-- STARTS THE LAYERS FOR THE SLIDESHOW --> enables any developer to know that the layers for all slides start below the comment. An ending comment can also be useful. <!-- is placed before the text comment and --> after to hide the text of the comment from the browser.

---