The FlipImage class is a modified version of the FlipImageSimple class from our 'Take 1' tutorial: Flipping a Card Applet in Terms of ActionScript 3 Custom Classes - Take 1 Below, we discuss only those portions of the code that changed from the previous version. In this version, the class's constructor takes two strings as parameters rather than two BitmapData objects as in the previous version. These strings represent URLs of two external image files that serve as the front and the back of our image. The strings are passed to an instance of the ImageLoader. If loading is successful, the spinning functionality is initialized. Otherwise, an error message to the user is displayed in a TextField created by FlipImage class.

After the FlipImage class, we discuss the DemoApp class that serves as the Document class for the applet on the first page of this tutorial. All code for the applet resides in external files.

package {

import flash.display.*;

import flash.events.*;

import flash.text.*;

import flash.geom.*;

import flash.filters.DropShadowFilter;

public class FlipImage extends Sprite {

public var fLen:Number;

//We introduce a public variable that controls the speed of rotation

//for the spinning bitmaps.

public var turnSpeed:Number;

private var bdFirst:BitmapData;

private var bdSecond:BitmapData;

//The array of strings containing addresses of image files to be loaded.

private var imgsSrcs:Array;

//We will create an instance of our custom ImageLoader class

//and store it in the variable imgLoader.

private var imgLoader:ImageLoader;

//Since there might be loading errors, we create a text field

//to display messages to the user.

private var ErrorBox:TextField;

private var picWidth:Number;

private var picHeight:Number;

private var isMoving:Boolean;

private var spSide0:Sprite;

private var spSide1:Sprite;

private var firstSlices:Array;

private var secondSlices:Array;

private var sliceWidth:Number;

private var numSlices:Number;

private var curTheta:Number;

/*
The constructor takes two string parameters that represent URLs of the image files. (Local addresses will be resolved relative to the html page in which the applet using the class is embedded. Global URLs may cause Flash Player security errors depending on the swf's settings. In this tutorial, we do not address the security issues. In our demo example, all files are in the same directory.) The constructor initializes global variables, formats the error text field, and calls the function 'prepImgs' defined below.
*/

public function FlipImage(img1:String,img2:String){

imgsSrcs=[img1,img2];

imgLoader=new ImageLoader();

ErrorBox=new TextField();

this.addChild(ErrorBox);

setUpErrorBox();

setErrorBoxSizeAndPos(150,150,0,0);

setErrorBoxFormat(0xCC0000,12);

fLen=400;

turnSpeed=36;

prepImgs();

}

/*
The function 'prepImgs' adds listeners to our instance of ImageLoader that listen to our custom events and calls 'loadImgs' method of the ImageLoader.
*/

private function prepImgs():void {

imgLoader.addEventListener(ImageLoader.LOAD_ERROR,errorLoading);

imgLoader.addEventListener(ImageLoader.IMGS_LOADED,allLoaded);

imgLoader.loadImgs(imgsSrcs);

}

private function errorLoading(e:Event):void {

ErrorBox.visible=true;

ErrorBox.text="There has been an error loading images. The server may be busy.

Try refreshing the page.";

}

private function allLoaded(e:Event):void {

initApp();

}

private function initApp():void {

isMoving=false;

bdFirst=imgLoader.bitmapsArray[0].bitmapData;

bdSecond=imgLoader.bitmapsArray[1].bitmapData;

picWidth=imgLoader.bitmapsArray[0].width;

picHeight=imgLoader.bitmapsArray[0].height;

spSide0=new Sprite();

this.addChild(spSide0);

spSide0.x=picWidth/2;

spSide0.y=picHeight/2;

spSide1=new Sprite();

this.addChild(spSide1);

spSide1.x=picWidth/2;

spSide1.y=picHeight/2;

spSide0.filters = [ new DropShadowFilter() ];

spSide1.filters = [ new DropShadowFilter() ];

firstSlices=[];

secondSlices=[];

sliceWidth=1;

numSlices=picWidth/sliceWidth;

curTheta=0;

cutSlices();

renderView(curTheta);

setUpListeners();

}

private function setUpListeners():void {

imgLoader.removeEventListener(ImageLoader.LOAD_ERROR,errorLoading);

imgLoader.removeEventListener(ImageLoader.IMGS_LOADED,allLoaded);

spSide0.addEventListener(MouseEvent.CLICK,sideClicked);

spSide1.addEventListener(MouseEvent.CLICK,sideClicked);

this.addEventListener(Event.ENTER_FRAME,onEnter);

}

/*
Then come private methods 'renderView', 'cutSlices', 'calcMatrixForSides', findVecMinusVec', and the 'sideClicked' listener. Those are exactly the same as in FliPImageSimple class. The listener 'onEnter' has changed slightly to accomodate the user-defined value of the variable 'turnSpeed'.
*/

.........................

.........................

.........................

/*
The last three methods create and format the error display text field.
*/

//The private method that creates the error field.

private function setUpErrorBox():void {

ErrorBox.type=TextFieldType.DYNAMIC;

ErrorBox.wordWrap=true;

ErrorBox.border=false;

ErrorBox.background=false;

ErrorBox.text="";

ErrorBox.visible=false;

ErrorBox.mouseEnabled=false;

}

//The public methods that format and position the error field.

public function setErrorBoxFormat(colo:Number,s:Number): void {

var errorFormat:TextFormat=new TextFormat();

errorFormat.color=colo;

errorFormat.size=s;

errorFormat.font="Arial";

ErrorBox.defaultTextFormat=errorFormat;

}

public function setErrorBoxSizeAndPos(w:Number,h:Number,a:Number,b:Number): void {

ErrorBox.width=w;

ErrorBox.height=h;

ErrorBox.x=a;

ErrorBox.y=b;

}

}

}

