In computer-based design, you need to be aware of two graphic types: bitmap and vector. The drawing environment in Flash natively creates vector graphics, but you can use both bitmap and vector graphics in a Flash movie.

Vector graphics refer to scalable artwork consisting of points, paths, and fills that the computer creates based on mathematical formulas. Though you may see a plain red rectangle, Flash sees an equation that creates the points, paths, and fill color necessary to create that rectangle. Changing the rectangle's size, position, or color is a matter of simply recalculating the formula and redrawing the shape. As a result, vector graphics maintain crisp quality even when scaled far beyond their original size. Flash (like its cousin Illustrator CS5) can natively create detailed vector illustrations and typography that you can easily scale or modify.

Bitmap graphics are created much like the picture on your TV set. If you've ever looked closely at a television screen, you've seen that the picture is created from lots of multicolored, tightly arranged dots. The same is true of bitmap graphics, which are created from many pixels of varying colors on your computer screen. The detail of the image can vary based on how many pixels, or dots, are used per inch to create the image. This amount is referred to as dots per inch, or dpi. Because of the immense range of colors and detail that a bitmap image can re-create, it's the format of choice for digital photographs and photo art. Flash doesn't natively create bitmap graphics but easily imports a variety of popular image formats and natively supports Photoshop (.psd) files.

Figure 5-1. A star created with vector graphics (left) and the same star as a bitmap (right).

Your choice of file formats is based on which applications you commonly work with. Flash supports many popular file formats and industry standard Photoshop and Illustrator file formats, giving you lots of flexibility. Flash doesn't generate bitmap artwork, though, so you may ask yourself which format you should use to save photos, graphics, and type created in other applications before you import them into Flash.

Flash supports and imports a number of file formats, including:

Vector graphics, such as illustrations and typography, can be created in applications such as Adobe Illustrator CS5. Artwork that contains layers should be saved natively in Illustrator (.ai) format because Flash can import and re-create those layers exactly as they were in the original document without a loss of quality. You work with the Adobe Illustrator Import panel to view and distribute imported layers in the "Importing Photoshop and Illustrator Files" section, later in this chapter.

Bitmap graphics, such as photos, can be saved and imported in a variety of formats. If you're working with a layered Photoshop document, you can import the .psd document directly into Flash by using the Photoshop Import panel. As with the Illustrator Import panel, you can view and choose how to distribute layers into Flash. Layer effects, such as drop shadows, are maintained and, where possible, converted into their Flash equivalents.

Other popular formats include JPEG, GIF, and PNG:

Figure 5-2. JPEG files have the color depth necessary to reproduce detailed photos.

Figure 5-3. GIFs are useful for logos and type.

Ultimately, your choice of format depends on which type of graphics you're working with and how they work in context with the rest of your Flash movie.

When you need to make use of a photo or graphic file, such as JPEG, GIF, or PNG, import it into Flash by choosing File

Imported bitmaps are added to your library as assets. Assets aren't to be mistaken for symbols, which you can duplicate and manage from the library. Assets are simply non-Flash items that you import, store, and use throughout your movie. Although bitmap assets can be converted to symbols, they're not automatically converted on import; you still need to add them as symbols (see Chapter 3 of this minibook).

To import a bitmap image, follow these steps:

You can jump directly into Adobe Photoshop CS5 to edit any bitmap on the stage or in the library. In addition, changes you perform and save automatically update the bitmap back in your Flash CS5 project.

To edit a bitmap in Adobe Photoshop CS5, follow these steps:

When a bitmap image is on the stage or in the library, it can be converted to a symbol just like any other graphic on the stage. The process is the same, and the image inherits the same abilities that graphic symbols do, including tween ability, tint, transparency, and management from a master symbol in the library.

Follow these steps to convert a bitmap image to a symbol:

Modifying tint and transparency

