After explanations on the two previous pages, the code should be very easy to follow. As we mentioned, the 3D part has been practically eliminated: we use the final formulas for each projected point. The part that is worth commenting on is the portion of the code where we slice each bitmap. We also show below all the changes that you need to make to customize the applet.
/*
fLen constant is responsible for distortion for perspective: larger
constants will result in less distortion, smaller in more distortion.
Constants less than picWidth, will give undesirable effects.
*/
var fLen:Number=400;
/*
We imported to the Library two 166 by 240 pixels jpeg images, Frist.jpg and Second.jpg.
They are cataloged in the Library as bitmaps named 'First' and 'Second'.
We linked them to AS3 via the Linakge item in the Library menu.
You can replace those images by your own images with different names, say YourImg1, YourImg2,
and different dimensions. Both images, YourImg1 and YourImg2,
have to have to be of the same size, though, as they serve as the front
and the back of the flipping card. After, you import
new images, you have to link them to AS3 through Linkage
in the Library menu. Flash will create the corresponding BitmapData
subclasses with the names YourImg1 and YourImg2.
You have to change the values of picWidth and picHeight variables below
to reflect the width and the height of your images.
*/
var picWidth:Number=166;
var picHeight:Number=240;
................
var spCard:Sprite=new Sprite();
this.addChild(spCard);
//You may want to position your card differently within your movie
//by changing the next two lines.
spCard.x=picWidth/2+60;
spCard.y=picHeight/2+50;
var spSide0:Sprite=new Sprite();
spCard.addChild(spSide0);
var spSide1:Sprite=new Sprite();
spCard.addChild(spSide1);
var firstSlices:Array=[];
var secondSlices:Array=[];
var sliceWidth:Number=1;
var numSlices:Number=picWidth/sliceWidth;
/*
To replace the images you have to change the next two lines to:
var bdFirst:BitmapData=new YourImg1(yourImgsWidth,yourImgsHeight);
var bdSecond:BitmapData=new YourImg2(yourImgsWidth,yourImgsHeight);
The rest will work automatically.
*/
var bdFirst:BitmapData=new First(166,240);
var bdSecond:BitmapData=new Second(166,240);
spSide0.filters = [ new DropShadowFilter() ];
spSide1.filters = [ new DropShadowFilter() ];
var curTheta:Number=0;
cutSlices();
................
In the function cutSlices that creates slices of each bitmap, we evoke the method bitmap.bitmapData.copyPixels. The method copies a rectangular region of a given bitmap's bitmapData into bitmapData of a target bitmap. Note that our slices overlap by one pixel. This creates a smoother effect while rotating.
function cutSlices():void {
var i:int;
for(i=0;i<numSlices-1;i++){
firstSlices[i]=new Bitmap(new BitmapData(sliceWidth+1,picHeight));
firstSlices[i].bitmapData.copyPixels(bdFirst,
new Rectangle(i*sliceWidth,0,sliceWidth+1,picHeight),new Point(0,0));
secondSlices[i]=new Bitmap(new BitmapData(sliceWidth+1,picHeight));
secondSlices[i].bitmapData.copyPixels(bdSecond,
new Rectangle(i*sliceWidth,0,sliceWidth+1,picHeight),new Point(0,0));
spSide0.addChild(firstSlices[i]);
spSide1.addChild(secondSlices[i]);
}
firstSlices[numSlices-1]=new Bitmap(new BitmapData(sliceWidth,picHeight));
firstSlices[numSlices-1].bitmapData.copyPixels(bdFirst,
new Rectangle((numSlices-1)*sliceWidth,0,sliceWidth,picHeight),new Point(0,0));
secondSlices[numSlices-1]=new Bitmap(new BitmapData(sliceWidth,picHeight));
secondSlices[numSlices-1].bitmapData.copyPixels(bdSecond,
new Rectangle((numSlices-1)*sliceWidth,0,sliceWidth,picHeight),new Point(0,0));
spSide0.addChild(firstSlices[numSlices-1]);
spSide1.addChild(secondSlices[numSlices-1]);
}
Download
- Download the Flash CS3 'fla' file for our applet: card_flip.fla
On the next page, we outline extensions of this tutorial.
