Simple reflection effect with AS2

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:

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

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:

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

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.


Enter your email address: Subscribe Unsubscribe	© 2000-2007 actionscript.org! All Rights Reserved. Read our Privacy Statement and Terms of Use... Our dedicated server is hosted and managed by WebScorpion Webhosting.

Spread The Word / Bookmark this content