Preparing Images for Flash with Photoshop 6 Flash

Adobe Photoshop 6 is an exciting upgrade to this premiere image-editing program. When you’re preparing bitmaps for use in Flash, Photoshop 6 adds some extremely useful and powerful Web features that make saving high-quality .JPEGs and .PNGs a snap. The PNG-24 format is a great format to use with Flash, because this file format supports lossless compression and can use an alpha channel (a.k.a. transparency mask). In this section, we show you how to export a Photoshop image (.PSD file) as a PNG-24 image to use in Flash, and how to create a 3D-object simulation with imagesequences from Photoshop.

Creating alpha channels for .PNG files
Photoshop has excellent selection and masking tools for the most complex images.
Although some third party plug-ins can make the task a lot simpler, a little knowhow with Photoshop tools can also go a long way toward simplifying your task. In the following tutorial, we take an image of some houses along the beach and mask the background sky. This lesson assumes that you have a working knowledge of Photoshop layers and layer masks.

  1. Open the beachhouses.psd file from the CD-ROM. If you receive a message about a color profile mismatch, choose Don’t Convert. For more information about color profiles and Flash, see the “Color Management in Photoshop 6” sidebar in this section.
  2. To more easily separate the color tones of the sky from the foreground, add a Levels adjustment layer to Layer 0 (the layer with the actual image). Do not use the regular Levels command, which permanently applies its effect to the image. We only need a temporary Levels effect to increase the contrast. See below.
  3. Select the Magic Wand tool in the Photoshop Tools palette. In the Magic Wand settings of the Option bar, enter 15 in the Tolerance field, and make sure Anti- Aliased and Contiguous are checked. Click the uppermost area of the nowdarkened sky to select it. Shift+click additional areas with the Magic Wand tool until the entire sky is selected. If you grab anything in the foreground, either undo or start over (Select➪None). See below.
  4. The image with a Levels adjustment layer

    The image with a Levels adjustment layer

    When you’re creating your selection, pay particular attention to the edges of the rooftops.

    When you’re creating your selection, pay particular attention to the edges of the rooftops.

  5. With Layer 0 highlighted in the Layers window, Option+click (Mac) or Alt+click (PC) the Add a mask icon at the bottom of the Layers window. This uses the selection of the sky as a mask . If the Add a mask icon was clicked without holding Alt or Option, then the foreground elements would have been masked instead.
  6. Option+ or Alt+clicking the Add a mask icon uses the active selection as the black area of a layer mask.

    Option+ or Alt+clicking the Add a mask icon uses the active selection as the black area of a layer mask.

  7. Now that we have masked out the sky, we don’t need the Levels effect anymore.Turn off the Levels adjustment layer, or delete it.
  8. Before we save this image as a PNG-24 file, we should crop all unnecessary information from the image. In this example, the masked sky should be nearly eliminated.
  9. It’s always a good idea to crop unnecessary information (especially if it’s hidden by a mask) from the image before importing it into Flash.

    It’s always a good idea to crop unnecessary information (especially if it’s hidden by a mask) from the image before importing it into Flash.

  10. The effects of larger-than-necessary bitmaps were discussed. Because the image width is currently larger than the default Flash movie width, we also use the Image➪ Image Size command to change the width from 755 to 550. Be careful when using the Image Size command. For this example, the Constrain Proportions and Resample Image: Bicubic options should be checked.
  11. We’re ready to save the image as a PNG-24 file, using the Photoshop 6 Save for Web command (Option+Shift+Command+S or Ctrl+Shift+Alt+S), located in the File menu. After you have chosen this command, the image appears in Live Preview mode within the Save for Web dialog. Click the 2-Up tab to view the original image with the optimized version. In the Settings section, choose the PNG-24 preset. Make sure the Transparency option is checked this exports the layer mask as an alpha channel in the .PNG file. Do not use the Interlaced or Matte options for Flash import. Click OK and Photoshop asks you to specify a location and filename for the PNG-24 image. Note that the .PNG image format is already selected in the Save as Type drop-down menu. It is not necessary to check the Save HTML File option for Flash use.
  12. We’re ready to import the .PNG file into Flash, which recognizes the alpha channel in the PNG-24 version of our image. Open a movie in Flash (or create a new one), and choose File➪Import (Command+R or Ctrl+R). Select the .PNG image and Flash places the image on the current frame of the active layer.Remember that all bitmaps are stored in the Flash Library. If you delete the instance of the bitmap on the Stage, you can always replace it with the bitmap in the Library. That’s it! You’ve successfully imported an image with an alpha channel into Flash .
  13. The Save for Web command enables fast Web image previews in Photoshop 6. You may need to resize this dialog in order to display horizontal images on top of each other.

    The Save for Web command enables fast Web image previews in Photoshop 6. You may need to resize this dialog in order to display horizontal images on top of each other.

    Using a bitmap with an alpha channel enables you to seamlessly place other elements behind the bitmap in a Flash movie.

    Using a bitmap with an alpha channel enables you to seamlessly place other elements behind the bitmap in a Flash movie.

