Transparent Flash Video overlay on html page
I was asked today how to create a web page with transparent flash video like that in : http://www.livefaceonweb.com/samples.aspx
It was actually quite simple to do that. Here are the basic steps:
1. Use a green/blue screen video with After Effects CS4. Do a chroma key with the Keylight effect.
2. Render the video as flv (On2VP6) and make sure you select the `”Encode Alpha Channel”box.
3. Bring the flv into Flash CS4 and make an swf file.
4. Add the swf into your web page using Dreamweaver CS4. And set wmode as “transparent”. BTW, Dreamweaver CS4 now has better code when importing swf.
That’s it. Simple.
Brian, I know this is not on topic, but I and another person have submitted questions recently on another entry of yours, having to do with putting multipe FW slideshows in a DW website. Can you look at these postings from myself and John at the bottom of the page to this link on your blog http://brianchau.wordpress.com/2007/06/28/cool-fireworks-cs3-slideshow-command/
Any help would be greatly appreciated.
[...] BTW, Dreamweaver CS4 now has better code when importing swf. As seen on Transparent Flash Video overlay on html page Brian Chau Besides the above they seem to have good know how in basic image editing, basic 3d animation, 2d [...]
Video on websites - the next generation - Page 2 - Video Editing Forums: Digital Director said this on June 16, 2009 at 1:52 pm |
Brian my names andrew and i really could do with some help.
My programmer is trying to create a universal code which will cause the alpha channel flash overlay to work over every web site via a demonstration mode. if you go to webactors.co.uk you will see a try now mode at the bottom of each page this works on most sites but not all….can you help
Andrew. It is quite a nice site. I tested on a few sites with IE8 and they all worked. Do you know if the transparency was done by setting the WMode to transparent? Which site isn’t working?
Thanks for the response, I am not technical enough to answer the wmode question. one site as an example is http://www.ecubedistribution.com if you try that in our demo box and then try it in the demo box of a company called webpeople.us although the actor is smaller and off centre you can see that she still appears in front…….what are they doing we are not?
The problem with that page is because it has another flash movie that is on top of your flash movie. One way to overcome that is to set the z-index of each div (container) that hold the flash movies. In other words, control which is on top using CSS which is a web standard way of controlling the layout of the web page.
Thanks Brian, apprently this was the first thing that was tried but did not work…any other suggestions please.
I can’t see why it wouldn’t work. I have created a web page with 2 flash movies. Each in a div tag. I set the z-index of each div tag and can control the stacking order of the swfs.
Hi Brian, I have a similar problem…how to make a FLV semi-transparent on a web page… like a video projected on a brick wall so you can still see some of the texture of the wall?
I’ve seen the people with alpha keys, but in this case I want the whole video to show up at somewhere between 50 & 70% transparency.
Thanks for your help.
Andy, you would need to have the a transparent video (32-bit) to start with. Then encode the video with On2VP6 codec and make sure you selected the alpha transparency click box.
i’M HAVING TROUBLE WITH THE .FLA TO SWF CONVERSION, THE AUDIO KEEPS GETTING OUT OF SYNC WITH THE IMAGES. ANY IDEA WHAT I’M DOING WRONG?