FlashLabWeb Experiments by Brian Wiltshire

In this tutorial i will show you how to create a reflection for your video content in flash.

Okay so let’s get started.

Setup your stage as shown below.

1. Import Video

Import a video into the Video layer with dimensions of 320×240.Set the instance name to vid.

2. Create the reflection movieClip.

Create a new movieClip on the Reflect layer by using the rectangle tool and set the dimensions to 320×240. In the properties panel for the movieClip set the instance name to ref. Set the blend to “Overlay“. And finally tick the ” Use runtime bitmap caching” It should look like the image below.

Align the movieclip right underneath the video as this will be the reflection.

3. Next we will create a gradient mask for a smooth fadeout effect.

On the Mask layer create a new movieClip with the same dimensions as the video and the reflect clips. We will create a gradient mask, so the movieclip needs to be a gradient fill from top to bottom. Set the gradient to be top 100% black and bottom 0% black. So basically it will be from top to bottom black to transparent. Settings shown below. Place the movie clip right above the reflection clip as this would be the smooth fade effect mask.

In the properties panel for the masker clip set the instance name to “masker“. Set the blend mode to “Overlay” and tick the ” Use runtime bitmap caching” It should look like the image below.

4. Finally we will code the ActionScript for the reflection.

Select the first frame of the Actions layer and open the Actions panel (F9).

Now paste the following:

import flash.display.BitmapData;

var bmd:BitmapData = new BitmapData(vid._width, vid._height);
ref.attachBitmap(bmd,1);

//Flip the the image
ref._yscale = -100;
ref._y += ref._height;

this.onEnterFrame = function(){
bmd.draw(vid);
}

//set the mask
ref.setMask(masker);

That’s it. Test your movie and it should look similar than the example below.

Drop me a line if you need any help or the source for this tutorial.