- Home
- Tutorials
- Flash
- Intermediate
- AS3 Photo Viewer Tutorial
AS3 Photo Viewer Tutorial

ImageContainer Class
This class that extends the Sprite Class will holds the bitmap data of an image loaded (we will see how the bitmap data is retrieved in the next page) and it will also create the reflection of the image dynamiclly.
Class Code
//class to display a bitmap data with reflexion
class ImageContainer extends MovieClip {
//bitmap object
private var bmp:Bitmap;
//reflection bitmap object
private var reflexion:Bitmap;
//ref bitmap data
private var refData:BitmapData;
//reflextion mask
private var refmask:Sprite;
public function ImageContainer() {
//initialize the bmp and the reflexion object
bmp=new Bitmap();
reflexion=new Bitmap();
//and add it to the image container
this.addChild(bmp);
}
//setter for the bitmap data
public function set imageData(value:BitmapData) {
//if the old value is not null dispose the data
if (bmp.bitmapData!=null) {
bmp.bitmapData.dispose();
}
//set the new data
bmp.bitmapData=value;
//update the position
reflexion.x=bmp.x=-bmp.width/2;
bmp.y=-bmp.height/2;
//flip the reflexion object
reflexion.scaleY=-1;
//force the smoothing
bmp.smoothing=true;
//create the reflextion bitmap data
refData=new BitmapData(bmp.width,bmp.height/4);
//and copy the pixel for the bmp bitmapdata
refData.copyPixels(bmp.bitmapData,new Rectangle(0,3*bmp.height/4,bmp.width,bmp.height/4),new Point(0,0));
//set the bitmap objects bitmap data
reflexion.bitmapData=refData;
//set the smoothing to true
reflexion.smoothing=true;
//update the reflextion position
reflexion.y=bmp.height/2+reflexion.height+5;
//create the mask
refmask=new Sprite();
//fill it with a gradient color (see help files)
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFFFFFF, 0xFFFFFF];
var alphas:Array = [0.5, 0];
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(reflexion.width, reflexion.height, Math.PI/2, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
refmask.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
refmask.graphics.drawRect(0,0,reflexion.width, reflexion.height);
//see help files
//update the ref mask postion
refmask.x=reflexion.x;
refmask.y=reflexion.y-reflexion.height;
//cash as bitmap both the relexion mask and reflexion sprite
refmask.cacheAsBitmap=true;
reflexion.cacheAsBitmap=true;
//set the mask on the reflextion
reflexion.mask=refmask;
//add the mask
addChild(refmask);
this.scaleX=1;
this.scaleY=1;
//add reflexion
addChild(reflexion);
}
}
In the next page we will examin the loading of the images one after another.

