FlashFuck.it » ActionScript 3

Spring Actionscript : Autowire new instances of non visual objects

pigiuz — Thu, 21 Jan 2010 11:04:38 +0000

UPDATE!!!

A new method has just been added to IObjectFactory committed on spring actionscript svn repo in order to let autowire non visual classes!! w00t!:)

Take a look at

^?View Code ACTIONSCRIPT

IObjectFactory.createInstance(clazz:Class, constructorArguments:Array = null):*;

this solves the problem and we have no longer to extend AutowiringObjectBase

Take a look to the commit http://bit.ly/dmhZWd and update your source

Thanx Roland to have done the whole work and for the support

—————

First of all a little explanation on the title of this post:
I’m having some fun with spring actionscript, an as3 IoC framework. It’s my first experience with inversion of control in actionscript and I found it a little weird at first, but now I (think I’ve) understood how it works I’m having really lots of fun with it .
Anyway, Spring actionscript provides two ways of autowiring object properties:
- for non visual objects: you define your object and its properties in the context (xml or mxml) and when that object is being created the framework automatically wires up all its properties driving into each of them the defined value.
- for visual objects: you mark your component’s properties with the custom metatag [Autowired] and when your component is added to the display list spring actionscript automatically wires up all marked properties.

But what if I want to create a non visual object at runtime and I want the framework to autowire its marked properties?
I created a base class in order to do that, it’s built upon the pureMVC extension for spring actionscript, which is actually the microarchitecture framework I’m using right now.

Here’s the code:

^?View Code ACTIONSCRIPT

