Archive for the 'to code' Category

In case you need to unlock some files on OS X

Recently I got a major headache with OS X file locks. Apparently, I can do nothing with locked files even being under root. So here comes a handy script which does that recursively. Taken from this site but there was a typo.

#! /bin/bash
#
# Simple file unlocking utility for Mac OS X
#
ARGS=1
E_BADARGS=65

function recursiveUnlock() {
 pushd $1
 for rdir in `ls -A`; do
 if [ -d "${rdir}" ]; then
 recursiveUnlock ${rdir}
 else
 /Developer/Tools/SetFile -a l ${rdir}
 fi
 done
 popd
}

if [ $# -ne "$ARGS" ]
then
 echo "Usage: `basename $0` starting-directory"
 exit $E_BADARGS
fi

recursiveUnlock $1

Call it recursiveUnlock.sh and “chmod” it to 755.

100x times faster MD5 and more

Update: Get more recent version of the library here.

Update: I updated the zip with LGPL MIT license file. The original author basically says “use wherever you want” which looks like mostly LGPL MIT, right? Yes, haXe was used to create the SWC but I don’t know if we can get the source or not. Anyway I hope you understand from the code below how to use the library.

My dear friend BlooDHounD has recently released an SWC with highly optimized MD5, Base64, CRC32, JPEG, PNG algorithms. Compared to as3corelib we get the following results:

by.blooddy.crypto.MD5.hashBytes: 40
com.adobe.crypto.MD5.hashBytes: 4483

by.blooddy.crypto.Base64.encode: 115
mx.utils.Base64Encoder: 1635

by.blooddy.crypto.Base64.decode: 141
mx.utils.Base64Decoder: 2762

by.blooddy.crypto.image.JPEGEncoder.encode: 447
com.adobe.images.JPGEncoder: 3496

by.blooddy.crypto.image.PNG24Encoder.encode: 538
com.adobe.images.PNGEncoder.encode: 1423

Here’s the benchmark source:

package {

	import by.blooddy.crypto.Base64;
	import by.blooddy.crypto.MD5;
	import by.blooddy.crypto.image.JPEGEncoder;
	import by.blooddy.crypto.image.PNG24Encoder;

	import com.adobe.crypto.MD5;
	import com.adobe.images.JPGEncoder;
	import com.adobe.images.PNGEncoder;

	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.utils.ByteArray;
	import flash.utils.getTimer;

	import mx.utils.Base64Decoder;
	import mx.utils.Base64Encoder;

	[SWF( scriptTimeLimit="255" )]
	public class test extends Sprite {

		/**
		 * Constructor
		 */
		public function test() {
			super();

			var text:String = '';
			var t:Number;

			// BitmapData for tests
			var bmp:BitmapData = new BitmapData( 1024, 1024, true, 0xFFFF0000 );
			bmp.noise( int( Math.random() * int.MAX_VALUE ), 0, 0xFF, 7, false ); // генерируем шум

			// ByteArray for tests
			var bytes:ByteArray = bmp.getPixels( bmp.rect );

			// MD5 test
			t = getTimer();
			by.blooddy.crypto.MD5.hashBytes( bytes );
			text += '\nby.blooddy.crypto.MD5.hashBytes: ' + ( getTimer() - t ); // 40

			t = getTimer();
			com.adobe.crypto.MD5.hashBytes( bytes );
			text += '\ncom.adobe.crypto.MD5.hashBytes: ' + ( getTimer() - t ); // 4483

			// Base64 encode test
			t = getTimer();
			var s1:String = by.blooddy.crypto.Base64.encode( bytes, true );
			text += '\nby.blooddy.crypto.Base64.encode: ' + ( getTimer() - t ); // 115

			t = getTimer();
			var e:Base64Encoder = new Base64Encoder();
			e.encodeBytes( bytes );
			var s2:String = e.flush();
			text += '\nmx.utils.Base64Encoder: ' + ( getTimer() - t ); // 1635

			// Base64 decode test
			t = getTimer();
			by.blooddy.crypto.Base64.decode( s1 );
			text += '\nby.blooddy.crypto.Base64.decode: ' + ( getTimer() - t ); // 141

			t = getTimer();
			var d:Base64Decoder = new Base64Decoder();
			d.decode( s2 );
			d.flush();
			text += '\nmx.utils.Base64Decoder: ' + ( getTimer() - t ); // 2762

			// JPEG test
			t = getTimer();
			by.blooddy.crypto.image.JPEGEncoder.encode( bmp, 60 );
			text += '\nby.blooddy.crypto.image.JPEGEncoder.encode: ' + ( getTimer() - t ); // 447

			t = getTimer();
			( new com.adobe.images.JPGEncoder( 60 ) ).encode( bmp );
			text += '\ncom.adobe.images.JPGEncoder: ' + ( getTimer() - t ); // 3496

			// PNG test
			t = getTimer();
			by.blooddy.crypto.image.PNG24Encoder.encode( bmp );
			text += '\nby.blooddy.crypto.image.PNG24Encoder.encode: ' + ( getTimer() - t ); // 538

			t = getTimer();
			com.adobe.images.PNGEncoder.encode( bmp );
			text += '\ncom.adobe.images.PNGEncoder.encode: ' + ( getTimer() - t ); // 1423

			var tf:TextField = new TextField();
			tf.autoSize = 'left';
			tf.text = text;
			super.addChild( tf );

		}

	}

}

I know that he is too shy to tell you guys about his results (8
But they are definitely worth sharing.

You can download the SWC here (look up at the update section).

AVM2Overview lies

It says:

One of the entries in the ABC file is an array of script_info entries (see the next chapter). Each of these entries contains a reference to an initialization method for the script and a set of traits to be defined in the script’s environment. The last entry in that array is the entry point for the ABC file; that is, the last entry’s initialization method contains the first bytecode that’s run when the ABC file is executed.

That’s apparently is not true. I keep getting different classes in the last entry except the main document class which I need. Thanks to @joa for pointing me to SymbolClass tag which contains an array to map Classes to Library Symbols in SWF files. And the very first class there seems to be the Document class I need.

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.