A Simple Example

This tutorial was created by Bri Lance, a friend of flashandmath.com. The tutorial uses the same technique of a 3D flip as in our tutorial Flipping a Card Applet in Terms of AS3 Custom Classes. Bri introduces a new and important element: it is movie clips that are being flipped and not bitmaps.

Download

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

The files corresponding to the applet above are 'StaticFlip.fla' and 'WidgetFlipSimple.as'. They have to be in the same directory for the 'fla' file to find the 'as' file.

In the earlier tutorial mentioned above, we discussed a method of flipping an image in 3D with perspective based on cutting the bitmap into vertical slices. However, the images that see you flipped in the applet above are not bitmaps, at least not initially. Both the pie chart and the data sheet on each side are snapshots of MovieClips. The MovieClips were created at authoring time, stored in the Library, and linked to ActionScript. When the widget is nor being flipped, you see the MovieClip corresponding to the visible side. Before a flip, a 'snapshot' of each clip is being taken and it is this snapshot that is being rotated.

To take a 'snapshot', Bri uses the 'draw' method of the BitmapData class in, what we think, is a very ingenious way. The 'draw' method can draw any DisplayObject into a BitmapData object. Suppose you have created a variable, yourBitmapDataObject of the type BitmapData. Suppose you have created a variable, sourceObject that stores a DisplayObject or a BitmapData object. You can then evoke the 'draw' method:

yourBitmapDataObject.draw(sourceObject);

The 'sourceObject' can be any object whose class implements 'IBitmapDrawable' interface. In particular, it can be any DisplayObject, like a Sprite or a MovieClip, or any BitmapData object. Once you have drawn the pixel information of your DisplayObject into a BitmapData object, you can create the corresponding bitmap image by:

var yourBitmap:Bitmap=new Bitmap(yourBitmapDataObject);

yourBitmap is effectively a snapshot of your sourceObject.

The files in the zip package that correspond to the above applet are 'FlipWidgetSimple.as' of the 'fla' file, 'StaticFlip.fla'. As you will see from the source code, the MovieClips created at authoring time are added as children of two Sprites, each Sprite corresponding to one side, and the snapshots of those Sprites are taken.

If we can manipulate MovieClips in this way, the natural next step is as follows. These MovieClips can contain components whose values can be set by the user, buttons, and other control elements. Controls on one side of the widget can control the state of the other side of the widget, or they can control something on the Stage. We show such an example on the next page.

Note: Bri is a web developer. She is fairly new to Flash development, having previously specialized in JavaScript/AJAX, and is very excited to continue learning more. In her own words, she works 'with a bunch of talented designers in the User Experience department of a large financial firm near Philadelphia'. Visit her website at http://www.fishingforwater.net/

Back to Advanced and Experimental              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.