package
{
    import flash.utils.describeType;
 
    import org.as3commons.lang.ClassUtils;
    import org.puremvc.as3.patterns.facade.Facade;
    import org.springextensions.actionscript.context.IConfigurableApplicationContext;
    import org.springextensions.actionscript.puremvc.interfaces.IIocFacade;
 
    /**
     * This class provides autowiring for subclasses.
     *
     * @author pigiuz
     *
     */
    public class AutowiringObjectBase
    {
        private var _iocFacade:IIocFacade;
 
        public function AutowiringObjectBase()
        {
            _iocFacade = Facade.getInstance() as IIocFacade;
            autoWire();
        }
 
        private function get container():IConfigurableApplicationContext
        {
            return _iocFacade.container;
        }
 
        private function autoWire():void
        {
            var typeDescription:XML = describeType(this);
            for each (var metaDataNode:XML in typeDescription..metadata)
            {
                if (metaDataNode.attribute("name") == "Autowired")
                {
					var host:String;
					var chain:String;
                    var propertyNode:XML = metaDataNode.parent();
                    var property:String = propertyNode.@name.toString();
                    trace("Found Autowired property: " + property);
                    var objectName:String = property;
                    var autowireByType:Boolean = true;
 
                    for each (var arg:XML in metaDataNode.arg)
                    {
                        if (arg.attribute("key") == "host")
                        {
                            host = arg.attribute("value")
                        }
                        else if (arg.attribute("key") == "chain")
                        {
                            chain = arg.attribute("value");
                        }
                        else if (arg.attribute("value") == "byName")
                        {
                            autowireByType = false;
                        }
                    }
                    if (autowireByType)
                    {
                        if (host &#038;& chain)
                        {
                            // CHAINED AUTOWIRE
                            trace("Autowiring: " + property + " in " + this + " from " + host + "." + chain);
                            var hostObject:Object = container.getObject(host);
                            if (hostObject)
                            {
                                this[property] = hostObject[chain];
                            }
                        }
                        else
                        {
                            // AUTOWIRE BY TYPE
                            var clazz:Class = ClassUtils.forName(propertyNode.@type.toString());
                            var objectNames:Array = container.getObjectNamesForType(clazz);
                            if (objectNames.length == 1)
                            {
                                objectName = objectNames[0];
                            }
                            trace("Autowiring by type: " + property + " in " + this);
                            this[property] = container.getObject(objectName);
                        }
                    }
                    else
                    {
 
                        // AUTOWIRE BY NAME
                        trace("Autowiring by name:" + property + " in " + this);
                        this[property] = container.getObject(objectName);
                    }
                    propertyNode = null;
					host = null;
					chain = null;
                }
                metaDataNode = null;
            }
            // dispose describetype
            typeDescription = null;
        }
 
 
    }
}

As you can see, as the constructor is called the iocFacade (the puremvc’s facade decorated in a springy fashion) is retrieved in order to be able to locate the application context (iocFacade is not needed if you are not using puremvc, just make sure you can locate the context otherwise it won’t work!) and the autoWire method is called.

Basically what autoWire() does is checking which properties are marked as [Autowired] and looking up the container for object definitions satisfying required conditions (name\type\host-chain), then wire each property with the found object.

Good thing is in order to leverage this autowiring capability you just have extend this class and create your own classes feeling free to mark properties as [Autowired].

Is there some better solution out there?

AS3 Reflection crapyness :\

pigiuz — Wed, 02 Dec 2009 12:58:10 +0000

Today I spent a whole morning to figure out that AS3 sucks.

Today I’ve been implementing a simple factory method which receives a Class object and some parameters to be passed to the concrete class instance, something with a signature like this:

^?View Code ACTIONSCRIPT

static public function createInstance(c:Class, ... args):Object

BUT…the implementation of such a clear and simple method has been a bloody bath, because AS3 doesn’t support a really cool way to do really cool stuff like this
I thought the implementation would be simply something like

^?View Code ACTIONSCRIPT

static public function createInstance(c:Class, ... args):Object
{
return new c(args);
}

or any other easy way (python taught me to think simple ) BUT…
“new c(args);” means my class constructor accepts one parameter typed as an Array, and I really don’t want my custom classes to have this defect of form nor my custom factory not to be able to instance classes written by someone else, so the solution “classes to be instanciated by the factory must accept an array as constructor parameter” is absolutely out.

Next approach, “reflect all properties instead of having parameters passed to the constructor”… not really a solution. Not always classes’ properties have the same name\type\whatever of constructor parameters. It’s a compromise that my factory can’t accept because I wouldn’t be able to create whatever class instance but only “some” class instance :\. out.

Next approach, “use Function.apply to pass some parameters (array) to a function as they were single variables”..hey! that’s a good one! Let’s try it with some function

^?View Code ACTIONSCRIPT

class MyClass{
public function myfunc(foo:String,bar:uint):void
{
trace(foo, bar);
}
}
 
class MyOtherClass{
public function callmyfunc(... args):void
{
var c:MyClass = new MyClass();
c.myfunc.apply(null,args);
}
}

HEY! IT WORKS! holy crap! AS3 rocks!…wait, let’s try it with a constructor function…

^?View Code ACTIONSCRIPT

class MyClass{
public function MyClass(foo:String,bar:uint):void
{
trace(foo, bar);
}
}
 
class MyOtherClass{
public function callmyfunc(... args):void
{
var c:MyClass = new MyClass().apply(null,args);
}
}

…ok, it doesn’t work :\ and throws a runtime error :/ “Property apply not found on MyClass and there is no default value”…mmm
ok, maybe I have to reference the constructor function, but how can I do it!?
let’s try with “Class.prototype.constructor”

^?View Code ACTIONSCRIPT

class MyClass{
public function MyClass(foo:String,bar:uint):void
{
trace(foo, bar);
}
}
 
class MyOtherClass{
public function callmyfunc(... args):void
{
var c:Class = MyClass;
var f:Function = c.prototype.constructor;
}
}

…error… Class.prototype.constructor returns the type of the caller class (in this case MyClass)…
so…what can I do?

Discarded solutions:
- ~~“classes to be instanciated by the factory must accept an array as constructor parameter”~~

- ~~“reflect all properties instead of having parameters passed to the constructor”~~
- ~~“use Function.apply to pass some parameters (array) to a function as they were single variables”~~
here’s the solution: (drums) THE CRAPY ONE!
better known as “switch it all baby”….

^?View Code ACTIONSCRIPT

static public function create(c:Class, ... args):Object {
			switch(args.length){
				case 0: return new c();
				case 1: return new c(args[0]);
				case 2: return new c(args[0],args[1]);
				case 3: return new c(args[0],args[1],args[2]);
				case 4: return new c(args[0],args[1],args[2],args[3]);
				case 5: return new c(args[0],args[1],args[2],args[3],args[4]);
				default: throw new Error("too many arguments");
			}
			return null;
		}

if you need to pass more than 5 arguments just add some lines to the factory and you’re done…

I was completely pissed off when I found this horrible lack in AS3, really, I was about for starting to cry, so I submitted a feature request on bugs.adobe… I think it’s really a MUST for a “respectable” language, if you find it as necessary as I think take a minute to vote this feature.
https://bugs.adobe.com/jira/browse/FP-3364

The Burning Man – bitmapData fire effect

pigiuz — Thu, 16 Jul 2009 14:17:10 +0000

Yesterday night it was too warm to sleep and I have no air conditioning at home, so I thought it was a good opportunity to make some experiments related to the high temperature… “the burning man”

Here’s the algorithm in human language:
- pick up the image from the webcam
- perform a threshold on it to exclude (alpha 0) every pixel below the average skin amount of red (between 44 and 90 depending on the light)
- perform a second threshold to exclude (alpha 0) every pixel above the average skin amount of green and blue (between 3344 and 6677 depending on the light)
- draw the result onto a new bitmapdata with the ADD blendmode
- apply blur to the bitmapdata
- generate a perlin noise of one channel (i chose red)
- displace the bitmapdata towards -y
- apply again a displacement map filter to displace horizontally (i used a cos function to make the x displacement a little likely)
- apply a displacement map towards +y with just a bit less strenght than the previous “-y” one (this is to make the fire propagation much more likely)
- then merge the original webcam output with the displaced one…and you’ve the burning man!

here the actionscript implementation

^?View Code ACTIONSCRIPT

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.BlendMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.media.Camera;
	import flash.media.Video;
 
	[SWF(width="320",height="240",frameRate="31",backgroundColor="0x000000")]
	public class BurningMan extends Sprite
	{
 
		private var _cam:Camera;
		private var _vid:Video;
 
		private var _fireThreshold:BitmapData;
		private var _firePerlin:BitmapData;
		private var _fireOffset:Point;
		private var _fireSpeed:int = 20;
		private var _fireDisplaceUP:DisplacementMapFilter;
		private var _fireDisplaceDWN:DisplacementMapFilter;
		private var _fireDisplaceSrc:BitmapData;
		private var _fireBlur:BlurFilter;
		private var _fireColorTransform:ColorTransform;
 
		private var _fireMerge:BitmapData;
 
		private var _camBd:BitmapData;
		private var _b:Bitmap;
 
		private static const WIDTH:Number = 320;
		private static const HEIGHT:Number = 240;
		private static const ORIGIN:Point = new Point();
		private static const REFLECT:Matrix = new Matrix(-1,0,0,1,WIDTH,0);
		private static const RESIZE_2X:Matrix = new Matrix(2,0,0,2);
 
		private var _rect:Rectangle;
 
		public function BurningMan()
		{
			super();
			init();
		}
 
		private function init():void
		{
			_cam = Camera.getCamera();
			_cam.setMode(WIDTH,HEIGHT,31);
			_vid = new Video(WIDTH,HEIGHT);
			_vid.attachCamera(_cam);
 
			_fireOffset = new Point();
			_fireThreshold = new BitmapData(WIDTH,HEIGHT,true,0x00000000);
			_fireMerge = new BitmapData(WIDTH,HEIGHT,true,0x00000000);
 
			_firePerlin = new BitmapData(WIDTH*.5,HEIGHT*.5,false,0x000000);
			_fireDisplaceSrc = new BitmapData(WIDTH,HEIGHT,false,0x000000);
			_fireDisplaceUP = new DisplacementMapFilter(_fireDisplaceSrc,ORIGIN,BitmapDataChannel.RED,BitmapDataChannel.RED,0,-15,DisplacementMapFilterMode.CLAMP);
			_fireDisplaceDWN = new DisplacementMapFilter(_fireDisplaceSrc,ORIGIN,BitmapDataChannel.RED,BitmapDataChannel.RED,0,9,DisplacementMapFilterMode.CLAMP);
			_fireBlur = new BlurFilter(2,2,4);
			_fireColorTransform = new ColorTransform(1.3,1.1,1,.7);
 
 
			_camBd = new BitmapData(WIDTH,HEIGHT,true,0x00000000);
			_rect = _camBd.rect;
			_b = new Bitmap(_camBd);
			_firePerlin.lock();
			_fireMerge.lock();
			addChild(_b);
 
 
			addEventListener(Event.ENTER_FRAME,update);
		}
 
		private function update(e:Event=null):void
		{
			//locks
			_camBd.lock();
 
			_fireOffset.y+=_fireSpeed;
			_firePerlin.perlinNoise(_firePerlin.width*.125,_firePerlin.height*.125,1,0,true,false,BitmapDataChannel.RED,false,[_fireOffset])
			_fireDisplaceSrc.draw(_firePerlin,RESIZE_2X);
 
			_camBd.draw(_vid,REFLECT);
			_fireThreshold.setVector(_rect,_camBd.getVector(_rect));
			_fireThreshold.threshold(_fireThreshold,_rect,ORIGIN,"<",0xFF440000,0x00000000,0xFF0000,true);
			_fireThreshold.threshold(_fireThreshold,_rect,ORIGIN,">",0xFF003344,0x00000000,0x00FFFF,true);
			_fireMerge.draw(_fireThreshold,null,_fireColorTransform,BlendMode.ADD,_rect);
 
			_fireDisplaceUP.scaleX = Math.cos(((_fireOffset.y/(2<<3))%360)*180/Math.PI)*2;
			_fireDisplaceDWN.scaleX = -_fireDisplaceUP.scaleX;
			_fireMerge.applyFilter(_fireMerge,_fireMerge.rect,ORIGIN,_fireBlur);
			_fireMerge.applyFilter(_fireMerge,_rect,ORIGIN,_fireDisplaceUP);
			_fireMerge.applyFilter(_fireMerge,_rect,ORIGIN,_fireDisplaceDWN);
			_camBd.draw(_fireMerge,null,_fireColorTransform,BlendMode.HARDLIGHT,_rect);
 
			//unlocks
			_camBd.unlock();
		}
	}
}

