Importing Photoshop layers as sprites

You can use the Sprites tab of the Sprite Track Inspector to import images from a Photoshop file and automatically create a sprite for each layer in the file at the same time. The advantage of using the Sprites tab is that you can design and lay out sprites in Photoshop (including mouseover images, and so on), and then import the images into a QuickTime movie very easily. Using this method, it's easy to design a great looking interface in Photoshop with all the behavior in the image and then bring it to life automatically in GoLive without the need to reposition all of the images or assign the behavior to the images manually. By setting up the layer names in advance in Photoshop, you can also automatically assign different rollover behaviors to each sprite at the same time you import the Photoshop file.

You can also use Photoshop as a prototype tool to create the initial appearance of images and then import the images into GoLive and set up the interactive actions. When you're ready, you can use Photoshop again to create the final artwork and then replace the images assigned to the sprites without losing the sprites' interactive actions or any other work you did with GoLive to create the movie.

To set up images and layer names in Photoshop for rollover behavior:

In Adobe Photoshop, create and lay out the background and sprite images exactly as you want them to appear in the movie. For example, suppose you want to create a movie that displays a television with four buttons for selecting channels. Suppose also that you want to assign rollover behavior to the buttons to have them change appearance when the viewer moves the mouse pointer over them. In the Photoshop file, first create a background image that shows a television. Then add four buttons, each on a different layer, that have the main appearance you want to display when a mouse pointer is not positioned over them. Position the buttons in the layout where you want them to appear in the movie, such as in a row along the bottom of the television background. Next, add four more alternate button images, each on a different layer, that look different than the main buttons and that you want to display when a viewer places a mouse pointer over them. Position these alternate buttons in the exact same locations as the main buttons.

To set up rollover behavior, name each button layer with a meaningful prefix, an underscore, and then an extension that indicates the rollover behavior for that image. For example, the layers containing the main button images might be named channel1_main, channel2_main, and so on. The alternate button images for the mouse over behaviors, might be named channel1_over, channel2_over, and so on. When you set up options in the Sprites tab before importing, you specify the main extension to map the main button layers to the Main behavior box for sprites, and you specify over to map the alternate button layers to the Over behavior box for the same sprites.

Note: You can use any name for the background layer. GoLive can determine the background layer automatically if you choose to import it.

To import a Photoshop file and automatically create sprites:

1. Select the sprite track in the track list in the Timeline Editor.
2. Display the Sprites tab of the Sprite Track Inspector and do any of the following:
• To import the background layer from the Photoshop file and create a sprite that displays the background, select Import Background Layer.
• To resize the sprite track to the dimensions of the imported images, select Resize Sprite Track. If the Resize Sprite Track option is not selected, GoLive does not resize the sprite track and clips any images that are larger than the sprite track.
• To map layers in the Photoshop file as the main image for each new sprite, enter the appropriate extension in the Main text box. For example, if the main button images are on layers named channel1_main, channel2_main, and so on, enter main as the extension in the Main text box. After importing, GoLive assigns the images from the main layers to the Main behavior box in the Basics tab in the Sprite Sample Inspector for each sprite.
• To map layers in the Photoshop file to the Over behavior box in the Basics tab in the Sprite Sample Inspector for each sprite, enter the appropriate extension in the Over text box. For example, if the alternate button images are on layers named channel1_over, channel2_over, and so on, enter over as the extension in the Over text box.
• To map layers in the Photoshop file to the Click behavior box in the Basics tab in the Sprite Sample Inspector for each sprite, enter the appropriate extension in the Click text box. For example, for channel1_click, channel2_click, and so on, enter click as the extension in the Click text box.
3. Click Import and then navigate to the folder containing the Photoshop file. Select the Photoshop file and then click Open.
4. In the Compression Settings dialog box, select an image compressor and a color depth from the pop-up menus, and then click OK. (See Setting compression options.)

GoLive adds the layers as individual images in the Images tab of the Sprite Track Inspector, adds a sprite for the background image (if you chose to import it), and adds a sprite for each combination of main, over, and click layers. To view or change the properties for each sprite, such as selecting a cursor for an Over image, use the Basic tab in the Sprite Sample Inspector. (See Setting sprite appearance and behaviors.)

To replace the images from a Photoshop file and automatically update sprites:

1. Make sure the layer names have not changed in the Photoshop file.
2. Select the sprite track in the track list in the Timeline Editor.
3. Display the Sprites tab of the Sprite Track Inspector and click Replace.
4. Navigate to the folder containing the Photoshop file, select the Photoshop file, and then click Open.
5. In the Compression Settings dialog box, select an image compressor and a color depth from the pop-up menus, and then click OK. GoLive replaces the images for each sprite.