Using Layers and Timelines

Layers, Timelines and Behaviors

You should be familiar with layers and timelines in Dreamweaver in order to get the overall picture of what you can do with this program. First, make sure that your objects, layers, and behavior palettes are open. If you do not see them, click Windows, and choose the palette that is not visible.

In a new document (CTRL N) window, click on the Draw Layer icon in the objects panel. The icon looks like this .
Move your cursor to the document and click and drag to draw a rectangular box. Release the mouse and you've just drawn a layer.
Click inside the box and type some text or insert an image that goes along with the theme of your Web site.
Now let's animate this puppy. Right click on the small box icon near the upper left corner of the layer. A menu will appear; choose Record Path.
A Timelines Panel will appear to let you know that you are about to create a dHTML timeline.
Left click on the icon near the upper left corner of you layer and drag the layer around your document. You will see a line following your mouse movements, this is the path of the layer.
Release the mouse. If you have the Timelines Panel open (Shift F9) you will see the layer name appear in slot 1 with a bunch of circles with a line through them. This is your layer animation.
Now we need to add an event to our document to start the animation. This is entirely up to you on how or when you want the layer to animate. In this example I want the layer to animate when the page loads. To do this, click on the body tag in the status bar to select the body. The tag in the status bar will turn bold to let you know that it is selected.
With the body selected, go to the Behaviors Panel (Shift F3) and click on the + icon near the upper left corner of the panel. A menu will appear, go to the Timelines submenu and choose Play Timeline.
Click OK at the Play Timeline dialog box.
That's it! Save your document and load it in a browser window.

Click here to see what mine looks like:

Animated Text Box

To make the animation faster, open up your Timelines Panel (Shift F9), select the layer you created and mess around with the Fps (Frames Per Second) value. The higher the number the faster the animation.

You can also create aminated images as well as text boxes. First, draw the layer, then insert an image into the layer. If you are using multiple images, like the example below, be sure that you click back in the first frame of your timeline before recording your path.

Animated Falling Leaves