here’s a preview of myself empowered by the force of the fire!:D

click the photo to see the demo in action

BitmapData manipulation benchmark

pigiuz — Wed, 15 Jul 2009 19:54:49 +0000

Today I encountered this blog post from Zevan (which blog is REALLY a good daily reading I suggest everyone to take) about bitmapData merging and I started tweaking some code doing some benchmarks to find out which way is the most performing. Here are my tests:

First strike (Zevan’s one): copyPixels

^?View Code ACTIONSCRIPT

[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.<BitmapData> = new Vector.<BitmapData>();
var locX:Vector.<Number> = new Vector.<Number>();
var locY:Vector.<Number> = new Vector.<Number>();
var rX:Vector.<Number> = new Vector.<Number>();
var rY:Vector.<Number> = new Vector.<Number>();
var sX:Vector.<Number> = new Vector.<Number>();
var sY:Vector.<Number> = new Vector.<Number>();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i<rows; i++){
		for (var j:int = 0; j<cols; j ++){
			 var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
			 rect.x = j * tileWidth;
			 rect.y = i * tileHeight;
			 currTile.copyPixels(image, rect, pnt, null, null, true);
			 tiles[inc] = currTile;
			 rect.x += 25;
			 rect.y += 25;
			 sX[inc] = rect.x;
			 sY[inc] = rect.y;
			 locX[inc] = rX[inc] = -rect.width * 2
			 locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;
			 setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
			 inc++;
		}
	}
	trace("copyPixels",getTimer()-startTime,"ms");
	addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
	var interval:Number;
	var animate:Function = function(index:int):void{
		locX[index] += (dx - locX[index]) / 4;
		locY[index] += (dy - locY[index]) / 4;
		if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
			locX[index] = dx;
			locY[index] = dy;
			clearInterval(interval);
		}
	}
   interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
 
