Macromedia Dreamweaver 8 UNLEASHED [Electronic resources] نسخه متنی

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.

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.

1.

Create a new page by choosing the New option from the File menu. Select th215 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.

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.

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

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.

16.

Save your work.

1.

Open a new document by choosing the New option from the File menu. Select th215 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.

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.