DHTML Animation in Dreamweaver 3.0

Home > Build > Software > Dreamweaver

by Don Herion

(1) (2) (3) (4) (5) (6) (7)

Animate Tic-Tac-Toe
With the board set up we can now add some simple keyframe animation, having the Tic-tac-toe slide across the screen.

5) Insert a new layer to the right of the board. Place the 'tic.gif' image inside the layer and resize to fit. Give the layer the name 'tic.' Insert two more layers anywhere and add the 'tac.gif' and the 'toe.gif' images into them, resize and rename them appropriately.

Note! You can view all your layers in the 'Layer Palette' by clicking F11. Here you can change the stacking order of your layers, edit their names, and choose whether or not you want them visible, hidden or inherit visibility from the layer parent. You can nest layers - this allows one layer to control other layers.

6) Now you want to position your three layers more precisely. Drag 'tic' so its positioned slightly to the right and above the 'board' layer. Let it snap to the top grid line.

7) Now drag the 'tic' layer onto Channel 2 in the timeline. Slide the end keyframe marker to 30.

8) Now to animate 'tic' select frame 15, right click it and select 'add keyframe.'

9) Now drag the 'tic' image across the page until it is positioned along the top grid line about midway between the first and second square in the board. Use your 'Arrow Keys' to position the layer more precisely.

The grayline is the path of layer

You should see a gray path appear. This is the path 'tic' will follow from frame 1 to frame 15.

10) Now to complete this portion of the animation look up at your 'property bar' and copy the 'L' information, this is the precise horizontal position of the layer at keyframe 15.

The L and T are the absolute position marks for the page

11) Now select keyframe 30 in the timeline and paste this position into the 'L' field. Now if you slide the 'Playback Head' back and forth the 'tic' layer slides across the screen and stops.

Back to Part Two

Continue to Part Four