function onLoop(evt:Event):void {
	  canvas.fillRect(canvas.rect, 0xFFFFFF);
	  var startTime:Number = getTimer();
	  for (var i:int = 0; i<tiles.length; i++){
			var tile:BitmapData= tiles[i];
			loc.x = locX[i];
			loc.y = locY[i];
			canvas.copyPixels(tile, tile.rect, loc, null, null, true);
	  }
	  trace("copyPixels",getTimer()-startTime,"ms");
}

in my machine (mbp, osx) it takes ~27 ms to extract data and ~2-3ms each iteration for setting data on the canvas bitmapData

Second strike: getVector\setVector

^?View Code ACTIONSCRIPT

[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.<Vector.<uint>> = new Vector.<Vector.<uint>>();
var tileRect:Rectangle;
var locX:Vector.<Number> = new Vector.<Number>();
var locY:Vector.<Number> = new Vector.<Number>();
var rX:Vector.<Number> = new Vector.<Number>();
var rY:Vector.<Number> = new Vector.<Number>();
var sX:Vector.<Number> = new Vector.<Number>();
var sY:Vector.<Number> = new Vector.<Number>();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	tileRect = new Rectangle(0,0,tileWidth,tileHeight);
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i<rows; i++){
		for (var j:int = 0; j<cols; j ++){
			 rect.x = j * tileWidth;
			 rect.y = i * tileHeight;
			 tiles[tiles.length] = image.getVector(rect);
			 rect.x += 25;
			 rect.y += 25;
			 sX[inc] = rect.x;
			 sY[inc] = rect.y;
			 locX[inc] = rX[inc] = -rect.width * 2
			 locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;
			 setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
			 inc++;
		}
	}
	trace("vector push:",getTimer()-startTime,"ms");
	addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
	var interval:Number;
	var animate:Function = function(index:int):void{
		locX[index] += (dx - locX[index]) / 4;
		locY[index] += (dy - locY[index]) / 4;
		if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
			locX[index] = dx;
			locY[index] = dy;
			clearInterval(interval);
		}
	}
   interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
 
