Public Methods
The Kaleidoscope class has the following public methods.
The constructor evoked with the key word 'new':
- new Kaleidoscope (url: String, r: Number, n: Number=20)
The constructor takes two parameters plus one optional parameter. The first parameter is a string with the URL pointing to the image file on your server. That image file will provide BimapData for your instance of Kaleidoscope. The image file will be loaded at runtime. The second parameter is the radius, in pixels, of your instance. The last, optional, parameter sets the number of wedges in your Kaleidoscope. The default value: 20.
- doSpin( ): void
The public 'doSpin' method redraws the kaleidoscope. Since the matrix for the beginBitmapFill call in the function that does the drawing contains random parameters, the image will change each time the 'doSpin' method is called.
In addition, the class has a public 'destroy( )' method that you should call if you want to delete an instance of the class at runtime.
The code in Kaleidoscope.as is well-commented and should be easy to follow. The basic idea is to use the bitmapFill (with a randomized matrix) for one of the wedges of the kaleidoscope, and then use the 'copyFrom' method to copy the fill into the other wedges. Below, we show the portion of the code that shows how to use the new 'copyFrom' method.
Graphics.copyFrom Method in Action
Below is the private method of the Kaleidoscope class, drawWedges, that runs each time 'doSpin' is called. Each element of the Vector, wedgesVec, is a Sprite that was created beforehand.
...........................
private function drawWedges():void {
var i:int;
var mat:Matrix=new Matrix();
mat.translate(picWidth/2,picHeight/2);
mat.rotate(Math.random()*2*Math.PI);
mat.scale(Math.random()*0.5+0.5,Math.random()*0.5+0.5);
for(i=0;i<numWedges;i++){
wedgesVec[i].graphics.clear();
}
//We fill the first wedge using BitmapData of our image. The 'beginBitmapFill'
//call uses a matrix, mat, that conatins random parameters.
//This will cause the image to be different each time the method is called.
//By default, beginBitmapFill is setto 'repeat'.
//That means that if you image is small, it will simply be repeated.
wedgesVec[0].graphics.lineStyle();
wedgesVec[0].graphics.beginBitmapFill(imageData,mat);
wedgesVec[0].graphics.moveTo(0,0);
wedgesVec[0].graphics.lineTo(-sideLen/2,-wedgeHeight);
wedgesVec[0].graphics.lineTo(sideLen/2,-wedgeHeight);
wedgesVec[0].graphics.lineTo(0,0);
wedgesVec[0].graphics.endFill();
//Below we use the method 'copyFrom' of the Graphics class to copy the fill
//from the first wedge to all other wedges. The method copyFrom is new to FP10.
//It copies all drawings created via the Graphics' class commands
//from one DisplayObject to another.
for(i=1;i<numWedges;i++){
wedgesVec[i].graphics.copyFrom(wedgesVec[0].graphics);
}
}
...........................
Comments on Possible Modifications
When you experiment with different images, you will notice how dramatically the appearnce and the character of your instance of Kaleidoscope changes when the image changes.
In the applet on the previous page, we have a button that the user clicks to spin the kaleidoscope. You can easily create a timer that will automatically spin the kaleidoscope at every set time interval.
You can create several instances of the Kaleidoscope class within your movie. The instances will peacefully coexist.
Instead of using bitmap fills, you can let the user draw in one of the wedges and then use 'copyFrom' to replicate the drawing in other wedges. This will create a different kaleidoscope effect.
Download
- Download all files corresponding to this tutorial: kaleidoscope.zip
