Section 5.1. Importing Pixels

5.1. Importing Pixels

Although importing graphic assets is a basic task, there are a few subtleties when dealing with specific file formats and specific applications. To help you take advantage of the full range of features Flash has to offer, and to give you a complete design palette to work with, this section will briefly explain some of the ins and outs of importing pixel-based graphics.

---

Note: The graphics discussed herein are generically referred to as pixel-based or raster graphics, both as a means of categorizing topics and because that is the most common format for these types of graphics. However, you will soon see (especially when discussing Fireworks files) that some formats can contain both pixels and vectors.

---

5.1.1. A Few Words About File Formats

Many applications can create and edit pixel-based graphics. Adobe Photoshop will occasionally be referenced in this book, as it's the most common example. However, many (if not all) of the points discussed in this segment will apply to most pixel-editing programs.

While Flash supports several bitmap file formats, including platform-specific formats such as Windows BMP and Macintosh PICT, here you will learn how to use the three most commonly used formats: JPEG, GIF, and PNG. It is outside the scope of this book to go into detail about these specific formats, but here is a very brief summary of the high points for each:

---

Note: The term bitmap is often used to refer to a variety of similar, but not identical, items. The generic use of the term refers to pixel-based graphics, and a more specific usage can refer to the Windows file format BMP. Henceforth, the latter will be specified by the acronym, and "bitmap" will refer to a pixelbased graphic.

---

• JPEG is most often used for images that have continuous tones, such as photographs or gradients. JPEGs have a 24-bit color depth and can be compressed using a varying degree of quality settings. New to Flash 8, files using the progressive JPEG compression format can be imported, in addition to the more commonly used baseline JPEG format.

• GIF is usually used when an image has large areas of solid colors, or when a crisper look (possibly even at the expense of some anti-aliasing) is desired. GIFs can contain areas of 100% transparency, but not varying levels of transparency. GIFs can support up to 8 bits of color and can be compressed to varying degrees by limiting the number of colors available to an image. Figure 5-1 shows a continuous gradient, compressed in both JPEG and GIF. Note the banding in the GIF.

  Figure 5-1. The JPEG file format is best suited to continuous-tone images. Note the banding of the gradient in the GIF at right.

  

• PNG is a lossless format for high-quality images that can support up to 48-bit color and 16-bit grayscale. It is primarily used when support for alpha data is required, as varying levels of transparency are possible. Figure 5-2 shows what the same image in both GIF and PNG formats looks like on a background. The Stage color is medium gray, and the GIF and PNG files have an identical appearance: a black circle on a transparent background. When the graphics are placed on the Stage, the PNG edge between art and transparency is smooth. However, note the halo in the GIF. This is caused by the semi-transparent pixels of the anti-aliased edge of the circle. Since only 100% transparency is supported, partially transparent pixels are converted to solid pixels with partial color.

Figure 5-2. The PNG file format is optimal for varying levels of transparency. Note the halo in the GIF at right, caused by semitransparent pixels.

5.1.2. Importing Standard Formats

When importing the standard versions of these file formats, as you are likely to do most often, Flash will automatically handle the file for you and import a single bitmap image. At the outset of the process, you can decide to import directly to the Stage, or to the Library. The latter is handy when you want to import many images at the same time.

Using the File Import Import to Stage menu command, for example, will prompt you with a standard operating system dialog that will allow you to find the file you want to import. Alternately, you can paste a bitmap into Flash from the clipboard, or drag an image in from your desktop.

---

Note: When you import or drag a bitmap into Flash, the filename, path, and certain properties of the external file are maintained, allowing you to update the file from within the Flash Library. This is convenient when you need to make changes to the external file. However, when you paste in a bitmap from the clipboard, Flash has no such information to maintain. A generic name of "Bitmap," followed by a sequential integer to avoid overwriting, will be applied.

---

When you import a bitmap, whether to the Stage or the Library, a Library item is automatically created. This is because bitmaps are typically large, and Flash wants to make working with them as efficient as possible. The item it creates acts like a symbol, in that you can drag multiple instances of the bitmap to the Stage, and any permanent edits made to that image will be reflected in the instances.

It will not be a symbol in every sense of the term, however, in that you cannot apply color effects and you cannot take advantage of some of the features built into graphic, button, and movie clip symbols. To gain these benefits, simply convert the bitmap to a symbol, the way you would any other relevant asset type.

---

Warning: It's important to remember that if you create a symbol from a bitmap, the bitmap must remain in the Library. Do not delete the bitmap, thinking that it has been transformed into the symbol. Instead, think of a bitmap inside a symbol the way you'd think of a movie clip inside another movie clip. In both cases, if you delete the nested item, it will disappear from its related container.

---

Take a few moments to import the cheesecake.jpg, black_circle_1.gif, and black_circle_2.png sample files provided in the 05 folder of your working directory. (You'll find these files in a subdirectory called Importing Pixels.) Experiment with how they do and do not behave like symbols. Compare the transparency levels of the PNG and GIF files on a dark Stage color or background shape. In general, get a feel for working with bitmaps, and then save your file as bitmaps.fla in your 05 folder. You won't be using this file again for future exercises, but it will give you something to look at when learning about compression settings later.

5.1.3. Importing from Fireworks

While Photoshop has earned the lion's share of the pixel-based graphics editing market, Macromedia has done a lot to ensure that Flash integrates tightly with its own products, such as Fireworks. This will be particularly pleasing to those who have purchased Studio 8, as Fireworks is part of the Studio suite.

---

Note: If you don't have it, you can install a trial version of Fireworks from this book's CD-ROM. If you don't want to install Fireworks, assets created in the program have been provided for you.

---

If you use Fireworks, or are interested in trying it, you will likely find that its mixture of pixel-based and vector-based objects can be very useful. It likely won't serve as a substitute for Photoshop, but you may be willing to part company with ImageReady and use Fireworks in its place. Take a moment to open the navigation.png and walk_cycle.png files in the /05/ Importing Pixels folder. Poke around and see how pixels and vectors are used in the files.

Once you're ready to move on, import a Fireworks file into Flash to see how some of its unique features can be beneficial to Flash users:

1. Create a new, blank document and save it as fw_navigation.fla in the /05/ Importing Pixels folder.

2. Import the navigation.png file found in the same folder. You will see the dialog pictured in Figure 5-3.

   Figure 5-3. The Fireworks PNG Import Settings dialog allows you to choose to what degree the PNG will be preserved upon import

   

3. Match your settings to those pictured. The first setting will create a self-contained movie clip that contains everything imported from the .png. The second will keep vector shapes editable rather than converting them to pixels, and the third will do the same with text elements. As an alternative, you can always import a Fireworks file as a flattened bitmap, but you will lose the ability to edit the mentioned features.

4. OK the dialog and look at the result. In one fell swoop, you've got a navigation system fully contained in its own movie clip, complete with functioning buttons. Test your movie and roll over the navigation column. Once you see the buttons working, close the .swf and return to your .fla file.

5. Double-click on the movie clip and look within it. You will find several instances of a button, as well as three movie clip symbols. In the next chapter, you'll learn more about movie clips and buttons nested within other movie clips, and how to control them with ActionScript. For now, however, concentrate on how your file has changed upon importing this .png file.

6. Open the Library and see what you find. You will notice that it contains two bitmaps and a folder called Fireworks Objects. The bitmaps are the two graphics found at the top and middle of the navigation columnas you'll recall, bitmaps are automatically added to a file's Library for improved efficiency. Opening the folder reveals the three movie clips and the button you saw on the Stage earlier.

7. When you are finished experimenting, save your work and close the file. You won't need it again.

When you create a file in Fireworks, whenever possible, symbols you create there will be converted into Flash symbols upon import. Depending on how carefully you maintain your Fireworks files, these and other assets will be added to the Library, and the appropriately named folder you just saw will be created. This is a step toward organizing your Library, which you'll read more about later.

You will have a similar experience when importing Fireworks animations. Open your next Fireworks file to see the result:

1. Create a new, blank document and save it as fw_walk_cycle.fla in the /05/Importing Pixels folder.

2. Import the walk_cycle.png file found in the same folder. You will again see the dialog pictured in Figure 5-3. Apply the same settings and click the OK button.

3. This time, you have a walk cycle. Test your movie and watch him walk.

4. You'll learn more about walk cycles in the next chapter, but for now, move on to working with the files you just imported. Save your work and close the file. You won't need it anymore.

Properties

An ActionScript property is a way of describing an object, much like an adjective. These descriptions can be obvious, like a movie clip's _width, _height, and _rotation properties, or they can be a bit subtler, like a movie clip's menu property, which helps you add a custom menu item to the contextual menu that pops up in the Flash Player when you right/Ctrl-click on the movie clip.

You may notice that some property names begin with an underscore, and others do not. The underscore is meant to indicate that the keyword is a property at first glance, and it was more commonly used in earlier versions of Flash. Knowing when to use the underscore and when not to use it can take a little practice, but it will become second nature after a short time.

At runtime, you can always get the value of a property, such as when checking to see how wide a movie clip is; you can usually set the value of a property, too, such as when setting the rotation of a movie clip to 90 degrees. Some properties, however, are read-only, such as the _totalframes property, which tells you how many frames a movie clip has. Since you cannot add frames to a movie clip at runtime, this property cannot be set.