An Example and the Code

In this simple example, we show how to create an image reflection in AS3 and Flash. For a more sophisticated 3D image reflection, see another of our How-Tos: How to Create a 3D Image Reflection in AS3 and Flash CS4. The main tool we use to create a reflection is gradient masking. You can learn how to script a gradient mask in the How -To: How to Create a Gradient Mask in ActionScript 3.

Download

The Code

We keep comments as comments within the code for greater clarity.

Note: For exporting Flash Library assets to AS3, you may want to check out another How - To: How to Link Library Items to AS3 in Flash CS4 and CS3 for Runtime Use.

/*
We have imported to the Library a 160 by 160 jpeg image, shuttle160m.jpg. Using the Linkage item in the Library menu, we exported the image to AS3 under the name 'Shuttle'.
*/

var picWidth:Number=160;

var picHeight:Number=160;

//The gap, in pixels, betwen the image and its reflection.

var gap:Number=1;

/*
'Shuttle' is a BitmapData object which can be instantiated at runtime. This is what we are doing in the next line. Then we create two Bitmaps, 'topImg' and 'reflImg', to hold the image and its reflection, repectively.
*/

var imgBD:BitmapData=new Shuttle(160,160);

var topImg:Bitmap=new Bitmap(imgBD);

var reflImg:Bitmap=new Bitmap(imgBD);

this.addChild(topImg);

this.addChild(reflImg);

/*
To flip the reflection image horizontally, we use scaleY=-1 which reverses the sign of the y coordinate of each point within 'reflImg'. That causes the flip about the horizontal axis. Note that the flip moves the registration point of the flipped 'reflImg' to its lower left corner. (In FP10, we could use reflImg.rotationX=180 to accomplish the flip.)
*/

reflImg.scaleY=-1;

/*
We position the image 80 pixels above the center of the Stage and its reflection beneath the image.
*/

topImg.x=250-picWidth/2;

topImg.y=220-picHeight/2-80;

reflImg.x=topImg.x;

reflImg.y=topImg.y+2*picHeight+gap;

/*
In order to create a gradient effect for the reflection, we will create a gradient mask for 'reflImg'.
*/

var maskingShape:Shape=new Shape();

 

//Even though the mask itself will not be visible,

//it MUST be added to the Display List.

 

this.addChild(maskingShape);

maskingShape.scaleY=-1;

maskingShape.x=reflImg.x;

maskingShape.y=reflImg.y;

 

//We call a function, defined later in the script,

//that draws a gradient in 'maskingShape'.

 

drawInMask();

/*
The next two lines are crucial for a gradient mask to bahave properly: both a masked Display Object and a masking Display Object must be cached as Bitmaps. Otherwise, the whole area of the gradient (except for the completely transparent areas) will fully reveal the underlying image, and the gradient effect will not happen.
*/

reflImg.cacheAsBitmap=true;

maskingShape.cacheAsBitmap=true;

 

//We assign 'maskingShape' to be a mask of 'reflImg'.

 

reflImg.mask=maskingShape;

/*
The function defined below draws a linear gradient in 'maskingShape'. If you wish to see the gradient drawn, comment out the line above. You see a linear gradient that goes from transparent red to full red, rotated 90 degrees. The rotation happens within the gradient box:
    mat.createGradientBox(picWidth,picHeight,90*(Math.PI/180));
90 degress is converted to radians: 90*(Math.PI/180).
*/

function drawInMask():void {

var mat:Matrix= new Matrix();

var colors:Array=[0xFF0000,0xFF0000];

var alphas:Array=[0,0.7];

var ratios:Array=[10,255];

mat.createGradientBox(picWidth,picHeight,90*(Math.PI/180));

maskingShape.graphics.lineStyle();

maskingShape.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,mat);

maskingShape.graphics.drawRect(0,0,picWidth,picHeight);

maskingShape.graphics.endFill();

}

 

How to Customize Reflection

Since a gradient mask simply makes the masked object invisible in the areas where the gradient is transparent, what shows through is whatever is behind the reflection. In our case, it is the black background. Other properties can be customized by changing a few variables in 'drawInMask' function.

There are two variables within 'drawInMask' function that you can manipulate in order to easily change the appearance of the reflection: alphas and ratios. Each element in 'alphas' Array has to be a number between 0 and 1. Try changing:

var alphas:Array=[0,0.7];

to:

var alphas:Array=[0,1];

or to:

var alphas:Array=[0,0.5];

and observe the changes as you test the movie.

Each element in 'ratios' Array has to be a number between 0 and 255. Try changing:

var ratios:Array=[10,255];

to:

var ratios:Array=[100,255];

or to:

var ratios:Array=[0,100];

and observe the changes as you test the movie.

Back to AS3 How To and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.