The Custom BitmapRoll Class in Action

In this tutorial, we present two custom AS3 classes: BitmapRoll and BitmapCylinder. The former takes a bitmap image and coils it into a coil that can be rotated in 3D by the user. The latter, wraps a bitmap around a cylinder. Both the coil and the cylinder respond to clicks.

Download

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

The files corresponding to the applet above are 'roll_1.fla', 'MainApp.as' as well as the BitmapRoll.as contained in the nested sequence of folders com --> flashandmath --> bitmaps. The files and the 'com' folder have to be in the same directory for the 'fla' file to compile.

The idea behind the applet (which will become evident if you look at the code in the BitmapRoll class) is very simple. We slice our bitmap (more precisely, the associated BitmapData object) into thin vertical slices. We then position these slices along the portions of the coil using the parametric equations of the coil. You can actually see the outline of the slices on the reverse side of the coiled bitmap. We then manipulate the rectangular slices in 3D using the same basic technique that we demostrated in our tutorial 'Simple 3D Drawing in Flash CS3'.

Note: From our exploration of Flash Player 10 thus far, we do not think that the way to obtain the kind of effect presented in this tutorial will become any different in Player 10, despite its native 3D capabilities.

On the next page, we show an easier example in which a bitmap is wrapped around a cylinder.

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.