This article is based on a tutorial from http://www.apple.com/

QuickTime 5 introduces Media Skins, which revolutionizes the industry's concept of 'Skins'.

Unlike conventional skins, which simply allow users to decorate their media players, QuickTime media skins gives authors the power to control the unique environment in which their media is displayed.

The new environment, or player window, can be any shape or size, and created in any of the dozens of file formats QuickTime supports. Playback controls (if desired) can be placed anywhere.

QuickTime media skins are delivered to the user along with the media file, allowing authors to offer unique and compelling experiences specifically for their own content.

And, best of all, since QuickTime 5 Player is robustly AppleScriptable, content authors can easily add media skins to content with an automated batch process.

NOTE:
Before proceeding further, there are three applications you need to create a media skin. The first is a text editor such as SimpleText or BBEdit. The second is a graphics application such as Adobe PhotoShop. And the third is QuickTime Pro 5.

DESIGNING SKINS USING ADOBE PHOTOSHOP

You can use most any graphic editing software to design media skins, but ones which support layers will make your work easier. As the de-facto standard for graphic design and image editing, Adobe PhotoShop may be your best choice. However, you can also use Adobe Illustrator, Macromedia Freehand, GIMP (for MacOS X), etc.

When designing your skin, you will need to output three image files: a Skin, a WinMask, and a DragMask. These files should be saved as PICT files (with the suffix ".pct"). Organize these images as layers in your PhotoShop document so it looks something like the image at left.

In your design, you will have to make a window for your video to appear. This window can be the same size as your original video, or it may be smaller. Keep in mind that if your video window is smaller, parts of the video image may be blocked out. However, there are a multitude of creative possibilities that can be achieved, including irregular shapes such as trapezoids, circles and ovals.

Save these three files as follows:

• Skin.pct
• WinMask.pct
• DragMask.pct

STEPS TO CREATE A MEDIA SKIN AROUND A VIDEO

1)

Add media skin to your video movie using the add-scaled command.

2)

Create B/W images to define window and drag areas (masks).

3)

Create XML text file containing references to your files.

4)

Save the text file with a name ending in .mov.

5)

Open in QuickTime Player, then Save as Self-contained.

1) Add media skin to your video movie:
	Video Movie Start with a QuickTime video movie which you want to enhance with a media skin. Let’s call this Video.mov.
	Media Skin Create an image of your new media skin. Use a graphics program and create one from scratch, or perhaps scan in a photo of an actual device. This frame can be created in any file format that QuickTime supports. Let’s call this Skin.pct. Note: Within this image, it is helpful to specify the area in which your movie will be displayed, especially if you plan to use transparency (see below). This area can be square or nonsquare. Just fill this area in with black or white.
	Combine Video Movie and Media Skin Open both the media skin (Skin.pct) and the video movie (Video.mov) in QuickTime Player Pro. •  Add Scaled: Copy the media skin then switch to your video movie and combine them using the Add Scaled command (under the 'Edit' menu). Note: For detailed help on using QuickTime Player Pro, consult the help file available under the Help menu.
	• Adjust Layers/Position: Under the Movie menu, open the Get Movie Properties window. In the Properties window you will be able to make all kinds of different adjustments to your movie.
	In the Properties window, select the Video Track for the movie. You video should be on Video Track 1, while your skin should be on Video Track 2.
	In the Properties window, select the Layer option. Adjust the Layer numbers to place the video either behind in in front of the skin. Higher numbers are further back, while lower numbers are further forward. If you want the video to play through transparent areas of the media skin, set the video track to the background (a higher number). In the next step you can modify the Graphics Mode for your Skin track to be Transparent and set the transparent color (usually black or white). Your video track will show through this area.
	Select the Size option in the Properties Window. Then click on the "Adjust" button, and you will see a red box appear around the video in the MoviePlayer window. Click in the MoviePlayer window, and you will be able to drag the video to position it correctly. You can also use the arrow keys for exact placement. Note that you can also resize the video by clicking and dragging on the corners of the red box, as well as rotate it to change the orientation by clicking and dragging on the center red circle. When you are finished adjusting the position of the video, click "Done" in the Properties Window.
	If you want to create a transparent mask in the skin through which the video will show through, there are two steps involved. First, select the Graphics Mode in the Properties Window. Select "transparent" from the menu and click on the Color button to set the transparency color. In this example, the transparency color is white.
	Next, select the Mask mode in the Properties Window. Click the "Set" button, and select your "DragMask.pict" file. By completing these last two steps, you should see your Video layer showing through the transparent area in your skin.
Note: This example uses a static image as a media skin, but remember: a media skin simply provides a shape, or mask, to use when displaying your movie. Any visual media type can show through the mask, including motion video, and special effects, such as those possible with the QuickTime cloud or fire effects. You may also add your own movie controls such as a sprite or Flash track. You can create your own movie controls using wired sprites (and a wired sprite editor such as Totally Hip’s LiveStage Pro or Adobe’s GoLive) or use Macromedia’s Flash.

2) Create Window and Drag Mask Images Note: if you already made your WinMask.pct and DragMask.pct files while creating your skin in PhotoShop, you can skip this step.
	Window Mask Create a mask image the size and shape of your frame. This black-and-white 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. Let’s call this WinMask.pct .
	Drag Mask Finally, create another mask image the size and shape of the dragable part of your frame. 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. Let's call this DragMask.pct .

3) Create text file:
	Using a text editor, create a small file with the syntax below (notice the references to your files): <?xml version="1.0"?> <?quicktime type="application/x-qtskin"?> <skin> <movie src="Framed.mov"/> <contentregion src="WinMask.pct"/> <dragregion src="DragMask.pct"/> </skin>
4) Save with a name ending in .mov:
	Then save as plain text, with the .mov file extension in the same location as your other files. Let's call this SkinXML.mov. Note: Mac users, do not be alarmed when the resulting file appears as a movie instead of a text file. This is a feature of QuickTime.
5) Open/Save in QuickTime Player:
	Open SkinXML.mov using QuickTime Player Pro. Save as a self-contained movie. Let’s call this Self-contained.mov. IMPORTANT Be sure to save your movie as a self-contained movie, and distribute that 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 your movie on a CD, email it to a friend, or embed a link to it in a Web page. Additional Information:
	Link to QuickTime Player To share your work on the internet, link to your movie using the EMBED tag. For example: <EMBED SRC="poster.mov" TYPE="image/x-quicktime" HEIGHT=120 WIDTH=160 HREF="Self-contained.mov" TARGET="quicktimeplayer"> This tag would embed a QuickTime image file named poster.mov in a Web page. If the viewer clicks the image, QuickTime will launch Self-contained.mov in the QuickTime Player application. TIP: To launch your movie automatically, without the viewer clicking anything, you add AUTOHREF="true" to the EMBED tag. About Dragable Regions Any part of your movie can be made into a dragable 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. Requires QuickTime 5 Movies with media skins can be played only by viewers who have installed QuickTime 5. Viewers with earlier versions of QuickTime will not be able to open these movies. Current Limitations Currently, a movie can have only one skin track. You cannot dynamically enable or disable skin tracks. The skin track’s masks are stored in the movie file as 1-bit pixel depth PICTs and cannot be changed dynamically. Click here to see the finished movie.