After you convert a bitmap image to a symbol, you can apply the same transparency and color effects available to graphic symbols. To create these effects, you use the Color drop-down list on the Property inspector, so make sure that the Property inspector is visible (choose Window

Follow these steps to apply a color tint:

1. Drag a symbol from the Library panel to the stage that uses an imported image.

2. Locate the Color Effect section of the Property inspector on the right; from the Style drop-down list, select Tint.

   A percentage slider and color swatch appear.

3. Click the swatch to choose a color from the Swatches panel and then use the percentage slider to adjust the amount of color that's applied (see Figure 5-6).

   

   Figure 5-6. Applying a 50 percent color tint creates an interesting color overlay effect.

   Note: Flash remembers color settings, such as Tint and Alpha percentages between uses (refer to Figure 5-6). If you set an object to 50 percent alpha, the next time you select Alpha for a symbol, Flash automatically applies the same 50 percent setting again (which you can easily change with the slider).

Applying motion tweens

Any bitmap that's been converted to a symbol can have motion tweens applied in exactly the same way as you would with any other symbol.

When you're working with symbols created from images, you open up creative options, such as cinematic fades, moving slide shows, and unique presentation ideas.

To create a motion tween with a bitmap image, follow these steps:

1. Drag an instance of a bitmap-based symbol to the stage from the Library panel on a new, empty layer. Position the symbol on the one side of the stage.

   For this example, we placed a symbol on the left side of the stage. The instance should be on Frame 1 of the new layer.

2. Right-click (Windows) or Control-click (Mac) the first keyframe of the new layer and select Create Motion Tween from the contextual menu that appears.

   The playhead advances to the end of a new tween span. (At the default frame rate, it's Frame 24.)

3. Position the symbol on the other side of the stage. Select the symbol once more and drag the playhead back to the beginning of the tween span at Frame 1.

   We moved the symbol to the right side of the stage.

4. Using the Selection tool, click the symbol once to select it.

5. Locate the Style drop-down list in the Color Effect section on the Property inspector, choose Alpha, and set the percentage to 0.

   The symbol is set to full transparency and disappears.

6. To make sure the symbol returns to full opacity later, drag the playhead back to Frame 24 and use the Alpha slider in the Property inspector to return the symbol's opacity to 100%.

7. Press Enter or Return to play the animation.

   The image (symbol) appears to slide and fade in from the left side of the stage, as shown in Onion Skin view in Figure 5-7.

Figure 5-7. The image fades and flies in from the left.

As an alternative to solid colors or gradients, bitmap images can be used as fills for shapes, illustrations, and even type. Bitmap fills can create cool effects and let you add interesting photographic textures to enhance your artwork.

You can create bitmap fills from existing bitmaps that have already been imported into your library, or you can use the Color panel to import a bitmap whenever you need to create a new bitmap fill.

Follow these steps to create a bitmap fill:

After you apply a bitmap fill, you may want to adjust the positioning and size of the bitmap within the fill area. Use the Gradient Transform tool (located underneath the Transform tool). Gradients and bitmap fills, although quite different, both have a visible orientation point that you can adjust.

Flash offers the seamless import of Photoshop and Illustrator files with the Illustrator and Photoshop Import panels. Graphics created in these applications can be imported with ease and the highest quality possible, which is great news if Photoshop and Illustrator are already essential parts of your creative workflow.

Using the Import panels, you can view, select, and convert Photoshop layers to symbols or keyframes or distribute them to Flash layers while maintaining common layer effects, such as drop shadows and blurs. The ability to select individual layers means that you can use specific elements from .psd and .ai files without the need to bring in lots of unnecessary art from complex files.

Importing Illustrator (.ai) files

Because Illustrator and Flash both natively create vector artwork, you can import graphics created in Illustrator into Flash for placement or editing with tools, such as the Pen tool and Subselection tool.

Importing .ai files is nearly identical to importing .psd files, with a full layer view and lots of options for converting and distributing artwork and type from Illustrator layers. Before you begin, select an Illustrator file to use. The flexibility of the Illustrator Import panel can best be explored with files that make use of type and graphics.

To import an Illustrator file, follow these steps:

1. In a new Flash document, choose File

   

   The Import to Stage dialog box appears with a full view of all layers in your Illustrator document.

2. Select the check boxes for the layers you want to import into your document.

3. Highlight each layer you've chosen for import to set options for each one, as shown in Figure 5-11.

   You can import each layer and individual path as either a bitmap or an editable path. You can import groups as bitmaps or movie clips.

4. Click OK to import the artwork to the Flash stage.

   Check out the stage and the Library panel to see how your artwork was placed in Flash (see Figure 5-12).

Warning

Look for the Incompatibility Report button at the bottom of the layer view in the Import panel. This button can indicate potential problems that can prevent the artwork from importing properly into Flash. If you see the Incompatibility Report button, click it and read the warnings to address any pending issues before import.

Figure 5-11. You can bring Illustrator type paths into Flash as editable text.

Figure 5-12. A finished import, with all Illustrator layers converted to Flash layers.

A view of the Illustrator Import Options panel

The Illustrator Import Options panel gives you a detailed choice of elements to import from .ai files. You can convert grouped artwork, compound paths, and type layers to movie clips or bitmaps or keep them as editable paths or type layers.

Layer view: All layers in the .ai file appear in this panel, and you can choose which layers to import by selecting the check boxes to the left. Highlighting a layer displays its import options on the right.

Incompatibility Report button: When this button is active, potential issues in your Illustrator file may need to be resolved for a clean, successful import. Click this button and review the report to resolve any problems before completing the import.

Convert Layers to Flash Layers or Convert Layers to Keyframes: Selecting the Flash Layers option maintains the layer structure (as well as layer groups) and distributes layer contents exactly as they are in your .ai file. Selecting the Keyframes option distributes layer contents across a sequence of keyframes on the Timeline.

Place Layers at Original Position: This check box (selected by default) positions layer contents exactly as they appear in the original Illustrator file.

Set Stage to Same Size as Illustrator Canvas: Selecting this option resizes movie dimensions to match the original size of the .ai file.

Import Unused Symbols: Illustrator CS5 files can contain their own symbol libraries, which work in a similar manner to Flash symbols. Symbols that exist in an imported .ai file but that aren't being used on the canvas are added to the Flash library when you select this check box.

Note: You can choose to import an Illustrator document's entire symbol library without importing any visible artwork from its canvas.

Import As a Single Bitmap Image: Selecting this option flattens and rasterizes the entire Illustrator document and places it as a bitmap image on the stage as well as a bitmap asset in your Flash document's library.

Import as

• Bitmap Image: Selecting this option rasterizes (converts vector to bitmap) the selected artwork and imports it to the stage and library as a bitmap. Any vector artwork or type loses its editability.

• Editable Path (Individual Paths Only): Selecting this option places vector paths in Illustrator as drawing objects that you can further modify on the Flash stage.

• Editable Text (Type Layers Only): Selecting this option keeps imported text layers editable, re-creating Illustrator type paths as Flash type layers.

• Vector Outlines (Type Layers Only): This converts type to vector outlines, which will no longer be editable as a type layer in Flash.

Create Movie Clip for This Layer: Selecting this option converts the layer contents to a new movie clip symbol, which is also added to the library. You have the option of setting a registration point as well as an instance name. (See Chapter 6 of this minibook for more on instance names.) This option and Convert to Bitmap are the only available options for entire Illustrator layers and grouped artwork.

In recent versions of Adobe Creative Suite, the relationship between Illustrator and Flash has been significantly improved. Now, Illustrator symbols offer support for most Flash symbol properties, allowing you to easily develop symbol libraries in Illustrator and import them directly into Flash projects. This includes the ability to set registration points (new in CS5), 9-slice scaling options, and symbol types, all of which are carried over seamlessly into Flash.

If you're importing an Illustrator file that uses symbols on the artboard, those symbols are automatically added to your Library. However, if a document contains a symbol library but not all symbols are in use on the artboard, be sure to check the Import Unused Symbols option in the Illustrator Import Options panel so that all symbols from the document's library are added to your Flash project's library.

The best multimedia creations use not only visuals and motion but also sound and music, so your Flash movies should, too. Flash fully supports the import, placement, and control of sounds in lots of different formats, so you can easily bring in loops, sound effect files, and even music from your .mp3 collection.

You can enhance your movie with background music or narrative, and sound effects can make using buttons and menus more intuitive. Flash can stream longer sounds (such as soundtracks or long-form narration) to minimize loading time so that users get right to the good stuff.

Flash imports the following audio file formats:

Note: Additional file formats are available with the optional QuickTime plug-in installed.

Follow these steps to import a sound into your library: