The applets can be customized easily. You can substitute your own images, control the colors of the background and the reverse side. You can also attach any functionality you want to double-clicks on the rolls. The corresponding classes enable the rolls for double-clicks; the listeners are assigned outside the clases.
To see how to customize, for example, the first applet, let us look at the Document Class, MainApp.as, which contains all the code for the first applet.
package {
import flash.display.*;
import flash.events.*;
//We import our custom class, BitmapRoll.
import com.flashandmath.bitmaps.BitmapRoll;
public class MainApp extends MovieClip {
private var bdLab:BitmapData;
private var brRoll:BitmapRoll;
private var bmLab:Bitmap;
public function MainApp(){
/*
A jpeg 'Lab' was imported to the Library and linked to AS3 with the name 'Lab'.
The linked object becomes an instance of the BitmapData class. 300 by 225 is the
size of the image. If you want to change the image, substitute the name
and the dimensions below by the name and the dimensions of your image.
*/
bdLab=new Lab(300,225);
/*
We create an instance of the custom BitmapRoll class. The constructor
takes as parameters: a BitmapData object, and the width and the height
of the background for the coiled image that will be created by the class.
The radius of the coil will be calculated automatically by the class.
The background is imporatnt as the coil will rotate for as long as the user
does not roll out of the background. The width and the height should be
chosen so the coil sits comfortably within the background.
*/
brRoll=new BitmapRoll(bdLab,230,320);
this.addChild(brRoll);
/*
We create a bitmap from our BitmapData Library object 'Lab'. The visibility
of this bitmap will be toggled by double-clicking on the coil. In a sense,
this image, bmLab, is not tied to the class at all. It could be a different image.
The 'Lab' object is tied to the coil as it was passed to the BitmapRoll's constructor
and not because of the Bitmap created below.
*/
bmLab=new Bitmap(bdLab);
this.addChild(bmLab);
initApp();
}
private function initApp():void {
//BitmapRoll extends Sprite, so we can position our instance using
//Sprite methods.
brRoll.x=30;
brRoll.y=55;
/*
The two public methods of BitmapRoll commented out below allow you
to change the colors of the background and border and the colors
on the reverse side of the bitmap. The grid on the reverse side
is set to very transparent by the class so your colors will appear
a bit different than you might expect. We commented the lines
out as we are using defaults.
*/
//brRoll.setBackAndBorderColors(0xFFFFFF,0xFF0000);
//brRoll.setReverseAndGridColors(0xFFFFFF,0xFF0000);
bmLab.visible=false;
bmLab.x=290;
bmLab.y=97;
/*
'coil' that represents the actual coiled image is a public property
of BitmapRoll and it is enabled for double clicks. We attach a listener
that toggles the visibility of bmLab image. You can tell the listener
to perform any tasks you want.
*/
brRoll.coil.addEventListener(MouseEvent.DOUBLE_CLICK, onTwiceClick);
}
private function onTwiceClick(e:MouseEvent):void {
bmLab.visible=!bmLab.visible;
}
}
}
Download
- Download all 'as' and 'fla' files corresponding to this tutorial: rolls.zip
Enjoy rolling up your bitmaps!
