Superimposing video on top of a webpage

Posted on 2009-04-22
Last Modified: 2012-05-06

Can anyone tell me how to create video that seems to be superimposed on a website, similar to the following:

Looking at the source code, it looks like it might be "transparent" flash? Is this something that a client can take with their camcorder, then how do you convert it to flash?


Question by:anniengodis
    LVL 4

    Accepted Solution

    You have to shoot the video with your subject (actors) in front of a greenscreen.  Then you bring this video footage into a post-processing application that allows you to key out the green background.  This can be done with Adobe AfterEffects, and other software that allows you to key, but AfterEffects is preferable.  When you key out the background, you will create what is called an alpha channel in the video.  This information is essentially a black and white representation of what parts of the video are to be masked out..  Once you finish keying (usually with the KeyLight effect in the Effects menu in AfterEffects), you can export the video from AfterEffects to .FLV and there is an option to save the alpha information.  You then import that file into your Flash IDE and you use it as the src parameter for an FLVPlayback component from the component library.

    Then you can export the Flash move to a .swf that can be embedded into a div that can be placed anywhere on the page.  You will then be able to see the content of the webpage show through the masked areas (or keyed areas) of the video.

    Author Comment

    Thanks ariestav! Very detailed instructions.  Unfortunately I have CS3 Web Premium, which doesn't have After Effects.

    Holy Cow I just checked out purchasing After Effects and it's $999! Do you know the next best thing?
    LVL 4

    Expert Comment

    Premiere has a basic keyer that should be able to handle it.  To make your life easier, you really do need an Adobe video application (i.e. AE or Premiere).  I am sure there are third-party video apps that can convert to FLV format and maintain the alpha information, but I don't know of any off the top of my head. . .

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
    This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
    The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
    The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now