Enhancing Web Production with Fireworks


Macromedia Fireworks continues to up the ante on what you can expect from a Web-imaging application. The many features of Fireworks 8 enable you to do more of your Web-image production from start to finish without ever having to go to another application.

With Fireworks, designers have the freedom to import work that they have created in Photoshop, Illustrator, FreeHand, Flash, Poser, After Effects, LiveMotion, or even 3D Studio Max — while maintaining the option to edit the files. Unlike most other Web design programs, Fireworks combines the ease of vector-based editing with the tools required for advanced bitmap editing.

Along with its advanced, yet familiar, tools, Fireworks also sports a superior optimization engine for exporting files, and for the automation of custom command batch processing. It includes the indispensable option to implement a Find and Replace command for elements within a graphic project. For designers working on Flash projects that require integration of numerous source images, one of Fireworks' most powerful features is its capability to prepare (and optimally compress) huge quantities of bitmap files so that they will be more Flash friendly.

Perhaps the most important feature of Fireworks is that the native PNG formatted files can be imported directly to Flash without any other file export or format conversion required. All vectors, bitmaps, animations, and even multistate button graphics can be preserved in the Flash authoring environment. This workflow finally breaks down the barrier between raster files and vector art or text, enabling you to take advantage of the best features of these different formats without having to switch modes or break your artwork up into multiple files. Going the other way, Fireworks is equally capable of receiving files from Flash and optimizing them for inclusion on HTML sites.

Here's a quick overview of some of the core features of Fireworks, which make it a preferred partner for Flash:

  • Macromedia common user interface (UI): Just like Flash 8, Fireworks 8 has a stream lined interface (shown in Figure 36-1). All the tools and options are laid out in dockable panels that are distinguished by unique icons and names. The new Image Editing panel in Fireworks 8 keeps all the most commonly used tools for modifying graphics and bitmap editing in one accessible location — no more hunting through the application menu or multiple panels to find the options you need. Also, the Property inspector provides intuitive, centralized information and controls relevant to the active tool or element. There are some unique tools and features, and the UI isn't identical in every aspect, but if you're familiar with Flash, it won't take you long to feel comfortable in the Fireworks environment.

  • Create and edit text directly: In Fireworks, you can create and edit text directly on the canvas without having to use a separate text editor. You can modify text settings at any time directly in the Property inspector.

  • Bitmap tools: Fireworks flaunts a set of bitmap-editing tools that will make designers requiring detailed image editing options very happy. These include Blur, Sharpen, Dodge, Burn, and Smudge.

  • Gradient tool: Fireworks also has a user-friendly Gradient tool that can be used to fill pixel selections, vector objects, and text.

  • Batch Processing: The user interface for Batch Processing makes it easy to optimize large quantities of images. You can also run scripts during a batch process.

  • Quick Export button: Fireworks gives developers a shortcut to their other Macromedia Studio programs. As shown in Figure 36-2, this icon at the top of the Document window provides a drop-down menu of various options for file export or transfer to other core development programs.

  • Extend Fireworks with custom commands made in Flash: Since Fireworks MX, it has been possible to enhance the Fireworks JavaScript Extensibility API by combining pre built or custom commands with interfaces created in Flash using ActionScript and components. Visit the Macromedia Exchange to download user-built commands.

  • Selective JPEG compression: Fireworks enables you to add a JPEG mask to an area of your image. This mask can have a different JPEG compression setting than the rest of the image.

  • Launch and Edit: You can easily edit PNG image files while authoring documents in Flash or in Dreamweaver by using the Edit with option available in the contextual menu for the image in the Document window or in the Library, as shown in Figure 36-3. When a PNG image is opened in Fireworks from another application, Fireworks will let you know that you're in "Launch and Edit" mode. The changes made in Fireworks will automatically be applied to the image in your document and can also be saved to update the original source PNG file.

    Tip 

    If Flash recognizes the file format of an imported raster file, the application used to create the original image will be listed in the contextual menu as an editing option above the Edit with option used to launch the dialog box for manually selecting an external editor.

    Caution 

    The Edit with option is only available for nonlayered raster images or layered raster images that you import using the Import as a single flattened bitmap check box in the Import Settings dialog box. For some complex images, flattening is a better workflow than trying to convert multiple elements to editable elements in the Flash authoring environment.

  • Reconstitute image tables: Fireworks will rebuild an editable source PNG file from an image table in an HTML file. Fireworks will import the slices with Web behaviors, such as rollovers or pop-ups, still attached. You can edit the graphic in Fireworks and then export it with all of the behaviors intact.

  • Streamline Web production tasks in Fireworks: The Fireworks Data-driven Graphics Wizard takes automated production a step further by supporting variable-assignment for graphic elements and Web objects in a Fireworks template document. This reduces repetitive production time for designers authoring multiple copies of the same elements. Also, Fireworks offers instance-level button properties, making it easier than ever to make multibutton navigation bars or pop-up menus by assigning unique text and URLs in the Property inspector.

  • Director export: Fireworks can export files in a format suitable for Director use. This export requires an additional plug-in for Director.

  • FreeHand reader: You can import or copy and paste FreeHand files from versions 7 and higher into Fireworks.

