From Photoshop layers to Flash 4 symbols

August 22, 2000
by Mike Weiland

Designers have been using Photoshop to create assets for integration into Director for years. However, there was never an easy way to incorporate Photoshop layers right into Director. Some of you might remember importing a flattened bitmap from Photoshop and using Director's Paint Window to cut buttons, or importing the button assets individually and placing them on the screen.

This posed many problems, not the least of which was that it was very time-consuming to place assets into the proper position. Many a graphic designer would get irate with me when their interface masterpiece had a button or image one or two pixels off. Then, along came the Messiah, in the form of an Xtra from Boulder, Colorado: PhotoCaster. PhotoCaster will import a Photoshop PSD into Director. What makes it useful is that it will either import the PSD flattened into a single cast member, or import the layers into separate cast members. Also, the PSD will retain its registration from Photoshop. So, when you place it on the Stage via the score, it will drop right into place.

PhotoCaster is great for working with PSDs imported right into Director, but what if you want to import your Photoshop PSD into Flash for a Web site or for incorporation into Director? Every bitmap asset that I use is now brought into Flash and exported out as an SWF, thus allowing Flash to compress the image. We have had great success utilizing this technique. In most cases we have trimmed 2 to 3 MB of space from our Shockwave files, which is crucial for playback on an intranet or over the Internet. This has worked great for flattened images (which do not have Photoshop layers) that we exported from Photoshop in BMP format then imported into Flash. But what do you do with an interface with intricate buttons that need to be laid out precisely in Flash? Ideally you would want to import the Photoshop file directly into Flash 4; Flash would then convert the Photoshop layers into symbols and retain the layer structure.

Unfortunately Flash 4 does not import Photoshop PSDs directly, so you need to do a little magic, courtesy of Macromedia Fireworks 3, a part of the Director 8 Shockwave Internet Studio. Here's how.

Open the Photoshop PSD in Fireworks 3
In Fireworks, choose Export Special from the File menu, and then select Flash SWF

Click the Setup... button. This will bring up a window that allows you to set the output parameters for the SWF file

Maintain Paths - This should be selected if you drew any lines in Fireworks, as it will maintain their vector nature.

Maintain Appearance - Select this if you drew vectors and applied Fireworks effects to them. It will convert the vector into a bitmap to maintain the effects appearance in the SWF.

JPEG Quality - Leave this at 100%, and set the quality in the Flash movie when you export the final version.

Frames - Leave this set to all. This would come into play if in your Fireworks file you added frames for animation.

Frame Rate - Leave at 15 frames per second. It doesn't apply to what you are doing, because there is no animation created in Fireworks.

Press OK and save your SWF file
Open Flash 4.0
Import the SWF file that you created in Fireworks, to do this select Import from the File Menu

The layers that were in Photoshop are now imported into Flash as separate images in the Flash movie Library. The images on the Flash stage can now be converted into button symbols.

Select an object by single-clicking it, and choose Convert to Symbol from the Insert menu

This will bring up the Properties window. Enter a name for the symbol. Note: Make sure you select Button as the Behavior for the Symbol.

Do this for every clickable object you want to use as a button in your Director movie.

Once all the buttons are created, you need to give an actionScript to each button. This will tell Director which button is clicked

Double-click a button on the Flash stage to bring up its Instance Properties.

Click the Actions tab and select the getURL command from the ActionScript Plus sign (+). Then enter Lingo: Beep, so your actionScript should look like this:

On (Release)
  Get URL ("Lingo: Beep")
End On

Do this for all the buttons. You can substitute any Lingo command for beep or any of your custom handlers.

Save your Flash movie and then export the movie to SWF format

Note: You will need to test the JPEG Quality setting, as the correct setting will vary depending on your image. I recommend starting at 40% and working up, using the lowest setting at which the image quality is acceptable.

When you create a button, be careful that it is not placed on top of other buttons. Use Modify : Arrange : Bring to Front if any problems arise. You could also add layers to your Flash movie and place each object on its own layer, so that it mimics the Photoshop layers.

Now that you have an interface in SWF format, you can import it into Director 7.02 or 8. Choose Insert : Media Elements and import the SWF file you created.

There are several ways to have Flash and Director communicate back and forth. Many good articles on this topic that can be found by doing a search for Flash here at Director Online.

Create a loop on your first frame of your Director movie, so that the playback head stays on this frame.

on exitFrame
go to the frame
end

Play your movie, clicking on the Flash buttons. You should hear the system beep each time. You'll notice, however, that the cursor does not indicate that you are over a button. You can't just attach a cursor behavior to the Flash sprite, because that would cause the entire Flash movie to change to a finger when the mouse is over the sprite. The solution is to use the mouseOverButton lingo command. Attach this behavior to the Flash sprite: when the cursor is over a button in the Flash movie, you will see the finger cursor; when rolled off a button, you will see the normal arrow cursor.

on exitFrame me

  if sprite( me.spriteNum ).mouseOverButton then
    sprite( me.spriteNum ).cursor = 280
  else
    sprite( me.spriteNum ).cursor = -1
  end if

end

The possibilities for Flash and Director are boundless. We use a lot of Flash movies in Director, and utilize and set variables back and forth. This allows us to encapsulate modules and allows us to reuse assets in several locations.

A Director 8 sample movie is available for downlaod in Mac or PC format. As well the PhotoShop image used to create the Flash source files is also available for download in Mac (1.05 MB) or PC (940 K) format.

Mike Weiland is the Director of Technology for Wasatch Interactive Learning, an educational software company in Salt Lake City, UT. He can be reached at mike@wasatchnet.com, website http://www.wasatchnet.com/.