Fireworks MX
Macintosh and Windows

This method allows you to choose animation properties from menus. For each object you select, you can choose any combination of properties (rotation, movement, etc.). You can select several objects to animate as a group to share the same properties. If you want to have two or more objects in your animation that make different kinds of changes in the same frame, then you should use the frame-by-frame method instead.

Select the object(s) and Modify > Animation > Animate Selection. Change the values in the Animate dialog box and click OK. If your graphic does not already have enough frames to accommodate the animation, you will be asked whether frames can be added. After you click OK, the object will become an animation.

 

 

After the object has been converted to an animation and you select the object, it will appear in a dotted box with an arrow as in this example of an animation with 5 frames. If you have set your animation to move across the screen, the direction and distance will be represented by a series of dots. The green dot is the position of the object in the first frame and the red dot is the position in the last frame. The position in every intermediate frame is marked by a blue dot. You can edit the motion of the animation by dragging the red dot to a new position.

You will no longer be able to edit the color and other features of your object but you can edit the animation properties in the Properties panel.

To preview your animation, click the Play button at the bottom of the Document Window. It will repeat until you click the Stop button.

• Changing the speed and number of repetitions of an animation
• Exporting an animation as an Animated GIF file

Creating an animation frame-by-frame

Use this method if you want to create an animation that includes more than one object changing in different ways or if you want the flexibility to edit each frame after the animation has been created.

1. Open a new Document Window and open the Frames panel. The panel will will list only Frame 1 when you begin.
2. Draw or import the objects that you want for the first frame of the animation.
3. Select every object that will be part of the animation. (Use the SHIFT-click to select more than one or Select > Select All.)
4. In the Frames panel, drag Frame one to the New Frame button in the panel . This will create Frame 2 as a duplicate of Frame 1. (Creating a duplicate of another frame allows you to make small changes in each successive frame.)

   Note: If you want to work with empty frames rather than duplicate frames, add any number of empty frames to the Frames panel by clicking the Options menu in the Frame panel and choosing Add Frames.

5. With Frame 2 selected, make whatever changes you want in the Document Window.
6. Repeat the process of dragging the most recent frame to the New Frame button and editing the new frame until you have the number of frames you need for the completed animation.
7. Edit any frame by choosing it in the Frames panel and making edits in the Document Window. Drag frames in the Frames panel to change their order.
8. To view more than one frame at the same time in the Document Window so that you can see how they are aligned in relation to one another, choose "onion skinning." Drag the slider to the left of the frame names so that it spans the frames you want to view. They will appear overlapped in the document window.

To preview your animation, click the Play button at the bottom of the Document Window. It will repeat until you click the Stop button.

• Changing the speed and number of repetitions of an animation
• Exporting an animation as an Animated GIF file

Opening several files as an animation

This method is useful in situations where you have already created and saved the separate graphics for your animation. You may have several photographic images that you want to appear in a repeating series on a web page, for example. This method works best if all of the images are the same size and shape. You can use Batch Processing to standardize these files before you create the animation.

1. Place all of the image files for your animation in the same folder on your computer.
2. In Fireworks MX, File > Open
3. Navigate to the location of your files and select them. If the files are adjacent on the list, click the first file name then SHIFT-click the last file name. Other wise CTRL-click each file name.
4. Click the box, called Open as Animation at the bottom of the Open dialog.

To preview your animation, click the Play button at the bottom of the Document Window. It will repeat until you click the Stop button.

• Changing the speed and number of repetitions of an animation
• Exporting an animation as an Animated GIF file

Changing the speed and number of repetitions of an animation

To change the duration of each frame double click the current frame delay listed to the right of each frame (default is 7/100 seconds) and type the duration you want.

 

To change the number of times your animation will repeat, click the looping button and choose from the menu. The currently selected number of loops is listed to the right of the looping button. Note that the animation will run once with no looping so the number of repeats will be once, plus the number of loops.

 

Exporting an animation as an Animated GIF file

