|
Dreamweaver Workshops |
Timelines
Timelines change properties over time. Timelines can be used to animate objects, apply behaviors to objects, manipulate layers, and more. Timelines use JavaScript to define the timeline actions.
The Timelines Panel
Layers
Layers are used to position elements precisely on a page. A layer that you create can contain a variety of objects including text, images, and other objects. BEWARE of LAYERS - older browsers do not always display layers properly and Netscape has trouble interpreting layers.
There are two basic types of layers that can be used. CSS-P layers are generic layers that if used, can be interpreted by both Microsoft and Netscape browsers. These layers are specified by the World Wide Web's Consortium and so are somewhat standardized. Netscape layers using the <Layer> and <Ilayer> tags can only be interpreted by Netscape browsers.
Once a layer is inserted, you can control its properties with the Property box. Among the properties you can control are the following:
w Background color - a layer can have a background color separate from the document inside which it resides.
w Background image - a layer can have a separate background image.
w Z order - you can stack layers on top of each other. The Z order controls the order in which the layers are stacked. The layer with the highest z-index number is the one on top.
w Visibility - layers can be visible or invisible. Under program control (JavaScript) you can toggle the visibility property so that layers appear or disappear when students take some action.
w Overflow – this controls how the layer displays content that is larger than the layer.
Something to keep in mind - some Netscape users may have troubles with layers when they resize the browser window. When you use layers it is a good idea to test minimizing your window and then maximizing it. If the layers are thrown off, there is a command in the Command Menu to Add/Remove Netscape layer Fix. Be careful using this command. If you layers are not altered, do not use the command (the command causes the page to reload each time the window is resized).
Images from mbgnet.mobot.org/sets/ency.htm, www.rainforest-alliance.org/kids&teachers/kids/coloring-book and www.grsites.com
1. Create a site called timelines – use the folder located on the C: drive called timelines.
2. Close all pages. Start a new page. Save it in the phoenixzoo folder. The filename should be tropictrail.htm
3. From the Insert menu, select Layer (a predetermined layer size can be changed - open the Edit Menu, select Preferences and then Layers).
4. You can also select the Draw Layer icon from the Objects palette. Your pointer becomes a crosshair cursor. Click anywhere in your document to position the layer and drag out a rectangle. Release the mouse button when you have an approximate size and shape with which you're satisfied.
5. Names are important when working with layers. To refer to them properly for CSS and JavaScript purposes, each layer must have unique name: unique among the layers and unique among every other on the Web page. Dreamweaver automatically names each layer as it is created in sequence: Layer1, Layer2, and so on; but you rename them with names that are easier to remember by replacing the Layer# name in the text box on the far left of the Property Inspector.
6. The new layer appears as a box inside your document window. Notice that the cursor is active inside the layer, ready for you to type text.
7. Click the small box in the upper left hand corner to select the layer. While it is selected, you can drag it with your mouse to any new position. You can also open the layer window and click on a layer name to select the layer or use the eye box located at the top left of the page.
8. Drag the layer to the middle of the screen. Click inside the layer and type the words What to See. Format the words (use a large size and a different color. Press the enter key.
9. When the frame is selected, you can add a background to the layer (just like adding a background to a table cell).
10. Insert a new layer and place a graphic in the layer also add text to label the image. Resize the layer to just fit the text and image.
11. Drag this layer above and to the right of the main text layer in the middle of the page.
12. Add three more layers in the same way (adding an animal and text to each). Arrange the layers to match the general diagram below.
13. Save this file as whattosee.htm. Save it in the phoenixzoo folder.
Recording an animation path
Another Example
www.macromedia.com/support/dreamweaver/interactivity/layers_timeline/
1. Create a new site. Use the folder called timeline located on the c: drive. Name the site Timeline examples.
2. Open the file called animation.htm.
3. Select one of the layers on the page. Open the Modify Menu and point to Timeline. Select the Record Path of Layer command.
4. Make sure the playback head is at frame 1 (move it there if it is not).
5. Use the layer’s handle and drag the layer on the path you want it to move. A dotted line should mark the path. Keep the animation short.
6. When you let go of the mouse button, the gray dotted line will become solid. If a box appears warning about Netscape attributes, close the box.
7. Check the AutoPlay and Loop boxes.
8. Now double click the - symbol that appeared in the behaviors channel at the last frame of your timeline. You can edit the Go To Timeline Frame action (left double click on the action) and control the number of loops and other features.
9. Save the page as animation2.htm and preview in the browser.
10. Try animating another layer. Preview your page now.
11. Select the last layer you added (click on the beginning keyframe) and then right click on the beginning keyframe.
12. Select Delete Object from the menu to remove the layer from the timeline.
Adding a layer to the timeline
1. Drag a second layer to the channel below the layer you just animated. Make sure the name of the image does not appear (if it does you have dragged the image not the layer).
2. If a box appears warning about Netscape attributes, close the box.
3. Click on the beginning keyframe. This is the position the layer will be in when the animation starts. Change the layer’s position so it is in the lower right corner of the screen.
4. Now click the ending keyframe. This represents the position the object/layer will be in at the end of the animation. Drag the layer to a new position on the screen.
5. You can always change an object/layer using the Change Object command found on the context menu that appears when you right click on an animation bar in the Timeline panel.
6. You can change any frame into a keyframe by selecting the frame and right clicking. Select Add Keyframe from the menu. Now you can change the animation by repositioning the object/layer.
Simple Image Animation
1. Start a new blank page. Save it as fish.htm.
2. Create a layer. Type in the following - For your relaxation. Change the size and color. Place the layer in the center of the page at the top of the page. Change the layer name to title.
3. Create another layer. Drag the layer to the left side of the screen (make sure it is below the title). Make sure the cursor is inside the layer. We will insert an image. The image is called fish2.gif (it is in the timeline folder). Click on the image to select it and make sure it has a name. If it does not, type in the name fish1.
4. Open the Timelines panel (from the Windows Menu).
5. Drag the layer handle for the layer with the fish image into the Timeline panel and drop it in the first row (channel). Two keyframes will be created (white dots at the end and beginning of the timeline. Drag the right keyframe to frame 60.
6. Make sure the Fps (frames per second) is set to 15. If the timeline runs to 60 frames, how long will your animation be? 4 seconds.
7. Click on the 30th Frame (this selects the frame). Right Click on the 30 and insert a keyframe (Select Add keyframe). A white dot should appear at the 30th frame.
8. Click on the new keyframe to select the keyframe. In the property inspector window change the left location (marked L) to 640 px.
9. Click in the behaviors box for frame 30 (the behavior boxes are right above the frame numbers). The square should become dark.
10. Open the behaviors window (you can use the Windows Menu to do this). Click on the plus sign and insert the Swap Image behavior. Use the image called fish1.gif.
11. Now click in the behavior box for frame 60. Insert the Swap Image Restore behavior.
12. Save the page and preview it in both browsers.
Using Timeline to hide and show layers
1. Open the file in the Timeline site called hideshow.htm
2. You should see five layers named L1 through L5.
3. Drag each of the layers into the timeline panel. (put the layer L1 in channel 1, the layer L2 in channel 2, etc.).
4. Drag the end keyframe in channel 2 so it is 5 frames longer than channel 1.
5. Drag the end keyframe in channel 3 so it is 5 frames longer than channel 2.
6. Make Channel 4 5 frames longer than channel 3 and make channel 5 five frames longer than channel 4.
7. Make sure the playback head is positioned at the first frame. Hide all of the layers (you can click on each layer and change the layer property inspector or click on the eye symbol until it is closed).
8. You can also use the Show-Hide layers behavior.
9. Close the page without saving and then reopen the page.
10. Make sure all of the layers have the visibility set to hidden.
11. The timeline should be empty. Click in the behaviors channel in frame 5.
12. Click the + button in the behaviors panel. Select the Show-Hide Layer behavior. Set the first layer to show and leave the rest hidden (meaning do not set anything for them).
13. Select frame 10 in the behaviors channel click the + button in the behaviors panle and apply the Show-Hide Layer to the second layer (L2).
14. Continue adding the behavior for layers 3 – 5 at 5 frame intervals.
15. Make sure Autoplay is checked and preview your animation.
Thanks to www.eosdev.com for background graphic.