Animated 3D Book, Custom 'Book' Class

In this effect, we show how to use our custom AS3 class 'Book' and a sequence of timers to create a 3D animated book that spins, rotates, and moves through the 3D space. We also demostrate how to flip text fields in 3D. We use our own book in this example but the attached source files can be easily customized for different images, text, and sizes.

Click on the screen shot above to open the applet. The screen shot shows only a small portion of the applet.

Download

  • Download all files corresponding to the applet above: book3d.zip

All the source files in the package are exhaustively commented. The fla file that corresponds to the applet above is book.fla. The fla file uses the class 'Book' in the nested sequence of folders com-flashandmath-cs4 contained in the package. The folder 'com' must be in the same directory as the fla file for the file to compile.

The Custom 'Book' Class

The 'Book' class is simple to use and its code is easy to follow. You pass to the constructor two BitmapData objects corresponding to the front and the back of your book, the thickness of your book, the colors for the sides, and the class literally builds your book for you. The class provides methods for rotating the book in 3D. If you set thickness to, say, 2 pixels you basically obtain a two-sided image, a card, that you can flip in 3D. (Incidentally, the flipping mechanism for text fields discussed on the next page also provides a way to create a flipping object whose sides are MovieClips, Bitmaps, or TextFields.)

The Book class extends the Sprite class. The class has three public methods: the constructor, 'rotateBookLocal', and 'rotateBookGlobal'.

The constructor.  The constructor of the 'Book' class takes the following parameters: a BitmapData object that represents the front of the book, a BitmapData object that represents the back of the book, book's thickness, in pixels, the color of the outline, the color of the back ridge of the book. The last, optional, parameter gives the color of the sides of the book. Default: white.

new Book(bd1:BitmapData,bd2:BitmapData,thick:Number,
                bord:Number,bck:Number,sides:Number=0xFFFFFF)

'rotateBookGlobal' method: 

rotateBookGlobal(a:Number,b:Number,c:Number):void

The method rotates your instance of the 'Book' class, say 'book', about the stationary x-, y-, and z-axes by a, b, and c degrees, respectively.

As 'book' is rotated its local x-, y-, and z-axes (which originally coincide with the coordinate axes) are rotated as well. Those rotated axes are called 'local' axes. Most of the time we want to rotate our 'book' about its local axes. The next method does just that.

'rotateBookLocal' method: 

rotateBookLocal(a:Number,b:Number,c:Number):void

The method rotates your instance of the 'Book' about its local x-, y-, and z-axes by a, b, and c degrees, respectively.

From the AS3 point of view the difference between local and global rotations boils down to the difference between Matrix3D.prependRotation(..) and Matrix3D.appendRotation(..).

Things to consider:  The 'Book' class builds your book, say, 'book' as a 3D Sprite with the registration point at its center. No custom perspective projection methods are used in the class. Thus your instance, 'book', behaves like any other 3D Sprite and it is subject to the perspectiveProjection settings of your main movie: this.transform.perspectiveProjection. If your instance is close to the center of the Stage, you do not have to reset these settings. If your 'book' is not close to the center of the Stage, you may want to set in the main fla file:

this.transform.perspectiveProjection.projectionCenter
        = new Point(book.x,book.y);

You may also want to set your own amount of perpective distortion in the main fla file. For example:

this.transform.perspectiveProjection.fieldOfView = 60;

Besides animating a 3D book, we create a mechanism for flipping TextFields in 3D. For simplicity, we put the code that does that on the MainTimeline. The code can easily be adapted to create flipping effects for Bitmaps, MovieClips and other DisplayObjects.

We discuss the 'flipping' code on the next page.

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.