September 2001 DEB Tip: Create a Slide Show with the Dreamweaver Timeline

Last update: 19-feb-03

Debbie Berg

Web Designer

Web Instructor

Technical Writer

Consulting Services

Need help designing your Web site?
Is it time to redesign your Web site?
Is your Web site meeting your visitors' needs?
Want a site review to find out?
Need help marketing your Web site through the search engines?

Please contact me to discuss my fees

Flawebdeb Information

Check out Debbie's 2003 Training Schedule

Take a look at some
of Debbie's most recent clients

What are people saying about Debbie?

"Debbie is a very knowledgeable, engaging instructor!"

M. Pine
Kansas City, MO

"Ms. Berg knows her stuff! She takes the time to explain technical concepts in great detail, which is very helpful. I can't wait to apply what I've learned!"

J. Matheson
Miami, FL

September 2001 DEB Tip

Back to DEB Tips

Create a Slideshow with the Dreamweaver Timeline

The Dreamweaver Timeline uses layers and JavaScript to create animation and interactivity. To create a series of rotating images, prepare each image at the same size in a graphics program first (i.e., Photoshop, Fireworks, ImageReady, etc.). Then insert a layer on the page. This layer will serve as a placeholder for the rotating images.

To rotate the images:

1) Choose Insert...Image and select the image to appear when the page first loads

2) Open the Dreamweaver Timeline by choosing Window...Timeline

3) Select the image and choose Modify...Timeline...Add Object to Timeline

4) The Timeline contains 15 frames by default. Drag the animation bar to frame 25 by selecting the ending bullet (keyframe) and dragging.

5) Select frame 5 on the Timeline and choose Modify...Timeline...Add Keyframe

6) Change the image source by clicking on the folder icon on the Property Inspector. Select another image. This image will appear on frame 5 of the Timeline.

7) Select frame 10 and choose Modify...Timeline...Add Keyframe.

8) Change the image source again and select an image that will appear on frame 10.

9) Select frames 15 and 20 and add keyframes to each frame respectively. Then change the image SRC on the Property Inspector at each keyframe.

10) Scrub through the Timeline by dragging the playhead. Scrubbing allows you to see a preview of the animation at each keyframe.

11) Select the AUTOPLAY checkbox on the Timeline to play the animation automatically when the page loads. Select the LOOP checkbox on the Timeline to continuously play the timeline once the page is loaded.

12) Preview the animation in your browser.

Source: This lesson was developed especially for YOU by Debbie Berg :-)

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

D.E.B. Tips

Flash

Dreamweaver/Flash
Conference