function onLoop(evt:Event):void {
	  canvas.fillRect(canvas.rect, 0xFFFFFF);
	  var tmpVec:Vector.<uint>;
	  var startTime:Number = getTimer();
	  for (var i:int = 0; i<tiles.length; i++){
		  	tmpVec = tiles[i];
			tileRect.x = locX[i];
			tileRect.y = locY[i];
			canvas.setVector(tileRect,tmpVec);
	  }
	  trace("vector push:",getTimer()-startTime,"ms");
}

on my machine it takes only ~9 ms to extract tiles slices (yes, 3 times faster!!!) and ~1ms for pushing them all in the canvas for each loop iteration

Third strike: getPixels\setPixels

^?View Code ACTIONSCRIPT

[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.<ByteArray> = new Vector.<ByteArray>();
var tileRect:Rectangle;
var locX:Vector.<Number> = new Vector.<Number>();
var locY:Vector.<Number> = new Vector.<Number>();
var rX:Vector.<Number> = new Vector.<Number>();
var rY:Vector.<Number> = new Vector.<Number>();
var sX:Vector.<Number> = new Vector.<Number>();
var sY:Vector.<Number> = new Vector.<Number>();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	tileRect = new Rectangle(0,0,tileWidth,tileHeight);
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i<rows; i++){
		for (var j:int = 0; j<cols; j ++){
			 rect.x = j * tileWidth;
			 rect.y = i * tileHeight;
			 tiles[tiles.length] = image.getPixels(rect);
			 rect.x += 25;
			 rect.y += 25;
			 sX[inc] = rect.x;
			 sY[inc] = rect.y;
			 locX[inc] = rX[inc] = -rect.width * 2
			 locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;
			 setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
			 inc++;
		}
	}
	trace("getPixels",getTimer()-startTime,"ms");
	addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
	var interval:Number;
	var animate:Function = function(index:int):void{
		locX[index] += (dx - locX[index]) / 4;
		locY[index] += (dy - locY[index]) / 4;
		if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
			locX[index] = dx;
			locY[index] = dy;
			clearInterval(interval);
		}
	}
   interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
 
function onLoop(evt:Event):void {
	  canvas.fillRect(canvas.rect, 0xFFFFFF);
	  var startTime:Number = getTimer();
	  for (var i:int = 0; i<tiles.length; i++){
			tileRect.x = locX[i];
			tileRect.y = locY[i];
			canvas.setPixels(tileRect,tiles[i]);
			tiles[i].position = 0;
	  }
	  trace("setPixels",getTimer()-startTime,"ms");
}

a nice one, ~ 17 ms to extract and ~2ms to loop on my mac, faster than copyPixels but vectors are still leading…

Fourth strike: merge

^?View Code ACTIONSCRIPT

[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.<BitmapData> = new Vector.<BitmapData>();
var locX:Vector.<Number> = new Vector.<Number>();
var locY:Vector.<Number> = new Vector.<Number>();
var rX:Vector.<Number> = new Vector.<Number>();
var rY:Vector.<Number> = new Vector.<Number>();
var sX:Vector.<Number> = new Vector.<Number>();
var sY:Vector.<Number> = new Vector.<Number>();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i<rows; i++){
		for (var j:int = 0; j<cols; j ++){
			 var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
			 rect.x = j * tileWidth;
			 rect.y = i * tileHeight;
			 currTile.merge(image,rect,pnt,0xFF,0xFF,0xFF,0xFF);
			 tiles[inc] = currTile;
			 rect.x += 25;
			 rect.y += 25;
			 sX[inc] = rect.x;
			 sY[inc] = rect.y;
			 locX[inc] = rX[inc] = -rect.width * 2
			 locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;
			 setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
			 inc++;
		}
	}
	trace("merge",getTimer()-startTime,"ms");
	addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
	var interval:Number;
	var animate:Function = function(index:int):void{
		locX[index] += (dx - locX[index]) / 4;
		locY[index] += (dy - locY[index]) / 4;
		if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
			locX[index] = dx;
			locY[index] = dy;
			clearInterval(interval);
		}
	}
   interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
 
