In addition to various sound and video formats, Flash supports two types of image formats: vector and bitmap. Vector graphic files consist of an equation that describes the placement of points and the qualities of the lines between those points. Using this basic logic, vector graphics tell the computer how to display the lines and shapes, as well as what colors to use, where to put them on the Stage, and at what scale.

Flash is a vector program. Thus, anything that you create with the Flash drawing tools will be described in vector format. Vector graphics have some important benefits: They're small in file size and they scale accurately without distortion.

However, they also have a couple of drawbacks: Highly complex vector graphics may result in very large file sizes, and vectors aren't really suitable for creating continuous tones, photographs, or artistic brushwork.

Bitmap (also referred to as raster) files are described by an arrangement of individual pixels, which are mapped in a grid — like a piece of graph paper with tiny squares. Each square represents a single pixel, and each of these pixels has specific color values assigned to it. So, as the name implies, a bitmap image maps out the placement and color of each pixel on the screen. A line is "drawn" by filling each unique pixel, rather than simply using a mathematical formula to connect two points as is done with vectors.

Although bitmap images aren't created in Flash, they can be used within Flash projects. To do this, you need to use an external bitmap-editing application and then import the bitmaps into Flash. Figure 16.1 shows a vector image and a bitmap image of the same logo, scaled at 100 percent.

Figure 16.1. A vector image drawn in Flash (left) and the same image imported as a bitmapped GIF graphic (right)

Although these vector and bitmap images are of similar quality at their original size, their differences become more apparent when the same images are scaled to a larger size. Unlike vector graphics, bitmap images become more pixilated as they are scaled larger because there is a finite amount of information in the image and Flash has to spread this information over more pixels. As we explain later in this chapter, Flash is able to interpolate the pixel information by using Smoothing to reduce the jagged appearance of the scaled pixel pattern, but this can also cause the image to look blurred. Figure 16.2 shows the difference between vector and bitmap graphics when scaled in Flash with Smoothing turned off.

Simple bitmap images are often larger in file size than simple vector graphics, but very complex bitmap images (for example, a photograph) can be smaller and display better quality than vector graphics of equal complexity. Figure 16.3 shows a bitmap image compared to a vector image of equal complexity (created by tracing the bitmap). The original bitmap is a smaller file and better suited for reproducing the photographic image.

The rule of thumb is to use scalable, bandwidth-efficient vector graphics as much as possible within Flash projects, except for situations in which photographs — or photographic-quality, continuous-tone images — are necessary for special content.

Figure 16.2. The same vector (left) and bitmap (right) image scaled to 200 percent in Flash to illustrate the difference in image quality

Figure 16.3. File size comparison of an imported bitmap image (left), and a traced vector image of equivalent complexity (right)

You can import a variety of assets (in compatible formats) directly into your Flash project Library, or you can import or copy and paste from another application into the Flash Document window. Assets can also be dragged from one Flash Document window or library to another. Files must be a minimum size of 2 pixels by 2 pixels for import into Flash.

