TECH-NI Blog

IRBWEB - Try Ruby on Your Browser!

Sun, 05 Apr 2009 16:28:43 +0000

One of the annoyances of trying ruby is installing Ruby. IRBWEB let you try it on your browser!

You can enter ruby expression and evaluate it.

IRBWEB

It works completely in your browser, so you get the result so quickly.

Silverlight 2.0 Required

The Silverlight 2.0 runtime plug-in required. Click the following image.

How does it work?

Silverlight supports DLR(Dynamic Language Runtime) which enables us to execute Ruby and Python on .NET application. IRBWEB is developped based on repl sample included in Silverlight Dynamic Languages SDK 0.5.0.

Processing "FireCube" example ported to ActionScript 3.0

Wed, 25 Mar 2009 15:51:37 +0000

Processing example FireCube is so interesting to me. I ported it to ActionScript 3.0.

The result is...

Performance improvement

Processing version calculates every pixel color when

creating noise,
combining values from adjacent pixels and
converting color.

So I implement it as follows:

creating noise -> BitmapData.noise()
combining values from adjacent pixels -> ConvolutionFilter
converting color -> BitmapData.paletteMap()

Difficulty

HSV color space is not supported in AS3! I created a function called HSVtoRGB.

Drawing a cube was a pain. So, I changed a cube to circle...

Here is the code: (83 lines)

]]>

// Processing FireCube (AS3 version) 
// original source: http://processing.org/learning/topics/firecube.html
package {
import flash.display.*;
import flash.filters.*;
import flash.geom.*;
 
public class FireCube extends Sprite{
    private const WIDTH:int = 200;
    private const HEIGHT:int = 150;
 
    public function FireCube(){
        stage.align = "TL";
        stage.scaleMode = "noScale";
        scaleX = scaleY = 2;
 
        // Create circle
        var circle:Sprite = new Sprite();
        circle.graphics.beginFill(0x808080);
        circle.graphics.drawCircle(0, 0, 10);
        circle.graphics.endFill();
 
        // Create buffered image
        var fire:BitmapData = new BitmapData(WIDTH, HEIGHT, false, 0);
        var pg:BitmapData = fire.clone();
        var noiseBmd:BitmapData = new BitmapData(WIDTH, 1);
 
        var bmp:Bitmap = new Bitmap(pg);
        addChild(bmp);
 
        // Generate the palette
        var r:Array = [], g:Array = [], b:Array = [];
        for(var x:int = 0; x < 256; x++) {
            //Hue goes from 0 to 85: red to yellow
            //Saturation is always the maximum: 255
            //Lightness is 0..255 for x=0..128, and 255 for x=128..255
            HSVtoRGB(x / 3, 1, Math.min(x * 3 / 255.0, 1), r, g, b);
        }
 
        // Use ConvolutionFilter to calculate for every pixel
        var filter:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, 0, 0, 16, 16, 16, 0, 16, 0], 65);
 
        // Prepare points and matrix
        var matrix:Matrix = new Matrix();
        var pt0:Point = new Point(0, HEIGHT - 1);
        var pt1:Point = new Point(0, -1);
        var pt2:Point = new Point(0, 1);
 
        // Do loop
        addEventListener("enterFrame", function(event:*):void{
            // Randomize the bottom row of the fire buffer
            noiseBmd.noise(Math.random() * 0xffffffff, 0, 190, 7, true);
            fire.copyPixels(noiseBmd, noiseBmd.rect, pt0);
 
            // Display circle
            matrix.tx = mouseX;
            matrix.ty = mouseY;
            fire.draw(circle, matrix);
 
            // Add pixel values around current pixel
            fire.applyFilter(fire, fire.rect, pt1, filter);
 
            // Output everything to screen using our palette colors
            pg.paletteMap(fire, fire.rect, pt2, r, g, b);
        });
    }
 
    // AS3 does not natively support HSV...  :-(
    private function HSVtoRGB(h:int, s:Number, v:Number, r:Array, g:Array, b:Array):void {
        if (h < 60) {
            r.push((v * 255) << 16);
            g.push((v * (1 - (1 - h / 60.0) * s) * 255) << 8)
            b.push(v * (1 - s) * 255);
        } else if (h < 120) {
            r.push((v * (1 - (-h / 60.0 - 1) * s) * 255) << 16);
            g.push((v * 255) << 8);
            b.push(v * (1 - s) * 255);
        } else {
            throw Error('not implemented');
        }
    }
}
}

50 polygons Mona Lisa in AS3

Tue, 17 Feb 2009 14:01:06 +0000

I ported Image evolution to ActionScript 3.

We start from random 50 polygons that are invisible. In each optimization step we randomly modify one parameter (like color components or polygon vertices) and check whether such new variant looks more like the original image. If it is, we keep it, and continue to mutate this one instead.

In my computer, the result was as follows.

It's waste of CPU.., but very interesting.

Published SWF (CAUSION: TOO HEAVY CPU 60%~)

Because this program uses BitmapData.compare() to improve performance, it is about 10 times faster than the JavaScript version. The original C# version is about 3 times faster than mine.

Here is the code: (189lines)

]]>

package{
import flash.display.*;
import flash.text.*;
import flash.geom.*;
import flash.filters.ColorMatrixFilter;
import flash.utils.setInterval;
 
[SWF(backgroundColor="#eeeeee")]
public class Evolve extends Sprite{
    [Embed(source='mona_lisa_crop.jpg')]
    private var MonaLisa:Class;
    private var imgWidth:int;
    private var imgHeight:int;
 
    private const POLYGONS:int = 50;
    private var polygons:Array = [];
    private var mutating:Boolean = false;
 
    private var monotoneFilter:ColorMatrixFilter = new ColorMatrixFilter([
            1 / 3, 1 / 3, 1 / 3, 0, 0, 
            1 / 3, 1 / 3, 1 / 3, 0, 0, 
            1 / 3, 1 / 3, 1 / 3, 0, 0, 
                0,     0,     0, 1, 0 ]);
    private var pt0:Point = new Point(0, 0);
    private var rect:Rectangle;
 
    private var bestBmd:BitmapData;
    private var testBmd:BitmapData;
    private var inputBmd:BitmapData;
    private var debugBmd:BitmapData;
 
    private var canvas:Sprite;
 
    private var score:uint;
    private var scoreMax:uint;
    private var mutations:uint = 0;
    private var candidates:uint = 0;
    private var totalTime:Number = 0;
    private var time:Date;
    private var scoreText:TextField;
 
    public function Evolve(){
        stage.scaleMode = "noScale";
        stage.align = "TL";
 
        // init image
        var bmp:Bitmap = new MonaLisa();
        inputBmd = bmp.bitmapData;
        addChild(bmp);
        imgWidth = bmp.width;
        imgHeight = bmp.height;
        rect = inputBmd.rect;
        score = scoreMax = rect.width * rect.height * 255;
 
        // init buffer
        bestBmd = inputBmd.clone(); bestBmd.fillRect(rect, 0x000000);
        testBmd = inputBmd.clone(); testBmd.fillRect(rect, 0x000000);
        debugBmd = inputBmd.clone();
        addChild(new Bitmap(bestBmd)).x = bmp.width + 10;
 
        // init data and canvas
        canvas = new Sprite();
        for(var i:int = 0; i < POLYGONS; i++){
            polygons[i] = new Polygon();
            canvas.addChild(new Sprite());
        }
        drawTest();
        testToBest();
 
        // init ui
        var tf:TextField = new TextField();
        tf.text = "click to start";
        tf.y = bmp.height + 10;
        tf.scaleX = tf.scaleY = 3;
        addChild(tf);
        stage.addEventListener("click", function(event:*):void{
            mutating = !mutating;
            time = (mutating ? new Date() : null);
            tf.text = (mutating ? "Now Simulating..." : "click to start");
        });
        scoreText = new TextField();
        scoreText.autoSize = "left";
        scoreText.y = bmp.height + 60;
        scoreText.scaleX = scoreText.scaleY = 3;
        addChild(scoreText);
 
        // start timer
        setInterval(update, 10);
    }
 
    private function update():void{
        if(!mutating) return;
        var t:Date = new Date();
        totalTime += (t.getTime() - time.getTime()) / 1000;
        time = t;
 
        for(var i:int = 0; i < 10; i++) update1();
        scoreText.text = (int((1 - score / scoreMax) * 10000) / 100)
             + "%\n" + mutations + " / " + candidates + "\n"
             + (int(totalTime * 10) / 10) + "s";
    }
 
    private function update1():void{
        var index:int = Math.random() * POLYGONS;
        var backup:Polygon = polygons[index].clone();
        polygons[index].mutate();
        drawTest();
 
        var diffBmd:BitmapData = testBmd.compare(inputBmd) as BitmapData;
        diffBmd.applyFilter(diffBmd, rect, pt0, monotoneFilter);
        var testScore:uint = 0;
        for(var i:int = 0; i < 0x100; i++){
            testScore += diffBmd.threshold(diffBmd, rect, pt0, "==", i, i, 0xff) * i;
        }
 
        if(score > testScore){
            score = testScore;
            testToBest();
            mutations++;
        }else{
            polygons[index] = backup;
        }
        candidates++;
    }
 
    private function drawTest():void{
        canvas.graphics.clear();
        for(var i:int = 0; i < POLYGONS; i++){
            polygons[i].draw(canvas, imgWidth, imgHeight);
        }
 
        testBmd.fillRect(rect, 0x000000);
        testBmd.draw(canvas);
    }
 
    private function testToBest():void{
        bestBmd.copyPixels(testBmd, rect, pt0);
    }
}
}
 
import flash.display.*;
import flash.geom.*;
 
class Polygon{
    private const POINTS:int = 6;
 
    public var points:Array = [];
    public var color:uint;
    public var alpha:Number;
 
    public function Polygon(polygon:Polygon = null){
        for(var i:int = 0; i < POINTS; i++)
            points[i] = (polygon ? polygon.points[i].clone() : new Point(Math.random(), Math.random()));
        color = (polygon ? polygon.color : 0xffffff * Math.random());
        alpha = (polygon ? polygon.alpha : .1);
    }
 
    public function clone():Polygon{
        return new Polygon(this);
    }
 
    public function mutate():void{
        (Math.random() < 0.5 ? mutateColor() : mutatePosition());
    }
 
    private function mutateColor():void{
        switch(int(Math.random() * 4)){
            case 0: color = (color & 0x00ffff) + int(Math.random() * 255) * 0x010000; break;
            case 1: color = (color & 0xff00ff) + int(Math.random() * 255) * 0x000100; break;
            case 2: color = (color & 0xffff00) + int(Math.random() * 255) * 0x000001; break;
            case 3: alpha = Math.random(); break;
        }
    }
 
    private function mutatePosition():void{
        var p:int = Math.random() * POINTS;
        if(Math.random() < .5) points[p].x = Math.random();
        else                   points[p].y = Math.random();
    }
 
    public function draw(canvas:Sprite, w:Number, h:Number):void{
        canvas.graphics.beginFill(color, alpha);
        canvas.graphics.moveTo(points[0].x * w, points[0].y * h);
        for(var i:int = 1; i < POINTS; i++)
            canvas.graphics.lineTo(points[i].x * w, points[i].y * h);
        canvas.graphics.endFill();
    }
}

Color Illusion Generator released

Thu, 26 Jun 2008 21:07:46 +0000

I released a 'Color Illusion Generator', which enables to create a illusion movie from an arbitrary image.

(Example)

You can embed the movie to your blog.

Source code: Illusion.as

Google Earth control in Google Maps

Mon, 26 May 2008 01:04:10 +0000

I placed Google Earth control in Google Maps.

Here is the code(185 lines):

]]>

