Using Flash for the first time – Part 1: Building a banner
Table of Contents
Importing graphics into a document
When you work with Flash, you'll often import assets into a document. Perhaps you have a company logo or graphics that a designer has provided for your work. You can import a variety of assets into Flash, including sound, video, bitmap images, and other graphic formats (such as PNG, JPEG, AI, and PSD).
Imported graphics, whether you import them to the Stage or to the library, are stored in the document's library. The library stores both the assets that you import into the document and symbols that you create within Flash. A symbol is a vector graphic, button, font, component, or movie clip that you create once and can reuse multiple times as instances. For more information on symbols and instances in Flash, see the video tutorial called Creating and using symbols and instances in the Adobe CS3 Video Workshop.
To see how easy it is to import images into Flash, we’ve provided an image of a garden-variety gnome in the tutorial source files. Before you proceed, make sure that you download the sample files at the beginning of this tutorial (if you haven't done so already) and extract the images to the same folder as your banner.fla document.
In the following exercise, you will select the frame into which you want to import the asset on the Timeline. Then you can import the image onto that frame, which appears on the Stage.
- Select frame 1 on the Timeline, and then choose File> Import > Import To Stage to import an image into the current document on the selected frame. You'll see the Import dialog box (see Figure 5), which enables you to browse to the file you want to import.
Figure 5: Browse to the folder on your hard disk that contains an Adobe Photoshop® CS3 file called gnome.psd.
- Navigate to the folder where you extracted the support files, select the gnome.psd file, and click Open (Windows) or Import (Macintosh).
The image imports onto the Stage on the frame that you selected, and is also stored in the document's library. Note that you do not need Photoshop to import this file.
Note: You can drag assets from the library onto the Stage several times if you want to see several instances of the artwork. Your file size doesn't increase if you use several instances on the Stage. The SWF file only stores the information of the original symbol or asset from the library and treats each instance like a duplicate.
- Choose Window > Library to open the Library panel.
You'll see the image you just imported, gnome.psd, in the document's library.
- Click the Selection tool and select the instance on the Stage.
If you look at the Property inspector you'll notice that you can modify the graphic’s width and height, as well as the image's X and Y position (also called coordinates) on the Stage. When you select an object on the Stage, you can see and modify the current coordinates in the Property inspector (see Figure 6).
Figure 6: The X and Y coordinates match the registration point, which is the upper left corner of this random movie clip symbol.
- With the graphic instance (of the gnome) still selected, type 0 into the X text box and type 0 into the Y text box if they aren’t already set to 0, as shown in Figure 7.
Figure 7: Set the X and Y coordinates using the Property inspector. Set the X and Y values to 0..
Setting new coordinates moves the upper left corner of the image to the upper left corner of the Stage. You can drag the bitmap image around the Stage using the Selection tool instead of changing coordinates in the Property inspector. You should use the Property inspector when you need to set a specific position for an object, as you did in this step.
Remember to save the document before you proceed to the next exercise.
Note: You can also import sound files into your FLA documents. This isn't covered in this tutorial, but you can find out more information if you do a search on “importing sound”" in the Help panel (F1).
