Weekly Newsletter!

Sign up for Mac Alert, the weekly newsletter from the producers of Creative Mac. You'll get news, reviews, features and tutorials, all delivered to your e-mail box.

Sign up now!


Our Related Sites

Creative Mac

Animation Artist
Digital Animators

Digital Pro Sound

Digital Media Designer

Presentation Master

Digital Webcast

AV Video
Digital Post Production
Digital Producer
Digital Video Editing
DV Format
DVD Creation
Film & Video Magazine

Our Related User Forums
Creative Mac
View All Forums A-Z
Mac Sites We Like

Ramseeker PowerBook CentralMacinsteinLowEndMacMacs OnlyMacWindowsGo2MacMacSpeedzoneMacReviewzone


Gimme Some Skin
How to use GoLive to create QuickTime skins

by Stephen Schleicher
[email protected]

When QuickTime 5 was released, everyone was excited about many of the new features, including the ability to play MPEG-1 and improved QuickTime VR. Of the many new features, the one that seems to have been overlooked the most is the ability to create media skins to enhance your streaming media. Unlike media skins for other players, which can be troublesome, and even a headache at times, creating a skin for use with QuickTime is very easy.

Why create a QuickTime skin? Simple. It is yet another way to brand your content and generate name recognition for your business.

There are several ways in which to create a skin for your QuickTime movies. The simplest and easiest does not give you the ability to embed controls in the movie. To do that, you need to use a program like Flash, LiveStage Pro or Adobe GoLive 5. For this exercise, I'll demonstrate how to create a media skin and how to embed controls in your movie to make a truly interactive experience. If you would like to follow along, you'll need Adobe Photoshop, Adobe GoLive 5.0 and QuickTime Pro.

Clip art is a great source
for finding skins for your
QuickTime movies.


I decided to play around with DMN TV, our streaming media show here at Digital Media Net. Because the show is broken down into three separate segments, I wanted a way for viewers to be able to "jump" easily between segments. I do want to point out that there are programs on the market today that allow you to create event streams; streams with a great deal of interactive control, but for many just being able to create a branded media skin will be enough. Also, since this ended up being a test for this tutorial, this media skin is nowhere near complete.

Skin 'n' flicks
I started by finding a suitable frame, or skin, for the QuickTime movies. Recently we received Hemera's Photo-Objects 50,000 Volume II, which includes many images that are perfect for media skins. I found a nice television and imported it into Adobe Photoshop.

From there it was a simple matter of resizing the image and creating a black region on the screen, where the QuickTime movies would be positioned. Some forward thinking needs to be done when you are creating your skins. In this example, I knew that I wanted to have an image to prompt viewers to proceed to the next segment, so I created a text message in the movie area. Save this image in any format that QuickTime supports (.PCT, .BMP, .GIF). I named this image television.pct.

The Window Mask will define
the area of the stand-alone skin.

I also created several buttons to control the QuickTime movie. These sprites will enable the viewer to Play, Stop, and choose between the three video segments in the show. When you are creating rollovers in Photoshop for use in GoLive, you need to use the proper naming conventions that GoLive recognizes. The layers should be named as follows:

Main: name_main
Mouse over: name_over
Mouse click: name_click

Do this for every button that needs to be created. In my example I had five buttons, which ended up being fifteen layers.

Since we are in Photoshop now, let's create a mask and a drag mask for later on in the tutorial. The mask will define the shape of the window for your skin. It needs to be black and white, where the black is the area that will not be masked off, and the white area will become transparent. Save this as mask.pct

A drag mask should also be created that will allow the viewer to drag and position the movie anywhere on their screen. Generally this will be the same size and shape as the mask image, but with white areas that will allow the sprites and movie file to be moved around and still remain interactive. Flatten and save this image as drag.pct.

Lay it out in GoLive
In Adobe GoLive 5.0, open a QuickTime movie, and under the Movie Menu, select Show Timeline. This will bring up the Timeline interface where we will build all the layers and wire the sprites to control action.

In this example I have three QuickTime movies, so I dragged in two other video and audio tracks from the QuickTime tab of the Objects window. In addition to adding the tracks, you will also need to load the video and audio into those tracks. Layering in the GoLive timeline works like layers in a traditional QuickTime movie. The bottom most layer in the timeline is actually the uppermost layer in the QuickTime movie. It might also be helpful to rename each of the layers so you do not get confused. Since I have three segments, I named them Segment 1, Segment 2, and Segment 3, to match the segment buttons I will be adding shortly.

The next step is to load the television.pct image created earlier, and place it in the first layer of the timeline (the backmost layer in QuickTime). Don't forget to actually load the image. For some reason, images loaded into a QuickTime movie in GoLive want to resize themselves to the size of the movie file and not maintain their pixel aspect. You will need to manually resize the image to the correct dimensions.

The Drag Mask defines that area
of the movie which can be
moved around the screen.

Also, when a picture track is added, it only loads as a single frame. By changing the duration to the length of the entire movie, it will make sure this layer is visible at all times.

By clicking on the Layout tab, position the three movie layers to fit inside the black screen region of the television screen. You will notice that each of the movie layers is of different lengths. When segment one is over, it will reveal the layer underneath, which happens to be the television.pct layer, which has the prompt to go to the next layer.