package {
    import flash.display.*;
    import flash.geom.*;
    import flash.events.*;
    import flash.filters.DisplacementMapFilter;
    import com.google.maps.*;
 
    [SWF(backgroundColor="0x000000")]
    public class GoogleEarthControl extends Sprite {
        private const WIDTH:int = 400;
        private const HEIGHT:int = 400;
        private const VIEWDISTANCE:Number = 500;
        private var map:Map;
        private var mapContainer:Sprite;
        private var bmd:BitmapData;
 
        public function GoogleEarthControl() {
            stage.scaleMode = "noScale";
            stage.align = "TL";
 
            mapContainer = new Sprite();
            addChild(mapContainer);
 
            map = new Map();
            map.key = "ABQIAAAA6de2NwhEAYfH7t7oAYcX3xRWPxFShKMZYAUclLzloAj2mNQgoRQZnk8BRyG0g_m2di3bWaT-Ji54Lg";
            map.setSize(new Point(WIDTH, HEIGHT));
            map.addEventListener(MapEvent.MAP_READY, function(event:*):void{
                map.setCenter(new LatLng(35.003759, 135.769322), 10, MapType.SATELLITE_MAP_TYPE);
 
                var mapMask:Sprite = new Sprite();
                mapMask.graphics.beginFill(0);
                mapMask.graphics.drawRect(0, 0, WIDTH, HEIGHT);
                mapMask.graphics.endFill();
                mapContainer.mask = mapMask;
 
                bmd = new BitmapData(WIDTH, HEIGHT);
 
                var s1:ScrollBar = new ScrollBar(50);
                addChild(s1);
                s1.rotation = -90
                s1.x = WIDTH - 100; s1.y = 30;
                s1.addEventListener("change", function(event:Event):void{
                    updateValue(s1.value);
                });
                s1.dispatchEvent(new Event("change"));
 
                var s2:ScrollBar = new ScrollBar(80);
                addChild(s2);
                s2.x = WIDTH - 10; s2.y = 50;
                s2.addEventListener("change", function(event:Event):void{
                    map.setZoom((100 - s2.value) / 100 * map.getMaxZoomLevel());
                });
                s2.dispatchEvent(new Event("change"));
 
                var r:RotationControl = new RotationControl(-10);
                addChild(r);
                r.x = WIDTH - 60; r.y = 90;
                r.addEventListener("change", function(event:Event):void{
                    var matrix:Matrix = new Matrix();
                    matrix.translate(-WIDTH / 2, -HEIGHT / 2);
                    matrix.rotate(r.value * Math.PI / 180);
                    matrix.translate(WIDTH / 2, HEIGHT / 2);
                    map.transform.matrix = matrix;
                });
                r.dispatchEvent(new Event("change"));
            });
            mapContainer.addChild(map);
        }
 
        private function updateValue(value:int):void{
            var rad:Number = value / 100 * 60 * Math.PI / 180;
            var p:Number = -Math.sin(rad) / VIEWDISTANCE;
 
            bmd.lock();
            var HW:int = WIDTH / 2;
            var HH:int = HEIGHT / 2;
            for(var j:int = -HH; j < HH; j++){
                var pj:Number = 1 + j * p;
                for(var i:int = -HW; i < HW; i++){
                    var _x:int = pj * i;
                    var _y:int = pj * j / Math.cos(rad);
                    bmd.setPixel(i + HW, j + HH, getColor((_x - i) * 1 + 0x80, (_y - j) * 1 + 0x80, 0));
                }
            }
            bmd.unlock();
 
            mapContainer.filters = [new DisplacementMapFilter(bmd, new Point(0, 0), 1, 2, 256, 256, "color")];
        }
 
        private static function bounds(val:Number, min:Number = Number.POSITIVE_INFINITY, max:Number = Number.NEGATIVE_INFINITY):Number {
            return Math.max(Math.min(val, max), min);
        }
 
        private static function getColor(r:int, g:int, b:int):uint {
            return Math.floor(bounds(r, 0, 255)) * 0x10000
                 + Math.floor(bounds(g, 0, 255)) * 0x100
                 + Math.floor(bounds(b, 0, 255));
        }
    }
}
 
import flash.display.Sprite;
import flash.events.*;
import flash.geom.Point;
 
class ScrollBar extends Sprite {
    public var value:int;
 
    public function ScrollBar(_value:int):void {
        value = _value;
 
        useHandCursor = buttonMode = true;
        graphics.beginFill(0xffffff);
        graphics.lineStyle(0);
        graphics.drawRect(0, -2, 8, 112);
        graphics.endFill();
 
        var tab:Sprite = new Sprite();
        tab.graphics.beginFill(0xffffff);
        tab.graphics.lineStyle(0);
        tab.graphics.drawRect(-8, 0, 24, 8);
        tab.graphics.endFill();
        tab.y = _value;
        addChild(tab);
 
        addEventListener("mouseDown", function(event:MouseEvent):void {
            stage.addEventListener("mouseMove", mouseMoveHandler);
            stage.addEventListener("mouseUp", mouseUpHandler);
            mouseMoveHandler(event);
        });
 
        var mouseMoveHandler:Function = function(event:MouseEvent):void {
            var p:Point = globalToLocal(new Point(stage.mouseX, stage.mouseY));
            tab.y = Math.min(Math.max(0, p.y), 100);
        }
        var mouseUpHandler:Function = function(event:MouseEvent):void {
            value = tab.y;
            dispatchEvent(new Event("change"));
            stage.removeEventListener("mouseMove", mouseMoveHandler);
            stage.removeEventListener("mouseUp", mouseUpHandler);
        }
    }
}
 
class RotationControl extends Sprite {
    public var value:int = 0;
 
    public function RotationControl(_value:int):void {
        value = _value;
 
        useHandCursor = buttonMode = true;
        graphics.beginFill(0xffffff);
        graphics.lineStyle(0);
        graphics.drawCircle(0, 0, 40);
        graphics.drawCircle(0, 0, 32);
        graphics.endFill();
 
        var tab:Sprite = new Sprite();
        tab.graphics.beginFill(0xffffff);
        tab.graphics.lineStyle(0);
        tab.graphics.drawRect(-44, -8, 16, 16);
        tab.graphics.endFill();
        tab.rotation = _value + 90;
        addChild(tab);
 
        addEventListener("mouseDown", function(event:MouseEvent):void {
            stage.addEventListener("mouseMove", mouseMoveHandler);
            stage.addEventListener("mouseUp", mouseUpHandler);
            mouseMoveHandler(event);
        });
 
        var mouseMoveHandler:Function = function(event:MouseEvent):void {
            var p:Point = globalToLocal(new Point(stage.mouseX, stage.mouseY));
            tab.rotation = p.x == 0 ? 90 : Math.atan(p.y / p.x) / Math.PI * 180 + (p.x > 0 ? 180 : 0);
            value = tab.rotation - 90;
            dispatchEvent(new Event("change"));
        }
        var mouseUpHandler:Function = function(event:MouseEvent):void {
            value = tab.rotation - 90;
            dispatchEvent(new Event("change"));
            stage.removeEventListener("mouseMove", mouseMoveHandler);
            stage.removeEventListener("mouseUp", mouseUpHandler);
        }
    }
}

Google Maps Globe

Fri, 23 May 2008 16:39:43 +0000

I created a globe using Google Maps API for Flash.

It is impossible to get the image data by BitmapData.draw(), so I used a DisplacementMapFilter.

Here is the code(70 lines):

]]>

package {
    import flash.display.*;
    import flash.geom.*;
    import flash.filters.DisplacementMapFilter;
    import flash.utils.setInterval;
    import com.google.maps.*;
 
    [SWF(backgroundColor="0x000000")]
    public class GoogleEarthAs3_2 extends Sprite {
        private const WIDTH:int = 800;
        private const HEIGHT:int = 500;
        private const RADIUS:int = 81;
        private var map:Map;
 
        public function GoogleEarthAs3_2() {
            stage.scaleMode = "noScale";
            stage.align = "TL";
 
            map = new Map();
            map.key = "ABQIAAAA6de2NwhEAYfH7t7oAYcX3xRWPxFShKMZYAUclLzloAj2mNQgoRQZnk8BRyG0g_m2di3bWaT-Ji54Lg";
            map.setSize(new Point(800, 500));
            map.addEventListener(MapEvent.MAP_READY, function(event:*):void{
                var lng:Number = 0;
                var types:Array = [MapType.SATELLITE_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE, MapType.NORMAL_MAP_TYPE];
                var type:int = 0;
                map.setCenter(new LatLng(0, lng), 1, types[0]);
                map.disableDragging();
 
                setInterval(function():void
                {
                    lng -= 3;
                    type = Math.random() < 0.05 ? (type + 1) % 3 : type;
                    map.setCenter(new LatLng(0, lng), 1, types[type]);
                    lng = lng % 360;
                }, 200);
            });
 
            var bmd:BitmapData = new BitmapData(WIDTH, HEIGHT, false, 0);
            for(var j:int = 0; j < RADIUS * 2; j++){
                var ay:Number = Math.PI / 2 - Math.acos(1 - j / RADIUS);
                var dy:Number = RADIUS - j - RADIUS * ay;
                var rx:Number = RADIUS * Math.cos(ay);
                for(var i:int = RADIUS - rx; i < RADIUS + rx; i++){
                    var ax:Number = Math.PI / 2 - Math.acos(1 - (i - RADIUS + rx) / rx);
                    var dx:Number = RADIUS - i - rx * ax;
 
                    bmd.setPixel(i, j, getColor(dx * 3 + 128, dy * 3 + 128, 128));
                }
            }
 
            var diff:Number = (HEIGHT - 2 * RADIUS) / 2;
            map.filters = [new DisplacementMapFilter(bmd, new Point(diff, diff), 1, 2, 128, 128)];
            var matrix:Matrix = new Matrix();
            matrix.translate(-diff, -diff);
            map.transform.matrix = matrix;
            addChild(map);
 
            var msk:Sprite = new Sprite();
            msk.graphics.beginFill(0);
            msk.graphics.drawCircle(RADIUS, RADIUS, RADIUS);
            msk.graphics.endFill();
            addChild(msk);
            mask = msk;
        }
 
        private static function getColor(r:int, g:int, b:int):uint {
            return r * 0x10000 + g * 0x100 + b;
        }
    }
}

