Assignment 10: Animated GIFs

In this assignment you will create a simple timeline animation using Fireworks.

1. Open a new Fireworks document with a transparent background with width and height 200 pixels each. Create your own picture. Use File - Export Preview in order to format as a GIF.

2. Open a new dreamweaver document and save it as Animated.html. Create a new layer. Insert the image into this layer.

3. To open the timeline panel- choose Window->Timelines

 

 

 

 

 

 

 

4. Select the layer you want to animate (Hint: make sure you have selected the layer and not the image). Choose Modify, timeline, Record Path of layer. Drag the layer around your window. Let go of the layer and you will see a dialog box - click OK. You also will see a line marking the path on your dreamweaver document.

 

 

 

 

5. Hold onto your Play button on the timeline window to see your picture move about the screen.
6. View your page in Safari, Firefox, Internet Explorer (Hint: You may want to check Autoplay)

---

To Do More: Add an animated GIF of this type to your layer page

---

To Do Much More : Use one of the Reference books available from Ms. Errico or on-line help to create another type of animation in Fireworks using Frames and export it to Dreamweaver. Put this animation on it's own Dreamweaver document called advancedanimate.html. You can also use this animation on one of your pages if you like it.

Check this out!

Do you like animation?? Check out another way to do animation using Fireworks. This tutorial was put together by a former Web Publishing student!

Return to Ms. E's homepage