Jean André Mas

Graphic designer converted since 2004 to coding. I play around with C++, OpenGL, Java, Javascript, AND Actionscript.
My website: ASWC

View all articles by Jean André Mas

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: 

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();
}}

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:
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);
}

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.