The import menu (Ctrl+R or

For now, let's focus on a brief summary of the image formats for Flash import, as shown in Table 16.1.

Flash is a vector-based application, but that shouldn't stop you from using bitmaps when you need them. There are many situations in which either the designs or the nature of the content require that photographic images be included in a Flash project. You can import a wide variety of bitmap image types, including JPEG, GIF, BMP, and PICT using the methods we describe in the next section.

Considering that it's a vector-based program, Flash supports bitmap graphics extraordinarily well. However, because the most common use of Flash movies is for Web presentations, you always need to keep file size in mind. Here's what you can do to limit the impact of bitmap images on Flash playback performance:

When you want to bring raster images into Flash documents, you should know what portion of the Flash Stage the image will occupy. Let's assume that you're working with the default Flash document size of 550 × 400 pixels. If you want to use a bitmap as a background image, it won't need to be any larger than 550 × 400 (as long as your movie will not be scalable). So, assuming that you're starting with a high-resolution image, you would downscale the image to the largest size at which it will appear in the Flash movie before you import it into Flash; for our example, that would be 550 × 400.

If you mask bitmaps with a Mask layer in the Flash Timeline, the entire bitmap is still exported. Consequently, before import you should closely crop all images that will be masked in Flash. For example, if all you need to show is a face, crop the image so that it shows the face with as little extraneous background information as possible.

Be aware that Flash doesn't resize (or resample) an image to its viewed or placed size when the Flash movie (.swf) is created. To illustrate how the size of an imported bitmap can impact the size of a final Flash movie (.swf), we compared two different image resolutions used in identical layouts. Using the same source image, we sized the JPEG at two different pixel dimensions, and then placed it in two identical Flash documents (.fla). The first source version of the image had a 400 × 600 pixel dimension, while the second source version had a 200 × 300 pixel dimension — exactly half the size of the first. In both Flash documents, the final image was displayed at 200 × 300 pixels.

In the first Flash document (we'll call it Movie A), we imported the larger JPEG and resized it by 50 percent (using the Info panel) to match the smaller image. In the second Flash document (Movie B), we imported the smaller JPEG and placed it at its original size, occupying the same portion of the Flash Stage as the image in Movie A. Although both Flash movies exported a bitmap of the same display size on the Flash Stage, the resulting .swf files (using the same level of JPEG compression on export) had drastically different file sizes. Movie A was 44.1KB, whereas Movie B was 14.8KB! Movie A is nearly three times larger than Movie B. The difference in image resolution could be seen when a view magnification greater than 100 percent was used within the Flash Player; the larger JPEG in Movie A was much less pixilated than the smaller JPEG in Movie B.

width×height×(bit depth ÷ 8) = file size

When you choose to use bitmap images, remember that they won't scale as well as vector drawings in the authoring environment. Furthermore, bitmaps will become degraded if the viewer scales your final movie so that the bitmap is displayed larger than its original size. Here are a few points to consider that will help you maintain the quality of your presentation when using bitmaps:

The advantage of using this approach is that the movie can be scaled for larger monitors without causing the bitmap image to degrade. The disadvantage is that it requires sending the same large bitmap to all users. A more sophisticated solution is to use JavaScript to detect browser dimensions and then send the appropriately scaled bitmaps to each user. Other workaround solutions that may help preserve the quality of your final presentation without adding file size include the following:

Before sizing and importing bitmaps, you need to consider how you will set the dimensions for the Flash movie (.swf) in the HTML tab of the Publish Settings dialog box. You also need to know whether the bitmap is to be scaled in a Motion tween. If the Flash movie scales beyond its original pixel width and height (or if the bitmap is scaled larger in a tween), then bitmap images will appear at a lower resolution with a consequent degradation of image quality.

If you're uncertain of the final size that you need for a bitmap in Flash, it may be best to import a temporary low-resolution version of the image — being careful to store your original high-resolution version where you can find it later. Whenever you need to place the bitmap, drag an instance of the symbol onto the Flash Stage. Then, during final production and testing, after you've determined the required pixel size for the maximum scale of the final bitmap, create and swap-in a higher-resolution image, as follows:

Flash has the option to import bitmaps directly to the document Library, in addition to the standard option of importing to the document Stage. When a bitmap file is imported to the Stage, it will be added to the Library as well. To import a bitmap into Flash, follow these steps:

The important difference between Import and Import to Library is that the latter option places the asset directly into the document Library without placing an instance on the Stage.

Figure 16.4. The Import dialog box as it appears on Mac OS X. You can import multiple files in the same batch by selecting them from the file list before clicking Import.

Because Flash offers full support for the PNG image format (including lossless compression and multilevel transparency and some Fireworks filters), PNG is an ideal format for images that you intend to import into Flash. The PNG format has two types: PNG-8 and PNG-24. Generally, only PNG-24 images support 24-bit color and an alpha channel, but the file sizes can often be prohibitive. Fireworks makes it possible to create PNG-8 files with transparency for import to Flash.

Importing sequences

When using the Import to Stage option, if you select an image from a series of images in the same storage location that include sequential numbers at the end of their filenames, Flash prompts you to import the files as a sequence. If that's what you want to do, click Yes in the dialog box (shown in Figure 16.5) to have Flash import all the files and place them in numeric sequence on successive keyframes of the current Timeline. Otherwise, click No, and only the single file that you've selected will be placed on the Stage.

Figure 16.5. You can import images in a numbered sequence and place them on successive keyframes automatically using the Import to Stage option.

If you are importing a series of stills to be used sequentially to create animation (stills from a video sequence, for example), this feature can save a lot of the time you would spend placing and ordering images manually. The most efficient workflow is to create a Movie Clip symbol before importing the images, so that the sequence can be placed directly on the Movie Clip Timeline. This method creates an animated element that can easily be placed anywhere in your Flash project. If you have already imported a sequence to the Main Timeline and decide that it would be more easily managed as a symbol, simply create a Movie Clip, and then cut the images from the Main Timeline and paste them into the Movie Clip Timeline.

Note

For more coverage on how to create bitmap sequences from QuickTime video, go to the archived Flash MX Bible (Wiley, 2002) Chapter 41, available online at www.flashsupport.com/archive.

Although sequential import is not an option when using Import to Library, it is possible to manually select multiple images for import while using either of the Import dialog boxes. In order to bring more than one file into Flash in the same batch, Shift+click to select multiple items in sequence or use Ctrl+click (or

Working with layered bitmap files

If you are working with graphic files that go beyond simple, single-layer bitmap images, finding the best way to translate those files to Flash may require some trial-and-error. Both Fireworks files (PNG) and Photoshop files (PSD) can contain bitmap and vector artwork, as well as text and masks or filters on multiple layers. Fireworks files may also contain frames and guides. You can always opt to flatten elements into a single bitmap file to preserve the exact appearance of the image or you can choose to preserve editable paths and layers for more flexibility in the Flash authoring environment.

Each layered file imported from Photoshop or Fireworks with editable objects preserved will be nested in a new folder in the Flash library that will automatically have the same name as the imported file. You can change the default name of these folders and reorganize your Flash library as needed to keep the structure clean. You may find it helpful to create a folder for imported elements and nest all the folders that Flash creates for you so that your Library does not get too cluttered.

Tip

Keep in mind that Movie Clip symbols created by Flash to preserve editable files imported from Photoshop or Fireworks will be stored along with any bitmaps or other assets in the folders that Flash auto-creates for each file. If you are using a Movie Clip symbol more than once, you may want to rename and move it to a location that is easier to access — such as into the main file list in the Flash Library — rather than leaving it in the nested folder.

Note

Flash can support some effects and blends created in Fireworks or Photoshop. If an effect is supported in Flash, it will be preserved as an editable Flash filter. If an effect is too complex for Flash to preserve, the image can be rasterized to preserve the appearance of the image, but the effect will not be editable in the Flash authoring environment.

Importing Photoshop (PSD) files

Luckily, Flash CS3 offers a new and improved import dialog box for layered Photoshop files (shown in Figure 16.6) that makes it easier to control elements of the file to be flattened (as bitmaps) or imported as editable objects.

Warning

Although layered Photoshop files can be saved in TIFF or PNG format, these files will be flattened on import to Flash, and you will not have the same control over the conversion of specific elements as you will with PSD files. PSD is the only Photoshop file format that can be brought into Flash with the option to keep layers and editable elements intact.

Figure 16.6. Use this new import dialog box to choose conversion settings for Photoshop PSD files.

When importing images from Photoshop into Flash, you will be prompted by the Photoshop Import Settings dialog box to select each layer in the file and make choices for the following import options:

• Import this image layer as:

  • Bitmap image with editable layer styles: This setting will automatically create a Flash Movie Clip and place the elements onto the Movie Clip Timeline while preserving the image, masks, and other effects (supported by Flash) as editable.

  • Flattened bitmap image: This setting will flatten the image into a single layer in the main Flash Timeline and will preserve the appearance of any masks or filters, but they will not be editable in Flash.

• Import this text layer as:

  • Editable text: Brings the text in as an editable Flash text box, may require font substitution if you do not have the same font available in Flash. The text will be placed on a layer in the Main Timeline or on a Movie Clip Timeline (depending on the other settings you choose).

  • Vector outlines: Converts the text to individual letter outlines to preserve the appearance of the characters and the layout. You can modify the text using Flash drawing tools, but you will not be able to edit using Flash text tools.

  • Flattened bitmap image: Converts the text into a single image to preserve appearance but limits editing options to those that can be applied to bitmaps.

• Create Movie Clip for this layer: If you have selected this option (or it has been auto-selected to preserve editable elements), you have the option of assigning an instance name and modifying the registration point.

  • Instance name: You only need to assign an instance name if you plan to target the Movie Clip with ActionScript.

  • Registration: In most cases, you won't need to worry about changing the default registration point since the convention is to work with the top-left corner as a reference for position and scale.

• Publish Settings: You have three options:

  • You may opt to import the image without any additional compression (Lossless).

  • You may set a custom compression setting for each layer or image as you import it (Lossy: Custom).

  Tip

  Use the Calculate Bitmap Size button to preview the effect of different Custom compression settings before you decide on the final level to apply to your imported image.

• Or, you may opt for the default setting, which will apply the level of compression you have set globally for your Flash movie in Publish Settings (Lossy: Use publish setting).

• Convert layers to:

  • Flash layers: Puts the contents of each image layer onto a new layer in the selected Flash Timeline (either on the Main Timeline or on a Movie Clip Timeline).

  • Keyframes: Puts the contents of each image layer into a new keyframe on a single layer in the selected Flash timeline (either on the Main Timeline or on a Movie Clip Timeline).

Along with the layer-specific settings listed above, there are two handy check boxes at the bottom of the dialog box that enable you to apply two additional (optional) settings for all layers in the file:

• Place layers at original position: This setting ensures that the placement of the imported elements will be consistent with the original file, relative to the top-left corner of the Stage. If you do not select this check box, the imported elements will just be placed in the center of the visible area of the Document window (including the Pasteboard) — which usually turns out to be a somewhat random location unless you have been very precise with your zoom setting and your scroll bars to position the Stage within the viewable area of the Document window.

• Set stage size to same size as Photoshop canvas: This is very helpful if you are importing an image to a new Flash file and you want to match the sizes, but it may disrupt your layout if you already have other elements placed in the Flash file you are importing to.

If all these options seem like more than you need, you can simplify things by leaving the default settings for each layer as-is, or you can select some (or all) of the layers (using Shift+Select or Ctrl+Select) to apply a more limited set of options to all the layers at once.

Tip

While you have more than one layer selected in the Import dialog box, you may also choose to use the Merge button to flatten the layers into a single bitmap to streamline your file — this will preserve the appearance of the layered image but limits your editing options in Flash to those available for simple nonlayered bitmaps.

If you want to fine-tune your import settings without having to make selections each time you see the Photoshop Import dialog box, you can choose your own default settings in the Flash Preferences panel (File

Figure 16.7. Flash Preferences enable you to preset defaults for all the options available with the new PSD file importer.

Importing Fireworks (PNG) files

The import dialog box for Fireworks files has been modified since Flash 8, but it still supports the import of layered, editable files (as shown in Figure 16.8).

Figure 16.8. Use this special import dialog box to choose conversion settings for Fireworks PNG files.

Warning

Although Photoshop files saved in PNG format will show up in the file list when you browse for PNG files, they will not invoke an import dialog box with options but will be flattened into a single-layer bitmap on import. Only PNG files saved from Fireworks will enable you to preserve layers and editable shape or text elements on import to Flash.

When importing PNG images from Fireworks into Flash, you will be prompted by the Fireworks PNG Import Settings dialog box to make selections for the following import options:

• Import as a single flattened bitmap: Select this check box to import the PNG as one rasterized image to the current layer on the Main Timeline or to the Library. When this option is selected, all other options will be unavailable. If you choose this option, you may want to apply Flash JPEG compression to the bitmap image either in Bitmap Properties or in Publish Settings. To edit a flattened image, you can launch Fireworks from inside Flash and edit the original PNG file (including any vector data or text).

• To import more complex files, use these options to control the import structure:

  • Import: Page or Layer or Frames — select the option that best describes the location and structure of the Fireworks content you want to bring into Flash.

  • Into: Current frame as a movie clip to import the PNG file to a new Flash Movie Clip Timeline with all frames and layers intact, or New Layer to import the PNG file into a single new layer in the current Flash document at the top of the stacking order. All Fireworks layers will be flattened, but not rasterized unless specified, and any frames in the Fireworks file will be included on the new layer.

• Use these settings to control whether content is rasterized or kept editable:

  • Objects: Select either Import as bitmaps to maintain appearance to rasterize Fireworks fills, strokes, and effects in Flash as part of a flattened bitmap image, or select Keep all paths editable to preserve vector paths in Flash. Some Fireworks fills, strokes, and effects may be lost on import.

  • Text: You can select the same options as those listed for Objects.

As with most files created in external applications, you will find that rasterized and flattened Fireworks artwork and text will import more consistently to Flash, but you also lose all the benefits of having editable vector art and text fields. Although the option for launching Fireworks at any time to edit the original PNG file does make rasterized Fireworks images less limiting than other bitmaps, it is usually worth the little extra time you might need to spend simplifying your artwork to get it to import to Flash with vectors and editable text intact. Any special fills or textures that have been applied to your text in Fireworks will be lost if you choose to preserve editable text on import to Flash.

Note

Although gradients imported from FreeHand are converted to raw Flash shapes with gradient fills, gradients imported from Fireworks are converted to Movie Clip symbols that will appear in the Library in a folder labeled Fireworks Objects — it is still possible to edit the gradient fill just by opening the symbol in Edit mode (or double-clicking the symbol instance).

Warning

If you import a Fireworks PNG file by cutting and pasting into Flash, all vector elements will be rasterized into a flattened bitmap image.

The Bitmap Properties dialog box, shown in Figure 16.9, has several options that are used to control the quality of your imported bitmaps. Settings in the Bitmap Properties dialog box will override the default JPEG compression setting for the document that is controlled in the Flash tab of the Publish Settings dialog box (File

Figure 16.9. The Bitmap Properties dialog box controls the compression settings applied to bitmaps imported into Flash.

Follow these steps to use the Bitmap Properties dialog box:

Figure 16.11. The same bitmap image as it displays in the published Flash movie (.swf) using imported JPEG data (left) and using a reduced Quality setting of 10 (right)

Being prepared for common problems

Flash retains existing JPEG compression levels on any imported JPEG image, but, if specified in the Bitmap Properties dialog box, it applies additional JPEG compression (set in the Quality field) when the movie is published or exported. Recompressing an image that has already been compressed usually leads to serious image degradation, due to the introduction of further compression artifacts. When importing JPEGs, you'll note that the Use imported JPEG data check box is selected by default in the Bitmap Properties dialog box. This is the preferred setting because recompressing a JPEG is generally detrimental to image quality.

Tip

If you import JPEG images, make sure that you either test the results of further JPEG compression or select the Use imported JPEG data check box in the Bitmap Properties dialog box, which is accessible from the Flash Library.

You can apply compression settings to each individual bitmap in the Library with the Flash Bitmap Properties dialog box to determine the quality that you need before you use the general JPEG settings in the Export Movie or Publish Settings dialog box. Any Quality defined in the Bitmap Properties dialog box will override the JPEG Quality in Publish Settings. To apply the Publish Settings compression to an image, you must select the Use document default check box in the Bitmap Properties dialog box.

Note

We discuss JPEG export settings for Flash movies (.swf) in greater detail in Chapter 21.

Figure 16.12. Compare the images with Flash smoothing (right) to the images with no smoothing (left).

When a bitmap is selected in the Document window, the Property inspector displays the bitmap's name, symbol type, current size, and X, Y location. In addition to these basic bitmap properties, the Property inspector offers two useful options — the Swap button and the Edit button.

Swap

The Swap button invokes the Swap Bitmap dialog box (shown in Figure 16.13), allowing you to specify a different bitmap from the current project Library to replace the bitmap selected in the Document window. This can be considered a localized equivalent of the Import option of the Bitmap Properties dialog box. Rather than replacing the original bitmap symbol in the Library and all instances of the image, the Swap button will simply replace the currently selected bitmap instance without altering the symbols in the Library or any of the other instances of the bitmap that may occur in your project. (This feature is also available from the application menu under Modify

Figure 16.13. The Swap Bitmap dialog box lists all the bitmap symbols available in your current project Library.

Although we did some sample testing to try to show you all the possible image-compression combinations and the final results, the truth is that the optimal settings are entirely dependent on the quality of the original image and the final appearance needed in the context of your design. The main goal when testing various compression strategies should always be to find a balance between image quality and file size. The ideal balance will vary depending on the purpose the image serves in your presentation. For example, when using bitmap images in animation sequences, you may find that you can get away with using higher compression settings because the detail in the image may not be as important as it would be if you used the image in a catalog or some other presentation where the detail and color would be more critical.

The following compression workflows are intended to serve only as general guidelines. You will have to experiment with the specific value settings in each case to find the best results for your particular content and project needs.

Have you ever wanted to take a scan of a "real" pen-and-ink drawing that you made and turn it into a vector graphic? It's not hard to do, and the results are usually pretty close to the original (see Figure 16.14). You can also turn continuous tone or photographic images into vector art, but the converted version will not likely bear much resemblance to the original. However, this can be useful for aesthetic effects.

As we described in Chapter 9, "Modifying Graphics," bitmap images can be traced in Flash to convert them to vector shapes. Figure 16.3 illustrated why this is not recommended for complex photographic images — the file size will be huge and the image quality will not be as satisfactory as the original bitmap. However, converting rasters to vectors allows you to create some unique visual effects in Flash. After an image has been traced, you can use any of the Flash tools available for shapes, including the Distort and Envelop options of the Free Transform tool. You can also select parts of the image individually to modify colors, or even add custom gradient or bitmap fills.

Figure 16.14. Compare the raster version (left) of the sketch to its traced vector version (right).

The Trace bitmap command is different from using the Break apart command on a bitmap. When an image is broken apart, it is perceived by Flash as areas of color that can be modified or sampled for use as a fill in other shapes. Break apart actually duplicates the automatic conversion handled by the Color panel to show bitmaps from the Library in the bitmap fill menu. Although you can modify images that are broken apart with the drawing and painting tools, you cannot select individual parts of the image with the Selection tool or apply the Optimization command, Smooth/Straighten options, or Distort and Envelop modifiers as you can with a traced vector image.

To apply Trace bitmap, select a bitmap image (such as a scanned drawing) that has been imported to Flash (ideally with lossless compression and no Smoothing) and placed on the Stage; then choose Modify

Figure 16.15. Use the Trace Bitmap dialog box to select settings for converting a raster image into vector shapes.

We detail the settings for the Trace bitmap command in Chapter 9, but the default settings can be a good place to start. Higher Color Threshold and Minimum Area values reduce the complexity of the resulting Flash artwork, which means smaller file sizes. This process is most effective when applied to simple images with strong contrast. In these cases, tracing a bitmap graphic can actually reduce the file size and improve the appearance of the scaled image. The settings shown in Figure 16.15 were used to trace the GIF image shown in Figure 16.16. When viewed at a scale of 200 percent, the pixilation along the edges of the bitmap image (on the left) can clearly be seen, and this will be exaggerated the more the image is scaled. The traced vector image (on the right) will scale seamlessly without any loss of quality.

Figure 16.16. Images with simple shapes and limited colors will be more scalable when converted from bitmap (left) to vector art (right) using the Trace bitmap command.

In order to get the best results from using Trace bitmap, we advise reducing the number of colors in the original image before importing it to Flash. Figure 16.17 shows an imported image that was converted to indexed color and reduced to ten colors in Photoshop before saving as a GIF image for import to Flash. After the image is traced, you can simplify the shapes further by applying the Optimize command (Modify

Figure 16.17. A reduced-color GIF image (left) can be traced and then cleaned up and simplified using the Optimize command and Eraser tool in Flash (right).

All artwork drawn in Flash is vector-based; however, not all vector graphics created in other applications will import seamlessly to Flash. As shown in Table 16.1, Flash offers robust support for external vector formats, including FreeHand and Adobe Illustrator. Some vector graphics may be simple objects and fills, whereas others may include complex blending or paths that add significant weight to a Flash movie. Although most vector graphics are by nature much smaller than raster graphic equivalents, don't assume that they're optimized for Flash use.

Importing vector graphics from other applications is fairly simple and straightforward. However, because most vector graphics applications are geared for print production (for example, publishing documents intended for press), you need to keep some principles in mind when creating artwork for Flash in external graphics applications:

The good news with Flash CS3 is that the new import dialog boxes for Adobe Illustrator files (in .ai format) and Photoshop files (in .psd format) enable more precise control of how the file will be translated to Flash — including unique settings for each layer, if needed. The bad news is that the PDF and EPS workflows that were supported in the previous two versions of Flash are no longer an option. However, vector graphics from other applications can still be imported into Flash with relative ease using the Import to Stage or Import to Library command. Browse for files using the All Files setting or specify Adobe Illustrator, Photoshop, FreeHand, or PNG (Fireworks) file in the Import dialog box. Layered files and files with bitmap and vector elements will invoke an Import Options dialog box with relevant settings. Use these settings to control how your file will be handled in the Flash authoring environment. As long as you do not choose to import as bitmap, vector graphics are generally imported as editable groups either on the Main Timeline or in a Movie Clip Timeline.

Vector artwork will only be saved in the Library on import if it includes clipping paths or gradients that cannot be converted to editable Flash fills. In these cases, Flash automatically adds a folder of nested Graphic symbols with masks or bitmap symbols to the Library to preserve the appearance of elements that cannot be converted to Drawing Objects or simple grouped shapes.

You can also copy and paste or even drag and drop artwork from external applications, but this gives you less control over how the vector information will be translated in Flash — for example, transparency or special fill types may be lost and any layers will be flattened into the currently selected Flash layer.

Because generic numbered layer names, such as Layer 1, may be redundant with layers already present in your Flash document, it is helpful to give layers meaningful names in the original file before importing to Flash. To avoid unexpected color shifts, it is recommended that you convert your color space to RGB in any external application before saving files that will be imported to Flash.

To import a vector file to Flash, simply follow these steps:

Although you can scale, move, or rotate the grouped elements, to modify individual parts of the graphic you must either ungroup the elements or go into Edit mode until you are able to select the strokes and fills of a particular element.

Any small inconsistencies in fill style are easy to fix once the elements are ungrouped in Flash. Remember that you can delete fills, add strokes, scale, or otherwise modify the imported artwork with any of the Flash tools.

To make the artwork efficient to reuse and update, it is best to convert the whole graphic into a symbol. If you intend to animate parts of the graphic individually, then convert these into discrete symbols and place them on separate layers.

Importing Adobe Illustrator files

Illustrator is one of the most commonly used applications for transferring vector artwork into Flash. When importing Illustrator files, you can preserve editable vector paths, text fields,, and most gradient and pattern fills in addition to named layers and Illustrator symbols. Flash CS3 includes a new Import dialog box with comprehensive controls to support the workflow between Illustrator and Flash. Figure 16.19 shows the options available from the Illustrator Import dialog box, which is invoked when importing files with the Illustrator extension (.ai) into Flash.

Figure 16.19. The Illustrator Import dialog box is used to specify how the graphics and file structure of an Illustrator (.ai) file will be handled when brought into Flash.

Although Illustrator can export a variety of file formats, including SWF and EPS, the native AI format will give you the most editing options for files imported to Flash. As with the Photoshop importer, the default options for the Illustrator importer can be modified in Flash preferences (shown in Figure 16.20), and relevant settings can also be adjusted uniquely on the fly for each file that you import.

Figure 16.20. Preferences for the Illustrator Import dialog box can be modified in Flash to establish default settings that best match your workflow.

Remember to convert your Illustrator file to RGB color mode. If the file is in CMYK, you will be warned with an incompatibility note in the import dialog box. If you proceed to import the file with changing the color settings in Illustrator, the file will be converted automatically from CMYK to RGB on import to Flash, and this may cause unexpected color shifts. To ensure seamless translation of Illustrator elements imported into Flash, observe the following guidelines:

• Any placed grayscale elements in Illustrator will be converted to RGB color when imported to Flash, which may increase file size.

• EPS files placed in Illustrator will not be viewable when imported to Flash. All content must be resaved in native Illustrator format (.ai) before import.

• Be cautious with compound shapes: When importing overlapping elements that you want to keep intact in Flash, place them on separate layers in Illustrator and import the layers into Flash. If items on a single layer are overlapping when imported, they may be divided or merged at intersection points in the same way as ungrouped shapes created in Flash. Graphics on separate layers will be converted into Drawing Objects on import to Flash and will not accidentally merge unless you break them apart into raw shapes.

• Flash supports up to 15 colors in an imported gradient fill. If a gradient created in Illustrator contains more than 15 colors or special styles (such as contour), Flash uses clipping paths to interpret the gradient. Clipping paths increase file size. To work around this issue, use gradients that contain 15 or fewer colors and use standard gradient styles in Illustrator or replace the imported gradient with a Flash gradient fill as described later in this chapter.

As shown in Figure 16.21, Flash recognizes text and simple gradient or pattern fills imported from Illustrator, making it easy to edit these elements directly in the Flash authoring environment. Effects supported in Flash will also be imported and editable. Effects that are not yet available in the Flash authoring environment can either be imported as rasterized bitmaps to preserve their appearance or they can be sacrificed to preserve the editable content in the file.

Figure 16.21. You can edit Illustrator files directly in Flash, but you still need to convert shapes and text elements into symbols to store in the Library for reuse. Layer and symbol names from the Illustrator file can also be transferred to the Flash file on import.

Note

Imported Illustrator symbols will be preserved as editable elements, and they will automatically be stored in the Library in a folder that Flash creates.

Tip

Remember that gradients created in Adobe Illustrator can be directly exported to SWF format as Flash gradients. However, if the gradient contains more than 16 colors or uses special alignment (such as contour gradients), Flash adds clipping paths when it is imported. Also, remember that FreeHand blends will always be interpreted by Flash as a series of paths, which can increase file size and sometimes add banding to the blend.

A handy feature of many popular illustration programs is support for layers. Just like layers in a Flash document (.fla), layers in illustration programs enable you to keep individual groups of graphics separate from one another. A simple technique with animating vector graphic files is to animate or tween each layer separately in the Flash authoring environment.

An example of an easily converted illustration movie is a logo. If you have created artwork in Illustrator and have kept the elements separated by layers, then you can quickly create an interactive Flash graphic.

As you can see, in just a few straightforward steps, you can create an animated logo and turn many other translations of vector graphics into interactive presentations that can be included in other projects or in e-mail. Whenever you're developing complicated layered work in an application such as Photoshop or Illustrator, you can take advantage of those layers in Flash.

All vector graphics are made up of paths in one shape or another. A path can be as simple as a straight line with two points, a curved line with two points, or 500 or more points along an irregular shape or fill. For this reason, vector graphics are best suited for graphic images such as logos, architectural drawings, and clip art that do not include continuous tones. Fonts are also made up of paths. As you've seen with Flash-drawn graphics, you can scale them to any size without any loss of resolution, unlike raster (bitmap) artwork, which cannot scale larger than its original size without loss of resolution.

When you use imported vector graphics in Flash movies, you should minimize the number of points describing curved lines or intricate outlined graphics (for example, "traced" raster images). The problem with creating cool graphics in vector-based applications such as Illustrator, FreeHand, and 3D Studio Max is the large number of points used to describe lines. When these graphics are imported into Flash, animations are slower and harder to redraw (or refresh) on the computer screen. In addition, the file size of the Flash movie grows considerably. Most vector applications include features that will enable you to optimize or simplify artwork before importing it to Flash.

There are also a number of ways that you can simplify artwork after it has been imported to Flash. We have discussed many of these Flash features in previous chapters, but we will briefly summarize them here.

Converting text to outlines

Another aspect of vector graphics that you need to keep in mind — especially when working with other designers — is font linking and embedding. With most vector file formats, such as Illustrator, FreeHand, or EPS, you can link to fonts that are located on your system. However, if you give those files to someone who doesn't have those fonts installed, then he won't be able to see or use the fonts. Some formats enable you to embed fonts into the document file, which circumvents this problem. However, whether the fonts are linked or embedded, you may be unnecessarily bloating the size of the vector graphic.

You can break apart imported text in Flash by using the Modify

Figure 16.24. Compare the original imported vector artwork of the light bulb (left) with the stylized version drawn in Flash (right).

You can also convert any text into outlines (or paths) in most drawing or illustration programs (see Figure 16.25). In FreeHand, select the text as a text block (with the Selection tool, not the Text tool) and choose Text

Figure 16.25. Make sure that you have finished editing your text before converting it into outlines. The text at the top can be edited, whereas the text at the bottom can only be modified as individual shapes.

If you have a lot of body text in the graphic, you may want to copy the text directly into a Flash text box and use a _sans, _serif, or other device font. These fonts do not require additional file information (as embedded fonts do) when used in a Flash movie.

Optimizing curves

You can also reduce the complexity of paths within Flash by using the Modify

Figure 16.26. A complex vector graphic simplified with maximum smoothing

Note

For a more detailed description of the Optimize curves options, refer to Chapter 5"Drawing in Flash."

Runtime Bitmap caching

Flash 8 introduced bitmap caching, a feature designed to improve rendering performance of animation that uses complex vector graphics. This option appears as a small check box in the Property inspector when a Movie Clip instance is selected in the Flash authoring environment (as shown in Figure 16.27). If bitmap caching is enabled, Flash will convert the vector graphic into a bitmap image at run time. The advantage of using this technique is only evident as you start to build more complex files that require Flash to redraw elements in an animation. If your vector artwork is optimized and uses very few points, converting from vector to bitmap will not offer any performance improvements. However, if you have created a highly detailed vector background that you will use to layer with other animated elements, Flash will be able to dedicate more resources to rendering smooth animation if the background is converted into a cached bitmap. Because the bitmap graphic is only rendered once, the speed and smoothness of your animation will not be hindered by Flash having to constantly redraw the points and lines that make up your vector background. These same principles apply if you are using a very complex vector graphic that is motionless but modified with Filter effects. Bitmap caching makes it possible for Flash to convert the complex vectors into a simpler pixel surface while it dedicates resources to rendering the Filter transformations.

Figure 16.27. Bitmap caching can be enabled in the Property inspector when a Movie Clip or Button symbol is selected in the authoring environment.

There are a few limitations to bitmap caching that you should keep in mind:

• Bitmap caching uses significantly more memory than rendering vectors. Use bitmap caching only when it will noticeably improve the performance (smoothness) of your animation.

• If your animation requires a zoom on vector content, it will look pixilated if the cache as bitmap option is enabled for that item.

• Bitmap caching will fail if it is applied to a symbol that is larger than 2,880 pixels tall or wide.

• If the graphic with bitmap caching enabled is nested inside of another symbol that is rotated or scrolled, bitmap caching will be ignored for the nested graphic.

• If the Flash Player runs out of memory (producing an error), bitmap caching will be canceled.

Note

Bitmap caching can also improve performance on applications with scrolling text fields or overlapping windows. For an example of using bitmap caching with a scrollable text field, refer to Chapter 30, "Applying HTML and Text Field Formatting."

Note

We'd like to know what you think about this chapter. Visit www.flashsupport.com/feedback to send us your comments.