JUNE 18, 2003
Creating Interactive QuickTime Movies with Wired Sprites in Adobe GoLive 6
In this tutorial you'll learn how to create an interactive QuickTime movie with multiple rollover buttons and videos. The only software you need to complete this tutorial is Adobe GoLive 6 and we'll provide all the necessary sample files. If you want to create your own buttons you'll need Adobe Photoshop and if you want to use your own video sources we recommmend Adobe Premiere. Before we begin make sure the QuickTime module is enabled in the GoLive Modules Preferences. If not, enable it, quit and relaunch GoLive.
Source FilesThe following files can be used to complete this tutorial or you can create your own.
· layout.psd.zip (29kb)
· intro.mov.zip (5kb)
· littleboy.mov.zip (130kb)
· cyclers.mov.zip (440kb)
Step 1: Creating the Buttons in a Layered Photoshop File
There are a few different ways to import graphics into the GoLive QuickTime Editor as wired sprites but by far the easiest way is to use a layered Photoshop file. Use Photoshop to create a canvas with the same image dimensions as the final movie in GoLive (320x240 pixels in this tutorial) and layout the background and button images exactly as you want them to appear in the movie. Create each button on its own layer and name the Photoshop layers to match the GoLive Sprite Inspector settings as seen below in Figure 3. Make sure the layer names map to the sprite settings so you can seamlessly import the file into GoLive. For example, if you have a button called "boy" in your Photoshop document create a layer called "boy_main" for the main button and a layer called "boy_over" for the over state. You can even create a third layer and call it "boy_click" for a third rollover state that will show when the user clicks the button. If you don't want to use GoLive's default layer suffixes just change them in the GoLive Sprite Track Inspector and make sure your Photoshop layer names match.
You can create your own Photoshop file for this tutorial or download the layout.psd example file. If you have Adobe Photoshop installed on your computer you should open the layout.psd file to examine how the file was built.
Step 2: Creating a Blank QuickTime Movie
Select File>New Special>QuickTime Movie..., select 320x240 pixels from the Sizes menu, and click OK to create a new blank movie. The videos you'll use are only 240x180 pixels but the extra size will give enough room for the interactive buttons which QuickTime calls "wired sprites."
Step 3: Opening the QuickTime Timeline Window
You'll be doing a lot of work in the QuickTime Timeline Window so open it now by clicking the Show Timeline Window button in the toolbar or select Movie>Show Timeline Editor. You'll notice a default Color Track which is necessary to prop open the movie at the specified size. You won't be using the Color Track but it won't cause any problems so just ignore it.
Step 4: Creating the Sprite Track
To create the sprite track for the interactive buttons drag a Sprite Track object from the QuickTime section of the Objects Palette into the timeline. Your movie should now contain a Color Track and an empty Sprite Track as seen below in Figure 4. Note that the length of the tracks does not matter for this project so you can leave them as is.
Step 5: Importing the Sprites from the Layered Photoshop File
Select the Sprite Track in the timeline and open the Sprites section of the Sprite Track Inspector. If you want to import the background layer of your Photoshop file as a background image in your movie make sure the Import Background Layer option is checked. If you need to import a Layered Photoshop file that has larger dimensions than the movie in GoLive but you don't want the images clipped then make sure the Resize Sprite Track option is checked so that the Sprite Track, and the entire movie if necessary, will resize to fit.
When the Inspector looks like Figure 5 below click the Import... button and select the sample file named layout.psd or your own layered Photoshop document as described above in Step 1. Then select a compression option in the Compression Settings dialog box. PNG compression works well for both continuous tone images (photographs, gradients, etc.) and flat color images (buttons, logos, etc.) that can be in the same layered Photoshop file so you might try that compression option first. Your results will vary based on the design of your Photoshop file so you should experiment until you find the compression settings that work best for your project.
Step 6: Examining and Testing the Sprites
The beauty of importing a Photoshop file with properly-named layers is that GoLive can automatically convert the layers to sprites and turn the correct layers into rollovers. Click the disclosure triangle next to the Sprite Track in the timeline to reveal all the sprites that were imported and note that you can have several sprites in one Sprite Track. The sprite in the Sprite Track labeled "Sprite" is a default placeholder that will cause no problems but you can delete it if it annoys you. Just select it in the timeline and press the Delete key.
Now select the sprite sample (looks like a small red diamond) for the "boy_main" or "cyclists_main" sprites in the timeline and look at the Basic section of the Sprite Sample Inspector. See how GoLive converted the named Photoshop layers into buttons with rollovers? You can test the interactive sprites by moving your mouse over them in the Preview tab of the QuickTime movie window.
Step 7: Creating the Movie Track
Now we'll add a Movie Track by dragging a Movie Track object from the QuickTime section of the Objects Palette into the timeline as seen below in Figure 7. Make sure you drop the object below the Sprite Track we created in Step 5 so the movie will be stacked on top of the interface and not layered below
Step 8: Editing the Movie Track
First, set the default source of the Movie Track in the Link field of the URL section of the Movie Track Inspector to the intro.mov file included with the sample files for this tutorial. The intro.mov file is just a simple QuickTime movie with a single picture track prompting the visitor to click a button to play a video. Then switch to the Basic section of the Movie Track Inspector and change its name in the Title field to something short and simple like "movie" and center it with a Position of (40,0). You can also move it manually in the Layout Tab of the Monitor window. When you're done the Movie Track Inspector should look like Figure 8 below.
Step 9: Assigning Actions to Sprites
This is the step where we "wire" the sprites by adding interactive actions to the buttons. A movie track is sort of like the picture-in-picture feature on some televisions in that you can change the source of a movie track based on user interaction with wired sprites. In the following sequence we'll set two actions for each button that load and play a different video depending on which button is clicked.
First, select the sprite sample for "boy_main" in the timeline and open the Actions section of the Sprite Sample Inspector. Then, select the Mouse Click event on the left side of the Inspector and then click the New button under Actions to create a new action. Next, select the Set Child Movie URL action from the pulldown menu, select Movie Track Name inthe pulldown menu next to the Target Movie field and type "movie," the name of the movie track from Step 8, in the Target Movie text entry field. Now assign littleboy.mov in the Link field and the Inspector should look like Figure 9 below. This first action only determines which video source should be assigned to the movie track but doesn't actually load it or play it.
To load and play the littleboy.mov we'll assign one more action to the Mouse Click event. Select Mouse Click on the left, click the New Action button on the right, and select the Load Child Movie action from the pulldown menu. Lastly, make sure the Target Movie is "movie." When you're done assigning these two actions the Sprite Sample Inspector should look like Figure 10 below.
Now repeat Step 9 for the other button(s) using the same actions and movie track name ("movie") but this time assign the link for the Set Child Movie URL action to cyclers.mov.
Step 10: Test Your Work
Save and test your movie in GoLive's QuickTime Preview mode or in Apple's QuickTime Player application. Remember that the intro.mov, littleboy.mov, and cyclers.mov files are referenced by the main movie like GIFs and JPEGs are referenced by a web page. This means you need to move and rename these files in the GoLive site window to ensure none of the links are broken.
If the interactivity does not work, make sure you have choosen Movie Track Name in the pull down menu and not Child Movie Name during Step 9 above. If not, make the necessary changes.
This example project is just the tip of the iceberg when it comes to interactive QuickTime movies you can create with Adobe GoLive 6. When you're ready to publish the sprites.mov in a web page just drag and drop the file into the page in Layout mode and enjoy!
Bonus Tip #1: Did you notice in the list of actions you can control a lot more than just child movies in movie tracks? You can use wired sprites to change audio volume, control video speed and direction, interact with SWF and QTVR files, and even load URLs in a web browser. Experiment and have fun!
Bonus Tip #2: If you don't like the buttons included in the layout.psd file you can easily update the entire movie without having to recreate any of the interactivity by just editing the Photoshop document and reimporting with the Replace... button in the Sprites section of the Sprite Track Inspector.
Bonus Tip #3: You can copy and paste actions between events and sprite samples in the Sprite Sample Inspector. This makes the most tedious part of building wired sprites a breeze!
Bonus Tip #4: If you select the main movie in GoLive site window and open the In & Out Links Palette you can see all the referenced movies.
Adam Pratt is a professional Web designer who has used GoLive since version 1.0. He has been on the beta test team for about two years. Adam is an Adobe Certified Training Provider for GoLive 4.0. In addition to formal training and tutoring, he maintains a presence on the Adobe User to User Forums as a GoLive Forum Host and on the BlueWorld GoLive Talk List.
Related sites: Creative Mac Digital Media Designer Digital Producer