Alpha Video and HTML: How did they do that?

By: Tom Green

Page 1 of 1

Set for printing

I used to love going to Ellen Degeneres' site. I could always count on something happening like Ellen setting the page on fire with an out of control BBQ or seeing her welcome me to her site and then watching her "ding" items on the page with a Pea Shooter. What always caught my attention was the fact there was a video over the web page and you could see right through it to the content under the video.

This obviously happens with an Alpha Channel video but prior to the release of Flash 8 and the inclusion of Alpha channels in the FLV this sort of thing was rather complex. In the process of thinking about a book, my co-author Jordan Chilcott and I decided to include something like this in one of our chapters. Turns out it is not terribly difficult to achieve. You just have to think a bit differently.

The key to the process lies in the Object/Embed tags used to embed a Flash SWF file in a web page. They simply tell the browser how to handle the SWF file, which SWF to use , where it is, and its dimensions. One of the neat things about the Object tag is the ability to add parameters to the content enclosed in the tag. Combine that with an absolutely positioned div in a Layer and you have the ability to lay a SWF with an Alpha channel over your web page.

Considering how we had just released the Inverness JumpStart, I thought I would have my pal Betina wander across the Home Page and check out the list of bloggers. As you can see in the image below, she finds the line up quite interesting.

Video over a web page
Image 1 : " Isn't Horvath that cool kid with the cool shades? "

The first thing to do is to create a FLV with an Alpha channel. If you have never done it, check out these CMX articles:

With the FLV in hand I opened up the Inverness JumpStart and added the following div to the CSS Style sheet:

#videoLayer {
position:absolute;
width:700px;
height:204px;
z-index:1;
top: 314px;
left: 125px;
}

This creates an AP div that is the width and height of the FLV file, sits above the web page and is positioned in such a way that the subject will walk across the page. The SWF was then imported into the page and placed in that div.


Image 2: The SWF is placed into the videolayer div.

The final step is to open the code view of Dreamweaver 8 and change the parameters in the Object/Embed tag to:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,19,0" width="400" height="400" id="videoLayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=betina
&autoPlay=true&autoRewind=true" />

<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=betina
&autoPlay=true&autoRewind=true"
quality="high" scale="noscale" width="700" height="203" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent"/>
</object>

The key to this code is the wmode parameter. By setting its value to transparent you are making the background invisible. If the value wasn't transparent, the video would appear over the page as a big, ugly white or black box, which sort of defeats the purpose of this exercise. The FlashVars parameter loads in the skin added in Flash if the video uses a skin.

If you want to see this example in action, click here.

Conclusion

You don't always need to get fancy when working with Flash Video. As long as you have a FLV with an Alpha channel you can do some some pretty impressive things without a knowledge of Flash. In this exercise we simply inserted a few Parameters into the Object tag to have a "Talking Head" appear above a web page. The key is the transparent value in the wmode parameter. Couple that with an AP div that is positioned above the page and now you know how Ellen did it.

Approximate download size: 1.5MB

Page 1 of 1 1


download
Download Support Files


Keywords
Dreamweaver 8, Flash, Flash Video, Alpha Video,Flash Professional 8, HTML