• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



Welcome to learning Macromedia Fireworks 4. In a very short period of time Fireworks has become an important tool for creating all sorts of Web graphics.

What makes Fireworks so useful? Perhaps the most important reason is that it allows designers to work visually to create not just the images for Web sites but also the special code needed to assemble graphics and create interactive elements.

Another reason is that, instead of using three or more separate programs, Fireworks combines features found in image editing, Web optimizing, and vector drawing programs. So instead of requiring you to jump from one program to another, Fireworks lets you use one program from start to finish.

It has been very exciting to revise this book — my fourth time! Some features that used to be covered in a page or two have now been expanded into their own complete chapters. And yet, other features have been so simplified they can be covered in just a few pages.

Using This Book

If you have used any of the Visual QuickStart Guides, you will find this book very similar. Each chapter consists of numbered steps that explain how to perform a specific technique or work with a feature of the program. As you work through the steps, you gain an understanding of the technique or feature, helped along by insightful tips. The illustrations let you judge if you are following the steps correctly.


Using a book such as this will be easier once you understand the terms I use. This is especially important because some other computer books use terms differently. So, here are the terms I use throughout the book and explanations of what they mean.

Click refers to pressing down and releasing the mouse button in the Macintosh, or the left mouse button in Windows. You must release the mouse button or else it's not a click.

Press means to hold down the mouse button or a keyboard key.

Press and drag means to hold the mouse button down and then move the mouse. In later chapters, I use the shorthand term drag; just remember that you have to press and hold as you drag the mouse.

Move the mouse or cursor means to move the mouse without pressing the mouse button.

Menu Commands

Like any application, Fireworks has menu commands that you choose to open dialog boxes, change artwork, and initiate certain actions. These menu commands are shown in bold type. The direction to choose a menu command is written like this: Modify > Arrange > Bring to Front. This means that you should first choose the Modify menu, then choose the Arrange submenu, and then the Bring to Front command.

Keyboard Shortcuts

Most of the menu commands for Fireworks have keyboard shortcuts that help you work faster. For instance, instead of choosing New from the File menu, it is faster and easier to use the keyboard shortcut.

Different software companies and authors differ as to the order in which they list the modifier keys used in keyboard shortcuts. I always list the Macintosh Command and the Windows Ctrl keys first, then the Option or Alt key, and then the Shift key. In actual practice, the order that you press those modifier keys is not important. However, it is very important that you always add the last key (the letter or number key) after you are holding the other keys.

Rather than cluttering up the exercises with long keyboard commands, I've listed the shortcuts in Appendix A, separated by platform.

Learning Keyboard Shortcuts

While keyboard shortcuts help you work faster, you don't have to start using them right away. In fact, most likely you'll learn more about the program by using menus. As you look for one command you may see a related feature you would like to explore.

Once you feel comfortable working with Fireworks, you can start adding keyboard shortcuts to your repertoire. My suggestion is that you look at the menu commands you use a lot. Then choose one of those shortcuts each day. For instance, if you import a lot of art from other programs, you might decide to learn the shortcut for the Import command. For the rest of that day, every time you import art use the Import shortcut. (It happens to be Cmd/Ctrl-R.) Even if you have to look at the menu to refresh your memory, use the keyboard shortcut to actually open the Import dialog box anyway. By the end of the day you will have memorized the Import shortcut. The next day you can learn a new one.

Cross-Platform Issues

One of the great strengths of Fireworks is that it is almost identical in look and function on both the Macintosh and Windows platforms. In fact, at first glance it is hard to tell which platform you are working on. However, because there are some differences between the operating systems themselves, there are some things you should keep in mind.

Modifier Keys

I always list the modifier keys with the Macintosh key first and then the Windows key second. So a direction to hold the Command/Ctrl key as you drag means that Macintosh users should hold the Command key while Windows users should hold the Ctrl key on the Windows platform. When the key is the same on both computers, such as the Shift key, only one is listed.

In most cases, the Mac's Command key (sometimes called the Apple key) corresponds to the Ctrl key on Windows. The Option key on the Macintosh usually corresponds to the Alt key on Windows. The Control key on the Macintosh has no Windows equivalent. Notice that the Control key for the Macintosh is always spelled out while the Ctrl key for Windows is not.

Platform-Specific Features

A few times in the book I have written separate exercises for the Macintosh and Windows platforms. These exercises are indicated by (Mac) and (Win).

