information_services_logo

Macromedia Fireworks
3.0
Macintosh and Windows

 

Advanced Skills

for_beginners basic_skills advanced_skills using_with_dreamweaver web_resources

Table of Contents

Creating an Animation

Fireworks has tools that allow you to create an animated GIF. You can either create the animated GIF from scratch in Fireworks, or you can use Fireworks to create an animation out of a folder of images that you already have. Fireworks can create animations from GIFs, JPEGs and several other image file formats, but will only save the file as an animated GIF.

    Creating an Animation from Scratch

    1. Start with a new Fireworks document.
    2. Draw and edit the first frame of the animation with the editing tools in the toolbox.
    3. From the Windows menu, choose Frames to open the Frames window
    4. Click on the small black triangle button at the top right of the Frames window and select Add Frames… (Note: If you would like to work with an exact copy of the current frame for the next frame, select Duplicate Frame... instead.)
      frames

    5. In the dialog box that appears, make sure After current frame is selected and click OK.
      addframes

    6. Select the new frame (Frame 2) in the Frames window.
      frames

    7. Draw and edit the second frame of the animation with the editing tools in the toolbox.
    8. Click on the triangle at the top right of the Frames window and select Add Frames… (Note: If you would like to work with an exact copy of the current frame for the next frame, select Duplicate Frame... instead.)
    9. Make sure After current frame is selected and click OK.
    10. Select the new frame (Frame 3) in the Frames window.
    11. Continue with these steps until you have completed all of the frames for your animation.
    12. To play the animation, click on the play button play at the bottom of the Fireworks window. To stop, click on the stop button stop.
    13. Make changes to any of the frames.
    14. When your animation is complete, from the File menu, select Export Preview…
    15. Select the Options tab, and then from the Format pull-down menu, choose Animated GIF.
    16. Select the Animation tab
    17. If you want your animation to look, click on the Loop button and indicate the number of repetitions of the animation in the pull-down menu next to it.
      loop

    18. Change the duration of each frame by clicking once on a frame and typing in a time (number is in hundredths of a second) in the time box under the stop watch icon.
      frametime

    19. Click on Export.
    20. Name your file. Make sure to leave the .gif extension
    21. Select None from the Slicing and Style pull-down menus.
    22. Navigate to where you would like to save your animation and click Save if you are using a Windows computer. Click Export if you are using a Mac..
    23. To test your animation, launch Netscape Communicator.
      • If you have a Macintosh, from the File menu choose Open > Page in Navigator. Then find where you saved the GIF file and click Open.
      • If you have a Windows computer, from the File menu choose Open Page. In the Open Page window click on Choose File. Find where you saved the GIF file and click Open.
    24. You can insert the animated gif in your web page like any other image.

Creating an Animation from a Folder of Images

    If you have already created the images for your animation and just need to "sew" them together into an animated gif, Fireworks will do the "sewing" for you.

    1. From the File menu, choose Open Multiple
    2. In the dialog box, check the open as animation checkbox
    3. Select all of the images that you want to include by holding down the SHIFT key on your keyboard as you click on the images.
    4. When you have selected all of the images you would like to include, click Add
    5. Click Done if you are using a Windows computer. Click OK if you are using a Mac.
    6. From the Windows menu choose Frames
    7. In the Frames window, you can click and drag the frames to the order you want them to play. (Note: The frames names will not remain the same. So, if you move frame 7 to the top, it will be renamed frame 1)
    8. To preview the animation, click on the play button play at the bottom of the Fireworks window. To stop, click on the stop button stop.
    9. From the File menu, select Export Preview…
    10. Select the Options tab, and then from the Format pull-down menu, choose Animated GIF.
    11. Select the Animation tab
    12. If you want your animation to look, click on the Loop button and indicate the number of repetitions of the animation in the pull-down menu next to it.
      repetition

    13. Change the duration of each frame by clicking once on a frame and typing in a number of seconds in the time box (under the stop watch icon)
      timeperframe

    14. Click on Export.
    15. Name your file. Make sure to leave the .gif extension
    16. Select None from the Slicing and Style pull-down menus.
    17. Navigate to where you would like to save your animation and click Save if you are using a Windows computer. Click Export if you are using a Mac.
    18. To test your animation, launch Netscape Communicator.
      • If you have a Macintosh, from the File menu choose Open > Page in Navigator. Then find where you saved the GIF file and click Open.
      • If you have a Windows computer, from the File menu choose Open Page. In the Open Page window click on Choose File. Find where you saved the GIF file and click Open.
    19. You can insert the animated gif in your web page like any other image.

Making Rollover Buttons

When you make a web page that includes linked files and images, it is best to start with a site folder on your computer to hold all of the related elements. This will keep all of the relative links correct. If you do not yet have a site folder for your web page and the rollover button elements you will be working on, create the folder before you begin.

