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:
.