The Kaleidoscope

In this simple tutorial we show how to create a kaleidoscope effect in Flash CS4. We use a new AS3 method available in Flash Player 10, 'copyFrom'. 'copyFrom' is a method of the Graphics class that makes it possible to copy drawings, fills, and, in our case, bitmap fills from one display object to another.

Download

The 'fla' file corresponding to the example above is called kal_main.fla. The simple code on the MainTimeline consists of creating an instance of the custom AS3 class, 'Kaleidoscope' (provided in the zip file as well). Below we show the timeline code with comments. On the next page we discuss the Kaleidoscope class. The class is rather simple as well. The size of Kaleidoscope, the bitmap image behind it, are very easy to customize.

Note

Since we first posted this tutorial, we created a new and enhanced version of the Kaleidoscope class presented here. Check out our new entry:
Kaleidoscopic Gallery in Flash CS4.

The Timeline Code

/*
We import our custom AS3 class, Kaleidoscope. The folder flashandmath must be in the same folder as this fla file for the file to compile. We create an instance of the class and store it in the variable 'kal'.
*/

import flashandmath.as3.Kaleidoscope;

/*
The constructor of the Kaleidoscope class takes two parameters: the URL of the image to use for bitmap fills and the radius of the kaleidoscope, in pixels. The third, optional, parameter is the number of wedges in the kaleidoscope The default value is 20 wedges.
*/

/*
You can experiment with different values for the radius and use your own image. The size of the image doesn't matter much as bitmap fills used by the class are set on 'repeat'. Different images will produce very different effects. Try Okno.jpg contained in the zip file instead of Sea.jpg.
*/

/*
The image file is loaded at runtime so its URL has to be set relative to the html page that contains your applet. In our case, the html page, the swf file, and the jpeg file are all in the same directory on the server.
*/

var kal:Kaleidoscope=new Kaleidoscope("Sea.jpg",200);

/*
The Kaleidoscope of the class extends Sprite. We add it to the Display List and position in the main movie.
*/

this.addChild(kal);

kal.x=stage.stageWidth/2;

kal.y=stage.stageHeight/2;

/*
The button 'btnSpin' calls a public method, doSpin, of the Kaleidoscope class, Instead of a button, you could use an instance of the Timer class and tell it to call 'doSpin' automatically every set interval of time.
*/

btnSpin.addEventListener(MouseEvent.CLICK,spin);

 

function spin(e:MouseEvent):void {

kal.doSpin();

}

Note

We got the idea for the applet above and we learned about the 'copyFrom' method from a new and excellent book by Todd Yard 'ActionScript 3.0 Image Effects' (friendsofed 2009). See our review at our Resources page:
Resources and Reviews.

On the next page we discuss the Kaleidoscope class.

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.