Flipping a Card Applet - A Custom AS3 Class Does the Flipping

In this tutorial, we will look again at our card-flipping applet that you can find in the Advanced section at Flipping a Card Effect in Flash CS3, Distorting Bitmaps for Perspective in AS3. We have discussed already in detail the code behind the applet and the mathematics behind the code. In this tutorial, we are interested in rewriting the code in terms of AS3 classes. In the previous version, the code was placed entirely on the MainTimeline. There are several ways of encapsulating the code in classes for maximum reusability and flexibility. We will look at those ways in this tutorial and in the next tutorial Loading Images and Spinning Them in 3D in Terms of AS3 Custom Classes - Take 2.

Download

  • Download all 'fla' and 'as' files corresponding to this tutorial: card_take1.zip

The files that correspond to the applet above are: FlipImageSimple.as and card_take1_a.fla. Both files must be in the same directory for the fla file to compile.

In the applet above, we have essentially moved the code from the MainTimeline to a custom class, FlipImageSimple. We discuss the class on the next page. The class takes over all the functionality of the applet. The constructor of the class takes two BitmapData objects as parameters; these parameters correspond to the two images imported to the Library and linked to AS3 via the Linkage item in the Library menu. We instantiate the class in a short bit of code on the fla file's MainTimeline. We discuss this portion of the code on the next page as well.

On the page after that, we remove the code from the MainTimeline altogether and place it in another AS3 custom class, CardApp. We use this class as the so-called Document Class for our fla file. The Document Class, new to Flash CS3 and AS3, provides a way of keeping all code in external files and is widely used among AS3 developers.

Why Do We Need Take 2?

In this version, our FlipImageSimple class is somewhat dependent on the bitmaps stored in the fla file's Library and linked to AS3. This approach has advantages: all our assets are compiled into the final swf file. It would be nice, however, to have an image-flipping class that does not require any Library assets and, instead, loads all the necessary image files at runtime. This is what we provide in the next tutorial: Loading Images and Spinning Them in 3D in Terms of AS3 Custom Classes - Take 2.   There, we give two classes: FlipImage and ImageLoader. The ImageLoader class is responsible for loading multiple images at runtime from external image files. When all the images are loaded, the class dispatches a custom event to that effect. An instance of ImageLoader, created in an instance of the FlipImage class, listens to that event and initializes the applet when all the assets are available. The issue of loading multiple external files simultaneously is not entirely trivial and very important. For example, we would like to create a class-based version of our very popular Rotating Bitmaps in 3D, a 3D Menu on a Cube in AS3 tutorial. The above mentioned ImageLoader class will be a part of this new version.

Back to Take 1

On the next page, we discuss our FlipImageSimple class and the code on the MainTimeline in the corresponding fla file.

Back to Bridging the Gap 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.