function onLoop(evt:Event):void {
	  canvas.fillRect(canvas.rect, 0xFFFFFF);
	  var startTime:Number = getTimer();
	  for (var i:int = 0; i<tiles.length; i++){
			var tile:BitmapData= tiles[i];
			loc.x = locX[i];
			loc.y = locY[i];
			canvas.merge(tile, tile.rect, loc, 0xFF,0xFF,0xFF,0xFF);
	  }
	  trace("merge",getTimer()-startTime,"ms");
}

~36 ms to extract and ~12ms to merge tiles on the canvas!!!…too slow all the way…:\

There are still some methods left such as getPixel\setPixel, getPixel32\setPixel32, and copyChannel but they’re a too much restrictive choice because they’re handling one pixel, or channel at time therefore a further loop would be required to get them doing this task.

Summary:
getVector\setVector : ~9ms\~1ms
getPixels\setPixels: ~17ms\~2ms
copyPixels: ~27ms\~2-3ms
merge: ~36ms\~12ms

make your choice

NOTE: these benchmarks are valid from flash player 10 because we (both me and Zevan) used the Vector native type to store lists of typed data. To make them valid for previous version of the player make sure to replace vectors with arrays and check other types are already supported by the target player.

stay tuned

Check a Class type with describeType and getQualifiedClassName

pigiuz — Wed, 04 Mar 2009 14:51:09 +0000

Recently I faced this problem: how to get if a Class is extending another one or implementing an interface?

this is the specific case:

^?View Code ACTIONSCRIPT

function checkType(toCheck:Class,typeClass:Class=null,typeInterface:Class=null):Boolean
{
// if an instance of toCheck is a typeClass or a typeInterface
// return true
// else
// return false
}

The task is quite simple, the first solution would be get an instance of toCheck and use the is operator to actually check the type…but this would mean both a waste of resources and an “unwanted behaviour generator” (just think about a parser class instantiated without a real need or something like that).

Nope, that solution sucks.

Let’s try something better, let’s make the player inform us which is the toCheck class structure, let’s use describeType.

describeType is a wonderful function you can find in flash.utils package, it examines an untyped object and returns an xml document containing the description of that type (more details at adobe livedocs)…something like this:

NOTE: click on “view code” to see the real xml document, my wp is escaping tags chars <> …:\

^?View Code HTML

<type name="flash.events::EventDispatcher" base="Class" isDynamic="true" isFinal="true" isStatic="true">
  <extendsClass type="Class"/>
  <extendsClass type="Object"/>
  <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
  <factory type="flash.events::EventDispatcher">
    <metadata name="Event">
      <arg key="name" value="deactivate"/>
      <arg key="type" value="flash.events.Event"/>
    </metadata>
    <metadata name="Event">
      <arg key="name" value="activate"/>
      <arg key="type" value="flash.events.Event"/>
    </metadata>
    <extendsClass type="Object"/>
    <implementsInterface type="flash.events::IEventDispatcher"/>
    <constructor>
      <parameter index="1" type="*" optional="true"/>
    </constructor>
    <method name="willTrigger" declaredBy="flash.events::EventDispatcher" returnType="Boolean">
      <parameter index="1" type="String" optional="false"/>
    </method>
    <method name="hasEventListener" declaredBy="flash.events::EventDispatcher" returnType="Boolean">
      <parameter index="1" type="String" optional="false"/>
    </method>
    <method name="removeEventListener" declaredBy="flash.events::EventDispatcher" returnType="void">
      <parameter index="1" type="String" optional="false"/>
      <parameter index="2" type="Function" optional="false"/>
      <parameter index="3" type="Boolean" optional="true"/>
    </method>
    <method name="dispatchEvent" declaredBy="flash.events::EventDispatcher" returnType="Boolean">
      <parameter index="1" type="flash.events::Event" optional="false"/>
    </method>
    <method name="addEventListener" declaredBy="flash.events::EventDispatcher" returnType="void">
      <parameter index="1" type="String" optional="false"/>
      <parameter index="2" type="Function" optional="false"/>
      <parameter index="3" type="Boolean" optional="true"/>
      <parameter index="4" type="int" optional="true"/>
      <parameter index="5" type="Boolean" optional="true"/>
    </method>
    <method name="toString" declaredBy="flash.events::EventDispatcher" returnType="String"/>
  </factory>
