Chapter 10

Fireworks: Part II

The Web Warrior Guide to Web Design Technologies

Objectives

In this chapter you will:

• Create image maps to produce linkable hotspots on images

• Learn how to export images for use on the Web

• Learn how to slice an image

• Create symbols and use the library panel

• Create buttons with rollover effects

• Create menus, including pop-up menus

• Create animated graphics for the Web

Creating an Image Map

• Use the Hotspot tool to draw shapes over an image.

• Use the Property inspector to create hyperlinks for each hotspot.

• Use targeting attributes to determine how the Web page will open:

– _blank

– _self

– _parent

– _top

Creating an Image Map

Exporting an Image Map

• Under Save as type, select HTML and Images.

• Export the HTML File, then you can import it to Dreamweaver.

Slicing Images for the Web

• Slicing is a technique used to make a large image load faster on a Web page.

• The large image is cut into several smaller slices that can be assembled in an HTML table.

• Each slice can be optimized individually.

• Behaviors, such as a rollover, can be added to each slice.

Creating Slices

Exporting a Sliced Image

• Select Export Slices from the Slices list arrow.

• Select HTML and Images from the Save as Type list arrow.

• Slicing can create several images. You can click the check box for Saving images in a subfolder to keep your files organized.

Symbols and the Library

• In the Fireworks Library, you can store symbols and reuse them.

• Each time you use a symbol from the library, you create an instance of the object.

• You can change the attributes for each instance.

• Reuse can make your file size smaller.

• Graphic symbols can be used to create animation.

Buttons and Menus

• Buttons and rollover buttons make a Web page responsive to the user, letting them know where they can link and what kinds of information is available to them.

• A single button consists of multiple images for when the mouse is up, over, or down.

• Fireworks helps you create buttons with a special editor to create the different images.

• Fireworks lets you duplicate buttons, so you can create a consistent menu.

• Fireworks exports HTML and JavaScript code for use in Dreamweaver.

The Button Editor

Button States

• Up: Normal state of the button.

• Over: When the mouse is on-top of the button.

• Down: When the button is pressed.

• Over While Down: When the mouse is over a selected button.

• Active Area: Where the user can click to activate a button.

Creating a Button

• From the Edit menu select Insert and New Button.

• Create the Up-State of the button.

• Copy the Up image and alter it to make the Over state. Repeat for other button states.

• Press Done.

• The button will appear on the canvas and in your Library.

• Use the Property inspector to associate a hyperlink, alternate text, and targeting information with the button.

Creating a Menu Bar• In the Library, use the Options menu to duplicate your

button.

• Change the text in the Up state. Fireworks will prompt you to change the text in all the button states. Say ‘Yes’.

• Drag your new button from the Library onto the canvas.

• Make sure you name your buttons distinctly so you do not get confused.

• Duplicating a button gives you nice, consistent rollovers for your menu.

Creating a Pop-Up Menu

• Draw a slice over the place where you want the pop-up menu to trigger.

• Right click the slice and select Add Pop-up Menu.

• You will be prompted for the pop-up menu addresses and styles.

Pop-up Menu Editor

Pop-up Menu Appearance

Creating Animation

• Frame-by-frame animation: You create each frame, moving the objects in the animation one frame at a time.

• Tweening: You indicate the location of an object for the beginning and ending frames. Fireworks fills in the frames for you.

• Export the animations as Animated gifs to play on the Web.

Frame-by-Frame Animation

• Create an object to animate.

• Duplicate the original frame over many frames.

• Move the object individually in each frame to create the animation.

• Set the play attributes on the bottom of the Frames panel.

• Preview, then Export.

Tweening Animation

• Create an object.

• Convert it to a graphic symbol in the Library.

• Drag two instances of the object onto the Canvas.

• Select both instances.

• From the Modify menu, select Symbol, then Tween Instances. Enter the number of Frames to be filled in for the animation.

• More frames create a smoother animation.

Summary

• Using the advanced features of Fireworks, you can create image maps, buttons, navigation bars, and animations that can easily be exported for use on Web pages.

• Slicing is a technique for cutting a picture into pieces and loading the pieces as individual graphics on a Web page.

• Symbols are objects with special characteristics and are stored in the document’s library.

Summary

• Making changes to the symbol changes every instance of that symbol.

• Each document has its own library which is used to store the document’s symbols. The Library panel is used to access the symbols and to organize them.

• Buttons are symbols that have five states that can hold different content to create rollover effects. You create links on buttons and export them for use in your Web pages. You edit buttons using the Button Editor.

Summary

• A pop-up menu can be created in Fireworks using slices and the Pop-up Menu Editor. Fireworks generates the JavaScript code needed to display the pop-up menu on a Web page.

• You can create animated .gifs using Fireworks, either by creating a frame-by-frame animation or by tweening images over frames. Animated .gifs are like simple cartoons that play a series of frames in logical sequence.