Using PNG Images with Flash

15:09 / Posted by Saurav ganguly /


Macromedia Flash is often associated with vector artwork, but Flash can handle bitmap images quite competently. Using bitmaps increases the final file size of a Flash movie, but using them tastefully and carefully can add depth to an otherwise flat virtual world. In the next few columns I will look at some techniques for leveraging bitmap imagery in Flash.

Macromedia Flash is one of the few applications to embrace the PNG (Portable Network Graphics) file format. Why should you care? Three very good reasons: file size, masks, and transparent gradients.

Using Adobe Photoshop or a similar image editing application, you'll find that an image saved as a PNG will usually have a smaller file size than a JPEG at approximately the same quality level. But even if your PNG file is not smaller than its JPEG equivalent, when you export your final output file (the .swf file) from Flash, the file created with PNGs will be smaller than the one created with JPEGs.

Unlike JPEG, the PNG file format supports masks—areas of an image which can be made transparent. Assigning masks to PNG files is simple—particularly with object photos that include clipping paths, such as those sold at EyeWire. In Photoshop, open the photo and click the Paths palette. Load the path as a selection (see Fig. 1), then choose Select> Save Selection. Save a copy as a PNG. (If you don't have a pre-built clipping path, use the drawing tools or other tools to create a selection.)

Import PNG files into Flash as you would any other image. (Choose File> Import, choose the image in the left window, click Add, and click Import. Click OK for the PNG settings—use the defaults.) Notice how Flash supports the mask (see Fig. 2). In this image, the girl has a slight halo along her hairline. Correct this in Photoshop by loading the path as a selection, then choosing Select> Modify> Contract. Contract the selection one or two pixels and save the image (See Fig. 3).

Working with masks in PNG gets really interesting when you move beyond masks that merely crop out unwanted portions of the bitmap. The PNG format supports full 8-bit masks. This means you can have gradient transparency; all you need to do is create the selection with a gradient in it.

For instance, Figure 4 shows a screenshot from a presentation that Eyeland Studio created for the HotFrets web site. The guitar is a separate object from the background. Notice that it gradually gets more transparent from top to bottom. Since the object is separate from the background, it can be animated separately, with the gradient transparency showing over any background. Figure 5 shows how this selection looks in the Photoshop Channels palette. To create it, load your selection, choose Quick Mask, and apply a Foreground to transparent gradient. Save your image.

One of the more impressive things about using PNG masks is that it does not adversely effect the final file size of a Flash movie—even when using transparent gradients! For example, when I imported the JPEG version of the guitar image, the final .swf file was 26 KB, but the one containing the PNG image with the gradient mask was only 19 KB.

PNG masks are particularly useful to animators and game designers who prefer to create their artwork on paper or gels. The PNG file format allows them to scan their artwork, mask out the unwanted portions of the scan, and then import the artwork into Flash. If they want to vectorize their artwork they can use the Trace Bitmap feature. Flash will only trace the unmasked portion of the bitmap image.
 
Fig. 1

Fig. 1 - When working with Clipping Paths, load the path as a selection, save the selection, and save a copy as a PNG file.Fig. 2

Fig. 2 - PNG file with mask, in Flash. The background shows through the masked area.
Fig. 3

Fig. 3 - In Photoshop, Choose Modify> Contract to reduce halo effects.
Fig. 4

Fig. 4 - The guitar is a separate object from the background. Notice gradual transparency from top to bottom.
Fig. 5

Fig. 5 - This is the Channel or selection used to create the gradient transparency effect shown in Figure 4.
 

Labels:

1 comments:

Comment by jane holly on 19 December 2020 at 05:26

This professional hacker is absolutely reliable and I strongly recommend him for any type of hack you require. I know this because I have hired him severally for various hacks and he has never disappointed me nor any of my friends who have hired him too, he can help you with any of the following hacks:

-Phone hacks (remotely)
-Credit repair
-Bitcoin recovery (any cryptocurrency)
-Make money from home (USA only)
-Social media hacks
-Website hacks
-Erase criminal records (USA & Canada only)
-Grade change
-funds recovery

Email: onlineghosthacker247@ gmail .com

Post a Comment