Archive for the 'to code' Category

AS3 is weird. True story!

Well, every experienced AS3 developer once in a while faces weird things in our beloved ActionScript 3. Sometimes it’s funny but usually it isn’t, because results in hours of wasted time. Blooddy, my Belorussian friend, compiled some of the obstacles he faced in the past into the series of short microblog posts. In this post I’ll try to translate those posts in English adding my own experience.

OK, I don’t know where to start, so the order here means nothing. Let’s start.

1. LOL! ME BROKED TEH FLASH VERIFEIRZ!!!

for ( 	var i:uint = reversed ? array.length-1 : 0;
    reversed ? i >= 0 : i < array.length;
    reversed ? i-- : i++ ) {
}

This code compiles perfectly but results in a huge bytecode dump and a weird error — VerifyError: Error #1030: Stack depth is unbalanced. 1 != 0.

Don’t ask me how I got to this code.

2. Object vs. Object

var a:Object = {};
a["a"] = 1;
a["b"] = 2;
a["c"] = 3;
for ( var v:String in a ) {
    a["a"] = 2;
    trace(v, a[v]);
}

How do you think what this code will result into? You would guess something like

a 2
b 2
c 3

But it’s actually

a 2
a 2
c 3

for me.

If you change the first line to

var a:Object = new Object();

you’ll get

b 2
a 2
c 3

Of course Adobe didn’t promise order in collections which Objects are. Also, modifying a collection while working with it looks wrong anyway. But how come new Object() and {} differ so much, as far as I remember everyone says that both these constructs create an object, the later one just can handler properties to set. Apparently it’s not right.

Actually {} results into just one opcode NewObject while new Object() results in 2 opcodes: look for class, create class (sorry, will change for actual opcode names later). Anyway, you should be aware of this fact.

3. Where did this Security Error came from?

Imagine that we have a Socket object. We want to connect to some server but it’s down. We got IO Error and want to remove all listeners from Socket events and BOOOOM! we get a Security Error because Flash couldn’t get socket policy file (undoubtedly).

Who knew that right after IO Error we’ll get a Security Error?

4. Who called this .load() ?

Imagine we have a class extending Sound.

public class S extends Sound {
  public function S() {
    super();
  }
  public override function load(stream:URLRequest, context:SoundLoaderContext=null):void {
    throw new Error( 'ZOMG PEW PEW!!!1' );
  }
}

How do you think, what will we get after executing var s:S = new S(); ?

Right, we’ll get ZOMG PEW PEW!!!1 because despite of Flash help saying “If you pass a valid URLRequest object to the Sound constructor, the constructor automatically calls the load() function for the Sound object.”, constructor actually calls .load() anyway.

5. Super()? What super()?

Continuing #4, what if we could block parent constructor of being executed… But we can’t, if you don’t specify super() call compiler will add it automatically. Well, we could add it somewhere where it won’t be executed.

if ( false ) {
  super();
}

But damn, compiler is smart. But not so smart to overcome this:

if ( !true ) {
  super();
}

Or it knows something we don’t! Apparently !true isn’t always false. But we can skip executing super constructor until Adobe fixes it.

6. GET MY CHILD BACK YOU BIATCH!!!

Imagine that we have a Container extends DisplayObjectContainer which overrides removeChild() method to throw exception so bad people couldn’t remove children from it.

Let child:DisplayObject be a child of container:Container, now look at the code

var s:Sprite = new Sprite();
s.addChild( child );
s.removeChild( child );

Apparently, it bypasses our overridden method and STEALS OUR CHILD!!!!1

7. Wait, so many loaders… I’m confused…

All the time we use loaders of different kinds: Loader, Sound, URLLoader, URLStream, FileReference. So why are they so different?

1. Loader.

  • First of all it extends DisplayObject, maybe that’s why everything loading related is in contentLoaderInfo (this is what makes me mad every time).
  • load(request:URLRequest, context:LoaderContext = null):void
  • bytesLoaded:uint (read-only)
  • bytesTotal:uint (read-only)
  • url:String (read-only)

2. Sound.

  • load(stream:URLRequest, context:SoundLoaderContext = null):void
  • bytesLoaded:uint (read-only)
  • bytesTotal:int (read-only)
  • url:String (read-only)
  • Doesn’t have httpStatus event

3. URLLoader.

  • load(request:URLRequest):void
  • bytesLoaded:uint (read-write)
  • bytesTotal:uint (read-write)
  • Also, why all URLLoader’s properties are public variables not accessors?

4. URLStream.

  • load(request:URLRequest):void
  • No bytesLoaded or bytesTotal, but at least we get a progress event

5. FileReference.

  • We get 3 methods to load data: load, download, upload
  • No bytesLoaded or bytesTotal, but at least we get a progress event

And last, ProgressEvent has properties bytesLoaded (read-write) and bytesTotal (read-write). Both of type NUMBER.

So if you want to implement your own universal loader you must know all these differences.

8. Missing TextField.

Flash says that inheritance chain for TextField is the following: TextField -> InteraftiveObject -> DisplayObject -> EventDispatcher -> Object. Apparently there’s DisplayObjectContainer missing because we can do the following:

public function test() {
  var t:TextField = new TextField();
  t.addEventListener( Event.ADDED, this.handler_addedToStage )
  t.width = 400;
  t.height = 200;
  t.htmlText = ' <img src="http://www.google.ru/logos/olympics10-hockey-hp.png" />';
  super.addChild( t );
}
private function handler_addedToStage(event:Event):void {
  if ( event.target == event.currentTarget ) return;
  trace( event.target );
}

The code results in

[object Loader]
[object Sprite]

It means that we can grab Loaders for HTML images and preload them. Also we can reparent them using the trick above (8

9. Hi, I am addedToStage! Hi, I am addedToStage!

Here’s the code:

public function test() {
  var s1:Sprite = new Sprite();
  s1.addEventListener( Event.ADDED_TO_STAGE, handler );
  super.addChild( s1 );
}

private function handler(event:Event):void {
  var s2:Sprite = new Sprite();
  s2.addEventListener( Event.ADDED_TO_STAGE, trace );
  ( event.target as Sprite ).addChild( s2 );
}

Do you expect to see only one trace? Nope, you’ll get TWO!

And here’s why. We know that addedToStage event is dispatched in the addChild() method. After executing it must tell all children that they were added to stage too. So, when we add a new object to display list in handler() it first gets its own event and after that execution flow returns back to super.addChild() where it tells all its children about them being added to stage. And there’s where the second event comes from.

Of course if we add more children objects we’ll get more misleading events.

10. __AS3__.vec

The Vector class is kind of mysterious. Flash help says that it is top level class but actually it relies in virtual package __AS3__.vec which doesn’t actually exists but is made by compiler.

Looks like a patch which is there since some early beta of Flash Player 10.

HOORAY!

That’s all for now. If you have something to add to the list feel free to mail me or leave a comment here.

The power of JSFL

When you want to automate boring repetitive actions in Flash IDE, JSFL is your best friend. It’s basically AS1 for working with FLA contents. Recently I had to dig deeper in JSFL and here are the results.

(0,0) and transformation point.

Flash animators made lots of character animations for a new game. All character’s parts will be replaced in game engine with skinned ones for different characters. But animation stays the same, so essentially an animation is a bunch of moving empty MovieClips where skins will be added later. The problem was that they used Flash IDE transformation point not in anchor (0,0) point. I couldn’t find any reference to that magic point in AS3 help, so people would have to move all parts in all animations and symbols in each part manually. That looks like a very time consuming process. So I opened JSFL help and wrote this:

function run() {
	var hash = {};

	var items = fl.getDocumentDOM().library.getSelectedItems();
	for ( var u = 0; u < items.length; u++ ) {
		var item = items[u];
		var layers = item.timeline.layers.length;
		for ( var i = 0; i < layers; i++ ) {
			var frames = item.timeline.layers[i].frames.length;
			for ( var j = 0; j < frames; j++ ) {
				var element = item.timeline.layers[i].frames[j].elements[0];
				if ( element && element.libraryItem != undefined ) {
					if ( !hash[element.libraryItem.name] ) {
						hash[element.libraryItem.name] = element.getTransformationPoint();
					}
					element.x = element.transformX;
					element.y = element.transformY;
					element.setTransformationPoint({x:0, y:0});
				}
			}
		}
	}

	for ( var i = 0; i < fl.getDocumentDOM().library.items.length; i++ ) {
		var item = fl.getDocumentDOM().library.items[i];
		if ( hash[item.name] ) {
			var timeline = item.timeline;
			for ( var l = 0; l < timeline.layers.length; l++ ) {
				for ( var m = 0; m < timeline.layers[l].frames[0].elements.length; m++ ) {
					var insideElement = timeline.layers[l].frames[0].elements[m];
					insideElement.x -= hash[item.name].x;
					insideElement.y -= hash[item.name].y;
				}
			}
			delete hash[item.name];
		}
	}

}

run();

The script moves all body parts in all selected library animations to make transformation point and anchor point match and after that moves body parts’ inner graphics accordingly. First, it creates a hash of body parts not to move their content several times resulting in broken animation. After, it iterates through selected library symbols, their layers and frames, adds all instances of library symbols to the hash, moves them to (transformX, transformY) and resets transformation points. The next loop just moves inner content in separate direction by the same distance.

Problem solved! Spend 30 minutes to read manuals and 20 minutes to write actual code but saved several days of animators’ work.

Add names to MovieClips in named layers.

The next task was to add instance names to empty MovieClips in animations. Thanks God all layers with body parts were named uniformly everywhere. Here’s the code:

function run() {
	var map = {	hand_R_anim: "p04",
				leg_R_anim: "p06",
				foot_R_anim: "p08",
				head_anim: "p01",
				body_anim: "p02",
				leg_L_anim: "p05",
				foot_L_anim: "p07",
				hand_L_anim: "p03"
			};

	var items = fl.getDocumentDOM().library.getSelectedItems();
	for ( var u = 0; u < items.length; u++ ) {
		var item = items[u];
		var timeline = item.timeline;
		var layers = timeline.layers;
		for ( var i = 0; i < layers.length; i++ ) {
			var layer = layers[i];
			var name = map[layer.name];
			if ( name ) {
				for ( var j = 0; j < layer.frames.length; j++ ) {
					var element = layer.frames[j].elements[0];
					if ( element ) {
						element.name = name;
					}
				}
			}
		}
	}
}

run();

Split legs and feet.

And the last task was to split legs and feet animations because they should have been separate body parts but were drawn and animated as one MovieClip everywhere.

function run() {
	var path = "1/anim/";

	var items = fl.getDocumentDOM().library.getSelectedItems();
	for ( var u = 0; u < items.length; u++ ) {
		var item = items[u];
		var timeline = item.timeline;
		var layers = timeline.layers;
		var layerR = 0;
		var layerL = 0

		for ( var i = 0; i < layers.length; i++ ) {
			if ( layers[i].name == "foot_R_anim" ) layerR = i;
		}
		timeline.setSelectedLayers(layerR);
		timeline.copyFrames(0, layers[layerR].frameCount);
		var created = timeline.addNewLayer( "leg_R_anim" );
		timeline.setSelectedLayers(created);
		timeline.pasteFrames();
		for ( var i = 0; i < layers[created].frameCount; i++ ) {
			var element = layers[created].frames[i].elements[0];
			if ( element && element.libraryItem.name == path + "foot_R_anim" ) {
				element.libraryItem = fl.getDocumentDOM().library.items[fl.getDocumentDOM().library.findItemIndex(path + "leg_R_anim")];
			}
		}

		layers = timeline.layers;
		for ( var i = 0; i < layers.length; i++ ) {
			if ( layers[i].name == "foot_L_anim" ) layerL = i;
		}
		timeline.setSelectedLayers(layerL);
		timeline.copyFrames(0, layers[layerL].frameCount);
		var created = timeline.addNewLayer( "leg_L_anim" );
		timeline.setSelectedLayers(created);
		timeline.pasteFrames();
		for ( var i = 0; i < layers[created].frameCount; i++ ) {
			var element = layers[created].frames[i].elements[0];
			if ( element && element.libraryItem.name == path + "foot_L_anim" ) {
				element.libraryItem = fl.getDocumentDOM().library.items[fl.getDocumentDOM().library.findItemIndex(path + "leg_L_anim")];
			}
		}
	}
}

run();

Here we once again take selected items in library. Path variable is the folder with body parts. First we look for the needed layer number, select frames, copy and paste them to a new layer. After that we iterate through frames and existing instances to be of another symbols. We do it 2 times for both legs.

MXML in AS3 projects and fixing mxmlc

Not many people actually know that you can use MXML in pure AS3 projects. Here’s an example.

Create a new AS3 project, create a new file in package cp. Call it App.mxml. Flex Builder will not allow you to create an MXML component in a pure AS3 project, so you have to do it manually. Here’s my App.mxml.

<?xml version="1.0" encoding="utf-8"?>
<cp:Component xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cp="cp.*" >
    <cp:Component var1="123"/>
    <cp:Component var1="124111"/>
    <cp:Component />
</cp:Component>

Notice that I’m using my own namespace and no flex components. Now define Component class in cp/Component.as.

package cp {
import flash.display.Sprite;

[DefaultProperty( "children" )]
public class Component extends Sprite {
    public function Component() {
        super();
    }

    private var _children:Array;
    public function get children():Array {
        return this._children;
    }
    public function set children(value:Array):void {
        this._children = value;
        trace( value );
    }

    public var var1:String;
}
}

In main project file I put:

package {
import cp.App;
import flash.display.Sprite;

public class mxml_test extends Sprite {
    public function mxml_test()
    {
        this.addChild( new App() );
    }
}
}

To compile it you need to have framework.swc in library path though. And [DefaultProperty( "children" )] doesn’t work neither in 3.4 SDK nor in 4.0 for some reason. People say it should work in 4.0 but it doesn’t.

That’s weird that Flex SDK 3.4 and Flex SDK 4.0 produce different code from MXML files. 4.0 adds much more useless Flex stuff to resulting SWF. If you want you can add -keep-generated-actionscript compiler parameter to check converted code. Flex 4.0 adds such functions for every object in original MXML.

private function _App_Component2_i() : cp.Component {
    var temp : cp.Component = new cp.Component();
    temp.var1 = "123";
    _App_Component2 = temp;
    mx.binding.BindingManager.executeBindings(this, "_App_Component2", _App_Component2);
    return temp;
}

I don’t like that executeBindings thing in my code and useless mx.* classes it puts in SWF making it 3.5Kb in size. So I decided to patch Flex SDK since it’s kind of open source. Flex SDK SVN can be found at opensource.adobe.com/svn/opensource/flex/ and it contains everything you should need to rebuild your own version of SDK. These links helped me a lot too, and thanks God I found those Eclipse projects inside after trying to resolve libraries issues for an hour.

There are only 2 places where I found this executeBindings stuff, both classes are in flex2.compiler.mxml.gen package. I commented this code and compiled mxmlc.jar. I’ve been doing it all evening but couldn’t get rid of it. I can’t get why. I am totally sure that new mxmlc.jar is used but this stupid string is there anyway.

I consider the final result to be a failure but at least I now know that you can patch Flex SDK as you wish. But I didn’t have time to try to understand how the whole compiler code works and where it handles bindings exactly. I didn’t find much on the internet so I guess not many people actually tried to build their own versions of compiler.

Delete .svn folders

Just so I won’t forget.

find ./ -name ".svn" | xargs rm -Rf

OMG! as3-signals are faster than events!!!!!1

Continuing on as3-signals. Here the guy actually ran performance tests on as3-signals vs. events. And got surprisingly SHOCKING results. You won’t gonna believe — AS3-SIGNALS ARE FASTER THAN EVENTS!!!!!1 Who could have thought that, huh? OK, </sarcasm>. Just looking at the code you can tell that as3-signals being simpler will be faster. This is definitely good.

But, if you need 0(zero) or 1(one) listener for your object, use plain old callbacks and you will be shocked by performance boost!

I added this code to the guy’s test:

public var callback:Function;
public function dataCallback():void
{
for (var i:uint = 0; i < loops; i++)
this.callback(i);
}

And here are the results

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
1 (5 iterations)
Player version: MAC 10,0,42,34 (debug)
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
method...................................................ttl ms...avg ms
Events                                                     3107   621.40
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
1 (5 iterations)
Player version: MAC 10,0,42,34 (debug)
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
method...................................................ttl ms...avg ms
Signals                                                    2198   439.60
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
1 (5 iterations)
Player version: MAC 10,0,42,34 (debug)
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
method...................................................ttl ms...avg ms
Callback                                                    255    51.00
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Someone has too much time running tests and drawing graphs. Oh wait, it’s me. At least I haven’t drawn a graph.

P.S. Once again, as3-signals is good, opensource is good! cheers~

How I made the “TV glitch effect” for va.lent.in

You should have seen the effect of a TV signal glitch on text at my last va.lent.in site. People keep asking me how it was done over and over again. I won’t post complete source code here because it’s kind of messy. I’ll just give basic ideas, because this effect is rather simple.

Basically, you just displace red, green and blue channels of a bitmap separately and apply the same actions to resulting bitmap. Adding some kind of wave function looks cool too, but is damn slow. So, what I decided to do is to distort a small rectangle of target image over a couple of frames. First, I used only BitmapDatas but later tried to test PixelBender performance. Honestly, I don’t remember any miraculous speed gain, so there might be none at all. But anyway, here’s the code of this filter. Basically, it’s just 3 lines of code:

void evaluatePixel()
{
    float2 outCoords = outCoord();
    dst.r = sample( src, float2(outCoords.x + rOffset, outCoords.y) ).r;
    dst.g = sample( src, float2(outCoords.x + gOffset, outCoords.y) ).g;
    dst.b = sample( src, float2(outCoords.x + bOffset, outCoords.y) ).b;
}

Full source code you can download here: RGBDisplacement.pbk

This shader takes 3 displacement values as parameters. Now back to AS3. Once again, this code is result of numerous experiments, changes and fixes during development. Please don’t use it as is (actually it doesn’t work alone) but rather try to understand the basic idea.

[Embed(source=&quot;filters/RGBDisplacement.pbj&quot;, mimeType=&quot;application/octet-stream&quot;)]
 private var ShaderDistort:Class;

 public function Distortion( source: Sprite, minAmp: int = 10, maxAmp: int = 40, len: int = 30, minRand: Number = .05, ampRand: Number = .8, maxH: int = 20 )
 { ... }

Shader class and constructor params.

public function start( interval: int = -1 ): void
{
    if ( bitmapData.width != Math.ceil(_source.width) || bitmapData.height != Math.ceil(_source.height) )
    {
        initBitmaps();
    }

    seed = 0;
    _source.alpha = 0;
    visible = true;
    this.interval = interval;
    // set random displacement
    bmpY = Math.random()*(bitmapData.height-bitmapDataDistorted.height);

    bitmapData.fillRect( bitmapData.rect, 0x000000 );
    bitmapData.draw( _source );
    business();
 }

This method resets distortion params, sets bmpY to a random starting y position and invokes business() which does the job.

private function business( evt: Event = null ): void
{
    // stop if played for certain number of frames
    if (interval == 0)
    {
        stop();
        return;
    }
    interval--;

    // randomly move the effect up or down
    bmpY += int((10 - Math.random()*20) * Math.sqrt(interval));
    bmpY &lt; 0 ? bmpY = 0 : true;
    bmpY &gt; bitmapData.height-bitmapDataDistorted.height ? bmpY = bitmapData.height-bitmapDataDistorted.height : true;

    var bmpd: BitmapData = new BitmapData( bitmapDataDistorted.width, bitmapDataDistorted.height, false, 0x000000 );

    bmpd.copyPixels( bitmapData, new Rectangle(0, bmpY, bitmapDataDistorted.width, bitmapDataDistorted.height ), new Point(0, 0) );
    filter.data.src.input = bmpd;

    seed++;
    seed &gt;= len ? seed = 0: true;

    // wave function
    var v: Number = 3.14159265 / len * seed;
    // approximation of sin()
    var sin: Number = 1.27323954 * v - 0.405284735 * v * v;
    var amp: Number = minAmp + sin * difAmp;

    var i: int = 0;
    var disp: Array = [];
    var pi2: Number = 6.28318531;

    for (i; i&lt;3; i++)
    {
        if ( seeds[i] &gt;= 1 )
        {
            seeds[i]--;
            dSeeds[i] = Math.random() * ampRand + minRand;
        }
        seeds[i] += dSeeds[i];
        v = seeds[i] * pi2;
        // approximation of sin()
        if (v &gt; 3.14159265) v -= 6.28318531;
        if (v &lt; 0)
            sin = 1.27323954 * v + .405284735 * v * v;
        else
            sin = 1.27323954 * v - 0.405284735 * v * v;
        disp[i] = sin * amp;
    }

    // set displacements for shader
    filter.data.rOffset.value = [disp[0]];
    filter.data.gOffset.value = [disp[1]];
    filter.data.bOffset.value = [disp[2]];

    // invoke shader
    var job: ShaderJob = new ShaderJob(filter, bitmapDataDistorted);
     job.addEventListener(ShaderEvent.COMPLETE, redraw);
    job.start();
}

And finally redraw() method

private function redraw( evt: Event = null ): void
{
     bitmapData.copyPixels( bitmapDataDistorted, bitmapDataDistorted.rect, new Point(0, bmpY) );
     id = setTimeout(business, 40);
}

That’s it. You can refer to my post about using Maple for more math.

The source of this class is here: Distortion.as

Water effect

Want to create a water surface effect? Here’s how.

Twitter AS3 library

Tweetr is an AS3 library to work with Twitter API. Looks like it supports all the functions of Twitter and should be good for custom AIR clients.

AIR 2.0 Sockets demo

Check it out. When will we see the first web server running in AIR?

Unnamed functions

Why you shouldn’t use them. What’s more, every function call costs time, think about inlining simple functions code.