Creating a New Rollover Button

  1. Start with a new Fireworks document.
  2. From the Insert menu choose New Button. A button editing window will open. Note the tabs at the top of the window. Make sure that the Up tab is selected.
  3. Draw the shape you want for the button, centering it on the crosshairs in the button editing window. Select the fill, stroke and effect you want for the "up" state of the button.
  4. Click on the text tool in the toolbox and click on your button.
  5. In the text editor choose the color, font, size etc. you want and type the text to appear on your button. Click OK.
  6. In the button editing window, use the arrow keys on your keyboard to position the text on the button OR select both the button and the text (holding down the SHIFT key) and from the Modify menu choose Align, then Center Vertical and Center Horizontal.
  7. Click on the Over tab. This is where you will design the way the button will look when the mouse cursor is over the button.
  8. It is easier to get the size and placement of the "over" state to match the "up" state if you work from an exact copy. Click on the Copy Up Graphic button at the bottom of the window to duplicate the original button. Now you can edit the "over" so that it is different from the "up". You could also change the text if you like. If it asks you if you want to update text in other button states, select No.
  9. Click the Active Area tab then click Link Wizard.
  10. In the Link Wizard window, click the Link tab and enter a URL for this button to link to in the first field. Use the entire URL (e.g. http://www.wellesley.edu/Computing/computing.html). Click OK.
  11. Close the button editing window.
  12. Now you see the button in the Fireworks document window. You can test the rollover, but not the link, by clicking on the Preview tab.
  13. If you click on the Original tab you can move the button. It will appear with a light green overlay and placement lines (this feature is selected by choosing the "show hotspots and slices" feature at the bottom right of the toolbox).

Using a Rollover Button to Make a Similar Button

If you would like to make a similar button, you can easily duplicate it and all of its features, and then you can make any edits you like so that the second button will be distinct.

  1. In the Fireworks document window at the Original tab, use the pointer to select the button. Holding down the ALT key (Windows) or OPTION key (Macintosh) drag the button to another spot on the document window. A duplicate copy will be made that includes the same colors, effects and text as well as the "up" and "over" states of the button.
  2. Select the new button. The Object panel has a field where you can change the button text. If it asks you if you would like to edit all instances of this button, select Current.
  3. Double-click on the new button to open the button editing window and make any other changes to the button.
  4. Close the button editing window.

Exporting a Rollover Button to be Used with Dreamweaver

Dreamweaver has a helpful tool that will allow you to Insert a Rollover Button into your web page. Follow the exporting instructions to prepare your files for Dreamweaver.

Export the button

Export each button individually so that they can be used on a web page. When you export, you will have a GIF file for each of the states of the button ("up," "over", etc.).

  1. Select a button in the Fireworks document window by clicking on it once.
  2. From the File menu choose Export Special then Selected Slice.
  3. In the Export Preview window, adjust your image settings if desired (GIF will likely be the best format choice) and click the Export button.
  4. In the Export window, change the name of your button. It should be a short name, all lowercase with no spaces. Remember to keep the extension (.gif).
  5. In the Style field, choose None.
  6. If you have created a web site folder already, navigate to this folder and click Export. Otherwise, create a new folder for your web site files and click Export.
  7. You should now have a GIF for each of the states of the button. (The images will have "strange" names such as button.gif, button_f2.gif, button_f3.gif and buttonf4.gif. These names correspond to the original "up" image, the "over" image, the "down" image and the "down while over" image.)

Inserting the Rollover into a Web Page using Dreamweaver

Once your Rollover Button has been created and all of the images stored, you are ready to insert the button into your web page.

  1. Make sure your images are stored inside your web site folder
  2. Open your web page in Dreamweaver (or open a new page in Dreamweaver)
  3. Insert the Rollover Button in your web page

Preview the web page in a browser (Netscape or IE) to see the Rollover Work. You will not be able to see the Rollover Button work in Dreamweaver.

Exporting a Rollover Button to be Used in a Web Page (without Dreamweaver)

Fireworks will help you to create the code that will allow the Rollover Button you created to work on any web page. You can create this web page in any web page editor like Claris HomePage or BBEdit.

Export the button

Export each button individually so that they can be used on a web page. When you export, you will have a GIF file for each of the states of the button ("up," "over", etc.) as well as a page of html. Remarks in the html source explain how to cut and paste the code into your web page. If you are uncomfortable working with the HTML source code, you could prepare your button for use with Dreamweaver instead.

  1. Select a button in the Fireworks document window by clicking on it once.
  2. From the File menu choose Export Special then Selected Slice.
  3. In the Export Preview window, adjust your image settings if desired (GIF will likely be the best format choice) and click the Export button.
  4. In the Export window, change the name of your button. It should be a short name, all lowercase with no spaces. Remember to keep the extension (.gif).
  5. In the Style field, choose Dreamweaver 3.
  6. If you have created a web site folder already, navigate to this folder and click Export. Otherwise, create a new folder for your web site files and click Save if you are using a Windows computer. Click Export if you are using a Mac..
  7. You should now have a GIF for each of the states of the button. (The images will have "strange" names such as button.gif, button_f2.gif, button_f3.gif and buttonf4.gif. These names correspond to the original "up" image, the "over" image, the "down" image and the "down while over" image.) You should also have an html file with the necessary code in it.

Inserting a Rollover Button into a Web Page using code

  1. Open the html file that was created during the export of the image. Make sure you are looking at the HTML source code of the file.
  2. Select the lines beginning from <script language="JavaScript"> and ending at </script> by clicking and dragging so that this entire section of code is highlighted.
  3. From the Edit menu, choose Copy.
  4. Open the html file that you want to insert the rollover image in. Make sure you are looking at the HTML source code of the file.
  5. Click somewhere between <Head> and </Head>, and paste the code by going to the Edit menu and selecting Paste.
  6. Go back to the html file that was created during the export of the image.
  7. Select the code that starts after BEGIN COPYING THE HTML HERE and ends with STOP COPYING THE HTML HERE by clicking and dragging so that this entire section of code is highlighted. (You do not have to include the Begin and Stop lines.)
  8. From the Edit menu, choose Copy.
  9. Go to the html file that you want to insert the rollover image in.
  10. Click between <Body> and </Body>, and paste the code by going to the Edit menu and selecting Paste. (The rollover will be put on the page according to where in this part of the document you clicked.)
  11. Preview your web page in a browser (Netscape or IE) to see the Rollover Button work. You will not be able to see the button work in a web page editor.