image from book
Figure 36-1: The panel-based interface for Fireworks 8 is similar to the UI you'll see in other Macromedia Studio 8 programs.

image from book
Figure 36-2: The Fireworks Quick Export button provides a shortcut to other core programs and common file options.

image from book
Figure 36-3: The Edit with option in the Flash contextual menu (A), enables you to choose an external image-editing application (B) to modify raster images that you've placed in Flash.

Note 

Although Fireworks supports the direct import of FreeHand files, if you plan to move vector artwork from Fireworks to FreeHand (or any vector graphics program other than Flash), you will need to export your files from Fireworks in Illustrator 7.0 format.

There's plenty more to Fireworks, and we get you on your way by introducing some solutions for Fireworks and Flash integration. Fireworks is an incredibly robust program that offers many features for Web production that go beyond the scope of this book.

Cross-Reference 

For more detailed information on working with Fireworks 8 (a core product in the Macromedia Studio), refer to the online help that is offered by Macromedia or the Fireworks 8 Bible (Wiley, 2006).

Transferring Fireworks Images with Transparency to the Flash Authoring Environment

The Fireworks tools and options will be familiar to anyone who has some experience with photo editing — we will have to leave you to explore all the possible effects on your own. To introduce you to the various export options available in Fireworks for images with bitmap or vector masking, we will walk through the steps for moving a logo with bitmap and vector elements into Flash from Fireworks.

On the CD-ROM 

