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 Chau 
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 https://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?
I hear typing in capital letters makes flash not work but that’s just a rumor. I don’t know it’s worth a shot though.
If you are referring to the Actionscript, yes it is case-sensitive.
Brian
I like the pop up messages on your links here. I understand it is done thru css. Can you tell me how to do it on this bloag ?
Thanks
dalitec
Good blog, userful, thanks.
Hello Brian.
Thanks for a good blog.
I am trying to make a page that can be put over an existing site. like the link below
http://screenbooster.net/demo/demo.php?homepage=veromoda.bestsellershop.com/&id=40
where you can change the homepage or the id, you can use any homepage instead of veromoda.bestsellershop.com and you can also use id=1
Do you have any idea how to make it work.
Thanks
Klaus
Hello again.
I allready got the video on greenscreen to work, thanks to your first answer on this blog, (remember to convert the flash film to a moovieclip though) although I also have audio sync problems, but I think I will fix them today.
Best regards
Klaus
Brian i need help on doing my vest transparent video.
I did shoot couple videos on a green screen but all my editing i use an mac (apple), also i ‘m not too familiar with the codes you mentioned.
Looking forward to hear from you.
[…] article: https://brianchau.wordpress.com/2009/04/08/transparent-flash-video-overlay-on-html-page/ Share: This entry was posted in Dreamweaver, Website design and tagged After Effects, Brain Chau, […]
Transparent Flash Video Overlay on HTML Page said this on December 13, 2010 at 2:20 am |
Brian,
Awesome and simple stuff, love it and thank you.
I’m trying to create the Walkon Person for a website.
I’ve made the video, I’ve created the swf file.
Now What do I do to place it in the lower right corner and lock it. I’m more of a video guy than the WEB guy that I used to be back in the day. I can follow some pretty simple instructions and know just enough to be dangerous, just need the right direction to start out on.
Thanks if you reply.. email is listed here for a reply.
is it possible to execute similar videos on sites powered by wordpress.org?
Brian, I am trying to have an overlay (border) while on top a flash gallery file. I cannot find any scripting or process to do this. I would like the border (same size as flash file) to be on top of the flash file, to give effect the flash is under the border, which is border of red curtains. Please help…PS: like all you info, has been helpful.
This is a very cool method. However, Is it possible to incorporate this technique in wordpress platform? This should be very useful though, and with using wordpress as your CMS, everything would be much easier.
Love your post, thanks for sharing!
I am not a web developer. I am curious as to how the flash overlay is done on the following. When you play it, make sure the tab (overlay) is showing and not turn off.
http://www.bing.com/videos/watch/video/acoustic-guitar-lessons-stand-by-me-tab-included/48285e1958154c16380148285e1958154c163801-958950737005?q=stand+by+me+tab+video&FORM=VIRE1
Thanks for your feedback..
[…] Transparent Flash Video overlay on html page « Brian Chau. […]
Cool tut Brian. This helps me!
Any idea how I could include a video like this with another swf file already inplace?
wonderful! anyone with ideas how to easily do this in wordpress…ssooo many video plugins out there, what to sort through!
can you recommend a control bar app that is easy to use – I already know how to do the alpha channel overlay. But I want to control the video stop and start or play again.
It is amazing how much time we spend to save $100. I found the people at Tweople.com will take care of it all when I give them my raw video. No more messing around- I shoot it- they do the rest. And it’s cheap but good.
Normally I do not read article on blogs, however I wish to say that
this write-up very pressured me to take a look at and do so!
Your writing taste has been amazed me. Thank you, quite nice post.
At this time I am ready to do my breakfast, after having my
breakfast coming over again to read more news.
It is within the skin that this 9800GT gains some new technologies in the 8800GT.
According for them, the 3Dmark scores allow it’s
users to “accurately measure the performance of the newest 3D graphics software technology on the most recent 3D hardware. Video Card and Processor: If you’re at all like me, you must do some investigation with regards to it card as well as the processor.
you have a usefull blog, i will comeback for more.
Even though this is very good site. I’d to advise to filmmakers to check out Punch Television Studios due to the fact that they are supplying funds for producers up to one hundred dollars thousands dollars to make a movie with their studio. They ought to look into it. #punchtv #josephcollinspunchtv
You’ve really helped me understand the used car buying process. Buying a vehicle report is important!
If you want to get much from this article then you have to apply such strategies to your won weblog.|
You re right. Don t know how that happened, but it should be fixed now.
Thank you for this wonderful content.
I’m very lonely
Thank you very much for the interesting post!
Best regards:George W.
Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.