1. File > Export Preview. In the Options tab, change Format to Animated GIF.
2. Click the Animation tab and make changes, if you like, to the duration of a frame or the number of repetitions. There is a Play/Stop button at the bottom of the preview window so that you can check any changes you have made.
3. Click Export then name and save your file.
4. You can test your animation by dragging the GIF file to an open web browser window.
   

These instructions will guide you to make buttons that have a rollover effect so that the appearance of the button will change when the mouse moves over it. Fireworks MX will create an HTML file with code to control the action, plus graphic files for each of the different views of each button in the navigation bar. This HTML file is necessary for inserting the navigation bar into your web page, however you will not need to upload it to the web server. After you create your web page be sure that you archive the HTML file with your other site files for edits in the future.

When you make a web page that includes a navigation bar or any linked files and graphics, it is best to start with a site folder on your computer to hold all of the related elements. This will keep 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.

1. Start with a new Fireworks document of a size that will accommodate your entire navigation bar. Remember that some people who will use your navigation bar have monitors with low resolution so do not make your navigation bar (or any web page graphic) wider than 800 pixels or higher than 600 pixels.
2. Create the first button as a prototype for other buttons in the navigation bar: In the document window draw a button shape with your choice of default color, text, effects etc.

   Hint: If you plan more than one button, each with different text, be sure that the shape of the prototype button is large enough to accommodate the longest text. Also, if you want the text on each button to be centered, be sure that you click the Center Alignment button in the Properties panel when you add the text to the first button.

3. Select all parts of the button including text. Modify > Symbol > Convert to Symbol
4. In the Symbol properties dialog, enter a name and choose Button from the list.
5. In the document window, the button image is overlaid with a slice and a shortcut arrow. The slice allows fireworks to create JavaScript associated with the button to produce a rollover effect
6. The button symbol is listed in the Assets panel/Library tab. The symbol is the master copy for instances of the button. If you edit the symbol (font, color, shape etc.) all copies will be affected.
7. Edit the button symbol by double-clicking it in the Library panel or double-clicking any copy made from this symbol. The button editor will open.
8. In button editor, note the tabs for various states of the button. The original button appears in the Up tab.
9. Click the Over tab. Click Copy Up Graphic to bring a exact copy from the Up state into the Over state of the button.
10. Make desired appearance changes for the Over state of the button (font, color, effect, text etc.)
11. Click the Preview tab in the button editor to test the action of the two button states.
12. If you want the button to have an additional state, click the appropriate tab, copy the graphic from another state and make desired changes for the state you are working on.
13. Click Done in the button editor when you are satisfied with the preview.

    Note: You can edit any common button feature such as color or font at any time before exporting. The edits will affect all instances of the button that were created from this button symbol. Double-click the symbol for your button in the Assets/Library panel to edit.

14. Select the original button and Edit > Clone. The clone is now selected exactly on top of original button.
15. Use the arrow keys to move the clone adjacent to original button so that there is no space between them. Use the numeric coordinates with the height and width of the selected object on the Properties panel to calculate where the adjacent button should be placed.
16. Create and locate additional clones as needed.
17. Select each button one at a time and edit the following using the Properties panel:
    

    - text and other features that you want to make individual to this button

    - the URL for each button in the Link field

    - a text description of each button in the Alt field (appears in lieu of graphic when images suppressed or read by screen reader)

18. Trim the canvas around the navigation bar: Modify > Canvas > Trim Canvas.
19. File > Export. In the Export dialog box, navigate to the site folder where you are collecting files to be used on your web page, and complete as follows with your own button name in lower-case and the html extension:
    
    
    
20. Click the Options button to open the HTML Setup dialog. Complete the General tab in the HTML Setup dialog as follows:
    
    
    
21. Complete the Document Specific tab in the HTML Setup dialog as follows:
    
    
22. In the HTML Setup dialog click OK.
23. In the Export dialog click Save.
24. Fireworks will have produced an HTML file with your button name plus a collection of graphic files for the various button states.
25. To insert the navigation bar into a web page using Dreamweaver, see the Dreamweaver MX documentation.

Fireworks MX includes a tool for creating pop-up menus (menus that are displayed in response to a pointer moving over or clicking an object) like the one on the left margin of these pages. To do this you need to create an graphic object that will be inserted on a web page so that when the mouse rolls over that object a menu will pop up. The object can be a text object, a button or any other object you can create in Fireworks. The pop-up menu tool lets you assign text and URLs so that the pop-up menu items are linked to web pages.

When you make a web page that includes any linked files and graphics, it is important to start with a site folder on your computer to hold all of the related elements. This will keep 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.

After you follow the steps to create an object with pop-up menus (or a navigation bar with several pop-up menus), exporting the file will result in one or more image files, an HTML file, and a javascript file.

• The JavaScript file (with a .js extension) will need to be uploaded with your web pages on the server after you use Dreamweaver to insert the pop-up menu object into your web page. The .js file should go into the main folder for your site, not the Images folder.
• The HTML file is necessary for inserting the object or navigation bar into your web page, however you will not need to upload it to the web server. After you create your web page be sure that you archive the HTML file in the folder with the image files for edits in the future.

Attaching a pop-up menu to a rollover button:

If you would like your menu to pop up from a rollover button in a navigation bar, first follow the steps above to create a navigation bar, however before you export the file, follow the steps below to create the pop-up menu for each individual button.

Attaching a pop-up menu to any object in Fireworks:

To Create a Basic Pop-up Menu

1. Select the object to which you want to attach a pop-up menu.
2. If the object is not a rollover button you will need to insert a slice at the location of the object: Edit > Insert > Slice. Red slice lines and a green overlay will appear over your object.

   Note: If the object is a rollover button a slice was created when you created the button symbol. A slice is necessary for Fireworks to create code that will cause the pop-up action to occur at that location.

3. If you want to add a link from the object, enter a URL in the Link field on the Properties panel. If the object is a rollover button you have probably already done this step.
4. Modify > Pop-up Menu > Add Pop-up Menu.
5. In the Pop-up Menu editor, under the content tab, add text and links for each separate item you want in your pop-up menu. The Text field contains the wording for the menu item. The Link field contains the URL that will be reached when the user clicks this menu item. Use the full URL including http:// for each link. You can reference anchors by including #plus the anchor name at the end of the URL.
   
6. In order to have submenus, create menu items that you wish to use for the submenu, placing them directly under the menu item for which they will be a submenu. Click to highlight a pop-up menu item that you wish to make a submenu item. Click Indent Menu button to designate the item as a submenu item under the item directly above it on the menu item list. Click Done to close the Pop-up Menu Editor.
   
   
   

   Note:You can continue indenting to create more levels of submenus.

7. To change the position of a menu item or submenu item, drag the entry and release the mouse button when a black line indicates the specific position where the entry will be dropped.
8. To delete an entry item, click the item to highlight it then click on the minus sign.
9. To edit an entry item, double click on either the text or the link field. It will allow you to make changes.
10. Click Next to move to the Appearance tab. The Appearance tab contains options that determine the appearance of each menu cell's Up state and Over state, as well as the menu's vertical and horizontal orientation. Make any changes you like for the pop-up menu.
11. Click Next to move to the Advanced tab. The Advanced tab contains options that determine the cell dimensions, padding, and spacing; the cell border width and color; menu delay; and text indentation. Make any changes you like under this tab.
12. Click Next to move to the Position tab. The Position tab contains options that determine the menu and submenu placement. Choose the position you would like for the pop-up menu.
13. Click Done.

Exporting Pop-up Menus:

1. Modify > Canvas> Trim Canvas to remove the unnecessary empty space around the object before exporting.
2. If the object to which you are attaching a pop-up menu is a button on a navigation bar and you have other buttons that need pop-up menus, repeat the process of selecting a button object and creating a pop-up menu. When you are done, follow the instructions for exporting a navigation bar above on this page.
3. If the object to which you are attaching a pop-up menu is not a navigation bar, select it and File > Export. If you see a message that begins with "Slice objects will be ignored ...., " click OK.
4. In the Export window navigate to to the site folder where you are collecting files to be used on your web page, and complete as follows with your own button name in lower-case and the html extension:
   
   
5. Click Save. Your site folder will now contain an Images folder with one or more graphic files inside it, a JavaScript file and an HTML file.