You can find the files used for this example in the FireworksMask folder in the ch36 folder on the CD-ROM.

  1. You can add mask layers to your bitmap file in Fireworks to isolate the areas of the bitmap image that you want visible in the final image. As shown in Figure 36-4, text created in Fireworks is automatically "masked"; it will float on any background color with out additional clipping paths or masking.

  2. By saving the file in Fireworks' native PNG file format, you will preserve all masking, bitmap images, and editable text.

    New Feature 

    You can also apply Fireworks filters for import to Flash as long as you follow all of the rules that apply for filters in the Flash authoring environment: Check the Filters menu in Flash to see which filters are supported and only apply filters to text, Button symbols, or Movie Clip symbols. In all other cases, Fireworks filters can be rasterized to preserve the graphic look when they are imported to Flash, but the filters will only be editable in Fireworks.

  3. Open Flash and create a new document (or open an existing .fla file that you want to add a new element to).

  4. Select the timeline and the frame that you want to import the artwork to. You may choose to create a new symbol before importing the artwork, or you can import directly to the Main Timeline and convert the graphic into a symbol later.

  5. Choose File Import Import to Stage from the main application menu and find the Fireworks PNG file you saved in Step 2. When you select Open, the Fireworks PNG Import Settings dialog box appears. To import our static graphic with masking, while preserving editable text, select the options as shown in Figure 36-5.

    The various options will interpret the PNG file as follows:

    • File Structure: The first option (Import as movie clip and retain layers) automatically inserts the content of the Fireworks PNG file into a Movie Clip symbol in Flash. All the layers from the original Fireworks file will be preserved as individual Flash layers. The second option (Import into new layer in current scene), imports all of the content of the Fireworks PNG file into a single new layer on the current Flash Timeline. In some cases, Flash nests the content in a Graphic symbol timeline; otherwise, you can manually convert individual elements into symbols after the file has been imported.

    • Objects: These options determine how Fireworks vector artwork is interpreted when imported to Flash. The first option (Rasterize if necessary to maintain appearance) converts any special vector effects or fills that are not supported by Flash into raster images to preserve the visual look of the artwork, but you will no longer be able to modify the original vector elements in Flash. The second option (Keep all paths editable) preserves vector artwork as editable elements, but any special effects or fills that are not supported by Flash are lost when the file is imported.

    • Text: If you are working with text that has special formatting that may not be supported by Flash, this is an important option to select. If the text will not require further editing in Flash — such as an illustrative text element or logo — the first option (Rasterize if necessary to maintain appearance) ensures that any special formatting is preserved, but the text may appear in Flash as a bitmap element, and the resulting file size may be larger. If the priority is to maintain editable text, it is best to select the second option (Keep all text editable), even if special formatting that is not supported by Flash may be lost.

      New Feature 

      Supported filters applied in Fireworks will be preserved when text is imported to Flash. In our example, a Drop shadow filter was applied to the text in Fireworks and after import to Flash, the Drop shadow filter settings were editable in the Filters tab of the Property inspector.

    • Flatten: The final option listed at the bottom of the Import Settings dialog box (Import as a single flattened bitmap) cancels all of the other options and simply flattens and rasterizes all of the elements in the Flash PNG file. This option is use-ful if you want to simplify a complex graphic that you know will not require further editing in Flash. It makes the graphic easy to place and may produce a smaller final file size. If you select this option, you can always use the Launch and Edit workflow to edit the original file in Fireworks after it is placed in Flash.

  6. After choosing the settings that are appropriate for the content of your Fireworks file, click OK to import the graphics to your Flash document as specified. Presto! As shown in Figure 36-6, the example Fireworks file has been placed on a single layer on the Main Timeline in Flash. The editable text box is preserved, and the bitmap (with masking applied) is automatically placed in the Library.

image from book
Figure 36-4: In Fireworks, you can easily add complex masks and editable text to layers with your bitmap images.

image from book
Figure 36-5: Import Settings for translating Fireworks PNG files to the Flash authoring environment

image from book
Figure 36-6: The masked bitmap and editable text block with Drop shadow filter settings from the Fireworks PNG file are preserved in the Flash authoring environment.

Note 

If you choose to import your PNG file as a Movie Clip rather than into a new layer in the current scene, you will see additional items in your Flash library. Rather than a single bitmap (as shown in Figure 36-6), you will see two bitmap symbols (one for the image and one for the mask) along with a Fireworks Objects folder containing a Graphic symbol (for the masked image) and a Movie Clip symbol (for the Graphic symbol and the editable text). This nested structure may be confusing at first, but it is required to preserve the appearance and "editability" of the artwork in our sample Fireworks file.

It is also possible to copy and paste content from Fireworks to Flash with the following cautions:

  • Standard copy (Ctrl+C or z+C) and paste of content from a Fireworks file to a Flash document renders all of the copied graphics as a single flattened bitmap image in Flash. The visual appearance of the graphics is maintained, but the image will not have any transparency.

  • The Copy as Vectors option enables you to preserve editable Fireworks text and vector artwork when it is pasted into Flash, but bitmap images may not be transferred correctly with this method.

Web Resource 

For a step-by-step example of how to use adjustment layers and create a mask layer in Photoshop CS or CS2, refer to our archived coverage of "Preparing Images for Flash with Photoshop CS." This example from the Flash MX 2004 Bible by Robert Reinhardt and Snow Dowd (Wiley, 2004) can be found online at www.flashsupport.com/archive.

Preparing Other Bitmap Formats in Fireworks

Flash accommodates most common raster formats without any difficulty. The process for optimizing files with the various compression settings available in Fireworks is straightforward. The various View tabs in the Document window enable you to compare different image formats and compression settings that you can choose in the Optimize panel (see Figure 36-7).

image from book
Figure 36-7: Preview tabs in the Fireworks Document window and the Optimize panel for choosing file formats and compression settings

The other option that can help you to preview the effect of different optimization settings is the Image Preview window, which is invoked by choosing File Image Preview (Ctrl+Shift+X or z+Shift+X). As shown in Figure 36-8, this window also includes all the familiar settings that affect how your final file displays when imported to other applications.

image from book
Figure 36-8: The Fireworks Image Preview window provides all the options you need to decide on the settings to use for the final exported image.

Note the color swatches available from the Matte drop-down menu; these let you define the background color to match when complex clipping paths are exported.

Note 

One other consideration when saving JPEG files for use in Flash is that in Flash MX 2004 and Flash 8, you can use imported JPEG data on images that have been exported from Fireworks with the Progressive check box selected. In Flash MX and earlier, images saved for progressive download were not recognized as optimized files, and the option to Use imported JPEG data was not available in the Bitmap Properties dialog box.

Batch Processing Bitmap Sequences with Fireworks

Consider a Flash project — a catalog or a portfolio, for example — that requires many bitmaps and bitmap animations. How do you get all those nicely rendered images into Flash? Suppose you have an animation created in a bitmap program such as Adobe After Effects, 3D StudioMax, QuickTime Pro, or Poser; all of these programs have an option to export the animation as a sequence of files, usually as a sequence of PICT, PNG, or BMP images. Often, this will be a sequence of filename_01, filename_02, filename_03, and so on. The obvious challenge of working with such file sequences is that they have the potential to add up to hundreds of individual files, all needing to be prepared and optimized for Flash import. Often, when you are dealing with such a sequence, the files are the wrong dimension, or need to have other changes made. Batch processing in Fireworks, and the capability to run custom commands during a batch process, easily saves the day (and your wrists).

On the CD-ROM 

You'll find all of the required assets for the batch example in the FireworksBatch folder inside the ch36 folder of the CD-ROM. To work through this example with the bitmap sequence from the CD-ROM, copy the videoStills folder to a separate location on your hard drive to use as a source image folder.

Setting up Fireworks to Batch Process

To batch process efficiently, you first need to consider the changes that might be required to prep an image sequence for Flash. These changes will be dictated by the requirements of each project, but for our hypothetical project, we determine the following:

  1. All of the files are the wrong dimensions. For the images to fit nicely into our Flash project, we need to change the dimensions from 320 x 240 to 200 x 150.

  2. We also want to change the hue and saturation of the files from standard color to a more stylized tint to match the color scheme of the Flash project.

  3. The art director decides to shake things up; he actually wants you to flip all the images in the sequence horizontally.

  4. Finally, we need to convert all the files from PCT format to JPEG format so that they will perform efficiently in Flash.

Let's get started. Open the first file of the sequence from the videoStills folder you've saved on your hard rive (sleepyStella 01.pct). Then, working on just this one file, make all of the changes that need to be done, per your list (as we explained previously). This will be your prototype file.

Tip 

A similar workflow can be accomplished using custom actions in Photoshop. Although we will not cover the step-by-step process in both programs, if you are familiar with Photoshop, you should be able to adapt the Fireworks process to an equivalent process in Photoshop.

Creating a Fireworks Command

As you make changes to the bitmap in Fireworks, the changes are automatically tracked in the History panel. Let's assume that you found the perfect settings and are completely pleased with the results on your test file. If not, undo and repeat the process until it comes out just right.

Tip 

If you decide to start over from scratch after a few false starts, you might find it helpful to clear the History panel before making the changes you know you'll want to apply to all the final images. This makes the History panel less cluttered when you start saving edit steps as commands.

The next step is to use the History panel to create a Fireworks command. To make a custom command, we need to have a series of clear edit steps tracked in the History panel. The steps we followed to change the sample image to meet the requirements for our hypothetical project are as follows:

  1. With the Constrain check box selected, resize the image to 200 pixels wide (Modify ð Canvas ð Image Size).

  2. Change the hue/saturation to a warm color (PI ð Filters ð Adjust Color ð Hue/Saturation). Select the Colorize check box and slide the Hue slider until you get a tint that you like. (For a nice sepia tone, our settings were Hue: 52, Saturation: 25, Lightness: 15.) Click OK to apply the Filter.

  3. Flip the image horizontally (Modify ð Transform ð Flip Horizontal).