Color management in Photoshop 6
Many strategies exist for color calibration on desktop computer systems. Macintosh computers have had a leg up in this area of graphics creation and output ever since the development of ColorSync. Apple’s ColorSync software provides one of the most complete system-level color management solutions for desktop publishing.

Unfortunately, while Windows 98 and Windows ME do include ICC profile support, it’s not as comprehensive as Apple’s ColorSync system. Since Photoshop’s 5.0 release, ICC color profiles can be specified and attached to most image file formats.

In a nutshell, ICC profiles describe the color capabilities of a given input or output device, such as a computer monitor, printer, or scanner. When an ICC profile is attached to an image, the profile tells the application that is using the image how the colors in the image should be interpreted. If every program in your workflow supports ICC profiles, then, theoretically, this provides a consistent display and output of all graphics.

However, while Photoshop and most page-layout programs recognize ICC profiles, the majority of applications do not. Some Web browsers do not support embedded image profiles, although Apple has proposed many ICC tags to make color management a reality for the Web (see www.apple.com/colorsync/benefits/web). More importantly, Flash 5 does not support ICC profiles. Neither does the current implementation of the PNG-24 format. The .JPEG file format is the only current Web image format that supports embedded profiles. Moreover, ICC profiles typically add about 500 to 800 bytes to an image’s file size.

Herein lies the problem for serious graphic designers who routinely work under tight color management. If you specify an RGB space in the Color Settings preferences (Edit➪Color Settings in Photoshop 6, or File➪Color Settings➪RGB Setup in Photoshop 5.5) other than sRGB IEC61966-2.1 (Photoshop 6), or Monitor RGB or sRGB (Photoshop 5.5), and have Display Using Monitor Compensation checked (Photoshop 5.5 only), then what you see in Photoshop is not what you see in Flash when you import the image. This is why Photoshop 6’s Save for Web feature and its Preview Menu are so invaluable. They enable you to see how the .JPEG, .GIF, or .PNG looks without Photoshop Compensation.

If you work primarily with Web or screen graphics, then you should use Photoshop 6’s new Color Settings presets to quickly switch color spaces. For Web work, always use Web Graphics Default. For ColorSync management on the Mac, choose ColorSync Workflow. On the PC, choose a setting that best matches your printing needs (Color- Sync is an Apple-only management system).

In Photoshop 5.5, change your RGB working space to sRGB, or turn off Display Using Monitor Compensation if you continue to use other RGB spaces. Either method enables you to work with your images so that the Photoshop Compensation and Uncompensated Color settings render the image exactly the same within the Save for Web preview panes. Also, disable ICC profile embedding in the Profile Setup preferences (File➪Color Settings➪Profile Setup) by unchecking all the boxes under the Embed Profiles heading.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics