DHTML Animation in Dreamweaver 3.0

Home > Build > Software > Dreamweaver

by Don Herion

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

12) Now to animate 'tac' and 'toe.' Drag the 'tac' layer until it is directly over 'tic.' Once you are satisfied drag the layer handle onto Channel 3 and drag the end keyframe to 30.

13) Now to stagger the animation slightly, drag 'tac's' first keyframe to 5. This allows 'tic' to move first and 'tac' to follow a moment later.

14) Select frame 20 in Channel 3 and add a keyframe. Slide 'tac' across until it butts up against 'tic.' Now copy the 'L' position. Select keyframe 30 and paste the 'L' position in the text field. Now play with 'Playback Head.' 'Tic' moves first, followed by 'tac.' One more to go.

15) To complete this portion of the project, pick the 'toe' layer and position it over the 'tac' image. Then drag the handle into Channel 4 of the timeline.

16) To stagger 'toe' drag the first keyframe to frame 10 and the last one to 30. Select frame 25 and add a keyframe. Slide the 'toe' layer across until it butts against 'tac.' Copy the 'L' position. Select keyframe 30 and paste the position into the 'L' text field. Now play with the 'Playback Head', the three words should slide one by one across the screen forming - tic-tac-toe.

17) The final touch is to add a white image to matte out the words until the animation begins. Create a new layer and place the white.gif graphic. Name the layer 'white' and drag it over so it covers the 3 word layers. Drag the layer handle onto Channel 5 and shift the last keyframe to 30. Now scrub through the animation. The words slide out from under the white graphic.

Xs and Os
You can't play tic tac toe without Xs and Os. I'll do the Xs only since the Os will be created the same way. You know the drill by now.

18) Insert a layer over a clear area and place the 'x.gif' image inside. Resize the layer and name it 'x1.' Drag the layer so it butts up against the side of the board near the top.

19) Now you must set it so it can be dragged over any of the nine squares. Select the image inside the the x1 layer, not the layer itself. Press F8 to bring up the 'Behaviors' palette. Click the '+' button and select - Drag Layer. If it is grayed out you probably have not selected the image.

Back to Part Three

Continue to Part Five