Open the History panel to see every action or event that's been done to the file listed as steps (as shown in Figure 36-9).

image from book
Figure 36-9: The History panel records your editing steps in sequential order.

You can save and reuse these steps as custom commands. However, here's a word of caution about the History panel: Not every step in Fireworks can be used in a command. When you select steps that cannot be translated into a command, Fireworks will notify you with a dialog box. Fireworks also gives you two visual clues for steps that cannot be applied as sequential commands: One is the step icon with a red X over it, and the other is not so obvious — it's a horizontal line break between steps as shown between Image Size and Set Live Filter in Figure 36-9. However, there are workarounds. To get around this sequence glitch, you'll just make two commands for the batch process.

To create the first command:

  1. In the History panel, select the first step.

  2. Select Save as Command from the Options menu, or click the Save icon at the bottom of the History panel.

  3. Name the custom command Resize, and click OK.

You've just made a custom Fireworks command that can be accessed in the Command menu for future use.

For the second command, while still in the History panel, select the last two actions applied to the image (Set Filter and Transform), and save this command as Colorize & Flip.

With these two custom commands saved, the next step is to customize the compression settings for the PCT sequence to make it Web-ready.

Creating Custom Export Settings

Fireworks ships with two default preset quality options for exporting JPEGs: better quality (80 percent) and smaller file (60 percent). However, we need more compression than 60 percent. So, we simply create our own custom export setting. Here are the steps to follow:

  1. Open the Image Preview dialog box (Shift+Ctrl+X or Shift+z+X).

  2. Select the Options tab at the top of the Image Preview window, set the Format to JPEG, and experiment with the JPEG compression settings in the Quality field, until you finally conclude that 50 percent is ideal for this project.

  3. Set the JPEG quality to 50 percent.

  4. Click the small plus icon (+) in the top-right corner of the Image Preview window to add your custom setting to the available export options.

  5. Save this new custom setting as JPEG 50.

  6. Click OK to close the Image Preview dialog box.

You can close the Fireworks file that you used to make edits and save the commands. Do not save the changes unless you rename the file and save it in a new location so that it will not interfere with the batch processing of the original source images.

Launching the Batch Process

Now that we have two custom commands and a custom compression setting, we're ready to initiate the Fireworks batch process. Here's how:

  1. Choose File ð Batch process from the application menu and browse to the folder that contains the source files to be processed — this would be the videoStills folder that you saved locally, if you are using our sample images.

  2. Select the files to batch by opening the folder where all the images reside, clicking Add All, and then clicking Next.

  3. This invokes the Batch Process dialog box. Here, you can choose what commands to apply to the selected files. A word of caution, however: To get the desired effect, the commands need to be arranged in a specific order. The order of the commands should be Colorize&Flip, Resize, and then Export. Select each command in sequence and click the Add button (refer to Figure 36-10).

    Note 

    Although the two custom commands don't have any extra options, the Export command does. With the Export command selected, click the drop-down menu for Export Settings, and then select the JPEG 50 setting that you created earlier. Click Next.

  4. This last step of the batch process asks where to place the new files and what to do with the originals. It is always a good idea to create a new folder (or custom location) for the modified images, rather than overwriting your source files. After you specify a folder — we created a new folder called webReady — click the Batch button. While batch processing, Fireworks opens a feedback window indicating how many files are completed and how many files have yet to be processed. With a long sequence, the process can take several minutes.

image from book
Figure 36-10: Custom commands are added in sequential order for a batch process.

Tip 

Note the Save Script option in the Batch Options dialog box; this is used to save the current batch process settings as a reusable JavaScript command. This is useful if there's even a remote possibility that there may be more than one set of files to batch with the same edits.

