TrafficBumper.com

Increase Website Traffic With Web Marketing Video

TrafficBumper.com header image 2

How to Make a Transparent Video Using Adobe After Effects

June 12th, 2009 · Comments

Perhaps you have seen websites using transparent video and wondered, “How did they do that?”

The subject is videoed in front of a green screen.  Adobe After Effects keys out the green screen using a multitude of different keying systems.   Without a doubt, the easiest and best keying system offered by Adobe is the Keylight (1,2).  After Effects then renders the alpha channel version of the video in FLV using On2 VP6 codec format.

This keying method was used in the following scores of films: Harry Potter and the Chamber of Secrets, Die Another Day, Blade 2, Resident Evil, Harry Potter and the Sorceror’s Stone, the Beach, Notting Hill, Sleepy Hollow, Chicken Run, Lost in Space, The Hudsucker Proxy, The Truman Show, Armaggeddon, The Big Lebowski, Mission Impossible, Last Action Hero, The Saint, Strange Days, Little Buddha, Waterworld, The Quick and the Dead and many, many more.

Once you have used Adobe’s Keylight (1,2) to make the background transparent, you must use special software to show your transparent video.  The transparent video lives in a layer called dhtml and the video shows the alpha channel video without a background. The background that you see, is the web page. It is a nice effect.  Since the video is created without a background, you see just the subject.  Actually, the background was a green screen or a blue screen.  By using After Effects, you key out the background and you end up with just the alpha channel.  Here is an example page using transparent video, RichDayHealthPlans

You must purchase the correct software, to show the alpha only, but it isn’t too expensive.  I use Josh Anderson’s transparent video product because it has many features such as the video staying on the page as you scroll. You can trigger another video after the first one is done running. You can scroll down to a particular portion on a page, such as the sign in form. These are just a few of the features.

Although this is a more advanced video style than just uploading a video to YouTube, it pays off rather nicely.  You may have some trouble finding After Effects software on eBay or elsewhere.  It isn’t sold as a separate item.  You need to purchase one of their suites of products.  Actually, you could download their software and test it for 30 days.  Perhaps you could even do what you need to have done in 30 days.  Take the time to learn how to do this and you will be on the cutting edge of website marketing using website video.

Tags: Video Marketing · video

  • I really like the transparent videos you have done Rich.

    That was a good demonstration video too. Thanks.
  • Richard, thank you so very much for this training! Now I need to work a little harder to be able to afford Adobe After Effects Josh's product.....gotta have it. You-Da-Man!!!
    Bill
  • I remember when I was trying to find out how they did it. I would have been very happy to come across a video like this. They are more plentiful now, of course.

    I have been asked many times whether I would do the Adobe After Effects portion for people. I have regularly said no. However, that is such a big hurdle, I will entertain doing it for people for a fee. How much? I don't know. Let's talk.

    Concerning Josh's product: It is the best. You can click on my link in the article if you need to get a copy for yourself.
  • carol
    Thanks for showing that but you didn't show how to actually overlay the video on a website. Can you do that?
  • I am busy working on that video now. It will take a while since I want to make it easy. Making it look easy is harder to do.

    Stay tuned...
  • andy_r
    Hi there,

    So this is the only way of doing this i.e having a green (or i assume any coloured screen) behind the person as long as the person is not wearing that colour ??

    For exmaple you couln't do it with an everyday background ??

    Great video and thanks for any help.
  • That's right. It needs to be a continuous color. Usually it is a blue screen or a green screen. The reason for a green screen is that you can chroma screen it out and not affect skin tones.

    Therefore, you'd probably be better off if you use a green screen. It will work with people and anything else.
  • vikasseo
    Nice tactics mentioned.
    Hope it would help
blog comments powered by Disqus