Flash workflow productivity tips: part 2

PNGs from Adobe Photoshop: Record an action in Photoshop

Everyone agrees that color (hue, saturation, and brightness) inside Flash is inconsistent with any color space in Adobe Photoshop and Adobe Illustrator. The closest I can get to the correct color in Flash involves saving all my images into PNG format. This makes sense, because Macromedia Fireworks (Flash's image editing sister) uses PNGs as it's native format.

The annoying part of saving all your images that will end up in flash as PNGs is that it's an extra step. An extra step that is made worse by Adobe ignoring the last saved file format ("No, Adobe, we don't want to always save files as PSDs!"), and defaulting back to PSD everytime ones tries to save an image. To aid in that extra step, I recommend recording a action (or macro) in Photoshop to save an image as a PNG. Photoshop doesn't support layered PNGs (you'll have to import your PSDs into Fireworks and use the "Distribute to Layers" Command for that), but for single layer PNGs with transparency a macro is the way to go.

Directions for creating this Photoshop Action:

1. Open a new document
2. Locate your Action palette in Photoshop
3. Press "Create New Action"
4. Assign a function key (I recommend F12, since this is similar to publishing in Flash)
5. Name the action "Save as PNG"
6. Click "Record"
7. Click File>>Save As...
8. Select PNG from the File Format drop down menu
9. Choose a standard location for your PNGs (I recommend "Desktop/PNG/")
10. Click "Save"
11. Select "Interlace: None"
12. Click "Stop Recording" on the Action palette

Now you can save your current Photoshop document as a ready for flash PNG with one keystroke!

Place frame ActionScript on is own layer

Ever get frustated when you come back to a project after a few months and have to change some ActionsScript and you can't find it? I recommend creating separate layers for your ActionScript such as the following:

• functions_as: for function calls
  
• button_as: for onRollOuts, onRollOvers, and onReleleases
  
• stop_as: for stop() and gotoAndPlays
• music_as: for cueing music
• sound_AS: for cueing sound effects
  

Hide mouseovers with another mouseover

If I have an area that I do not want to be an active mouseover area for a onRollOut, onRollOver, and/or onRelelease, I use a 0% Alpha shape and place it on a layer above. I then apply the following ActionScript to disable, the hand cursor for that area:

movieclip_MO.onRollOver = function() {
this.useHandCursor=false;
}

Now visitors, don't know anything is there!

Creating a mouseover of a different shape than the image

If your image is square, but you need an irregular mouseover shape, select the area you want for the mouseover in Photoshop, make it a path, and then copy that path via the Clipboard into Illustrator. Then from Illustrstator, you can copy it via the Clipboard into Flash. Now you have a shape in Flash without any drawing in the Flash UI. I usually give my mouseover-only movieclips the extension "_MO".


--Stephen M. James
www.smjdesign.com