The FlipImage class has the following public properties:

• fLen:Number   The property controls distortion for perspective. Default: 400.
• turnSpeed:Number   The property controls how fast the image spins. Negative values correspond to counter-clockwise rotation. Default: 36.

The FlipImage class has the following public methods (besides the constructor discussed above):

• setErrorBoxFormat(colo:Number,s:Number): void   The method sets the color of the font and its size in the error display. Default values if you do not call the method: red, 12.
• setErrorBoxSizeAndPos(w:Number,h:Number,a:Number,b:Number): void   The method sets the width, the height, and the x and y coordinates of the error display box. Default values if you do not call the method: 150, 150, located in the upper left corner of where the image would be.

DemoApp - Our Document Class

Since all the work is done by ImageLoader and FlipImage, the Document class is short and simple.

/*
All you need to do in order to customize the applet is to enter your image file names into the FlipImage constructor on lines 38 and 42 (jpeg, gif, or png files are all fine). In our case, all the files: the swf file, the html page in which the applet is embeded, and the jpeg files are all in the same directory on the server. If your image files reside in a subdirectory, you can enter local addresses to your image files. (The strings that you enter into the FlipImage constructor will be passed to instances of the URLRequest class.) The local addresses will be resolved with respect to the location of the html page. Entering a global URL may cause Flash Player security errors which we are not addressing in this tutorial. For your fla file to compile, the files FlipImage.as, DemoApp.as and your fla file must be in the same folder. Our Document Class extends the MovieClip class (although in our case it would be sufficient if it extended the Sprite class).
*/

package {

import flash.display.MovieClip;

public class DemoApp extends MovieClip {

public var card1:FlipImage;

public var card2:FlipImage;

public function DemoApp(){

/*
We are creating two instances of the FlipImage class. DemoApp can find the FlipImage class because they are in the same directory and we used the generic 'package' in the definion of FlipImage statement. Otherwise, we would need to import the FlipImage class via an 'import' statement followed by the location of the class.
*/

card1=new FlipImage("Blue.jpg","Blackjack.jpg");

this.addChild(card1);

card2=new FlipImage("Brown.jpg","Redjack.jpg");

this.addChild(card2);

setCardsPosAndProps();

}

private function setCardsPosAndProps():void {

card1.x=100;

card1.y=70;

card1.fLen=300;

card1.turnSpeed=36;

card2.x=290;

card2.y=70;

card2.fLen=300;

card2.turnSpeed=-36;

}

}

}

Download

• Download all 'fla', 'as', and 'jpg' files corresponding to this tutorial: spin_take2.zip

The FlipImage class is very specific in its functionality; the ImageLoader class is more versatile. We are going to use it again in an upcoming tutorial in Bridging the Gap section. This upcoming tutorial will provide an AS3 class that creates a 3D menu on the cube. That is, will give a class version of Rotating Bitmaps in 3D, a 3D Menu on a Cube