Most of the time this is because the procedures are so different that they need to be written separately. Some features exist only on one platform. Those features are labeled to reflect this.

Fireworks Workflow: How to Use this Book

I structured this book so that you could start with an empty document and build your skills and understanding step by step. The first two chapters deal with the basics of Fireworks's onscreen elements and the document window. The next eight chapters cover the illustration and drawing tools in Fireworks. The rest go through all of the features in an orderly fashion. So, if you tend to be a little obsessive/compulsive, you should start right with Chapter 1 and march straight through the book, one chapter after another.

However, if your client is demanding that you finish the Web site tonight you may need to skip some features and jump right into specific techniques such as optimizing and exporting existing scans.

How you use this book depends on what you need to learn, how quickly you need to learn it, and what your learning style is. This workflow guides you as to how to move around and choose the chapters that most interest you—like a buffet dinner.

Basics 1

Figure 1. Chapters 1 and 2 cover the Fireworks basics—the interface and document setup.

Everyone needs some basics to cover the workings of the program. So wharever your ultimate goal, you should begin with:

Optimizing 2

Figure 2. Chapters 14, 15 and 20 cover the steps needed to optimize graphics and put them on the Web.

If you're in a hurry to get scanned images up on the Web you can then skip directly to these chapters—this means you don't want to edit or add artwork to your images.

Bitmap Images 3

Figure 3. Photoshop users can explore these chapters to make the transition to Fireworks.

It's very possible that you are familiar with Adobe Photoshop and Adobe ImageReady, which many people use to produce Web graphics. If you're interested in learning how you can use Fireworks as you would use these programs, you should cover:

Interactivity 4

Figure 4. Chapters 17, 19, 15, and 20 show you how to add interactive elements to your graphics.

People expect to click buttons to move around Web pages. Here's a quick course for you if you want to know how to augment your pages with interactive elements such as buttons and links.

Animations Figure 5

Figure 5. Chapters 14, 15, 16, and 20 explain how to make Web animations.

Once you've succeeded with buttons, you'll be ready to try your hand at animations:

Graphics Creation 6

Fireworks is more than just optimizing and exporting graphics for the Web. Its graphics creation tools are among the best in the business. These are the chapters that show you how to create graphics:

Figure 6. These chapters show you how to use Firework's extensive arsenal of drawing tools.

Working Faster and Smarter 7

Figure 7. Once you understand the program, you can learn to work faster, which is covered in chapters 12, 20, and appendix A.

It's not enough to know how to use Fireworks—you also want to finish your projects quickly. Here are the timesavers that let you automate your process, work more efficiently, and use Fireworks in conjunction with other Macromedia products:

Continuing Your Fireworks Education

One of the benefits of the Visual QuickStart series is that the books are straightforward and don't weigh you down with a lot of details you don't need. However, they were never designed to be a complete reference work. So, if you need the most complete reference book on Fireworks, I recommend that you look at The Fireworks 4 Bible by Joseph W. Lowery. Joe's book goes far beyond the scope of this QuickStart Guide, particularly in areas such as JavaScript actions and integration with Macromedia Dreamweaver. (Since many Fireworks features are designed to work with Dreamweaver, you may also want to get Joe's other book, The Dreamweaver 4 Bible.)

If you'd like to explore the creative aspects of Fireworks, you may also want to look at Linda Rathgeber's Playing with Fire. Outside of the fact that Linda's book features a technique I developed, she has a wealth of techniques for working with the program. Also, check out her Web site http://Playingwithfire.com.

But however you use Fireworks, don't forget to have fun!

Sandee Cohen


January, 2001

Easter Egg

Easter eggs are extra games or treats that the software engineers add to programs. They're called Easter eggs because you're supposed to search for them and find them yourself. However, if you want to see the Fireworks 4 development team, here's how to get to the Fireworks 4 Easter egg.

To See the Fireworks 4 Easter egg:

Choose About Fireworks from the Apple menu (Mac) or the Help menu (Win). The Fireworks splash screen appears 8.

Figure 8. Opt/Alt-click the Macromedia logo in the splash screen.

Option-click (Mac) or Ctrl-click (Win) the Macromedia logo in the splash screen.

Enjoy the show 9!

Figure 9. A distorted view of the Fireworks 4 development team is available as an Easter egg.


There is actually a more practical purpose for the splash screen. Click the splash screen to display your Fireworks 4 registration number. This can be useful if you need support from Macromedia.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint