Creating a Skin Track with QuickTime became possible with QuickTime 5.
The hardest step is designing the user interface and laying out the controls for navigation since a skin will entirely replace the QuickTime Player user interface. Under normal circumstances, you will want to deploy a skinned movie in the QuickTime Player as opposed to using the plugin. Later we will see a technique whereby we can target the QuickTime Player, automatically go into full screen presentation, play the movie, and then quit the Player.
The benefits of movie skins are great in that you can enhance the user experience by creating an "atmosphere" and custom environment which best displays the content.
View the completed project by opening the file "FinalSkin.mov" in the QuickTime Player.
Notice that this movie is set to autoplay and opens in a floating window which bears no resemblence to the QuickTime Player interface. There are controls for starting and pausing the video as well as a close window button. It is very important when deploying QuickTime skins to provide the user with the ability to control the movie as well as close out without having to use menu commands.
1. Begin by viewing the two versions of the design interface (Skin.gif and Skin2.gif). This is what the user will see minus the video content. Skin 2 has included, as an option, the layout for placement of the video track.
2. Open the other two gif files (WinMask.gif and DragMask.gif). Masks are black and white bitmaps that will describe areas of transparency and also indicate those areas that are "draggable". Normally, you don't want to allow the user to be able to drag the window around by clicking and holding in an area that is active or functions as a button. Notice the differences between the two masks.
3. Open the movie "HipBot_video.mov" and "Skin2.gif" in the QuickTime Player. Select All and Copy the contents of Skin2.gif. Select the HipBot_video.mov movie and choose Select All under the Edit Menu. Then choose "Add Scaled" from the Edit Menu. This combines the interface with the video for the whole duration of the video movie.
4.The Skin2.gif interface is covering the video so we need to change the layer and move it to the background. In the Movie Properties window, choose Video Track 2 and on the right pop-up choose Layer. Changing the layer to +1 should move it to the background. Higher numbers are further back in the stacking order.
5. Now we need to move the Video 1 layer in position as outlined in the background. Again with the Movie Properties window, choose Video 1 and on the right pop-up choose Size. Click Adjust and then click on your movie window. Drag the video into the frame. You can use the arrow keys to make fine adjustments. Click Done when the video is in place. Test your movie or see "HipBot_video_framed2.mov" to see this step completed. Save as Self-Contained Movie.
6. It's now time to transform this framed video into an actual skin movie. This is accomplished in an interesting way by using a text editor and composing a short XML document. See the file "SkinXML2.txt"
Here is proper syntax:
<?xml version="1.0"?>
<?quicktime type="application/x-qtskin"?>
<skin>
<movie src="HipBot_video_framed2.mov"/>
<contentregion src="WinMask.gif"/>
<dragregion src="DragMask.gif"/>
</skin>
The magic occurs when this text file is renamed and saved with the .mov extension. It transforms the elements described into a QuickTime movie with a Skin track.
Unfortunately, the Start and Pause Button functions, as well as the Close Window function, need to "wired" in LiveStage or Adobe Golive. At present, the QuickTime Player does not feature a wired sprite editor for adding this capability. The movie "FinalSkin.mov" contains the wired sprite functions.
For another good example of a QuickTime Skin Track, open the file "click_me.mov" inside the folder "CrazyOnes_Skin"