Tips to Animating layers in Dreamweaver 8

Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to change the style or positioning properties of HTML elements. Timelines in Dreamweaver use dynamic HTML to change the properties of layers and images over time. Use timelines to create animations that do not require any ActiveX controls, plug-ins, or Java applets (but do require JavaScript).

NOTE

The word dynamic can mean different things in different web-related contexts. Don’t confuse Dynamic HTML with the idea of a dynamic web page, which means a web page generated dynamically by server-side code before being served to a visitor.

Timelines allow you to change the position, size, visibility, and stacking order of a layer. (The layer functions of timelines work only in 4.0 or later browsers.) Timelines are also useful for other actions that you want to occur after a page loads. For example, timelines can change the source file of an image tag so different images appear in the page over time.

To see the JavaScript code generated by a timeline, open the Document window’s Code view. The timeline code is in the MM_initTimelines function, inside a script tag in the head section of the document.

When editing the HTML of a document containing timelines, make sure you do not move, rename, or delete anything that a timeline refers to.

Using the Timelines panel



Timeline pop-up menu specifies which of the document’s timelines is currently displayed in the Timelines panel.

Playback head shows which frame of the timeline is currently displayed in the Document window.

Frame numbers indicate the sequential numbering of frames. The number between the Back and Play buttons is the current frame number. You control the duration of animation by setting the total number of frames and the number of frames per second (fps). The default setting of 15 frames per second is a good average rate to use for most browsers running on common Windows and Macintosh systems.

NOTE

Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate. The frame rate is ignored if it is higher than the browser can manage.

Context menu contains various timeline-related commands.

Behaviors channel is the channel for behaviors that should be executed at a particular frame in the timeline.

Animation bars show the duration of each object’s animation. A single row can include multiple bars representing different objects. Different bars cannot control the same object in the same frame.

Keyframes are frames in a bar where you have specified properties (such as position) for the object. Dreamweaver calculates intermediate values for frames in between keyframes. Small circles mark keyframes.

Animation channels display bars for animating layers and images.

Playback options



Rewind moves the playback head to the first frame in the timeline.

Back moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline backward.

Play moves the playback head one frame to the right. Click Play and hold down the mouse button to play the timeline forward.

Autoplay makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches a behavior to the page’s body tag that executes the Play Timeline action when the page loads.

Loop makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to Timeline Frame behavior in the Behaviors channel after the last frame of the animation. Double-click the behavior’s marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.

Moving a layer using a timeline animation

The most common kind of timeline animation involves moving a layer along a path. Timelines can move only layers. To make images or text move, create a layer using the Draw Layer button on the Insert bar and then insert images, text, or any other type of content in the layer.

Timelines can also change other attributes of layers and images.

To animate a layer using a timeline:
1. Move the layer to where it should be when the animation begins.
2. Select Window > Timelines.
3. Select the layer you want to animate.



Make sure you have selected the desired element. Click the layer marker or the layer selection handle, or use the Layers panel to select a layer. For more information, see Manipulating layers. When a layer is selected, handles appear around it as shown in the following illustration.

4. Clicking inside the layer places a blinking insertion point inside the layer, but it does not select the layer.

5. Select Modify > Timeline > Add Object to Timeline or simply drag the selected layer into the Timelines panel.
A bar appears in the first channel of the timeline. The name of the layer appears in the bar.

6. Click the keyframe marker at the end of the bar.
Move the layer on the page to where it should be at the end of the animation.
A line appears showing the path of the animation in the Document window.

7. If you want the layer to move in a curve, select its animation bar and Control-click (Windows) or Command-click (Macintosh) a frame in the middle of the bar to add a keyframe at the frame you clicked, or click a frame in the middle of the animation bar and select Add Keyframe from the context menu.
Repeat this step to define additional keyframes.

8. Hold down the Play button to preview the animation on the page.
Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.

Creating a timeline by dragging a path

If you want to create an animation with a complex path, it may be more efficient to record the path as you drag the layer rather than creating individual keyframes.

To create a timeline by dragging a path:
1. Select a layer.

2. Move the layer to where it should be when animation begins.

Make sure you have selected the layer; if the insertion point is in the layer, the layer is not selected. To select a layer, click the layer marker or the layer selection handle, or use the Layers panel.

3. Select Modify > Timeline > Record Path of Layer.

4. Drag the layer around the page to create a path.

5. Release the layer at the point where the animation should stop.
Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes.

6. In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.

Related Posts :