Basic Tutorial Using Timelines at Dreamweaver 8

Home » Web Tutorial » Dreamweaver » Basic Tutorial Using Timelines at Dreamweaver 8

Friday, March 5th, 2010 | Dreamweaver, Web Tutorial

1,984 views

Yesterday, when I want to teach my student how to use Timelines at Dreamweaver, I can not find “Timelines” menu at Dreamweaver MX 2004. OMG!! I just realized that it only available at Dreamweaver 8. Gyaaaa sorry. So I promises to make it tutorial. Hope it useful.

If you lazy to read English language, I have Indonesian version at Tutorial Dasar Menggunakan Timelines di Dreamweaver 8

This is step by step tutorial for using Timelines at Dreamweaver 8

Note :

1. This timeline animation will not work at netscape
2. Only image inside DIV layer which can be animated.

Step by Step

CLICK IMAGE TO ENLARGE

1. Create new HTML File and SAVE it.

2. At menu, choose Windows->Timelines (Alt+F9)

3. The Timelines property will appear bellow the items property

4. Now insert the Div Layer. Change the option into LAYOUT

5. Pick Layer option and drag it into your working area

6. Insert image. Make sure your pointer already inside the layer. And change the menu option into COMMON

7. Pick Image button

8. Browse your desired image. And press OK

9. After the image inserted to the Layer, click the layer once (Just to select it)

10. Right click on the Timeline property and choose Add Object

11. Similar with adding key frame on flash-animation (I suggest you also read what is keyframe, frame at my flash tutorial), right click in some frame and choose Add Keyframe

12. Move the Layer into your desired place. Do similar thing with another key frame

13. I forget to screen caps. But there is 2 option. AUTOPLAY and LOOP. Autoplay is for automatic playing the animation when the browser open. And LOOP is for how many Animation Looping you want have.