Dreamweaver MX Tutorial

Created and designed by Vivienne Trulock for ilikecake, 2005

Animation

You can do simple animation in Dreamweaver with the Timeline. The animation is only visible in browsers which support layers.

NOTE: animation can cause concentration problems for some individuals, particularly children and those suffering from Attention Deficit Hyperactivity Disorder (ADHD). An epileptic fit may also be triggered by flashing animation. Screenreader users may find that their screenreader start over at the top of the page everytime it encounters an animation. in addition, there is no W3C specification that formally defines DHTML. Therefore the use of animation should be avoided.

Exercise - animate some text

To open the timeline, press Alt+F9. Now, to place an object on the timeline, it must be placed inside a layer. So, 'Insert > Layer' and type some text inside it, your name for example. Use the text properties window to make the text look the way you want it to.

To place the layer on the timeline, click and hold the mouse on the top left-hand corner of the layer, (on the handle) and pull it onto the first row of the timeline. It automatically takes up 15 cells of the row.

Now, this is where it gets a little bit tricky. Click in the first cell of row 1 on the timeline (as above), and then place the layer where you want it to start moving from.

Then, click in the last cell, and place the layer in the position on the screen you want it to move to.

You should notice a line between the two positions.

The next step is to turn on the 'autoplay' option in the timeline. This means that the animation will begin automatically, when the page is loaded into a browser.

Next, save your page and press F12 to open a browser window and see your animation.

Changing Animation Speed

There are two ways of changing the speed of the animation. You can change the number of cells in the timeline the animation spans, or you can change to number of frames per second.

Exercise - change the timeline cells

To make the animation twice as slow just double the number of cells it spans, by clicking on the last cell of the animation (in this case call 15) and dragging it to the required cell (in this case 30)

Conversely, to make the animation twice as fast just half the number of cells it spans, by clicking on the last cell of the animation (in this case call 15) and dragging it to the required cell (in this case 7 or 8)

Exercise - change the frames per second

To make the animation last longer just reduce the number of frames per second, by changing it from the default 15 frames per second, to perhaps 8 frames per second.

Conversely, to make the animation shorter just increase the number of frames per second, by changing it from the default 15 frames per second, to perhaps 20 or 30 frames per second.

You can also use multiple rows of the timeline at the same time.

Exercise - using multiple rows of the timeline

Create a slightly more complicated version of your animated name, by placing each letter of your name in a separate layer and animating each letter individually, where all the letters, at the end of the timeline, will spell out your name.

It's a good idea here to turn on your 'Window > Layers' option, and name your layers in the layers properties window, so that you can keep track of them.

This is what your layers window should look like:

• AA
• XHTML
• CSS

© ilikecake 2005-2008