| Although the timeline is a powerful feature, you shouldn't feel restricted to playing animations only when the page loads. In the next couple of sections, you'll see how you can use behaviors in conjunction with the timeline to control which and when animations play depending on user interaction. Armed with this knowledge, you'll see how to create an animated pop-up menu. Controlling the Timeline with Behaviors In the previous sections, you looked at creating animations when the page loaded for the first time. Of course, this method is restrictive because the user can't control when the animation plays. To fix this problem, we could easily add buttons to the page that, when clicked, start or stop a particular animation. To add this functionally, follow these steps: 1. | Switch to each timeline (Timeline1 and Timeline2) in the Timelines panel and disable the Autoplay check box for both timelines.
| 2. | Place your cursor in the top-left corner of the screen and insert a new form object button. You can do this by choosing Insert, Form Objects, Button.
| 3. | Select the button and change the physical properties of it in the Properties Inspector so that the Label reads Play Timeline 1 and the None Action is selected.
| 3. | Open the Behaviors panel by choosing Window, Behaviors.
| 4. | With the button selected, choose the Play Timeline Behavior located in the Timeline submenu of the Add (+) menu in the Behaviors panel.
| 6. | When the Play Timeline dialog appears (see Figure 17.11), choose the Timeline1 option from the Play Timeline menu and click OK.
Figure 17.11. Select the Timeline1 option from the Play Timeline menu. 
| 7. | Make sure that the onClick event is associated with the button.
| 8. | Repeat steps 27 to add a button that reads Stop All Timelines and attach the Stop Timeline behavior available from the Timelines submenu by clicking the Add (+) menu in the Behaviors panel.
| 9. | Save your work.
|
Now preview the result in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). This time, you can start and stop Timeline1 at will. Of course, you could add a third button that allows you to play Timeline2 specifically. Creating an Animated Pop-Up Menu In Chapter 10, "Using Dreamweaver Behaviors," you looked at the Show Pop-Up Menu behavior. The downside to using this behavior is that you were limited to using stylized menus rather than your own customized images. Furthermore, the pop-up menu you created in Chapter 10 could only show or hide; animation was non-existent. What if you wanted to accomplish bothuse your images in a menu that slid in and out from view depending on user interaction? With a little timeline magic, this is completely possible. In this section, we'll discuss how to use your own images in an animated pop-up menu. You'll use behaviors in conjunction with layers, images, and the timeline to create a stunning animated menu. Let's get started: 1. | Create a new page by choosing the New option from the File menu. Select the HTML option from the Basic page category and click Create.
| 2. | With the new page ready, insert a new layer by choosing Insert, Layout Objects, Layer. Give the new layer an ID of Management and a Z-index of 2.
| 3. | Add the menu_management.gif image (located in the Assets folder) to the layer and resize the layer to fit squarely around the image.
| 4. | Insert a second layer by choosing Insert, Layout Objects, Layer. Give the new layer an ID of Menu and a Z-index of 1.
| 5. | Position the Menu layer so that it lines up just underneath the Management layer.
| 6. | Add the five images (menu_agnes.gif, menu_cammy.gif, menu_ferris.gif, menu_herbert.gif, and menu_mike.gif) to the Menu layer and resize the layer so that it fits squarely around the five.
| 7. | Drag the Menu layer into the timeline and resize the animation so that it consumes only five frames (see Figure 17.12). Notice that the beginning of the animation starts at frame 2 and the end stops at frame 6.
Figure 17.12. Add the Menu layer to the timeline and drag the animation so that it consumes only five frames. 
| 8. | Select the first keyframe in the animation and then click the Menu layer in the Document window. Use the Up Arrow key to position the starting point of the animation out of sight under the Management layer (the Menu layer has a lower z-index). Essentially, the Mike image should line up directly under the Management image. Scrub the playback head to preview the path that the animation will take: it should slide in and out from the top of the Document window similar to Figure 17.13.
Figure 17.13. The menu should slide in and out from the top of the Document window. 
| 9. | Select the Management image (located within the Management layer) and choose the Go To Timeline Frame behavior, located in the Timeline submenu in the Add (+) menu in the Behaviors panel. When the Go to Timeline Frame dialog appears, enter the value 2 in the Go to Frame text box and click OK. Make sure that the onMouseOver event is associated with this behavior.
| 10. | Select the Management image (located within the Management layer) again and choose the Go To Timeline Frame behavior again. When the dialog appears, enter the value 1 in the Go to Frame text box and click OK. Make sure that the onMouseOut event is associated with this behavior this time (see Figure 17.14).
Figure 17.14. Add two behaviors, one with an onMouseOver event that jumps to Timeline frame 2 and one with an onMouseOut event that jumps to Timeline frame 1. 
NOTE By now it should be evident that we're creating functionality that instructs the browser to go to timeline frame 2 and begin playing the animation when the user's mouse rolls over the management image. Furthermore, we're also instructing the browser to go to timeline frame 1 when the user's mouse rolls out of the management image. Because timeline frame 1 is essentially empty, this is the perfect spot to place the playback head when you want to "reset" the animation and make the drop-down menu appear as if it is hidden. | 11. | Select the Menu layer and choose the Go To Timeline Frame behavior, located in the Timeline submenu in the Add (+) menu in the Behaviors panel. When the Go to Timeline Frame dialog appears, enter the value 6 in the Go to Frame text box and click OK. Make sure that the onMouseOver event is associated with this behavior.
| 12. | Choose the Go To Timeline Frame behavior again. When the dialog appears, enter the value 1 in the Go to Frame text box and click OK. Make sure that the onMouseOut event is associated with this behavior. In this scenario, we're instructing the browser to keep the menu where it's at (where the animation finished on frame 6) when the user's mouse rolls over and stays over any part of the layer but to reset itself or jump to frame 1 when the user's mouse rolls out of the layer. The process of adding behaviors to layers only works in Internet Explorer 4.0+, Netscape 6.0+, Opera 1.0+, and Firefox 1.0+.
| 13. | Enable the Autoplay check box in the timeline.
| 14. | Select the first frame in the Behaviors channel and attach the Stop Timeline behavior to this frame.
| 15. | Select the second frame in the Behaviors channel and attach the Play Timeline behavior to this frame. The result looks similar to Figure 17.15.
Figure 17.15. Add a Stop Timeline behavior and a Play Timeline Behavior to the first and second frame respectively in the Behaviors channel. 
| 16. | Save your work.
|
Test the result of the page by choosing the Preview in Browser option from the Document bar (or by pressing F12). Notice that the menu appears to slide out of the Management image when you mouse over the image but hides itself when you mouse out of either the Management image or the Menu layer. Creating an Image Slideshow Another powerful use for the timeline is the option of creating an image slideshow. In this scenario, an image on the page changes over time. Because the timeline is time-based, you can set the time that the user sees an image before the image moves to the next image. Even better, you can add buttons to the page and use the Go To Timeline Frame behavior to have the user select which image they want to see. Remember that the only object you can add to a timeline other than a layer is an image. If you want the image to animate however, it has to be placed in a layer; only layers can animate in Dreamweaver. Furthermore, if you add an image to the Timeline, although you cannot animate it, you can change the image's source over time, giving the impression of an image-based slideshow. To create the slideshow, follow these steps: 1. | Open a new document by choosing the New option from the File menu. Select the HTML option from the Basic Page category and click Create.
| 2. | Add a layer by choosing Insert, Layout Objects, Layer. Position the layer where you want it in the Document window. In this case, the layer exists simply for placement of the graphics and has nothing to do with the animation.
| 3. | Drag one of the headshot images located in the Assets folder into the new layer.
| 4. | With the image selected, choose Modify, Timeline, Add Object to Timeline.
| 5. | Drag the last keyframe out to frame 100.
| 6. | Select the animation in the timeline and place the playhead over frame 10. With the playhead positioned properly, right-click the animation and choose the Add Keyframe option from the context menu. A new keyframe appears in frame 10.
| 7. | With the playhead still positioned over frame 10, select the graphic (the headshot) in the layer. Use the point-to-file icon next to the image's Src field in the Properties Inspector to change the source of the image to the second headshot image in the Files list (see Figure 17.16). Notice that the image is different on frame 10; however if you scrub the playhead back to frame 1, the original image is still present.
Figure 17.16. Replace the source of the image in frame 10 with a new headshot image. 
| 8. | Repeat steps 6 and 7, adding keyframes every 10 frames and switching the image's source to a new headshot image.
| 9. | Make sure that both the Autoplay and Loop check boxes are enabled. Change the FPS setting to 5.
| 10. | Save your work.
|
Preview the slideshow in a web browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). When the slideshow plays, notice that a new headshot image appears every 2 seconds. |
