In this tutorial, we revisit our image-flipping applet that you can find in the Bridging the Gap section at Flipping a Card Applet in Terms of ActionScript 3 Custom Classes - Take 1. In this 'Take 1' tutorial, we made the first step toward moving the code away from the Timeline and encapsulating it in custom AS3 classes. In particular, we created the FlipImageSimple class that took over the functionality of spinning images. The class depended, however, on images being stored in the Library of the fla file and linked to AS3. In the applet below, all code is external and all bitmaps are loaded at runtime from external files:
- Download all 'fla', 'as', and 'jpg' files corresponding to this tutorial: spin_take2.zip
The source code files are well-commented and should be easy to follow.
In the tutorial Flipping a Playing Card Effect in AS3, Distorting Bitmaps for Perspective in Flash CS3 (Advanced Section), the code resided entirely on the Timeline. We discussed there in detail the mathematics behind the rotation and distortion for perspective. In the above mentioned 'Take 1' tutorial, we moved the code into AS3 classes. What is the main challenge in this tutorial? The main challenge this time is in loading multiple images at runtime from external files. We want to load all images simultaneously rather than consecutively. Consecutive loading is easier to control but causes visible delays even with small files. When we load images concurrently, how do we know when all images have loaded succesfully and our applet can be initialized? There are many ways to address this issue but the most natural way is to extend the built-in AS3 EventDispatcher class and to create a custom event that fires when all images have loaded successfully.
On the next page, we discuss our custom ImageLoader class that has the required functionality.