Now you may be wondering, why I placed each QuickTime segment on top of one another instead of sequentially. When I encode DMN TV in one long show, the viewer must wait until the show loads before they can jump to a later segment. By stacking the movies on top of one another, the viewer has immediate access any of the segments.

The last layer to add is the Sprite layer. Place the sprites on the bottom most layer of the timeline (the top most layer of QuickTime), and position the sprite layer in Layout. Transparency will need to be added as well so you can see the layers underneath. By default the background should be black, so set that as the transparent color and you should be good to go. Again, to make sure the sprites are available at all times, change the duration to match the length of the movie.

Wiring sprites for interaction
Let's start with the Play and Stop buttons first since they are the simplest, and if you plan to stream a single movie, then this will be most important to you. Click on the drop down arrow in the timeline to reveal the sprite buttons.

Click on the keyframe of the Play button to make it active and then click on the Action tab of the Inspector window. Select the Mouse Click event, and click on the Add New Action button. Select Movie Rate from the drop down menu and change the value to 1, and then Apply.

Click on the keyframe of the Stop button, make it active, add a new action, and select the movie rate as before, but this time change the value to 0. We have just set these two buttons to play and stop the QuickTime movies. If all you are adding is Play and Stop buttons, you can jump to the next section.

Rollover buttons created in Photoshop must
maintain certain naming conventions to work
in Adobe GoLive 5.0

The segment buttons were a bit different. To save time and space, I will quickly outline how to do one of the buttons. Make sure to Add New Action for each action listed.

Segment 1 button Mouse Click

  • Track Set Enabled. Select Segment 1 Video Track, and check the Track Enabled box.
  • Track Set Enabled. Select Segment 1 Audio Track, and check the Track Enabled box. This will make the segment 1 audio and video tracks active.
  • Track Set Enabled. Select Segment 2 Video Track, and uncheck the Track Enabled box.
  • Track Set Enabled. Select Segment 2 Audio Track, and uncheck the Track Enabled box.
  • This will disable segment 2 audio and video tracks. Repeat this for segment 3 audio and video.
  • Movie Go To Beginning. This will obviously sets the time to the beginning of the movie.
  • Movie Rate, and set the value to 1.

Repeat this process for the other segments of the movie.

The skin stands alone
That does it for wiring the sprites. If you examine the QuickTime tab, you will notice that you can also embed .swf, hypertext and 3D tracks into you final movie.

Save the QuickTime movie as a self-contained movie. Another thing that I discovered is that the file size for this interactive QuickTime movie is the same size as a regular edition of DMN TV that plays the segments sequentially.

If we play the QuickTime movie, the viewer will be able to use all of the interactive controls that we just set, but it still plays within the QuickTime player. Time to make it a stand-alone skin.

The next step requires some XML programming, but thanks to Apple, the script is already written. Paste the following text into a text file.

<?xml version="1.0"?>
<?quicktime type="application/x-qtskin"?>
<movie src="savedquicktime.mov"/>
<contentregion src="mask.pct"/>
<dragregion src="drag.pct"/>

This little script will load and place the mask and drag mask images we created earlier and create the media skin.

Save this text file with the .mov extension (xml.mov for example), and place this script, the interactive QuickTime movie and all of the image files in the same directory. Launch the xml.mov file in QuickTime Pro. If everything has been done correctly, you should have the QuickTime movie playing in its own standalone window.

The final step is to save this movie once more as a stand-alone movie (final.mov, for example). The movie can then be linked on a Web site, with the following embed tag, which will display a poster frame. As soon as the viewer clicks on the image, it will launch the QuickTime movie as self-contained.

<EMBED SRC="poster.mov" TYPE="image/x-quicktime" HEIGHT=120 WIDTH=160 HREF="final.mov" TARGET="quicktimeplayer">

The only drawback to this entire process is the end viewer needs to have QuickTime 5 installed on their system. If they do not, the movie will open inside the standard QuickTime window with the skin and all inside the regular QuickTime borders.

Because I used three different movie files for this tutorial, it made this exercise a bit longer than normal. If you are using a single movie track, creating a regular QuickTime movie in its own skin on a regular basis could become second nature.

Click on the image to view Media Skin.
Press Command W to close.

Hopefully this exercise not only showed you how to brand your media, but also gave you some ideas on how you can add more interactivity to your QuickTime movies. Think how easy it would be to add a director's commentary track or other audio or video track to your future streaming masterpieces.

If you are still confused about how all of this goes together, there is another cool item I discovered. If you find a great example of a QuickTime media skin, and if you can save it to your hard drive, you can open that QuickTime movie in GoLive and it preserves all of the formatting. It's then a simple matter of viewing the timeline and seeing how they did it.

Go to Page [ 1, 2, Complete, Home ]

Post a message in the Creative Mac World Wide User Group.

Stephen Schleicher is the producer of DMNTV, Video Systems, Millimeter and Digital WebCast and is the host of the Video Systems, Millimeter and Digital WebCast forums at the World Wide User Groups. He has taught at Fort Hays State University in Hays, Kansas, and at the American InterContinental University in Atlanta, Georgia, where he also ran his own animation company, Thunderhead Productions. Stephen also freelanced in the Atlanta area as a producer/editor for five years working on everything from training videos to live shows.