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 Sites: Creative Mac ,   Digital Producer ,   Corporate Media News ,   Digital Game Developer ,   Digital Media Designer ,   Presentation Master ,   Oceania ,   MacVideoPro
Related Newsletter: DMN Newsletter ,   CMN Newsletter ,   Timeline Newsletter ,   Pixels Newsletter ,   Levels Newsletter ,   Mac Alert Newsletter ,   KNews Newsletter ,   Digital Media Net ,   Tutorial Finder
To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Gimme Some Skin by DMN Editorial at Aug. 03, 2004 10:07 pm gmt (Rec'd 1)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)

  • DMO TEXT LINKS
    (Click here to place a textlink on this site)

    Keep your camera rolling with Sony Mobile Storage for XDCAM EX Camcorders.
    Offload SxS memory cards onto 240GB HDD removable cartridges and accelerate your workflow on the go.
    Click Here!!!

    Vegas Pro 8 + Free Vegas Seminar Series
    Master classes for cutting-edge video production
    A $100 value free with purchase
    CLICK HERE!!!


    raid array
    HP ProLiant DL360 G5 1U Intel Server - Quad-Core Intel Xeon E5405 2.0GHz / 1GB FB PC2-5300 / Smart Array E200i/64MB (RAID 0/1/1+0) / 4x 2.5 Bays / Slim 5.25 Bay / 2x Gigabit LAN / 700Watt PSU
    By HP (Hewlett-Packard), start from $ 1750.00
    HP Smart Array P212/256MB Controller - Storage controller (RAID) - SATA-150 / SAS low profile - 300 MBps - RAID 0, 1, 10 - PCI Express 2.0 x8
    By HP (Hewlett-Packard), start from $ 354.45
    Smart Array E200i SAS controller - PCIe Serial Attached SCSI (SAS) RAID controller card (Part of 399
    By HP (Hewlett-Packard), start from $ 82.00
    G-Technology G-RAID2 500GB - hard drive array
    By G-Technology, start from $ 361.99
    Platinum RAID SATA-Ultra320 SCSI - 3.75 TB Desktop Hardware RAID Array External Enclosure
    By MicroNet, start from $ 2131.99
    HP Smart Array P411/512MB BBWC - Storage controller (RAID) - SATA-150 / SAS low profile - 300 MBps - RAID 0, 1, 5, 10, 50 - PCI Express 2.0 x8
    By HP (Hewlett-Packard), start from $ 498.99
    HOT THREADS on DMN Forums
    Impasto didn't take further variations (6) • by Zen on the on the Corel Painter forum New Paint Patches (6) • by David Nagel on the on the Synthetik Studio Artist forum Need help re-creating AMERICAN IDOL Logo (4) • by Anthony Russo on the on the Adobe Photoshop forum New FCP user can't connect to GL1 (4) • by scheffler on the on the Apple Final Cut Pro forum quick technical question (3) • by craigdeeley on the on the Synthetik Studio Artist forum Beeping as I play video in Viewer (3) • by Dan Haythorn on the on the Apple Final Cut Pro forum background encoding (3) • by Peter Hickson on the on the Apple DVD Studio Pro forum
    Dexim P-Flip Power Play Dock for iPhone/iPod touch
    polymer battery all in one neat device. Plug the P-Flip into your computer to charge its battery, then plug your iPhone into the P-Flip, and it charges the iPhone battery. Read More
    Apple Intros iPad
    After years of hype, Apple, Inc. today introduced the iPad, a portable computing device that looks like a big iPhone. Introduced today by Apple CEO Steve Jobs, the iPad features a touchscreen keypad, wireless capability, the capability to run all iPhone applications, all in a form factor that fits in between an iPhone and a MacBook. With the iPad, you can play movies, load maps, view photos, update your calendar, basically do the same things as on an iPhone, and more. Read More
    HDTV Buyer's Guidelines
    When it comes to choosing between Plasma and LCD, it's important to shop in the mindset that one high-def TV is not necessarily better than another - rather, it's a question of which one is right for you. That said, it can be a tough call to make when all that meets the eye are sleek screens and vibrant pictures - are Plasmas and LCDs really that different? Read More
    Tritton AX 180 universal gaming headset
    The Tritton AX 180 universal gaming headset is designed to work with the three major gaming platforms (Wii, xBox 360, and Sony PlayStation 3, via analog inputs), but also with both Macintosh and Windows based computers. Read More
    @ Copyright, 2010 Digital Media Online, All Rights Reserved