After you have sized, flipped, and optimized all the files, you'll be ready to import them into Flash. You can import a single image or you can import the whole sequence to a series of frames on the Main Timeline or on a symbol timeline. For our example file, we followed these steps:

  1. Open a new Flash document.

  2. Insert a new Movie Clip symbol (named bitmapSeries).

  3. Select the first frame of the Movie Clip timeline and choose Import ð Import to Stage from the application menu (Ctrl+R or z+R). Browse to the first image in the webReady folder.

  4. Flash detects when an image is part of a numbered sequence, and a dialog box (shown in Figure 36-11) gives you the option of importing just one image (click the No button) or importing all the images on a series of keyframes (click the Yes button).

image from book
Figure 36-11: When Flash detects that an image is part of a sequence, a dialog box gives you the option to bring in all the images.

Tip 

It is usually best to import image sequences to a Movie Clip symbol timeline so that they are easier to modify or move within your Flash project.

If you import all the images, the JPEG files will be placed into auto-created keyframes on the Movie Clip timeline, as shown in Figure 36-12.

image from book
Figure 36-12: Import the JPEG sequence to a Movie Clip timeline as a series to automatically place each image on a new keyframe.

Note 

If you imported the image series to a new Movie Clip timeline, you won't see the images play in your published movie until you drag an instance of the Movie Clip onto the Stage.

On the CD-ROM 

The result of our example can be viewed by opening importSequence.fla from the FireworksBatch folder inside the ch36 folder on the CD-ROM.

Creating Flash/GIF ad Banners in Fireworks

Not only does Fireworks excel at preparing file sequences for Flash, but it's also equally suited for importing Flash animations. It really is a two-way street with these programs. So, if you're already comfortable creating animations in Flash, why waste time learning how to animate in any other program? Fireworks can import anything you've done in Flash!

Flash banner ads continue to gain in popularity; however, many clients still require animated GIF banners. Someday, we can hope to work in a world of pure Flash advertising and rich media banners. Meanwhile, we'll be in a transitional period where we might still need to turn Flash ad banners into animated GIFs.

Tip 

The templates that come prebuilt with Flash support consistent standards for rich-media banners. To start your design with any of these templates, simply open Flash 8 and choose the Advertising folder from the Create From Template column of the Start page. Or from the application menu, choose File ð New; then select the Templates tab to choose a template available in the Advertising category.

Before you make a cool animated banner with Flash, you need to know the standard restrictions on banners. Here are some basic guidelines for animated banners: Target file size ranges from 12 KB on the high end, to an acceptable 5 KB and on down to the ideal of a mere 3 KB. Typical dimensions that we've been asked to create include 468 x 60, 392 x 72, and 125 x 125 — although only one of these sizes is represented in the Flash templates list, so obviously there is a wide range of possible "standards."

Now you need to create an exciting animated banner ad that will work on all browsers with out any plug-ins. (That means it has to be an animated GIF.) The dimensions of the movie are 468 x 60, and the file size limitation is that it can be no more than 12 KB.

With these limitations in mind, here's how to begin designing your banner in Flash:

  1. In the Document Properties dialog box (which is accessed from the Property inspector or from the application menu under Modify ð Document), set the movie size to the specified dimensions.

  2. Also in the Document Properties dialog box, set the frame rate to no more than 10 fps. That's because we know we have to make this animation into an animated GIF and, to stay within our file size limit, the lower the frame rate, the better our chances.

  3. While creating the animation, watch out for file size. Try to design a simple animation with few colors and few frames. Fewer colors with fewer frames make it more likely to land within our target file size.

Which Format is Best for Export?

When the animation works to your liking, the next step is to decide how to export it. If the animation has a lot of colors or images, then the best option is usually to export the animation as a PNG sequence with File ð Export Movie. But if the animation has very few colors and only vector graphics, it's often best to export directly as an animated GIF, either from the Publish Settings dialog box or with the Export Movie command.

Colorful Animation Export

