Macromedia Fireworks 4

"A Powerful Web Graphic Creation Program!"
| Type of Product | User Level | Features |
| Product Analysis | Final Comments | System Requirements |
Type of Product

box cover

Macromedia's Fireworks 4, the newest version of their vector Web application, is a powerful tool for creating Web graphics. It excels in letting you: create image maps; slice graphics and create an HTML table; mix file formats and compression schemes in one sliced graphic; create JavaScript rollovers and their associated code; and optimize images in a WYSIWYG environment and compare as many as four different optimization schemes at one time. In 1998, Macromedia built Fireworks from the ground up specifically to address the needs of the Web graphic designer. Fireworks 1 gave users the choice of working with vectors, as opposed to bitmaps. Working with vector graphics solved many problems of creating graphics for the Web, which included the desire to have compact file sizes, while giving designers the ability to create and modify common Web effects, such as bevels, glows, drop shadows, and textures, with minimal fuss or experience. Using vector drawing tools also enabled users to export, and adapt, and reuse the graphics for multiple purposes, including both Web and print output. Fireworks also could be used to import and manipulate bitmaps. Macromedia also included intuitive yet powerful optimization tools that converted the composite vector/bitmap graphics to standard bitmaps (including GIF and JPG). Later versions enhanced the ease and power with which users could add interactivity, and improved both Fireworks' vector and bitmap handling capabilities. Fireworks 4 offers further improvements such as better Photoshop integration, an improved interface, and a host of other features that will speed up your workflow and get your creative juices flowing.

Fireworks 4 is available for Macintosh and Windows. Price: $299; Upgrade $149. Macromedia has an excellent site to visit, with all sorts of information, freebies, tips, examples, and tutorials:

User Level
Advanced Beginners, intermediate, and advanced computer users. You should have a working knowledge of your computer and Web design before you tackle the program. Yet it is easy enough to use for novice Web designers who need to create professional-looking Web sites with a minimum of advanced knowledge or experience. Plus, it is powerful enough for professional designers, multimedia developers, and HTML coders.


New and enhanced features includes the following:

  • Updated User Interface--Familiar user interface enables designers to work smoothly with Macromedia Web design applications such as Dreamweaver, Fireworks and Flash.
  • Dreamweaver Compatibility--Fireworks and Dreamweaver work together better than ever.
  • Drag-and-Drop Behaviors--Create complex rollovers quickly and easily by dragging and dropping from one slice to another.
  • Pop-Up Menus--Develop sophisticated navigation effects with multilevel pop-up menus in a step-by-step visual environment.
  • Masking, Layers Panel, and Frames Panel Enhancements--The program has advanced masking capabilities, and an expanded thumbnail view of layer objects.
  • Reorganized and Expanded Export and Import Options--Import and export Photoshop files with improved fidelity, smoothing workflow among teams.
  • Selective JPEG Compression--Selectively compress portions of an image.
  • Pen Tool Improvements--The Pen tool has been enhanced for greater control when drawing and editing vector graphics.
  • Rectangles with Rounded Corners--Work with the new Rounded Rectangle tool to set a corner radius for rectangles.
  • Live Animation Controls in the Workspace--Accessible controls within the workspace allow the user to reposition, redirect and reanimate simple animations across multiple frames.
  • Batch Processing--Quickly set up and execute batch processes, including commands, with the step-by-step Batch Processing Wizard.
  • Reorganized HTML Setup Dialog Box--HTML options are easy to find and choose with the new HTML Setup dialog box.
  • Text Improvements--Fireworks keeps track of text color and fill color independently.
  • User Experience Enhancements--Fireworks has improved the way many features work to create a better user experience.
Product Analysis

Installation, User Guide, and Help
tutorial example
Installation is easy. Macromedia always provides excellent help features for its products. There is an extensive 423 page User Guide, with a tutorial in Chapter 1 for creating a Web page. Users that are not familiar with the program can use this as a starting point. The program also has lessons that introduce you to the main features of Fireworks, letting you practice on examples. Click on the image to the left to see the finished project from the tutorial in Chapter 1.

Updated User Interface


keyboard shortcuts

The Fireworks 4 interface conforms to the common Macromedia User Interface so that it now resembles the look and feel of Flash and Dreamweaver. So whichever Macromedia Web design product you are using, you'll see the same icons, tools, toolbars, and terms wherever possible. This makes it easier to learn and master all the products in the Macromedia software line and reduces the learning curve. The program has customizable keyboard shortcuts, and you can install keyboard shortcuts that you use in other Macromedia or non-Macromedia graphics applications, or set up your own favorites. There is a Mini-Launcher along the bottom of the document window that gives you quick access to common Fireworks panels, such as the Stroke, Mixer, Optimize, and Layers panel sets. See top image to the left for a view of the interface and see bottom image for a view of the Keyboard Shortcut dialog box.

Dreamweaver Compatibility
With Fireworks 4, Macromedia has incorporated options that allow for better compatibility between Fireworks and Dreamweaver. Round-trip table editing lets you edit and update HTML and JavaScript code and graphics from Dreamweaver while maintaining edits to the table. It updates HTML table images placed in Dreamweaver while preserving changes made to the HTML itself outside of Fireworks. If you change behaviors, enter new text, change the link, or make other edits, you can update graphic changes without overwriting the HTML in Dreamweaver. Plus, the enhanced Launch and Edit window brings you into Fireworks from a host application such as Dreamweaver or Flash. You can make your edits to documents you created in Fireworks, then click Done and go back to work in the host application. When launching and editing Fireworks images placed in Dreamweaver, the Dreamweaver Property Inspector will let you know whether you are editing an image or a table.

The Pen Tool

pen tool

If you have ever used the Pen tool in any graphics program, you know that it can sometimes be hard to tell whether you are editing a point, removing it, adding a new one, or simply selecting the whole path. To help you use the tool, Fireworks 4 now continuously changes it cursor icon while you are working, so you know exactly what you are doing, whether you are plotting a new point or modifying the cure handles on an existing one. You can also hold down the Control (Windows) or Command (Macintosh) key to temporarily switch from the Pen tool to the Subselection tool for greater pointer control.
  Drag-and-Drop Behaviors


navigation bar

With Fireworks 4, creating button or disjoint rollovers is drag-and-drop simple. It's easy to create a mouse-over action that swaps an image under a slice in another area of the screen. You just select the button in the workspace, drag the target icon from the middle of the button's slice onto the slice where you want the swap image to occur, and then release. A dialog box will appear where you choose a source layer from the pop-up menu. And when you select the button, a visual cue appears showing the relationship between the slices. Once the rollover is applied, you can move slices without losing the rollover behavior. The top image to the left shows an example of using drag-and-drop behaviors to create a disjointed rollover. It's from one of the lessons that are included in Fireworks 4. The bottom image shows an example of a rollover navigation bar. It also is an example that is included with Fireworks. The white rectangle shows the rollover effect.
  Pop-up Menus

pop-up menus

popu-up menu dialog box

One of the best new features in Fireworks 4 is its ability to quickly create hierarchical menus that appear when you roll over a button. You can attach a pop-up menu to any slice or hotspot object in Fireworks simply by selecting it and choosing Insert | Pop-Up Menu from the menu. Fireworks then opens a simple two-step dialog box that walks you through the process of building the menu. You enter menu text, create submenus, specify the URL address, define the menu's appearance, specify a background image, a font, and the Up and Over states for the menu entries. Also, this dialog box provides a live preview as you work, so there is no need to go back and forth to see your design. You can create the menu using stylized text, or get creative by using graphics for your pop-up menu items. See top image to the left for view of a Web page sample from Fireworks that displays pop-up menus and submenus. See bottom image to the left for a view of the dialog boxes for the two stages in creating a pop-up menu.
  Masking, Layers, and Frames Panel Enhancements



The new Layers panel in Fireworks 4 offers an expanded thumbnail view of each layer's objects, as well as advanced masking capabilities, such as creating a vector or bitmap mask right in the Layers panel using thumbnails and the Add Mask button. Plus, you can quickly and easily select, name, move, and delete individual objects right from the Layers panel. You can hide, show, lock, or unlock multiple layers by dragging down the hide/show and lock/unlock columns in the Layers panel. And, opacity and blending mode settings are in an intuitive location on the Layers panel. You can also name individual frames in the Frames panel to better manage frames in rollovers and animations and to import layers as frames. See the top image to the left for an example of a mask. See the bottom image to the left for a view of the Layers panel. The Layers panel is a significant new features that makes working with masks easier.
  Reorganized and Expanded Export and Import Options

The Fireworks 4 Export dialog box is easier to use. The layout is more logical, and inapplicable options for the current export format are dimmed or hidden. The Export Special options are now located on the Export dialog box. The export and import capabilities for a variety of file formats has been improved:

  • Photoshop PSD Export--lets you choose whether to maintain editability over appearance or maintain Fireworks appearance quality, or you can flatten layers into a fully rendered image. You can also decide whether to maintain editability of effects and text.
  • Photoshop PSD Import--has been enhanced by the new Fireworks layers and frames functionality. Thus, when you import layers as frames, Photoshop layer names become Fireworks frame names. And each Photoshop layer translates to an object on a layer in Fireworks. Photoshop layer masks import intact into Fireworks as image object masks.
  • FreeHand 9 Import--allows separate control over anti-aliasing for text and anti-aliasing for objects. This is also true for other vector import formats such as Illustrator and CorelDraw.
  • Director Export--lets you export layers or slices, as well as HTML, into Director if you have the Import Xtra for Director installed. You can download Xtra, from the Macromedia Web site:
  • EPS Import--now available in Fireworks. The file is rendered as a bitmap image.
  • WBMP Import and Export--is now available. The WBMP file format is optimized for wireless computing devices.
  Selective JPEG Compression

selective jpeg compression

jpeg selection

If you have spent any time in Web design, you have been faced with the problem of compressing an image in which one item has to be clear, while the remainder of the image could be a lower priority. If you make the one item clear by compressing at high quality, the file will be too large. Yet if you make the file a reasonable size, the main object's quality will be low. Fireworks 4 can solve this problem. By using the marquee tools and the Set Selective JPEG feature in Fireworks 4, you can identify important parts of a JPEG image that you want to display as a high-quality image. Then you can make the overall image file size smaller by compressing the less important parts of the image. The top image to the left shows the Selective JPEG Settings, and the bottom image to the left shows a graphic with the background selected so that I could set the quality to 35 (low quality), while the pen, which I wanted to be sharper, was saved at 96 (high quality). You can also see the Overlay Color that highlights the selected area.
  Rectangles with Rounded Corners
rounded rectangles
The new Rounded Rectangle tool makes it easy to create buttons with customized rounded corners. You can draw rectangles with rounded corners by using the Rounded Rectangle tool and specifying a corner radius from 0% to 100% before you draw, or by using the Object panel to adjust the corner roundness of selected rectangles.
  Live Animation Controls in the Workspace

live animation

animation controls

Fireworks has made two improvements to its animation controls, First, it now has an animation control interface similar to that of Flash and Director. This interface provides a series of VCR-like controls right in the authoring environment that let you preview the animation and/or move through it one frame at a time. Another powerful tool is the new Animation Line. When you select an animated symbol, each point on the line indicates the relative position of each symbol on each frame of the animation. By adjusting this Animation Line, you can alter the direction and extent of an animation quickly and intuitively because you can adjust the animation as a whole, rather than skipping back and forth between first and last frames. When you select an animation symbol, the Object panel displays animation properties such as number of frames, scaling, opacity, and rotation. You can edit the selected animation by changing values in the Object panel. Also, animated GIFs now import as animation symbols. The top image to the left show an object being scaled across seven frames and the opacity going from 100 percent to 25 percent. Onion skinning has been turned on so you can see all the frames. The bottom image shows the animation controls.
  Batch Processing

batch process 1

batch process 2

Fireworks has a redesigned batch processing user interface that logically presents the processing options. You now can determine the location and name of the output folder as you set up your batch process tasks. Options are in plain view on panels instead of hidden in pop-up menus. First, you select the files to batch process in the Open Files to Batch dialog box. Then you enter information on the panels, which are organized to lead you through the setup process. The first panel lets you choose actions to perform (Export, Scale, Find and Replace, Rename or Commands) in the batch process and the order in which to perform them. The second panel lets you select how processed files are saved and backed up. The top image to the left shows the first panel, where you choose the action to perform, and the bottom image to the left shows the second panel where you select the naming scheme and destination folder.
  Reorganized HTML Setup Dialog Box

html setup

