Using t he Ti meli ne F unc ti on i n Dream weaver In this exercise, you’re going to use the timeline tool to create a “slideshow.” It’s similar to the image swap that we did, only you’ll use a button to enable your users to control the slideshow. You can use any images that you want for the slideshow, but make sure that they are all the same size in terms of their dimensions. I’ve used the “rule” images that we used in class the other night. Before getting started, make sure that you have the images in your site folder. You’ll also find a file called “timeline_button.jpg” in the Files section of the class wiki—download that, as well. 1. Inserting AP Divs: • We haven’t worked with them in class, but tags are basically “empty boxes” that you can use to position objects anywhere you like on your html pages. AP (which stands for “absolute positioning,” as you can specify the exact location of the div on the page) divs can be tricky to work with, which is why we haven’t done a lot with them • First thing to do is to create a new blank html page (or, if you prefer, you can use one of your England pages) • Under the Layout tab In the Insert bar, look for the “Draw AP Div” button, which looks like the screenshot below:

• When you click on that, the cursor will turn into a cross. Click and drag in the design area (I would start at the top left hand corner just for ease) and draw a box.

1

• After you’ve drawn it, click on the border of the box (which is actually a tag—you’ll see it if you look up in the code area)—your selection should look something like the blue box that you see below:

• Using the property inspector, give the layer an id (circled on the property inspector above. I’ve called this first layer “Layer 1,” but you can call it whatever you want. Unlike the image swap exercise, we’re not too concerned with ID names here. • You should also take note of the positioning of the div by looking at the position on the Properties inspector (in the red box above). There are 4 boxes for positioning: L, T, W, H. The “L” represents how many pixels the div is from the left margin of the page (or, more specifically, whatever the div’s parent container is); the “T” represents how many pixels the div is from the top margin. By using L and T, you can pinpoint exactly where the top left corner of any div tag is. The other two dimensions, “W” and “H,” will then tell you the exact size of the div. • I happen to know that all of the “rule” images are 144 x 144 pixels, so you could set the width and height of your div tag to those exact proportions. • Finally, you should also set the Visibility of the div to hidden by using the Vis menu (the orange box above). This will ensure that the div tag is hidden when the page loads. Also in the orange box above, you’ll see the X-index (or “stacking order”—this is the order in which the layers “stack” on top of one another). For this exercise, every div should have a zindex of 1.

2

• Using the Insert menu (or whatever your preferred means for placing an image on the page is), go ahead and place the first image that will appear in your slideshow inside of the div. • You should repeat the steps above for each image that you have. The easiest way to do this is to select the div (so that it is outlined in blue, as you see above), copy it, and then paste (this will probably only work by using the Edit menu, rather than the Cmd + C, V or Ctrl + C, V). • You should have one div for each image. Each image should be in its own unique div. 2. Using the timeline: • Open the Timeline Inspector by selecting Timelines from the Dreamweaver Windows menu. • If you are at all familiar with Flash or even imovie, you’ll see a familiar timeline interface:

• We’re not going to spend much time with the timeline at all, but here’s a quick description—the numbers represent frames, just as in a movie. The red tab is the frame indicator, which indicates the frame that you are currently working in. • Below is a screenshot of what you’re timeline should look like once we have finished this exercise:

3

• To add the layers that you’ve created to the timeline, look beneath the “AP Elements” tab in the CSS palette, as pictured below:

This list will have generated automatically as you were creating your layers in the design area. The eye in red above indicates the layer visibility: remember that you set this using the Properties inspector as you were creating layers (you also set the stacking order, or x-index, which is circled in green above). The Name (in blue) is the ID that you assigned to each layer • Click on the name “layer1” in the AP elements list, which will make the layer visible in the design area. The layer will be selected (outlined in blue)— just click anywhere inside the layer and drag it on to channel 1 (the channel numbers are in the orange box in the screenshot of the timeline above). Do the same with layers 2 and 3. • Each time that you drag a layer in, a blue line will appear in the channel, along with a circle (or “keyframe,” which is a frame in which some change occurs to the image) in the first and last frame. Go ahead and drag the circle at the end of 4

each channel back to frame 8, so that they resemble the timeline above. • In a nutshell, what we’re going to do is “show and hide” each layer as the frame indicator moves along the timeline. Basically, we’re going to create a button that makes the “play head” (or frame indicator) advance to the next key frame in the movie. At each key frame, we’ll build in a behavior that makes the play head stop, as well as hides the layers that we don’t want to see at the moment. • To show and hide each layer: • In frame 1 for all 3 layers, the visibility should look like this under the AP tab:

The way that you change visibility is by clicking on the eyeball associated with each layer. But be careful when doing this, because when you make changes, you wind up adding key frames to channels that you may not want. • So, when you click on the key frame in frame 1 on each channel, the visibility will look like it does above • Now we’re going to add key frames. Right click (Ctrl + click) in frame 3 on channel 1 and select “Add key frame” from the edit menu. A circle will appear in the channel 1 timeline • With the key frame selected (it will be highlighted in a darker shade of blue), click on the eyeball for layer 1 until the eyelid is closed (it looks like it’s sleeping)—this will change the visibility of the layer to hidden. • Now, in frame 3 for channel 2 (make sure that you’re working in channel 2!), add another key frame. This time set the visibility of layer 2 to visible

5

by clicking on the eyeball until it’s open. At this point, layers 1 and 3 should be hidden and layer 2 should be visible. • Now go to frame 6 and add key frames for channels 2 and 3 (layer 1 can remain hidden)—do it just as you did above, by selecting the frame, adding the key frame, and then changing the visibility. Frame 6 for channel 2 should be set to hidden and frame 6 for channel 3 should be set to visible. • Finally, set the visibility for the last key frame in frame 8 on each channel to the following: channel 1 should be visible and channels 2 and 3 should be hidden. • Make sure that the loop checkbox (circled in yellow of the screenshot of the timeline above) is checked so that the “movie” will loop back to frame 1 as your users cycle through the images. • To recap, you’ve just gone ahead and set the visibility for each layer as the play head advances through the movie. As one layer appears, the other will be hidden-think of it as making the cards in a deck of cards visible and invisible over time so that you can see through to certain cards. • To add pauses to the timeline (which will enable your users to pause on each image before advancing to the next): • Look for the Behavior channel in the timeline—it’s outlined in blue below:

6

You can use the behavior channel to add javascripting, which will control the play head as your users go through your slideshow. • You’re going to add a “Stop Timeline” behavior to frames 4, 6, and 8 in the Behavior channel (the B channel) so that the play head stops there until your user advances it by using a button, thus enabling him or her to stop on each image. • Double click on frame 4 of the behavior channel (if a menu comes up, just hit OK) • Dreamweaver should automatically take you to the Behaviors tab (pictured below), but if not, go to the Behaviors tab beneath the Tag palette:

• Using the + sign, you want to add a Stop Timeline behavior to the frame—the menu option is pictured below:

• Repeat this in frames 6 and 8 in the behaviors channel 7

• If you click on one of the dashes that now appear in frames 4, 6, and 8 of the behavior channel, you’ll see the javascript behaviors that you’ve added—onFramex, Stop Timeline. Remember that javascript is event driven—when the play head arrives at a frame, it is told to stop the play head. The play head won’t move again until a “Play Timeline” behavior is encountered, which is what we’re going to use the button for. • Adding your button: • If you haven’t done so already, download the “timeline_button.jpg” file from the Files area of the class wiki • Just as you did with the layers above, use the Draw AP Div button (it’s under the Layout tab in the Insert bar and looks like this: ). Call this layer “button” (again, this is arbitrary, as we’re not relying upon prefab scripts here). Insert the button image in that layer • Place the layer below the layers that contain your timeline images; mine looked like this:

• With the button image selected, go ahead and add the “Play Timeline” behavior (under the Behaviors tab, just as before)—select Timeline1 from the

8

dialogue box that appears. This will enable your users to use the button to advance the slideshow. • By the way—the layer that created for the button (you called it “button”) will have appeared in the list of layers below the AP Elements tab. The eyeball space will likely be blank, as the layer is set to the default visible position. You could manually set it that way by clicking in that space until the eyeball appears. • That’s it! Save the Dreamweaver page and have a look in a browser. If there’s any bugginess, make sure that you look at the behaviors that you the visibility status for each key frame, as well as the behaviors that you generated. 3. Look at the javascript! • You don’t need to do anything with it, but be sure to look at the javascript in the code view—using the timeline has generated a large amount of javascript, along with internal style sheets. You’re done. Congratulations!!

9