What's New in QuickTime 5

| Previous | Chapter Contents | Chapter Top | Next |

Creating Media Skins

A media skin can be added to a movie using a text editor, a graphics program such as Adobe Photoshop, and QuickTime Player (Pro version).

In a typical case, you might want to replace QuickTime Player's brushed-metal frame with one of your own design, as shown in Figure 10 . Here are the steps that you would follow:

  1. Create an image of your new frame using a graphics program, or perhaps scan in a photo of an actual device.

Figure 10 A newly created frame with space for controls and movie playback that replaces QuickTime Player's brushed-metal frame

  1. Open this image in QuickTime Player and add it to an existing movie as a background image, as shown in Figure 11 .

Figure 11 A new frame image added to an existing QuickTime movie as a background image

  1. You would also typically create your own movie controls, using Flash or wired sprites (and a wired sprite editor such as LiveStage Pro or Adobe's GoLive), and add these as a Flash track or sprite track on top of your frame image, as shown in Figure 12 . Call this Framed.mov .

Figure 12 Movie controls added as a Flash track or wired sprite track on top of your frame image

  1. Create a mask image the size and shape of your frame ( Figure 13 ). This image defines the window created when your movie plays. The image should be black where you want your window, and white elsewhere. The image can be a BMP, GIF, PICT, or any other format that QuickTime understands. Call this WinMask.pct .

Figure 13 A mask image which is the size and shape of your frame

  1. Create a second mask image the size and shape of the draggable part of your frame ( Figure 14 ). Typically, this would be the same as your first mask, with white areas where your text, video, and controls will appear. Again, this should be saved as a black-and-white image in a format that QuickTime can display. Call this DragMask.pct .

Figure 14 A second mask image which is the size and shape of the draggable part of your frame

  1. Using a text editor, create a small file with the following syntax:
<?xml version="1.0"?>
<?quicktime type="application/x-qtskin"?>
<skin>
    <movie src="Framed.mov"/>
    <contentregion src="WinMask.pct"/>
    <dragregion src="DragMask.pct"/>
</skin>

  1. Save as plain text, with the .mov file extension. Call this SkinXML.mov .
  2. Open SkinXML.mov using QuickTime Player. Save as a self-contained movie. Call this Finished.mov .

Be sure to save your movie, in this case Finished.mov , as a self-contained movie, and distribute the self-contained version, not the XML text file. The XML text file is dependent on external files and will not Fast Start over the Internet. The self-contained version will Fast Start.

You can now put Finished.mov on a CD, email it to a friend, or embed a link to it in a Web page. You can target the link to open your movie in QuickTime Player using the EMBED tag. For example:

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

This tag would embed a QuickTime image file named poster.qtif in a Web page. If the viewer clicks the image, QuickTime will launch Finished.mov in the QuickTime Player application.

To launch Finished.mov automatically, without the viewer clicking anything, you add AUTOHREF="true" to the EMBED tag.

The example just given uses a static image as a custom frame, but remember: a media skin just provides masks to use when displaying your movie. Any visual media type can show through the masks, including motion video and special effects, such as those possible with the QuickTime cloud or fire effects.

Any part of your movie can be made into a draggable region. However, tracks that respond to mouse events, such as VR panorama tracks or wired sprite tracks, should not be covered by a drag mask -- the drag behavior prevents mouse events from reaching underlying tracks.


© 2001 Apple Computer, Inc.

What's New in QuickTime 5

| Previous | Chapter Contents | Chapter Top | Next |