The new HTML Setup dialog box makes it easier to find and choose HTML options. The options are organized in tabbed panels sets. You set such options such as global preferences; file name conventions, associations, and extensions; how HTML tables are exported; and options for the current document, such as manual or automatic slice naming. The dialog box also lets you precisely control many variables of HTML, JavaScript, and image output. You can customize the setup and export variables so that the Fireworks output fits within specific work methods, style guidelines, and server application requirements. You can specify HTML style (generic, Dreamweaver, GoLive, FrontPage, or custom) and extensions (.htm, .html, .HTML, .asp, .jsp, .php, .shtml, or custom). HTML comments can be added, and you can force lowercase file names and set a spacer style (none, 1-pixel transparent, or from image). You can set empty cell color and contents. Fireworks 4 also simplifies the task of setting up a slice naming convention. You can choose each part of your naming convention from a series of pop-up menus on the Document Specific tab of the HTML Setup dialog box. See image to the left for a view of the HTML Setup dialog box.
  Text Improvements
Fireworks 4 keeps track of text color and fill color independently. If you select a text color, Fireworks continues using the same color for the next text block you create. Also, if you choose another drawing tool and change the stroke or fill, and then return to the Text tool, the text color you last used is restored to the Text tool. You can now reposition a text block in the workspace while the Text Editor is open.
  User Experience Enhancements

Some user experience enhancements are:

  • When you create a button, it resides on a regular layer, like other vector objects.
  • If slices accidentally overlap, the topmost slice in the stacking order is active in the overlapping are. Fireworks slices files upon export base don the perimeter of the topmost slice; it does not export extraneous files from the overlapping area.
  • The pointer displays the size and shape of the brush or eraser as you draw when you choose the Brush-Size Painting Cursor preference.
  • You can easily switch between original and previews using convenient menus in 2-up and 4-up views.
  • You can view transformation information in the Info panel as you transform objects.
  • You can hide the striped border that appears when you are in bitmap mode by deselecting the Show Striped Border preference.
  • When you drag the pointer past the document windows, documents that continue beyond the window will scroll in the direction of the pointer position. Also, you can scroll past the document canvas so you can zoom in and work along the edges of your artwork.
  • Marquee selecting is smoother and more precise.
  • Fill handles appear by default, so you can quickly edit the pattern or gradient fill of a vector object. Also, a new Edit button on the Fill panel makes it easier to edit gradients.
  • When you drag an endpoint of a path near the endpoint of a path with similar stroke characteristics, the two paths snap together.
Final Comments
If you intend to create rollovers or pop-up navigation menus for the Web, I would suggest that you run out and purchase Fireworks 4. You will be amazed at how easy it is to use. This version is a significant upgrade and worth the money. The program is not an image editor like Photoshop, even though you can work with bitmaps in the program. And it doesn't even attempt to compete with these programs. What it was designed to do and probably does better than other products on the market, is to allow you to easily and quickly create Web graphics. It's optimizing options let you produce the best quality, smallest-file-size, fastest-loading web graphics. It beats Photoshop in producing high quality images with small file sizes. Fireworks 4 is a powerful program that allows novices or professional Web designers to produce sophisticated Web images and sites, and is at the top of our list of must-have programs.
System Requirements


  • Intel Pentium processor (Pentium II recommended)
  • Windows 95/98 or NT version 4.0, 2000, XP or later
  • 64 MB of available RAM
  • 800 x 600, 256-color display (1024 x 768, millions of colors recommended)
  • 80 MB of available hard disk
  • Adobe Type manager Version 4 or later with Type 1 fonts


  • Power Macintosh Processor (G3 or higher recommended)
  • MacOS 8.6, 9.X or OSX
  • 64 MB of available RAM
  • 800 x 600, 256-color display (1024 x768, millions of colors recommended)
  • 80 MB of available hard disk
  • Adobe Type Manager Version 4 or later with Type 1 fonts
Graphics: Adobe Photoshop 6.0
Web Page Design: Macromedia Dreamweaver 4.0
| Applications | Games | Hardware | Children | Plug-Ins | Tutorials | Back to PC Cafe Home |
| Educational | Books | Utilities | Web Tools | Legal | Articles |
Return to PC CafeGo To Top
This site is (c) Copyright 2001, by PC Cafe Online. All World Wide Rights Reserved