Published on April 20, 2008

This tutorial will show you how to create a simple reflection effect in 4 little steps.

Step 1 and 2.

A discret reflection effect can add a nice "touch" when displaying pictures, graphics and such. In this tutorial you will learn not only how to create this effect but also how it works and how to modify it as you please, so let's get started!
Open your Flash software, select "new", "Flash document", click "Ok", then go to "Modify", "Document", enter 400 for the width and heigth and enter 30 for the frame rate.
Open the "Actions" panel.

First Step:
Of course to apply a reflection we first need a picture or graphic to apply the reflection to. In this first step we just load dynamicaly a picture:

[as]this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object(); mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);//replace this by any picture you have[/as]
Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:

That's a nice looking picture. Here is what the code does:
this.createEmptyMovieClip("image_mc", 1);
We create a movieclip and give it a name of "image_mc" and a depth of 1.
var mclListener:Object = new Object();
We create a object that we will use to check (listening) if the picture is loaded.
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
};
When the picture is fully loaded the onLoadInit function will trigger and set the referenced movieclip (image_mc) to the middle of the screen horizontaly.
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);//replace this by any picture you have
We create a MovieClipLoader object, then set our listener object, then load the picture in the image_mc. Note: replace "none.jpg" by any picture you want, be aware that this code does not resize pictures.

Step Two:
To create the reflection effect we need to copy the existing movieclip, flip the image and place it below the existing movieclip. To do this, we are going to create a custom function, pass the existing movieclip as parameter and call the function from within the onLoadInit function we already used. In this new function we will use the bitmapData class to copy our existing movieclip so first we need to import the bitmapData class.
Before any other code, insert this to import the bitmapData class:
import flash.display.BitmapData;
inside the onLoadInit function insert this new line:
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
reflect(target_mc);// new line used to call our new function
};
Now time to create our new function:
function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;
}
And here is the complete code:
[as]import flash.display.BitmapData;
this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
reflect(target_mc);
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);
function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x; }[/as]
Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:

Now there's a fliped copy of our picture below. Here is what the code does:
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
We create a new instance of the BitmapData class and pass it the image_mc size as parameters which determines the size of the bitmap.
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
We create an empty movieClip.
mc_1.attachBitmap(myBitmapData, 3);
We attach the bitmap to the empty movieclip.
myBitmapData.draw(target_mc);
We draw the image_mc to the bitmap.
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;
Then we flip the newly created movieclip and position it below the image_mc.
Still two steps to go, we are almost there. Let's go to the next page.

Step 3 and 4.

Step Three:
To create the reflection effect we also need a gradient that we can use as a mask. In this third step this is what we are going to do. We create a new movieclip and fill it wih a gradient, we also position it over the fliped movieclip. To create this gradient we once again need to import a new class that is the Matrix class. We need also a new function to create a movieclip with gradient fill and this function will be called at the end of the reflect() function.
We import the Matrix class:
import flash.geom.Matrix;
We call our new function (setupReflection()) from within the reflect function and pass the fliped movieclip as parameter:
function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;
setupReflection(reflect_mc);//here we call the new function
}
And of course we create our new function:
function setupReflection(target_mc:MovieClip):Void{
this.createEmptyMovieClip("mask_mc",50);
with (mask_mc)
{colors = [0x000000, 0xFFFFFF];
fillType = "linear"
alphas = [100, 100];
ratios = [127, 255];
spreadMethod = "pad";
interpolationMethod = "RGB";
focalPointRatio = 1;
matrix = new Matrix();
matrix.createGradientBox(target_mc._x, target_mc._y, Math.PI/2, 0, -150);
beginGradientFill(fillType, colors, alphas, ratios, matrix,
spreadMethod, interpolationMethod, focalPointRatio);
moveTo(target_mc._x, target_mc._y);
lineTo(target_mc._x, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y);
lineTo(target_mc._x, target_mc._y);
endFill();
}}
Here is how the whole code should look like:
[as]
import flash.display.BitmapData;
import flash.geom.Matrix; this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object(); mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
reflect(target_mc);
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc); function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;
setupReflection(reflect_mc);
}
function setupReflection(target_mc:MovieClip):Void{
this.createEmptyMovieClip("mask_mc",50);
with (mask_mc)
{
colors = [0x000000, 0xFFFFFF];
fillType = "linear"
alphas = [100, 100];
ratios = [127, 255];
spreadMethod = "pad";
interpolationMethod = "RGB";
focalPointRatio = 1;
matrix = new Matrix();
matrix.createGradientBox(target_mc._x, target_mc._y, Math.PI/2, 0, -150);
beginGradientFill(fillType, colors, alphas, ratios, matrix,
spreadMethod, interpolationMethod, focalPointRatio);
moveTo(target_mc._x, target_mc._y);
lineTo(target_mc._x, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y);
lineTo(target_mc._x, target_mc._y);
endFill();
}}[/as]
Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:

