Paul Jenkins

How to make a transparent flash video using Adobe After Effects 7.0 Pro and Flash 8.

I have seen quite a few flash videos around the internet, but trying to create a transparent flash video for a website proved tricky with not having any experience with video before. I tried a few products out there but i found the most advanced but still easy to use was Adobe After Effects 7.0 Pro + Macromedia Flash 8. There was an option available to export straight to FLV (Flash Video) in After Effects.

Now it was shooting time, we rented out an hour or two at a local ‘learning center’ where we blagged that we where doing a website on internet safety. They had the chroma key set up and we where ready to roll. Shot a good few shots and back to the lab to see what I could come up with.

Reading through google there was a lot of information telling me how I should go about this. Taking the first few tutorials I started keying out Colour Ranges and Colour Keys. This took quite a while to get right, the edges where jagged and for some reason the subject had a reflective green glow within them. Which merged into the background every now and then. All the tutorials that I found, the subject was crisp and there was not a touch of green on the subject at all. After a good half a week of messing and exploring the Colour Key and Colour Ranges I decided to have a play with some of the other tools located in the Keying tab. As I found out some more information on the other tools I found a much easier and quicker way of doing this, so here it is…

Load up After Effects

1) Have the videos ready, we had it in raw .avi format so I would suggest something that isn’t too compressed. File->Import->Import File and import the video files.

The video files will appear in the project box at the top left (you might need to click the project tab).

2) Then drag the video to the timeline at the bottom of the window, this will populate the timeline with your video. The video will also appear in the middle of the screen.

3) First, if the subject is quite stationary you can cut round it with the pen tool from the menu bar at the top.

Move the current frame left to right using the timeline at the bottom to get a rough idea of where the subject moves to (you can always change it later so dont worry too much). Cut round the subject and the outside will now appear transparent as above.

4) Now you can add the Linear Colour Key from the Effects & Presets box on the right. Drag the icon of the Linear Colour Key into the timeline where the video is now located. The options will appear to the left, select the Key Colour Dropper (not the default colour blue, the dropper next to it). Pick an average background colour, if its green or blue or any other colour for that matter.

If your background is not very consistant then you can use the dropper + tool in between the two previews. Now move the Matching Tolerance value to suit the subject and video, it will differ from video to video. We also used the Matching Softness to 10% to give a soft edge. Don’t spend all your time trying to get rid of all the blue or green, you need to have all of the subject viewable with a small glow of the background colour behind them.

5) Now add the Spill Suppressor effect from the effects box at the right. Click the Colour To Suppress dropper (not the blue the dropper to the right of it) and locate a green on the subject. You may want to turn the Linear Colour Key effect off to locate a decent colour, to do this just press the F icon left of the Linear Colour Key title in the Effects Controls box at the top left. Leave the Colour Accuracy to Faster and Suppression to 100.

6) Make sure you have turned the Linear Colour Key effect back on if you have turned it off. Now locate the Matte tab on the Effects & Presets box to the right. Drag over the Matte Choker. This will quickly smoothen all the sides and remove any .

If two parts of the subject are merging together which shouldn’t be try changing the Matching Tolerance option of the Linear Colour Key effect to a higher value. You may need to tweak a few of the settings to get it looking perfect. You should get the effects that I have as seen below:

Quick Tip
There is one last trick you can do. The Spill Suppressor darkens out any over spill from the green background onto the subject. Now this is great if you have a subject that there is not much spill, but like ours there is quite some green on the subject. If your subject is roughly the same colour, like ours yellow, try this to see if you get a better result. Delete the spill suppressor by clicking the effect and pressing delete. Now add the Hue & Saturation Effect from the effects and presets box. Select the Channel Control box, if you have a green screen then select Greens, if yours was blue select Blues. Now a few small icons will appear above the green on the second colour line. Move the last icon to the end of the bar, do the same with the 2nd and 3rd. You may also want to move the first icon left a touch to cover all the green as shown below.

Now change the Green Hue knob to what ever colour your subject is, we used -116 . This gave us a yellow to orange hue which replaced the green. This looks much better than darkening the edges but will only work if the subject is roughly one colour.

7) Now go to the top menu and click Composition->Composition Settings. Change the Width and Height to the values you need.

8) File->Export->Macromedia Flash Video (FLV). Change the profile to Flash 8 - Medium Quality, click Show Advanced Settings, click Encode alpha channel. You might want to change the frame rate to 8 or 10 to save some space if it will be downloaded off the web.

Now for the flash!

9) Open up Macromedia Flash 8. Start a new project. Save it in the same directory as your FLV video you have just made. Go to File->Import->Import Video. Browse for your video, it will then show you the full path. If you are planning to upload this then I would advise just putting the video file name rather than the full path, as it will try and locate it based on that path when its uploaded. You will need to choose Progressive download from a web server, you can choose Embed video in SWF and play in timeline. But the latter only plays while when the flash is fully loaded while the first streams it. Select none for the skin and drop the video object in your workspace.

There is a lot more we can do with FLV in flash using actionscript but ill post more information in another blog entry at a later date.
10) Now all you need to do is add some html:

< param name=“wmode” value=“transparent”>

Below the object

wmode=“transparent”

In the embed tag. Now you should have a transparent flash that can be overlayed on to your website!