Source Code and Comments

We provide here complete source code and comments for our Android AIR app that you can download and install from the Android Market. Open the Android Market on your phone and search for KaleidoscopeFM. You can then download and install the app.

This simple but entertaining application uses the live feed from your phone's camera to create beautiful, dynamically changing kaleidoscopic images. Just launch the app, point your camera, and move your phone. The image on your screen keeps changing.

Obviously we cannot show the app in action on this page but here are a couple of still screen shots of the phone screen. Click the image or the text link above it to open the full resolution image.

Flowery pattern:
Plaid pattern:

Download

The zip file contains a custom AS3 class LiveKaleidoscope and the file KaleidoscopeFM.fla. The fla file was created from AIR for Android template that becomes available in your Flash CS5 after you download and install AIR for Android Extension for Flash CS5 from the Adobe site. (See the last section on this page for links.) After you open KaleidoscopeFM in Flash CS5, you must go to File -> AIR Android Settings and set those all over again; that is, create or enter your p12 certificate under Deployment, choose Deployment type and After Publishing options. With our phone-computer setup, we worked with Device Release, Install application..., and Launch application checked. Very important: Under Permissions check CAMERA to give the app access to the phone's camera. With these settings, each time we clicked Publish under File menu, a new version of the app was automatically installed and launched on the phone hooked up to the computer. In order for this to work, you need to download Android SDK and sometimes a driver for your phone. Again, see the last section for the relevant links.

The code

This app is based on our earlier AS3 class, KaleidoscopeThreeMirror presented in the tutorial: Three Mirror Kaleidoscope in Flash AS3. The only difference between KaleidoscopeThreeMirror and LiveKaleidoscope is in the type of masking. In the former class we used a circular, gradient mask; in the latter a plain rectangular mask. The constructor of LiveKaleidoscope takes the following parameters:

  • new LiveKaleidoscope(bd:BitmapData, hr:Number, w:Number=480, h:Number=800)

The first parameter is a BitmapData object from which kaleidoscopic images are derived. In our app, 'bd' is the BitmapData that comes from the phone's camera. This BitmapData object is passed to the class by reference. Hence, whenever 'bd' changes as the view of the camera changes, the BitmapData used by the class changes. That creates the 'live' effect. The second parameter is the radius, in pixels, of each hexagon in the tiling of the screen. The last two optional parameters represent of the width and the height of the kaleidoscope's rectangular display.

  • doSpin( ): void

The public 'doSpin' method redraws the kaleidoscope based on the current BitmapData.

The rest of the code consists of simple Timeline code in KaleidoscopeFM.fla. Here it is. Note the use of the Camera and Video classes.

import flash.media.Camera;

import flash.media.Video;

import flashandmath.as3.LiveKaleidoscope;

import flash.display.BitmapData;

import flash.display.Sprite;

import flash.events.Event;

import flash.display.Bitmap;

import flash.geom.Point;

 

var camera:Camera;

var video:Video;

var kaleidoscope:LiveKaleidoscope;

var kalData:BitmapData;

var kalHolder:Sprite;

var cameraWidth:int;

var cameraHeight:int;

var displayCenter:Point=new Point(240,400);

 

stage.align = StageAlign.TOP_LEFT;

init();

 

function init():void {

cameraWidth = 200;

cameraHeight = 200;

camera = Camera.getCamera();

camera.setMode(cameraWidth,cameraHeight,12);

video = new Video(cameraWidth,cameraHeight);

video.attachCamera(camera);

kalData = new BitmapData(cameraWidth, cameraHeight);

kaleidoscope = new LiveKaleidoscope(kalData,80);

kalHolder = new Sprite();

kalHolder.x = displayCenter.x;

kalHolder.y = displayCenter.y;

this.addChild(kalHolder);

kalHolder.addChild(kaleidoscope);

stage.addEventListener(Event.ENTER_FRAME, onEnter);

}

 

function onEnter(evt:Event):void {

kalData.draw(video);

kaleidoscope.doSpin();

}

The KaleidoscopeFM application was created by Dan Gries and Barbara Kaskosz of Flash and Math.

Helpful Links to Get Set Up with Flash CS5 Android Development

To download AIR for Android Extension for Flash CS5 and instructions how to install the extension, visit Adobe Labs:

To download Android SDK go to:

If your are going to be developing with Flash CS5, all you need is the Android SDK zip file.

Setting up and testing the connection between your Android phone and your computer, sometimes requires downloading a driver for your phone. For example, for Motorola Droid 2 and Windows 7, the driver was installed automatically. For Motorola Droid X Android 2.3 and Windows 7, we had to download the driver from the Motorola site.

We found the following video tutorials by Lee Brimelow of Adobe extremely helpful, although some changes need to be noted. In particular, AIR for Android Extension for Flash CS5 is now available at the Adobe Labs (see link above) and you do not have to sign up for the prerelease program.

Note: Before your phone can be recognized by Android SDK, be sure to set your phone to USB Debugging by going to Settings -> Applications -> Development and checking the USB Debugging box.

Back to AIR for Android              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.