Because the hypothetical animation has quite a few colors, we've decided to export a PNG sequence and defer optimization to Fireworks where we'll be able to preview different compression settings. PNG is an ideal source format when you plan to add compression in another program because it is lossless and can handle transparency. Here are the steps:

  1. Still in Flash, choose File ð Export Movie.

  2. In the Export Movie dialog box, choose PNG Sequence from the Format drop-down menu. Then, name the animation, choose a location for the exported file sequence, and click Save.

  3. Now, open Fireworks and create a document that matches your Flash banner size. To import the PNG sequence as one file, choose File Open, and then navigate to the folder containing the PNG sequence. The next step is important.

  4. If, at this point, you were to Shift+click all the files that you want to open and then open them, Fireworks would open each file individually, which would make it more difficult to create the animated GIF. So, you need to make sure to check the Open as Animation option, before you click Open. With this option, Fireworks places each selected file in its own frame within a single Fireworks file, in numerical order. Now click Open.

  5. This new Fireworks file should have the file sequence set for export as an Animated GIF. But you're not done yet. To reduce the file size, you still have to go to work with the color palette.

  6. Select the Preview tab to see how the animation will look when exported. In preview mode, Fireworks indicates the file size that will result with the current compression settings. Now it's necessary to focus on the Optimize panel, which is where the file type is chosen.

  7. Select Animated GIF in the Optimize panel. Once a file type is selected, various optimization options appear. For an animated GIF, begin by editing the number of colors, either (a) choosing from a range of default color settings, with 256, 128, 64, 32, 16, 8, 4, or 2 colors in the color palette, or (b) entering a specific number of colors. Note that with every change to the color range or adjustment to the Optimize panel, the preview window updates with the file size. To ease comparison, Fireworks gives the option to view compression schemes with the 2-up and 4-up preview modes, viewing either two or four settings side by side.

The trick to compression is finding a balance between appearance and file size. Too much compression, and the graphic looks like dirt, although the file size is ideal; too little compression, and, while the graphic looks beautiful, the file size threatens to choke the fastest connections. So what can you do after trying to find that balance between image quality and file size without success? What can you do when the image quality can't go any lower, but the file size is still way too large? As we mentioned earlier, there is a second factor to the file size of animated GIFs: the number of frames. When image optimization fails, change your focus from the Optimize panel to the Frames panel.

The Fireworks Frames panel is used to control several animation playback settings. These are

  • The number of frames in the animation.

  • The frame delay for each frame — should this frame hold for a second or two or just breeze right through as quickly as possible?

  • The loop settings for the animation. Will the animation loop ten times, five times, never, or forever?

To further reduce the file size of an animated GIF, remove some frames. To remove a frame, simply select the frame in the Fireworks Frames panel, and then click the trashcan icon at the bottom of the panel.

Keep deleting frames, judiciously, and continuously preview the animation until you've brought the animation down to the required file size. Throughout this process, the preview mode will update its display of the file size every time a change is made. Unfortunately, you will find that as you delete frames from the animation, the animation will not play back as smoothly as originally designed and intended. But that's just a limitation of animated GIFs and a compelling reason to start creating pure Flash banner ads!

When the file's been brought down to an acceptable size, the next step is to edit the timing of each frame. Each frame in the Frames panel has a name on the left and a number on the right. The number signifies the delay length for each frame, measured in one-hundredths of a second. The default setting is 20 — or image from book of a second. So, to pause a frame for 3 seconds, set the frame delay to 300.

The last adjustment to set is the looping of the animation. At the bottom left of the Frames panel is a loop icon. Select it and choose a loop setting. Finally, it's time to export this file as an animated GIF and send it off to the Web. Use File Image Preview. In the Image Preview window, select Animated GIF from the format pull-down menu. Now press the Export button to name the file and place it within the desired location. Click Save and you are ready to go.

Alternative Workflow

If an animation is created in Flash with few colors, there's no need to export it as a PNG sequence. Instead, export the animation directly from Flash as an animated GIF. Use the application menu to choose File Export Movie, and then choose Animated GIF from the Format drop-down menu; or use the Publish Settings dialog box, and first select the GIF check box, and then from the GIF tab, choose Animated. In either case, use the largest possible color palette in order to defer color crunching to Fireworks, where the controls over the color palette are generally more accurate and effective.

The exported animated GIF is easily imported into Fireworks by choosing File Open, and then selecting the single animated GIF file. Fireworks imports each frame with the frame delay settings intact. From here, the animation may be optimized per the previous instructions, proceeding from the color palette, to the number of frames and loop settings.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net