And here is what the code does:
this.createEmptyMovieClip("mask_mc",50);
We create a new movieclip. I'll show only the relevant code here:
fillType = "linear"
The gradient is of type "linear"(as opposed to radial).
matrix.createGradientBox(target_mc._x, target_mc._y, Math.PI/2, 0, -150);
We set a matrix that we will use to set the gradient, we pass the fliped movieclip size as parameter and specify a Math.PI/2 as angle (horizontal), we also pass -150 as parameter for the gradient ratio(will make sense later).
beginGradientFill(fillType, colors, alphas, ratios, matrix,
spreadMethod, interpolationMethod, focalPointRatio);
We set the gradient to be used.
moveTo(target_mc._x, target_mc._y);
lineTo(target_mc._x, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y);
lineTo(target_mc._x, target_mc._y);
endFill();
Then we draw the gradient in our new movieclip.

Step Four:
Finaly the last step. We now have our main picture with below it a gradient and under the gradient we have the fliped copy of the main picture. Now we need to set the alpha property of one color of the gradient to zero. Then we need to set the fliped movieclip and the gradient movieclip as bitmaps and finaly we need to set the gradient movieclip as a mask for the fliped movieclip. Here is how we do it:
First set the alpha to zero of one color in the gradient:
alphas = [100, 0];
Then set both the fliped movieclip and the gradient movieclip as bitmap:
target_mc.cacheAsBitmap = true;
mask_mc.cacheAsBitmap = true;
The set the gradient movieclip as a mask for the fliped movieclip:
target_mc.setMask(mask_mc);
Here is how the whole code look like:
[as]
import flash.display.BitmapData;
import flash.geom.Matrix; this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object(); mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
reflect(target_mc);
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc); function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;
setupReflection(reflect_mc);
}
function setupReflection(target_mc:MovieClip):Void{
this.createEmptyMovieClip("mask_mc",50);
with (mask_mc)
{
colors = [0x000000, 0xFFFFFF];
fillType = "linear"
alphas = [100, 0];
ratios = [127, 255];
spreadMethod = "pad";
interpolationMethod = "RGB";
focalPointRatio = 1;
matrix = new Matrix();
matrix.createGradientBox(target_mc._x, target_mc._y, Math.PI/2, 0, -150);
beginGradientFill(fillType, colors, alphas, ratios, matrix,
spreadMethod, interpolationMethod, focalPointRatio);
moveTo(target_mc._x, target_mc._y);
lineTo(target_mc._x, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y-target_mc._height);
lineTo(target_mc._x+target_mc._width, target_mc._y);
lineTo(target_mc._x, target_mc._y);
endFill();
}
target_mc.cacheAsBitmap = true;
mask_mc.cacheAsBitmap = true;
target_mc.setMask(mask_mc); }[/as]
Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:

And that's it! Now you can modify the effect by changing values here:
alphas = [100, 0];
This will alter the amount of masking, try changing both values.
matrix.createGradientBox(target_mc._x, target_mc._y, Math.PI/2, 0, -150);
This will change the way the gradient is drawn, try changing Math.PI to other value (to rotate the gradient), try changing the two last values to move the gradient up and down.
I hope you enjoyed this tutorial, feel free to visit my website and drop an email if you have any comments or questions regarding this tutorial.