Get Firefox! creative commons

First actionscript 3 example

Posted Oct 20, 12:24 in AS3

Update: Check out part 2 and part 3 of this series on my experiences with ActionScript 3.

Update: The example swf doesn’t appear to be working in the new Beta of the Flash 8.5 player… I will look into this when I get a chance…

Macromedia have just released the Flex 2 Product Line which includes the Flash Player 8.5 and ActionScript 3. It’s only an alpha but it’s a good chance to start playing around with the next generation of the Flash Platform.

Below is my first little experiment. It’s currently very simple and doesn’t do anything that you couldn’t do with Flash 8 but I think coming up with simple little projects like this and making them is a good way to learn the new syntax.

First up, here is the swf (note that you will need the flash player 8.5 to view it):

Sorry, you require Flash 8.5 to view this movie.

And here is the code that generated the swf:

ActionScript:
package
{
        // use
        // -default-size 430 287
        // as the additional compiler arguments
       
        import flash.display.Sprite;
        import flash.display.DisplayObjectContainer;
        import flash.util.trace;       
        import flash.display.Loader;
        import flash.display.StageScaleMode;
        import flash.display.BitmapData;
        import flash.net.URLRequest;
        import flash.events.*;
       
        public class Mosaic extends Sprite
        {
               
                private var picHolder:Sprite;
                private var picLoader:Loader;
               
                public function Mosaic()
                {
                        stage.scaleMode = StageScaleMode.NO_SCALE;
                       
                        picHolder = new Sprite();
                        picHolder.x = picHolder.y = 10;
                       
                        picLoader = new Loader();
                        picLoader.addEventListener(EventType.COMPLETE, onPicLoaded);
                       
                        // TODO: Add support for displaying load progress, not found files etc?
                       
                        picLoader.load(new URLRequest("IMG_6032.jpg"));
                        this.addChild(picHolder);
                }

                private function onPicLoaded(event:Event):Void
                {
                        picHolder.addChild(picLoader);
                        var mt:MosaicTray = MosaicTray(this.addChild(new MosaicTray(picLoader, picLoader.content)));
                }
        }
       
        private class MosaicTray extends Sprite {
               
                private var TILE_SIZE:uint = 8;
               
                public function MosaicTray(picSprite:DisplayObjectContainer, bitmap:Bitmap)
                {
                        this.x = picSprite.width + 20;
                        this.y = 10;
                        for (var i:uint=0; i<picSprite.width; i+=TILE_SIZE) {
                                for (var j:uint=0; j<picSprite.height; j+=TILE_SIZE) {
                                        var col:uint = bitmap.bitmapData.getPixel(i, j);
                                        var mt:MosaicTile = new MosaicTile(i, j, col, TILE_SIZE);
                                        this.addChild(mt);
                                }
                        }
                }
        }
        private class MosaicTile extends Shape {
               
                public function MosaicTile(x:uint, y:uint, colour:uint, size:uint)
                {
                        graphics.beginFill(colour);
                        graphics.drawRect(x, y, size-1, size-1);
                        graphics.endFill();
                }
        }
}

As you can see, we load a jpeg in and then loop over it getting the colour every TILE_SIZE pixels. We then create a new Sprite which we draw a bunch of Shape’s (in this case squares) onto. The result is a mosaic like effect (I remember doing this in the early days of Flash 5 – a much more complicated process involving using PHP to analyse the image data).

Obviously a lot of room for improvement (getting the average pixel colour for a tile, having the image be dynamic rather than programmed into the AS etc etc) but not bad for the first couple of hours with a new language.

Any questions or suggestions for better ways I could have done things please use the comments :)

  1. Would you be willing to post the whole project? I am not sure how to use your Mosaic class in an applicaiton.
    — Andrew    Oct 31, 20:14    #
  2. This is the complete project! To use it just right click in the “Navigator” in Flex Builder 2 and select “New > ActionScript Project”. Put whatever you like as the “Project Name” and Mosaic.as as the “Main application file” then paste in the code from above.
    There is a video showing how to create an actionscript 3 project here which may make it clearer.
    Hope that helps :)
    — Kelvin    Oct 31, 20:42    #
  3. Thanks.

    I was using a Flex Project. Have you experimented with controlling (scripting) dynamically loaded SWFs from ActionScript 3?
    — Andrew    Nov 2, 18:31    #
  4. Ahh – does it work from a Flex Project? I haven’t played around with Flex yet…

    And no, I haven’t played with scripting loaded SWFs from AS3, in fact I haven’t had any time to play with AS3 for a while now… You will find all my experiments here. Hopefully I’ll get a chance this weekend or at the start of next week to do some more….

    Cheers :)
    — Kelvin    Nov 5, 16:13    #