The Flash CS3 Case

Below is the applet with the same functionality and appearance as the Flash CS4 applet but coded using AS3 supported by Flash Player 9 and Flash CS3. Without native 3D support, many things have to be done differently, most notably an additional custom AS3 class, BitmapTransformer, is required to facilitate perspective distortion of images. Other than the inner workings that require BitmapTransformer, the TweenFlipCS3 class has the same methods and functionality as TweenFlipCS4 (with one small exception).


  • Download all files corresponding to this tutorial:

The fla file corresponding to the applet above is flip_cs3.fla, the necessary classes contained in flashandmath.as3 folder are: TweenFlipCS3, BitmapTransformer, and ImageLoader.

The Timeline code in flip_cs3.fla is identical to flip_cs4.fla with TweenFlipCS4 replaced by TweenFlipCS3.

The public methods of TweenFlipCS3 are identical to those of TweenFlipCS4 except for the class constructor which takes one more optional Boolean parameter:

new TweenFlipCS3(img0:String,img1:String,t:String="vertical",b:Boolean=true)

Again the first two String parameters represent the addresses of the image files for the front and the back of your card to be loaded by the class at runtime. The third, optional, String parameter tells the constructor if you want a vertical flip (the default) or the horizontal flip. The last parameter (default equal to 'true') tells the class if you want your bitmaps smoothed as they rotate or not. For example if you want a vertical flip without smoothing, you can enter:

card1=new TweenFlipCS4("bkimage.jpg","bkcard.jpg","vertical",false);

Curiously, in the FP9 case there is no issue with sharpness of bitmaps if they are not rotated. However, rotated bitmaps without smoothing set to 'true' can exhibit undesirable distortion especially if they contain fine vertical or horizontal lines. (For pictures of landscapes or flowers it hardly matters. A shift by one pixel does not cause a noticable drop in quality.) Here is an explanation.

Inside TweenFlipCS3 class, Bitmaps rotated with perspective are mapped onto the corresponding trapezoids using the custom BitmapTransformer class. The latter class uses the standard technique of triangulating an image and it seems roughly equivalent to the drawTriangles method in FP10. Obviously any such triangulation is not perfect and will create distortions. Those distortions can be greatly reduced by smoothing of a mapped Bitmap. The BitmapTransformer class offers the possibilty of smoothing via a public property 'smoothOn'. This property is set within the TweenFlipCS3 class to 'true' or 'false' according to the last parameter passed to the TweenFlip constructor. In the applet above, smoothing is set to 'true'.

Here is a question to which we do not know the answer yet. It seems that the FP10 native rotational methods use triangulation with smoothing. (Compare the identical rendering of both applets in this tutorial.) Why is it then that a Bitmap in FP10 becomes blurred when any of the 3D methods or properties are applied to it? Even if the values of those properties correspond to a non-rotated Bitmap. For example, setting the z coordinate equal to 0 or rotationY to 0 will cause a Bitmap (and any other DisplayObject) to became blurry.

Note on Smoothing

Smooothing set to true in the TweenFlipCS3 class improves the appearance of images but it seems to slow things down. Use it with caution. If you have large images which do benefit much from smoothing, set the last parameter in the TweenFlipCS3 constructor to 'false'.

If your are curious about the BitmapTransformer class on its own, take a look at the tutorial: 3D Menu on A Cube with Perspective.

On the last page we make a few comments about sandbox types and Flash Player security.

Back to Flash CS4 Tutorials              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.