The TweenFlipCS4 Class

The TweenFlipCS4 class has several public methods that can be used to customize your instance of the class. Among others, you can specify an easing function, duration of a spin, and a URL to link to when the user clicks. The TweenFlipCS4 class loads image files at runtime using our custom AS3 ImageLoader class contained in the flashandmath.as3 package (and provided in the tweenflip.zip file). The addresses of the image files to be loaded are passed to the TweenFlipCS4's constructor. The messages to the user about loading progress are displayed in a TextField ('ErrorBox') created within the TweenFlipCS4 class. You can customize the format of this TextField using the class' methods.

Each instance of TweenFlipCS4 has its own PerspectiveProjection object so you can place several instances around the stage without worrying about unpleasant perspective effects which happen when a 3D object inherits perpective projection settings of the root.

Here is the list of public methods.

The constructor evoked with the key word 'new':

new TweenFlipCS4(img0:String,img1:String,t:String="vertical")

The constructor of the class takes two String parameters representing 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 contructor if you want a vertical flip (the default) or the horizontal flip. In the latter case, you should enter, for example:

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

In our example, the image files reside in the same directory on the server as the corresponding swf and html files. So their addresses are simply the file's names. (See the last page of this tutorial for comments regarding loading files from remote locations and the Flash Player security.)

instance.setURL(s:String):void

The method sets the URL of the page to open in a new browser window when the user clicks on one of the sides of your card. Default if the method is not called: the Flash and Math home page. (See again the last page for comments on what happens if you try linking from your desktop.) We saw the method in action on the previous page as well as the next two methods.

instance.setSpeed(t:Number):void

The method sets the duration of each spin, in seconds. Default: 1.5 seconds.

instance.setFunc(f:Function):void

The method sets the easing function for your tween; that is, the tween's 'func' property. Default: Regular.easeOut.

instance.setErrorBoxFormat(c:Number,s:Number):void

The method sets the color and the size of the text for the message box. Defaults: 0xCCCCFF,12.

instance.setErrorBoxSizeAndPos(w:Number,h:Number,a:Number,b:Number):void

The method sets the width, the height (in pixels) of the message box and its position relative to your instance. Defaults: 250, 150, 0, 0.

Of course, there may be many more things that you may want to customize. Just open the TweenFlipCS4.as file and make your changes. The code for the class is rather simple and it is commented. It should be easy to customize the class itself.

Note on Blurriness

It is a well-known fact that Flash Player 10 blurs a display object the moment the object becomes a 3D object. See, for example our tutorial: 3D News Ticker in Flash CS4. To handle this issue, the TweenFlipCS4 class uses two copies of each image and places a 2D copy on top. The 2D copy is invisible except at the end of each tween. Since the 2D copy is a Bitmap, i.e. not an InteractiveDisplayObject, the 2D Bitmap does not interfere with the listeners to mouse events. With large images this technique might be too memory-costly. The alternative approach (that we know of) is to set temporarily the 3D object's transform.matrix3D to null. In our example, it would require more coding, though, as the rotating Bitmaps are nested in 3D objects.

The TweenFlipCS4 class makes use of the ImageLoader class. If your are curious about the ImageLoader class on its own, take a look at the tutorial: 3D Menu on A Cube with Perspective.

Download

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

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.