View Full Version : Green screen / Chroma Key question

10-09-2012, 05:28 PM
I'm sure this topic has been covered a zillion times before... And I don't even know if this the proper forum for my question. But if it's not hopefully someone here can point me in the right direction.

I've done a few web videos for several clients, but mainly simple stuff. Shoot video, edit in Premiere Pro, post on the web. About the farthest I've ever gone with special effects is shooting myself reading a teleprompter in front of a green screen, keying out the background and superimposing myself in front of a different location. That was simple enough. But I have a potential client asking if I can shoot him in front of a green screen and superimpose him over a web page. You have all seen the effect I'm sure, the client walks onto the web page, delivers his/her message, and then 'poof' he/she is gone.

How the heck is that effect achieved?

Any advice is appreciated.

10-09-2012, 05:35 PM
For a real web page, you record the footage, do the chromakey and delivery a MOV in PNG codec or other format that supports transparency, so the web designer can use your footage in the site.
Now, if it is just a video, use a compositing software, produce the web site arts and merge them adding some cool effects.


10-09-2012, 07:05 PM
thanks Ulisses,
this first job would be for a web designer for his company's website. he likes the idea of walking onto his home page, delivering his message, and then disappearing with a graphic appearing in the space where he had been...or that graphic had been there all along.

10-09-2012, 07:56 PM
So just delivery a keyed footage (transparent background), for better quality you should scale the image down to the size he will be using.

10-10-2012, 05:04 AM
32-bit .png.....the alpha channel is built-in. Some webbies are fine with an image sequence.

Michael Carter
10-10-2012, 12:27 PM
Are you compositing him over the actual web page or in a video frame, over an image of the page?

last time I worked on something like the "actual web page", it required flash and an alpha channel. There's plenty of tutorials online regarding this - be aware it won't work on iOs browsers - though there may be an HTML5 solution these days.

Far as i know, PNG isn't a video codec - that would be an image sequence?

10-10-2012, 12:59 PM
PNG is a quicktime codec, just like PHOTOJPG.
If it is flash, the web designer can open the MOV in Flash and convert to the format/settings he wants.

10-10-2012, 01:52 PM
currently in flash there was only VP6 codec including alpha, and flash was used because you can find several player that can play video without any windows frame or button visible. The problem with quicktime, is you need to install it for windows (still the main PC platform sold across world, so you can hardly skip on it.)
html5 has already several nice players, but again, most of them need to be installed first, so usually pages requiring to install plugin are seen "unfriendly" while flash is better know as "must have".

It seems HTML5 is unable to handle alpha the way flash can.
But it use a trick that flash was using also befor VP6, it is to produce a video that embed a 2nd frame used like a mask.
then with few line of code, you can use the mask to restore the background.
again this is not really friendly, since you probably depends a lot from the platform used.


10-10-2012, 02:36 PM
Flash authoring software can import Quicktime and convert to the website project settings. I left this encoding for the webdesign guy, so he can customize the video to his needs. I try to delivery the best quality for the flash encoding.

Michael Carter
10-12-2012, 05:16 PM
I spent years and years learning flash - dropped it almost entirely now that several million users can't see it. (The alternate content code does work quite well though).