</type>

As you can see in this EventDispatcher type description there are two nodes witch are fitting the task’s purposes:

and

Those nodes are repeated for each class or interface in the given class (toCheck) chain of inheritance and they contain the qualified class name string of the extended\implemented class\interface.

In this case EventDispatcher extendsClass type=’Object’ and implementsInterface type=’flash.events::IEventDispatcher’ …quite clear right?:) Now, back to the implementation:

^?View Code ACTIONSCRIPT

function checkType(toCheck:Class,typeClass:Class=null,typeInterface:Class=null):Boolean
{
	//gets the toCheck class type xml description
	var _typeXML:XML=describeType(toCheck);
	//gets the typeClass and typeInterface qualified class names
	var _result:Boolean=false;
	if (typeClass) {
		// if toCheck is a typeClass
		for each (var _extClass:XML in _typeXML.factory.elements('extendsClass')) {
			if (_extClass.@type==getQualifiedClassName(typeClass)) {
				_result=true;
				break;
			}
		}
	}
	// do the same for typeInterface but checking 'implementsInterface' node
	if (typeInterface) {
		for each (var _impInterface:XML in _typeXML.factory.elements('extendsClass')) {
			if (_impInterface.@type==getQualifiedClassName(typeInterface)) {
				_result=true;
				break;
			}
		}
	}
 
	return _result;
}

…and the task got done

stay tuned

My entry to Bit-101s 25 Lines competition

pigiuz — Sun, 30 Nov 2008 13:45:08 +0000

Yep, i made my submission to 25lines contest just few days ago (right in time ), so (as Sakri did some days before me) I’m publishing my code. It’s an easy terrain generator…

Actually, I think it can be somehow improved both in lines of code and actual performances, so feel free to edit or tell me “you’d better to do that this other way…”

What’s going on is:

generate a shape filled with a gradient to create a reference color for differents “height”
generate a perlinNoise everyframe for dataprovider use
detect each perlinNoise pixel depth according with its main channel value (blue in this case..)
generating a vector of Bitmaps to be employed in the view

^?View Code ACTIONSCRIPT

