Creating Animations in Dreamweaver

1. Create a new page and save it as animation.
2. In Fireworks, create a star (give it the color that you want) about 50-75 pixels across and export it to Dreamweaver.
3. On the objects panel, click the Draw Layer button and draw a layer on the top left side of the page.
4. Insert the star you created in Fireworks into the layer.
5. Select Windows > Timelines.
6. Select the star layer. Choose Modify > Timeline > Add Object to Timeline. This will add the layer to the timeline.
7. Notice the animation bar on the timeline. Click on the solid area of the bar and drag to move the animation bar.
8. Animations are controlled by keyframes. Keyframes mark pivotal points where changes occur in the animation.
9. Click the keyframe marker at the end of the bar.
10. Click the layer selection handle on the star layer in your document and drag the layer to the bottom right of the page.
11. You should now see a straight line indicating the path of the animation.
12. Select Rewind on the Timelines panel. Press and hold down the play button to view the animation.
13. Click Autoplay to have the animation play when the page loads.
14. To play over and over again, select Loop on the Timelines panel. To make the animation start after the page loads, drag the animation bar to the right.
15. Save and test in a browser.
16. Now let’s position the star so that it enters from the left and exits on the right.
17. Select the first keyframe on the timeline for the star layer.
18. Click on the document itself, and type a negative number (say, -200) in the L (left) text box at the top of the property inspector.
19. Now select the last keyframe for the star layer.
20. In the L text box, type a large number (say, 1,000) to make the animation disappear at the right of the browser.
21. Save and test your file.
22. Now let’s slow down the animation. Click the last keyframe on the timeline and drag to the right to make the bar longer.
23. In the box labeled FPS (Frames Per Second) type 10.
24. Hold down the play button to preview.
25. Now, we’ll try something even more interesting, recording the path of a layer.
26. Create a new star of a different color in Fireworks. Export it to Dreamweaver.
27. Draw another layer in your document and insert the new graphic into it. Name the new layer star2.
28. Select the first frame in the Timelines panel by clicking the 1 in the row of frame numbers. Click on the star2 layer and move it below the star layer.
29. Position the Star2 layer where you would like this animation to start.
30. Choose Modify > Timeline > Record Path of Layer.
31. Click the selection handle on the layer and drag the Star2 layer in any path you want around the document. Your path will be displayed on the page.
32. Drag the last keyframe to the left to short the time for the animation.
33. Save and test in a browser.