Graphics in Flash
Importing Vectors and Bitmaps into Flash
Having created the color swatches to be used in the project, the next step is to assemble the assets. In this case, the assets are the images used in the slide show and the logo. There are two good habits to develop when working with media in Flash:
- Import everything into the library. Although you can import directly to the Stage, anything imported to the Stage is also placed in the library.
- Keep similar media together in folders in the library.
The logo is the first piece of artwork t placed in Flash. It is an Illustrator CS 2 image.
The file you import in this exercise should be opened in Illustrator CS 2. If you don’t have Illustrator CS2 or if you have an earlier version of Illustrator or Freehand, use the TOTW.eps file found in the Lesson 3 Exercise folder. If you don’t have a vector-editing application, we have included a file, TOTW.png, which can be used instead of the vector graphic.
- Open the TOTW.ai file found in the Lesson 3 Exercise folder in Illustrator CS 2.
When the document opens, choose Select > All or press the Ctrl+A ( PC) or Cmd+A (Mac) keys.
With the objects on the page selected, you have two methods of quickly getting the file into your Flash
document. The first is to copy the selection using Edit > Copy. Open the Flash document, create a new Graphic
symbol named Logo, and select Edit > Paste when the Symbol editor opens.
The second method is to create a new graphic symbol named Logo in the Flash document and then drag and drop the
selection from Illustrator into the Symbol editor.
Quit Illustrator and return to your Flash document.
The “official” method of importing an Illustrator or Freehand document into Flash is to select File > Import > Import to Library and then make a number of choices in the resulting Import Options dialog box. The problem with this method is the Illustrator file must be saved as an Illustrator 10 or lower for the import to work properly. Full details regarding using the Import dialog box for Illustrator files can be found by choosing Window > Help and entering “illustrator” into the search criteria.
- Open the Library panel by choosing Ctrl+L (PC) or Cmd+L (Mac) and click the New Folder icon at the bottom of the Library panel.
A folder named “untitled folder 1” appears in the library. Select the folder name and enter Logos. Press Enter
(PC) or Return (Mac), and a named folder will appear in the library. Drag the Logo symbol into this new folder.
Double-clicking a folder opens the folder or closes it.
Create two more folders named Images and Button_Images. If they appear in the Logos folder, drag them out of the
folder.
- Select File > Import > Import to Library to open the Import to Library dialog box. Navigate to the Images folder found in your Lesson 3 Exercise folder.
There are five images—Image01.jpg to Image05.jpg—that will
be imported. Though you can import each one individually, there is a way to bring them all into the library at
once. Press Shift and click all five images. With the images selected, click the Open button or press the Enter
(PC) or Return (Mac) key. The dialog box will close, and all five images will appear in the library.
With the Library panel open, select the five images you just imported and drag them into the Images folder.
The first thing you should notice is that the icon for an image, which looks like a tree, is different from that used for a graphic symbol in the library. Although you can place bitmaps on the Stage, there really isn’t much you can do with them. This is why Flash artists inevitably place bitmaps into Graphic or Movie Clip symbols.
- Check the optimization settings for each of the images in the Images folder.
Flash allows you to optimize the images—a bit—when they are imported into the library. Select Image01 and click the Properties icon at the bottom of the library panel to open the Bitmap Properties dialog box.
- Click the Test button to see how much of a file size reduction there will be compared with the original bitmap.
You can also choose to apply either Photo (JPG) or Lossless (PNG/GIF) compression to the image by selecting a method in the Compression drop-down list. If you are already using JPG images, select the Use Imported JPEG data radio button to use the compression in the image in Flash as well. Use the Lossless option for images using fewer colors and simple shapes such as logos or illustrations.
Click the Allow Smoothing check box to apply anti-aliasing to smooth the edges of the bitmap.
Tip: The JPEG compression amount is set when the SWF file is created, not in the Bitmap Properties dialog box.
Select File > Publish Settings to open the Publish Settings dialog box. Click the Flash tab and use the JPEG
Quality slider to set the compression amount. A value of 100% is no compression and a value of 0 is full
compression. When working with JPG images, a setting between 80% and 100% is best.
You can import Photoshop (.psd) documents into Flash. If you right-click or Control-click (Mac) the image in the library, you can choose to edit the file in Photoshop. Any changes made in Photoshop are automatically updated in Flash when you save the PSD file.
Import the images in the ButtonImages folder in the Lesson 3 exercise folder into the Flash library.
When the images appear in the library, move them to the Button_Images folder in the library.
- Save the Flash file.
This work is licensed under a Creative Commons License.