/**
 * 25-Line ActionScript Contest Entry
 *
 * Project: Random Terrain 3D Generator
 * Author:  Piergiorgio Niero (aka pigiuz) piergiorgio.niero[at]gmail.com
 * Date:    11/24/08
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
 
// 3 free lines! Alter the parameters of the following lines or remove them.
// Do not substitute other code for the three lines in this section
[SWF(width=800, height=800, backgroundColor=0xffffff, frameRate=24)]
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// 25 lines begins here!
var _bd:BitmapData = new BitmapData(50,50,false,0x0000FF);
var _points:Array = new Array(new Point());
var _vxCont:Sprite = Sprite(addChild(new Sprite));
_vxCont.x = _vxCont.y = 400;
var _vexels:Vector. = new Vector.((2500),true);
var _hMap:BitmapData = new BitmapData(255,1,false);
var _gradient:Shape = new Shape();
_gradient.graphics.beginGradientFill( GradientType.LINEAR,new Array( 0x4267F9, 0xF9EAB0, 0x9EF07D, 0x8DF273, 0x9D5E1E, 0xFFFFFF ),new Array( 1, 1, 1, 1, 1, 1 ),new Array( 90, 105, 110, 120, 145, 185 ),new Matrix(0.2456396484375,0,0,0.0006103524625,127.5,.5));
_gradient.graphics.drawRect(0,0,255,1);
_hMap.draw(_gradient);
addEventListener(Event.ENTER_FRAME,generatePerlinNoise);
function generatePerlinNoise(e:Event=null):void{
	_bd.perlinNoise(25,25,1,0,false,true,4,false,_points);
	Point(_points[0]).y+=1;
	for(var v:uint=0;v&amp;lt;(2500);v++){
		_vexels[v] = (_vexels[v]==null)?generateVoxel(v):_vexels[v];
		_vexels[v].y = Math.pow((_bd.getPixel(v%50,Math.floor((v/50))) &amp; 0xFF)/255*6,3)*24*.24;
		_vxCont.rotationX = mouseY*.1;
		_vxCont.rotationY = (_vxCont.rotationY-(90/stage.stageWidth*(mouseX-stage.stageWidth)+45))*.5;
		_vexels[v].bitmapData.floodFill(0,0,_hMap.getPixel(255-(_bd.getPixel(v%50,Math.floor((v/50))) &amp; 0xFF),0));}}
function generateVoxel(v:uint):Bitmap{
	var b:Bitmap = new Bitmap(new BitmapData(24*.5,24*.5,false,0x000000),"auto",false);
	b.x = v%50*24-(_bd.width*24*.5);
	b.z = Math.floor((v/50))*24-(_bd.height*24*.5);
	return Bitmap(_vxCont.addChild(b));}
// 25 lines ends here!
 
enjoy ;)

Adobe Stratus on Adobe Labs

pigiuz — Wed, 19 Nov 2008 09:36:01 +0000

Did you remember “Pacifica” project? Now it’ [UPDATE: Adobe Stratus is a rendezvous service for RTMFP, a new protocol built in to Flash Player 10 and AIR 1.5. Neither RTMFP nor Stratus are related to the project codenamed Pacifica.] Something new is on adobe labs and its name is “Stratus“..WONDERFUL!

Let’s explain what i’m talking about:

Stratus is “hosted rendezvous service that aids establishing communications between Flash Player endpoints”.
This technology enables clients’ flash player (10 +, or AIR 1.5) to connect directly each other to share runtime informations…actually PEER TO PEER!! (underline this: Stratus is a service by Adobe, not a technology to run on own servers).

Stratus does support only “end to end” p2p, multicast or swarming are not supported. This means we’re not enabled to create a new air-mule service over stratus, but we can build our p2p video chat, p2p real time games, etc…

Stratus introduces a new data transfer protocol: RTMFP, which uses UDP instead of clean RTMP which uses TCP. (note, RTMFP is not RTMP*, which is the encrypted protocol for FMS).

Stratus is now beta, and you can test a sample application hosted on the labs Stratus page…

Stratus is going to be released next year (hopefully “early”) …it seems we’re going to have real time “anything” in few months

This could be a new red pill for our webapps,
Stay tuned

Tweensy: Tween manager + gfx effects generator

pigiuz — Thu, 11 Sep 2008 23:00:02 +0000

I recently found some very impressive demos of a new excellent framework: Tweensy, by an English flash developer named Shane McCartney.

Tweensy is mainly 2 things: a tween manager (such as tweener or tweenlite) and a gfx generator which includes a particle emitter, a bitmap render system.

Till now I’m getting that kind of effects by combining tweener with a custom particle emitter or flint library, I’m very curious to try out this new promising framework

Flash 3D stress tests

pigiuz — Thu, 26 Jun 2008 07:31:18 +0000

I just moved to my fresh new country¬† and started studing for my new job

I’m trying to get a usual “virtual world” scene (such as second life’s) using (possibly free and open) as3 3D frameworks, so my first choice has been papervision3D.

Unfortunately I’m not a 3D modeler so I had to get models from the web, anyway google sketchup warehouse is a very good resource to collect DAEs (but remember they may be not parsable by ascollada).
For the human model I’ve just “stolen” a walking girl from 3Dflasho.
…and here’s what I got combining the 2 models: a girl walking in a stadium. (girl is automatically walking forward, just use left and right arrows to make her turn)

(note: textures are about 7 mb and the whole swf is very cpu intensive)¬†

Take a look to the profiler, you can notice that framerate is very low even on a very good machine (i had a value range from 12 to 18 with everything loaded and 26\28 for the girl only on a macbookpro 2.4ghz and flash player 9.0.124 debug).

Next steps for me are:

1) try the same models on Away3D and maybe on Alternativa

2) search for better models (expecially for the stadium which generates too many culling issues on the ground)

3) have a mana potion

I hope to get good news from papervision and away3d mailing lists about flash 10 implementations, expecially about both engines’ drawing speed..in the while I’m going on with my tests

Adobe lands in Italy: onAir Tour and Colin Moock in Milan

pigiuz — Wed, 11 Jun 2008 12:00:37 +0000

What’s next here in Italy?

1) onAir Tour stops in Milan on friday 13 june

2) Colin Moock lands in Milan for his “from the ground up tour” on monday 23 june

…exciting newsss