3D Card Flip in Flash CS4

Flash Player 10 supports native 3D methods in ActionScript 3 so flipping images with perspective distortion is much easier in Flash CS4 than in Flash CS3. It has its challenges, though. One of them is the problem of blurring of 3D objects when those 3D methods are used. In this tutorial, we present a custom AS3 class, TweenFlipCS4, which gives one way of addressing this issue.

Download

  • Download all files corresponding to this tutorial: tweenflip.zip

All the source files in the package are well-commented. The fla file that corresponds to the applet above is flip_cs4.fla. The Timeline code in this 'fla' file is minimal; most of the work is done by the custom TweenFlipCS4 class. However, the Timeline code illustrates well how to customize instances of TweenFlipCS4 class. Thus, we present the code in the next section. On the next page we list the class' public methods.

The Timeline Code - Customizing an Instance of TweenFlipCS4

The static text on the stage was created at authoring time. Everything else is done programmatically. Images are loaded at runtime by the TweenFlipCS4 class. The addresses for the image files to be loaded are passed to the class constructor.

Here is the Timeline code in flip_cs4.fla followed by explanations.

import fl.transitions.easing.*;

import flashandmath.as3.TweenFlipCS4;

var card1:TweenFlipCS4;

var card2:TweenFlipCS4;

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

this.addChild(card1);

card2=new TweenFlipCS4("deimage.jpg","decard.jpg");

this.addChild(card2);

setCardsPosAndProps();

function setCardsPosAndProps():void {

card1.x=25;

card1.y=85;

card2.x=330;

card2.y=85;

card1.setURL("http://www.math.uri.edu/~bkaskosz/");

card1.setFunc(Back.easeOut);

card1.setSpeed(1.5);

card2.setFunc(Bounce.easeOut);

card2.setSpeed(2);

card2.setURL("http://webspace.ship.edu/deensley/");

}

We import fl.transitions.easing package of easing functions so we can pass the ones we choose to the TweenFlipCS4 method instance.setFunc. We import the TweenFlipCS4 class. (The folder flashandmath->as3 must be in the same folder as the fla file.) We create two instances of the TweenFlipCS4 class and store them in the variables card1 and card2. TweenFlipCS4 extends the Sprite class, so we use properties of the Sprite class to position our instances on the stage. We use other methods of TweenFlipCS4 to set the speed and the duration of each tween as well as the URL's to connect to on mouse click. On the next page, we provide the complete list of the TweenFlipCS4 public methods that can be used for customization and discuss the inner workings of the class.

For illustration of the available easing functions see our tutorial: Tween Tricks in ActionScript 3 and Flash CS3. For comments on the Flash Player security issues related to loading files at runtime and linking to web pages, see the last part of this tutorial.

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.