Tutorial: Page (1) of 4 - 09/03/01 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Gimme Some Skin

Easily create unique brands for your media By Stephen Schleicher

Clip art is a great source for finding skins for your QuickTime movies.

The Window Mask will define the area of the stand-alone skin.

The Drag Mask defines that area of the movie which can be moved around the screen.

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.

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.

Gimme Some Skin
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.

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.

Page: 1 2 3 4 Next Page

Related Keywords:web, streaming, webcast, Webcasting, QuickTime 5

Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved