The KaleidoscopeMirror Class

Public Methods

The KaleidoscopeMirror class has the following public methods.

The constructor evoked with the key word 'new':

  • new KaleidoscopeMirror (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 KaleidoscopeMirror. 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.

New Parts of the Code, Graphics.copyFrom Method in Action

Below is the private method of the KaleidoscopeMirror class, drawWedges, that runs each time 'doSpin' is called. Each element of the Vector, wedgesVec, is a Sprite that was created beforehand. (It is this method that differs from the corresponding method of our earlier Kaleidoscope class. The new version creates more symmetries.)

...........................

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);

var mat2:Matrix=mat.clone();

mat2.concat(new Matrix(-1,0,0,1,0,0));

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 contains random parameters. This will cause the image to be different each time the method is called. By default, beginBitmapFill is set to 'repeat'. That means that if you image is small, it will simply be repeated.
 
Unlike in 'Kaleidoscope' class, we fill the second wedge with bitmap fill with the matrix mat2 that creates a mirror image of the fill in the first wedge. That gives the resulting kaleidoscoping image more symmetry.
*/

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();

 

wedgesVec[1].graphics.lineStyle();

wedgesVec[1].graphics.beginBitmapFill(imageData,mat2);

wedgesVec[1].graphics.moveTo(0,0);

wedgesVec[1].graphics.lineTo(-sideLen/2,-wedgeHeight);

wedgesVec[1].graphics.lineTo(sideLen/2,-wedgeHeight);

wedgesVec[1].graphics.lineTo(0,0);

wedgesVec[1].graphics.endFill();

 

//Below we use the method 'copyFrom' of the Graphics class to copy the fill

//from the first and the second 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=2;i<numWedges;i++){

if (i % 2 == 0) {

wedgesVec[i].graphics.copyFrom(wedgesVec[0].graphics);

}

else {

wedgesVec[i].graphics.copyFrom(wedgesVec[1].graphics);

}

}

}

...........................

Download

  • Download all source fla, as, and jpg files corresponding to this tutorial: gallery_kal.zip

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.