Hack 76. Skin Your Movie

Delivering a completed movie is an accomplishment. If you are distributing your movie online, you can get people to remember your movie from the others by wrapping it in a "skin" a unique interface that will become a part of your video.

Most audio and video playback applications allow people to create skins that alter the appearance of the given application. However, QuickTime has a unique feature that enables producers to meld together a movie along with a unique interface. Using QuickTime Pro, a photo manipulation program, and a text editor, you can create a unique look for your movie and begin to build a memorable brand.

The skin of a QuickTime movie can consist of any image QuickTime can read. So, not only can you create an image in a program such as Photoshop, but you can also take a picture with a digital camera or even use a scanner to import one you've found. Whatever your choice, the process of creating the skin is the same. Skins can be of any shape, so don't be shy about using unusual shapes to help brand your movie.

7.2.1. Mark Your Image for Skinning

Once you have chosen the image you are going to use for your skin, it is helpful to edit the image and mark an area where your movie will display. Mark the area using either black or white. For example, if you are using an image of a television set, mark the screen with a black or white box. Figure 7-3 shows an image with a white box representing the display portion of the skin being edited in Stone Studio's Create.

Figure 7-3. Defining an area for the movie to display

Once you are satisfied with your image, save it in a QuickTime-compatible format, such as TIFF, JPEG, PICT, GIF, PNG, BMP, PDF, Photoshop, or even Targa.

7.2.2. Joining Your Movie with Your Image

After you've created your skin image and chosen a section in which to display your movie, you are ready to join your movie and your skin image together. While running QuickTime Player, choose File open Movie in New Player… and open the skin image. You need to copy the image as a movie, so choose Edit Select All and then Edit Copy.

Next, open your movie in QuickTime Player. To apply the skin, you need to paste it over your movie. However, you need to scale it to the entire length of your video. In order to do this, simply choose Edit Add Scaled.

7.2.3. Getting Your Movie to Display

After adding the skin, you will probably notice that it has taken over your movie altogether. Fortunately, QuickTime allows you to alter video in a number of ways, including selecting a color to become transparent. To select a transparent color, open the movie Properties window by choosing Movie et Movie Properties.

In the first pop-up menu, select Video Track 2, and from the second pop-up menu, select Graphics Mode. Then, from the list of available modes, select Transparent. Finally, click the Color… button and choose the color you have used to mark the display within your skin (white or black, if you've followed the previous directions), or choose the magnifying glass tool and place it over the display section of your skin. Figure 7-4 shows a before-and-after image of the Transparent mode being applied.

Figure 7-4. Displaying your movie by using Transparent mode

Under most circumstances, you will have to resize and reposition either or both the movie and the skin.

7.2.4. Lining Up the Movie and Skin

From the Properties window, you can access the sizing controls by selecting the appropriate track (e.g., Video Track 1) from the first pop-up, choosing Size from the second pop-up, and then clicking on the Adjust button. While changing the size and position of an image, you will see a set of red marks related to the particular track.

By clicking and dragging the corner marks, you can resize the image, and by clicking and dragging on the image itself, you can reposition it. You can also sheer the image by clicking and dragging on the marks on the sides of the image. Figure 7-5 shows a movie being resized within a skin.

Figure 7-5. Sizing and positioning a movie image

After you are happy with the look of your movie/skin combination, choose File Save As… and select the option to "Make movie self-contained."

7.2.5. Creating Masks for Your Skinned Movie

Even though your movie and skin are now merged, the QuickTime Player window is still visible. The next step in the process is an easy, yet vital part to display your movie properly. Within your graphic editing program, create two masks: one for the window area and one for the drag area.

The window mask will provide the outline for QuickTime to determine the form in which to present your movie. For example, if the skin is of a television, the window mask will be in the shape of a rectangle. The window mask should essentially be a completely black representation of your skin image.

The drag mask will provide QuickTime the information on where a viewer can click in order to drag the window around the screen. This mask should be a replica of your window mask, with the exception of providing white areas where your movie or its controls will show through. Figure 7-6 shows the window and drag masks for the television skin.

Figure 7-6. A window mask (left) and a drag mask (right)

After you have created your window and drag masks, save them as individual files. You should now have three files: your movie and skin as a self-contained movie, your window mask, and your drag mask. Place the three files inside the same directory on your computer.

7.2.6. Bringing It All Together

The final step in creating your skinned movie is to combine your three files into one standalone movie. To do so, type the following into a text editor:

 <?xml version="1.0"?> <?quicktime type="application/x-qtskin"?> <skin> <movie src="myMovie.mov"/> <contentregion src="myWindow.tiff"/> <dragregion src="myMask.tiff"/> </skin> 

Your images can be in any QuickTime-compatible format. They do not need to be TIFFs, though that is the format used in this hack.

Replace myMovie.mov with the name of your movie file, myWindow.tiff with the name of your window mask file, and myMask.tiff with the name of your drag mask file. Then, save the skin text document to the same directory where your three files are located and name it using the .mov file extension for example, mySkin.mov.

Open the skin text file using QuickTime Player. Your new movie should appear within the window you've designed. Figure 7-7 shows a completed movie using a QuickTime skin. Notice the absence of QuickTime controls.

Figure 7-7. A skinned movie being played

There are no longer any controls for the movie, so set the movie to Auto Play. Bring forward the movie Properties window by choosing Movie Get Movie Properties and then select Auto Play from the second pop-up menu. Simply check the Auto Play Enabled checkbox.

Your movie is now compiled and configured. The last step is to save your movie, making sure to select "Make movie self-contained," and distribute it.

7.2.7. Hacking the Hack

How would you like to be able to present your video in the shape of an octagon? Or the shape of a star? Well, instead of surrounding your video with an image, simply create an outline of the shape with no considerable border. Figure 7-8 shows an odd-shaped movie being played.

You can also take a more traditional approach to skinning and include controls to handle the play, stop, fast-forward, and reverse functions. By using an application such as LiveStage Pro (http://www.totallyhip.com; $449.95), GoLive (http://www.adobe.com/products/golive/; $399), or Flash MX (http://www.macromedia.com/software/flash/; $499.95), you can create control buttons and add them to your movie, just like you add a skin. These programs unlock more potential than just adding control buttons, so you'll be able create truly interactive movies.

For example, with the television skin, you could create a toggle button that hides the video and mutes the audio, while still keeping the movie playing. When a user clicks the button, the television would seem to turn off, and when the user clicks the button again the television would appear to turn on, as the video would have progressed in linear time (because it continued to play).

Figure 7-8. Displaying a uniquely shaped movie in custom skin