Transparent Flash Video overlay on html page

I was asked today how to create a web page with transparent flash video like that in :

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.


~ by brianchau on April 8, 2009.

41 Responses to “Transparent Flash Video overlay on html page”

  1. 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

    Any help would be greatly appreciated.

  2. […] 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 […]

  3. 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 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?

  4. Thanks for the response, I am not technical enough to answer the wmode question. one site as an example is if you try that in our demo box and then try it in the demo box of a company called 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.

  5. 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.

  6. 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.


  8. 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 ?



  9. Good blog, userful, thanks.

  10. 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
    where you can change the homepage or the id, you can use any homepage instead of and you can also use id=1
    Do you have any idea how to make it work.

  11. 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

  12. Brian i need help on doing my vest transparent video.

  13. 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.

  14. […] article: Share: This entry was posted in Dreamweaver, Website design and tagged After Effects, Brain Chau, […]

  15. 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.

  16. is it possible to execute similar videos on sites powered by

  17. 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.

  18. 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.

  19. Love your post, thanks for sharing!

  20. 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.

    Thanks for your feedback..

  21. […] Transparent Flash Video overlay on html page « Brian Chau. […]

  22. Cool tut Brian. This helps me!

    Any idea how I could include a video like this with another swf file already inplace?

  23. wonderful! anyone with ideas how to easily do this in wordpress…ssooo many video plugins out there, what to sort through!

  24. 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.

  25. It is amazing how much time we spend to save $100. I found the people at 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.

  26. 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.

  27. At this time I am ready to do my breakfast, after having my
    breakfast coming over again to read more news.

  28. 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.

  29. you have a usefull blog, i will comeback for more.

  30. 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

  31. You’ve really helped me understand the used car buying process. Buying a vehicle report is important!

  32. If you want to get much from this article then you have to apply such strategies to your won weblog.|

  33. You re right. Don t know how that happened, but it should be fixed now.

  34. Thank you for this wonderful content.

  35. I’m very lonely

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: