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
- Download all files corresponding to this tutorial: kaleidoscope.zip
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.