Google Maps API for Flash without MXML

Sun, 18 May 2008 09:43:35 +0000

In the Google Maps API for Flash tutorial, a sample using MXML is introduced. But MXML is not required, because com.google.maps.Map class derives Sprite class.

The following sample demonstrates how to rotate and blur the map without MXML.

Here is the code:

]]>

package {
    import flash.events.Event;
    import flash.geom.Matrix;
    import flash.filters.BlurFilter;
    import com.google.maps.Map;
    import com.google.maps.MapEvent;
    import com.google.maps.MapType;
    import com.google.maps.LatLng;
 
    public class GoogleGuruGuru extends Map {
        public function GoogleGuruGuru() {
            super();
            key = "ABQIAAAA6de2NwhEAYfH7t7oAYcX3xRWPxFShKMZYAUclLzloAj2mNQgoRQZnk8BRyG0g_m2di3bWaT-Ji54Lg";
 
            addEventListener(MapEvent.MAP_READY, function(event:Event):void{
                setCenter(new LatLng(35.003759, 135.769322), 18, MapType.NORMAL_MAP_TYPE);
            });
 
            var r:int = 0;
            var scale:Number = 1;
            addEventListener("enterFrame", function(event:Event):void{
                r = (r + 1) % 360;
                var rad:Number = 2 * Math.PI * r / 360;
 
                var matrix:Matrix = new Matrix();
                matrix.translate(-stage.stageWidth / 2, -stage.stageHeight / 2);
                matrix.rotate(rad);
                matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2);
                transform.matrix = matrix;
            });
 
            stage.addEventListener("mouseDown", function(event:Event):void{
                filters = [new BlurFilter(10, 10)];
            }, true);
            stage.addEventListener("mouseUp", function(event:Event):void{
                filters = [];
            });
        }
    }
}

Keynote-like cube transition by FIVe3D

Mon, 12 May 2008 16:19:05 +0000

I tried FIVe3D v2.1, very simple 3D library. For example, 'Graphics3D' class has method like lineTo() and drawCircle(). Looks like Graphics class!!

I created an example 'Keynote-like cube transition' using Bitmap3D class.

I refered to unic8 Studios - Flex Cube - 3D OSX look, which uses PV3D.

FIVe3D doesn't execute hidden surface removal, so I used setChildIndex() in the onUpdate callback of Tweener.

And since fl.motion.Color was not in Flex SDK, I commented out to compile :)

Here is the code:

]]>

package {
    import flash.display.*;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.utils.setInterval;
    import five3D.display.*;
 
    import caurina.transitions.Tweener;
 
    public class Five3dCubeEffect extends Sprite {
        private const WIDTH:int = 400;
        private const HEIGHT:int = 267;
 
        [Embed(source="1.jpg")]
        private var Image1:Class;
        [Embed(source="2.jpg")]
        private var Image2:Class;
        [Embed(source="3.jpg")]
        private var Image3:Class;
 
        private var isCube:int = -1;
 
        public function Five3dCubeEffect() {
            stage.scaleMode = "noScale";
            stage.align = "TL";
 
            var images:Array = [];
            images.push(new Image1());
            images.push(new Image2());
            images.push(new Image3());
 
            addChild(images[0]);
            var index:int = 0;
 
            setInterval(function():void{
                isCube = (Math.random() < 0.5 ? 1 : -1);
                transition(images[index], images[(index + 1) % images.length]);
                index = (index + 1) % images.length;
            }, 3500);
        }
 
        private function transition(bmp1:Bitmap, bmp2:Bitmap):void {
            var scene:Scene3D = new Scene3D();
            scene.x = WIDTH / 2;
            scene.y = HEIGHT / 2;
            addChild(scene);
 
            var box:Sprite3D = new Sprite3D();
            box.z = isCube * WIDTH / 2;
            scene.addChild(box);
 
            var img2:Bitmap3D = new Bitmap3D(bmp2.bitmapData);
            box.addChild(img2);
            img2.x = WIDTH / 2;
            img2.y = -HEIGHT / 2;
            img2.z = -isCube * WIDTH / 2;
            img2.rotationY = -isCube * 90;
 
            var img1:Bitmap3D = new Bitmap3D(bmp1.bitmapData);
            box.addChild(img1);
            img1.x = -WIDTH / 2;
            img1.y = -HEIGHT / 2;
            img1.z = -isCube * WIDTH / 2;
 
            Tweener.addTween(box, {
                time: 1.5,
                rotationY: isCube * 90,
                transition: "easeInOutCubic",
                onStart: function():void{
                    removeChild(bmp1);
                },
                onUpdate: function():void{
                    if(Math.abs(box.rotationY) > 45){
                        box.setChildIndex(img1, 0);
                    }
                },
                onComplete: function():void{
                    box.parent.removeChild(box);
                    addChild(bmp2);
                }
            });
        }
    }
}

Here-document in AS3.0

Sat, 26 Jan 2008 15:54:55 +0000

Here-document is not implemented in AS3... But we can realize it using E4X and CDATA section!!

var s:String = <>[CDATA[bar
foo
class="test">Any text here
 
Ohhhhhhh!!!!!
]]>;
 
    trace(s);
/* 
bar
foo
Any text here
 
Ohhhhhhh!!!!!
*/

You don't have to escape " and \ in the here-document.

Introduction of "Spark project" in English

Thu, 17 Jan 2008 15:24:01 +0000

Yoshihiro Shindo has blogged about "Spark project" in English.

"Spark project" is a Japanese OpenSource ActionScript Community. There are many awesome libraries such as:

ASReflect: ASReflect is a Java-like reflection library that wraps flash.utils.describeType.
E3Engine: An ECMAScript(3rd) engine written in ActionScript2. This engine enables us to execute "eval()" dynamically.
swfassist: swiffassist can dynamically generate SWF binaries on ActionScript3. This library may change the world!?
Thread: 'Thread' helps us write asynchronous processing in ActionScript3.

The details are given in his entry. Let's check it now!

as3Query: alpha version (New Wave ActionScript)

Mon, 14 Jan 2008 15:44:06 +0000

as3Query is an ActionScript3.0 port of John Resig's exellent JavaScript library jQuery 1.2.1.

This port is released under the MIT and GPL licenses(as is the original jQuery).

Documentation is NOT available. Please refer to the original jQuery Documentation. Most features are ported except for Ajax methods.

]]> Download

Full source code for the engine and examples is hosted on a Subversion(SVN) server.

For anonymous check-out, the command is:

svn co http://www.libspark.org/svn/as3/as3Query/

Demos

25 Boxes

This demo shows how to create instances and monitor events.

Source code (plain text)

25 Boxes + Tweener

jQuery animation may be poor for Flash creators. So, I added 'addTween' method to cooperate with 'Tweener' (a famous AS3 animation library).

Source code (plain text)

CSS Selector Demo

You can test CSS Selector-based DisplayObject traversal. For example, CSS "E" matches all of the instances of class E.

Source code (plain text)

The demo uses an XML to create and place shapes. See the XML object in the source code. When as3Query receives the XML, it creates instances and set attributes according to the XML. It looks like an HTML (or a MXML), doesn't it?

First post

Wed, 02 Jan 2008 14:44:20 +0000

This is my first post at this blog.

I've learned AS3 and Flex for 1 year, and writing AS3 blog in Japanese(here). And now, I decided to write in English. I want to show many AS3 samples on this blog.

I also want to introduce good libraries and tools developed by Japanese. Some Japanese have developed very nice libraries and tools, but I'm afraid most of them are not used world wide.

Nice to see you.