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.

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.