In addition to the vector drawing tools that allow you to create graphics and animation in Flash, you can also import artwork in other formats to use in your Flash movie. Flash has full native support for Adobe Photoshop, Adobe Illustrator, Freehand, BMP, JPEG, GIF, and PNG files, the standard bitmapped graphics. However, you can also import EPS and PDF by using Adobe Illustrator. This allows you to import a variety of different graphic formats into your Flash production process.
Flash drawing tools create and edit vector objects, not pixels, so preparation is necessary for bitmapped graphics in a paint application outside of Flash, such as Adobe Photoshop. Fortunately, Flash allows you to convert a bitmapped graphic into a vector with the Trace Bitmap function. You can also use a bitmap as a fill for vector objects. An important thing to remember is that any bitmap used in your project can add considerable size to your Flash movie. Flash includes several procedures for optimizing these bitmaps on export, through compression settings applied globally, or specifically to each image.
Vector graphics are comprised of anchor points connected to each other by lines and curves, called vectors. These anchor points and vectors describe the contour and surface of the graphic with some included information about color, alpha, and line width. Because they are general descriptions of the coordinates of a shape, they are resolution-independent; that is they can be resized without any loss to the quality of the graphic. Resolution represents the amount of information contained within a linear inch represented by a grid.
Bitmapped graphics are made up of small, colored squares, called pixels that form a grid. Each pixel is given a specific color and a grid of these pixels forms a mosaic, which is your image. Because of this, bitmaps are dependent on resolution (the number of pixels in the grid). Resizing up or down forces pixels to be created or removed to accommodate the new grid size, which can result in a loss of image quality. In Flash, bitmaps look much better on the Stage when severely enlarged or reduced. The smoothing process makes the appearance of these bitmaps in the Flash authoring tool and in Flash Player now consistent.
Both vector and bitmap graphics have their strengths and weaknesses. Vector shapes are simple and graphic in nature. They are a good choice for creating high-contrast, geometric art or art with limited color shifts. If you need to implement artwork with a richer surface texture, color depth, and shading, like those qualities found in a photograph, a bitmap better suits this purpose. The strength of Flash as a content creator is that you can combine the strengths of both vector art and bitmapped art.
The following files can be imported into Flash:
Flash allows you to set preferences to customize the way you import Adobe Illustrator (.ai) files. You can specify general options to specify whether to use the import dialog box, import objects outside the Illustrator artboard or import hidden layers. After you set the general options, you can set options for specific element types you want to import, such as text, paths, images, groups, and layers. The options you set are applied to all Illustrator files when you import them into Flash. However, you can change options in the Illustrator import dialog box.
Click the Flash (Mac) or Edit (Win) menu, and then click Preferences.
Click the AI File Importer category.
Select from the following options:
• General.
• Show Import Dialog Box. Select to show AI File Importer dialog box.
• Excludes Objects Outside Art Board. Select to exclude object outside the artboard or crop area.
• Import Hidden Layers. Select to import hidden layers.
• Import Text As.
• Editable Text. Imports Illustrator text as editable text in Flash.
• Vector Outlines. Converts text to vector paths; use to preserve appearance.
• Bitmaps. Converts text into a bitmap; not editable.
• Create Movie Clips. Imports text into a movie clip; use to maintain blends, AI effects, and transparency.
• Editable Paths. Imports Illustrator path as editable in Flash.
• Bitmaps. Converts the path into a bitmap; use to preserve appearance of path; not editable.
• Create Movie Clips. Imports path into a movie clip symbol in Flash.
• Images.
• Flatten Bitmaps To Maintain Appearance. Converts an image into a bitmap; not editable.
• Create Movie Clips. Imports an image into a movie clip symbol in Flash.
• Groups.
• Import As Bitmaps. Converts all objects in the group into a bitmap; not editable.
• Create Movie Clips. Imports all objects into a movie clip symbol in Flash.
• Layers.
• Import As Bitmaps. Converts the layer into a bitmap; not editable.
• Create Movie Clips. Imports the layer into a movie clip symbol in Flash.
• Movie Clip Registration. Select the global registration point for movies and all other object types.
Click OK.
Flash allows you to set preferences to customize the way you import Adobe Photoshop (.psd) files. You can set options for specific element layer types you want to import, such as images, text, paths, shapes, and groups. You can also set compression and quality publishing options for the imported Photoshop files. The options you set are applied to all Photoshop files when you import them into Flash. However, you can change options in the Photoshop import dialog box.
Click the Flash (Mac) or Edit (Win) menu, and then click Preferences.
Click the PSD File Importer category.
Select from the following options:
• Import Image Layers As.
• Bitmap Images With Editable Layer Styles. Create a movie clip with a bitmap clipped inside.
• Flatten Bitmap Images. Convert an image into a bitmap; not editable.
• Create Movie Clips. Imports an image into a movie clip symbol in Flash.
• Import Text Layers As.
• Editable Text. Imports Photoshop text from the text layer as editable text in Flash.
• Vector Outlines. Converts text to vector paths; the object is also converted to a movie clip.
• Flattened Bitmap Images. Converts text into a bitmap; not editable.
• Create Movie Clips. Imports the text layer into a movie clip symbol.
• Import Shape Layers As.
• Editable Paths And Layer Styles. Creates an editable vector shape with a bitmap clipped inside the vector shape.
• Flatten Bitmap Images. Converts an image into a bitmap; not editable.
• Create Movie Clips. Imports an image into a movie clip symbol in Flash.
• Layer Groups. Select the Create Move Clips check box to convert all groups into a movie clip in Flash.
• Merged Bitmaps. Select the Create Movie Clips check box to convert the shape layers into a movie clip in Flash. This option is disabled if the Maintain Editable Paths And Layers check box is selected.
• Movie Clip Registration. Select the global registration point for movies and all other object types.
• Publish Settings.
• Compression. Select the Lossy (JPEG) or Lossless (PNG/GIF) compression mode you want.
• Quality. For the Lossy compression, select the Use Publish Setting or Custom option; select the quality 1 to 100; the higher the setting, the greater quality, yet the larger the file size.
Click OK.
Flash includes support for importing Adobe Photoshop (.psd) files and Adobe Illustrator files created in versions 6 through 10. When these files are imported, there are a number of options you can choose from. Before you import Photoshop and Illustrator files, you need to set import options in the Preferences dialog box. For Illustrator files, you can also specify whether you want to show an import dialog box where you can set import settings for specific parts of an Illustrator file. The options you set are applied to all Illustrator and Photoshop files when you import them into Flash. However, you can change options in the import dialog box. Some options in the Import dialog box are context-sensitive; that is, they only appear if they are relevant to the imported file. The import options are similar between Illustrator and Photoshop; when they differ, the options are noted.
Click the File menu, point to Import, and then click Import To Stage or Import To Library.
a. Open and select the library where you want to import files.
Click the Show popup (Mac) or Files Of Type (Win), and then select Photoshop, Adobe Illustrator or All Formats.
Navigate to the drive or folder where the file is located.
Select the Photoshop or Illustrator file you want to import.
Click Import (Mac) or Open (Win).
Flash inserts the image file or displays an import dialog box for files, where you can specify options for the specific files. If the Import dialog box opens, continue.
You can import an Illustrator EPS or PDF using Illustrator CS4. Open the file in Adobe Illustrator CS4, save it as a CS4-compatible AI file, and then import into Flash as an AI file.
To generate a list of items from Illustrator now compatible with Flash, click Incompatibility Report.
Select the check boxes with the elements you want to import, select each element and set the related options you want; you may need to ungroup elements.
Click the Convert Layers To list arrow, and then click.
• Flash Layers. Click this option to convert the layers in the imported file into corresponding layers in the Flash Timeline.
• Keyframes. Click this option to convert the layers in the imported file into consecutive keyframes.
• Single Flash Layer. Click this option to flatten the layers in the imported file onto a single layer in Flash.
Select from the following options:
• Place At Original Position. Select to maintain the same positions from Illustrator or Photoshop to Flash.
• Set Stage Size To Same Size As. Select to set the Flash Stage to the same size as the Illustrator artboard or Photoshop canvas.
• Import As Unused Symbols (AI). Select to import AI symbols not used as instances as unused symbols in Flash.
• Import As A Single Bitmap Image (AI). Select to convert into a bitmap.
Specify the compression and quality settings you want (PSD).
Click OK.
You can import bitmaps of several file types directly into Flash to use in your Flash movie. It is important to remember that even though you can edit and resize bitmaps in Flash, the original bitmap will always be embedded in the exported Flash file. If file size is an issue, it is best to bring your bitmapped art in at the size you want to export it. For example, if your image is going to be 160 pixels by 160 pixels in the final movie, it is best to import it at this size and not resize it up or down in Flash. You will end up with higher-quality images and smaller files if you do this. You can import files using the Import To Stage or Import To Library methods. The Import To Stage method stores the bitmap in the Library and places a copy on the Stage, while the Import To Library method stores the bitmap in the Library and doesn’t place a copy on the Stage.
Click the File menu, point to Import, and then click Import To Stage.
Click the Show popup (Mac) or Files Of Types list arrow (Win), and then select the format of the file you want to import.
Navigate to the drive or folder where the file is located.
Select the file you want to import.
Click Import (Mac) or Open (Win).
You may not be able to see the images you’ve imported to the Stage at certain magnification levels. Flash aligns the top left-hand corner of the image at the 0,0 coordinate. If you are zoomed in, the image may have appeared outside the viewable area. Use the Hand tool to navigate around, zoom out, or press Shift+ +W (Mac) or Ctrl+Shift+W (Win) to toggle the Work Area off. This sets the zoom level to 100% and hides the Work Area.
Click the File menu, point to Import, and then click Import To Library.
Click the Show popup (Mac) or Files Of Types list arrow (Win), and then select the format of the file you want to import.
Navigate to the drive or folder where the file is located.
Select the file you want to import.
Click Import To Library (Mac) or Open (Win).
You can quickly swap bitmaps. You can exchange an image on the Stage with another one from the Library. To swap one bitmap with another on the Stage, select the bitmap image on the Stage, open the Property Inspector, click Swap, select the image you want from the list of currently stored images in your document library, and then click OK.
You can import Adobe Fireworks PNG files into Flash as editable objects or bitmap images. When you import a PNG file as a bitmap image, the file, including any vector data, is flattened, or rasterized, and converted to a bitmap. When you import a PNG file as an editable image, the file retains any vector data, bitmaps, text (with default anti-alias settings), filters (called effects in Fireworks) and guides. In Flash, you can retain Fireworks filters, blend modes, and text, and continue to modify them using Flash. When you import Fireworks files into Flash, PNG file graphic properties remain intact. You can also select multiple PNG files to import in a batch. When you batch PNG files, you select import settings one time. When you import a PNG as a flattened image, you can also edit the image in Fireworks directly from Flash. Flash updates the image with your changes from Fireworks creating easy round-trip edits.
Click the File menu, point to Import, and then click Import To Stage or Import To Library.
Click the Show popup (Mac) or Files Of Types list arrow (Win), and then click PNG File or All Formats.
Navigate to the Fireworks PNG files you want to import, and then select one or more.
Click Import or Import To Library (Mac) or Open (Win).
To flatten the PNG file into a bitmap, select the Import as a Single Flattened Bitmap check box.
To use round-trip editing, you need to flatten the PNG file into a bitmap. You cannot edit bitmaps from Fireworks PNG files imported as editable objects.
Click the Import popup, and then click Page or other available option.
Click the Into popup, and then click Current Frame As Movie Clip, New Layer or other available options.
For objects and text, select one of the following:
• Import As Bitmaps To Maintain Appearance. Retains Fireworks fills, strokes, and effects in Flash.
• Keep All Paths Editable. Retains vector properties; however, some Fireworks fills, strokes, and effects are lost; places file and related files in a Fireworks Objects folder in the Library.
Click OK.
To edit a flattened PNG bitmap, right-click (Win) or control-click (Mac) the PNG/bitmap’s icon in the Library, and then click Edit with and select an image editing program or click Edit with Fireworks.
• In the Edit Image dialog box, specify whether the PNG file or the bitmap file is to be opened.
• In Fireworks, edit the image, click Done or click the File menu, and then click Update.
You can optimize PNG images in Fireworks for Flash. Images can increase the size of a movie so you want to optimize images to be as small as possible while still maintaining high quality. You can optimize bitmap and PNG images in Fireworks using round-trip editing from Flash. In Fireworks, specify options on the Optimize panel to optimize and compress images.
Flash allows you to import multiple files simultaneously to save time. This is useful if you have many files to import. You can select multiple, non-sequential files in the Import dialog box. Choose to import to the Library or to the Stage directly. When you import to the Stage, the file is stored in the Library and a copy is placed on the Stage so you can begin editing it immediately. If you attempt to import a series of files that are numbered sequentially, Flash detects this and produces a dialog box to handle this. When sequential images are imported, they will appear in separate frames by order of the number in their file name. This is extremely useful for image sequences where a series of images forms an animation.
Click the File menu, point to Import, and then click Import To Stage or Import To Library.
Click the Show popup (Mac) or Files Of Types list arrow (Win), and then select the format of the file you want to import.
Navigate to the drive or folder where the file is located.
Select the first file you want to import.
To import multiple files, hold down the (Mac) or Ctrl (Win) key and click additional files to select them.
Click Import (Mac) or Open (Win).
For a sequence of files, Flash detects that this image is part of a sequence and asks whether you want to import all of them at once.
Click Yes.
The numbered files are imported and placed on separate sequential keyframes on the selected layer in the Timeline.
You can paste a bitmap image from other image editing programs, such as Adobe Photoshop or Adobe Fireworks. Simply use the standard copying procedure in the program of your choice to place the bitmap into the clipboard, which is where the operating system dynamically stores information you copy, and then paste it into Flash directly on the Stage. Copying images from other programs works well for bitmaps. However, results are unpredictable when pasting vector graphics from other programs. Often they become corrupted when they are copied to the clipboard, depending upon the origin program or the operating system. It is best to use the Import command to import vector graphics into Flash.
You can edit a bitmap in its native program or some other image editing tool. Once it is re-saved to the hard drive, you can update the bitmap in Flash. You can also import another image to replace the bitmap in the Library. In either case, every copy of the bitmap used in the Flash movie (including bitmap fills) will update with these changes. This is a convenient way to make global changes to bitmap art included in your project.
Import a bitmap into Flash.
Edit this bitmap in an outside image-editing program of your choice (such as Adobe Photoshop), and then save to the hard drive.
In Flash, open the Library panel, and then select the bitmap from the item list.
Click the Properties icon in the bottom of the panel or double-click the bitmap file in the list.
Click Update.
Click OK.
The bitmap updates to the new version saved to your drive.
Flash preserves the path when you import a bitmap. When you import a bitmap into Flash, the path to that image is preserved in the Bitmap Properties. If you have moved the image to another directory on your hard drive and you want to update the file in the Library with the new changes, navigate to it by using the Import button in the Bitmap Properties window.
Open the Library panel, and then select the bitmap from the item list.
Click the Properties icon in the bottom of the panel or double-click the bitmap file in the list.
Click Import.
Navigate to the replacement file on your hard drive.
Select the replacement file.
Click Import (Mac) or Open (Win).
Change the name and any other options you want.
Click OK.
When you export a Flash movie, you can decide how much color information to include in each exported bitmap. This is called compression. The more compression you apply, the less color information is included and the lower the size and quality of the image. Lossy compression reduces the file size by removing color information, while lossless compression reduces the file size (not as much) without removing information. You can choose to set a global compression for all bitmap files used in a Flash movie or you can set a separate compression for each image. As with all image compression, file size needs to be weighed against image quality. It is always best to experiment until you get the results you want.
Open the Library panel.
Select the bitmap from the Library item list in which you want to set compression.
Click the Properties icon in the bottom of the panel or double-click the bitmap file in the list.
Select the Allow Smoothing check box to anti-alias the edges of the image, making it appear smoother.
Click the Compression popup, and then select from the following options:
• Lossless (PNG/GIF). Compresses the image without losing any information; remains in its highest quality.
• Photo (JPEG). You can choose to use the compression information contained by selecting the Use Document Default Quality check box. By deselecting this feature you can set the level of JPEG compression applied to the bitmap. The values are 1-100. The higher the number, the less compression applied, producing a higher quality image.
Click OK.
By default, when you import a bitmap into Flash and drag it to the Stage, you are limited in how you can edit it. Break Apart the image to remove the image from its bounding box and enable you to cut into the image, remove parts, select regions, and use it as a fill pattern. The bitmap is still linked to its parent in the Library. Any edit made to a bitmap only affects the copy on the Stage. For example, if you break an image and then edit it down to a tiny portion, in the exported movie the image appears exactly as you edited it. However, it will still have the same file size of the image you imported (less any compression you may have applied). It is always best to do your most severe editing in a bitmap or paint program outside of Flash.
Drag a copy of a bitmap to the Stage from the Library panel; make sure the bitmap is selected on the Stage.
Click the Modify menu, and then click Break Apart.
Click the Eyedropper tool on the Tools panel.
Position the eyedropper over the image, and then click to select it.
The bitmap is a selected fill that you can use to fill vector shapes.
Click the Rectangle or Oval tool on the Tools panel.
Click and drag on the Stage to create a new shape with the bitmap fill.
Flash defaults to tiling a bitmap fill. Tiling is simply when an image is repeated in a grid until it fills the entire object. If you have applied a bitmap fill to a vector object, you can continue to edit its characteristics and placement. You can resize, skew, or rotate the fill or change its center point within the shape with the Gradient Transform tool. This tool allows you to dynamically make these changes when it is applied to any editable shape. As with most of the assets Flash stores in the Library, any change you make to the application of the fill does not affect the master object stored in the Library. In this way, bitmaps like video clips and sounds, behave similarly to symbols in that their master object is not affected. Although when you use a bitmap in your movie Flash refers to this as a copy, not an instance, because there are no built-in controls for bitmaps.
Create a shape on the Stage with a bitmap fill.
Click the Gradient Transform tool on the Tools panel.
The pointer changes to an arrow with a small gradient box in the right-hand corner.
Click the shape to select it.
A bounding box appears on the tile.
Position the pointer over the white circle in the center of the bounding box.
The cursor becomes a Move icon.
Click and drag the center point to a new position.
The tile accommodates to the new position of the center point.
Create a shape on the Stage with a bitmap fill.
Click the Gradient Transform tool on the Tools panel.
The pointer changes to an arrow with a small gradient box in the right-hand corner.
Position the pointer over the shape, and then select it.
A bounding box appears on the tile.
Do one of the following:
• Bottom-left-corner square. Drag this to resize the fill proportionally.
• Left-center square. Drag this to resize width of fill.
• Bottom-center square. Drag this to resize height of fill.
• Top-right-corner circle. Drag this to rotate fill.
• Top-center circle. Drag this to skew fill horizontally.
• Right-center circle. Drag this to skew fill vertically.
When you use Break Apart on a bitmap, the bitmap becomes a fill and its content is editable. You can select specific regions of it with any of Flash’s selection tools and procedures. If you want to remove parts of the bitmap or replace them with different fills you can select those parts with the Magic Wand tool. The Magic Wand tool selects regions of similar colors. Clicking on other parts adds those parts to the selection. The color threshold (or sensitivity) for this tool can be set in the Magic Wand options popup menu.
Select a bitmap on the Stage.
Click the Modify menu, and then click Break Apart.
Click on the Stage to deselect the broken bitmap.
Click the Lasso tool on the Tools panel.
Click the Magic Wand Mode button in the Options section of the Tools panel.
The pointer becomes a small magic wand.
Position the pointer over regions of the image you want to select.
The color region you clicked on is selected. Subsequent clicks on other regions are added to the selection.
Click the Lasso tool on the Tools panel.
Click the Magic Wand Properties button on the Tools panel.
Enter a color threshold between 0 and 200.
This number defines how close adjacent colors have to be to the selected color before they are added to the selection. A higher number selects a broader number of colors.
Click the Smoothing popup, and then select from the following options: Pixels, Rough, Normal, and Smooth.
This sets the smoothness of the edges of the selection.
Click OK.
Flash provides a procedure to convert bitmaps into vector art. When Trace Bitmap is used, Flash interprets the pixel information in the bitmap and converts it into vector shapes. The results can be unpredictable in quality and have unwieldy file sizes if the bitmaps are very complex. However, there are several parameters in the Trace Bitmap dialog box that can be modified to strike a balance between file size and quality.
Drag a copy of a bitmap to the Stage from the Library panel; make sure the bitmap is selected on the Stage.
Click the Modify menu, point to Bitmap, and then click Trace Bitmap.
Specify values and options to determine how close the vector shape resembles the bitmap:
• Color Threshold. If the difference in the RGB color value for two pixels is less than the color threshold, the pixel colors are considered the same. Enter a value between 1 and 500. The higher the value, the lower the number of colors.
• Minimum Area. Determines how many neighboring pixels to include in the threshold calculation. Enter a pixel value between 1 and 1000.
• Curve Fit. Determines how smoothly Flash creates vector outlines.
• Corner Threshold. Controls whether to preserve sharp edges or create more smooth contours.
Click OK.