mostly a codeBlog » Flash

SporeTree

Ricki — Tue, 11 Aug 2009 21:21:02 +0000

This time the spores turned into a tree. It is by no means perfect, the branches does not move upwards with the stem as it should, were this a real orange colored scary spore tree.

This was just some “while Im doing nothing, let’s put whatever in the ‘fun’ category” but if anyone would like the code, throw me a comment and I’ll send it off. I is uncommented and messy.

Growing Homegrown Tentacles

Ricki — Fri, 07 Aug 2009 23:30:19 +0000

Well, I just got time to look into how to get the tentacles growing, i.e. start out small and have all the joints gradually increase in size, instead of the joint getting smaller all the time. (think I just tried to explain the definition of growing by using the definition of growing??).

Thanks again to Justin.

The spore Class turned out to look like this, it needs going over, but I was thinking on porting it to Processing and really get my tentacles on

The code:

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.geom.Point;
	import flash.utils.setTimeout;

	public class Spore extends Sprite
	{
		private static const LENGTH:int = 90;
		private var _posX:Vector.;
		private var _posY:Vector.;
		private var angStep:Number;
		private var posStep:Number;
		private var curl:Number;
		private var n:Number = 0;
		private var a:Number = Math.random() * Math.PI * 2;
		private var _index:int;
		private var _g:Graphics;

		public function Spore()
		{
			_posX = new Vector.( LENGTH, true );
			_posY = new Vector.( LENGTH, true );
			_g = graphics;
			this.generate( range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ) );
		}

		public function generate( aStep:Number, pStep:Number, c:Number ):void
		{
			_index = 0;
			angStep = aStep;
			posStep = pStep;
			curl = c;
			var loc:Point = new Point( 0, 0 );
			while( _index < LENGTH )
			{
				n += Math.random() * (angStep - -angStep) + -angStep;
				n *= 0.9 + curl * 0.1;
				a += n;
				loc.x += Math.cos( a ) * posStep;
				loc.y += Math.sin( a ) * posStep;
				_posX[ _index ] = loc.x;
				_posY[ _index ] = loc.y;
				_index++;
			}
			_index = 0;
		}
		public function step():void
		{
			_g.clear();
			_g.lineStyle( 0, 0x000000, 0.7 );
			var c:int = 0;
			var radius:Number;
			while( c < _index )
			{
				radius = _index / c;
				if( radius > 10 ) radius = 10;
				_g.beginFill( 0xFF6600, 0.4 );
				_g.drawCircle( _posX[ c ], _posY[ c ], radius );
				_g.endFill();
				c++;
			}
			_index++;
			if( _index >= LENGTH )
			{
				this.generate( range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ) );
			}
		}
		private function range(min:Number, max:Number = NaN):Number
		{
			if(isNaN(max)) {max = min; min = 0}
				return min + (Math.random() * (max - min));
		}
	}
}

RandomWalk

Ricki — Thu, 06 Aug 2009 18:32:55 +0000

Im looking into some of the random walk stuff out there and I stumbled upon www.actionsnippet.com and his RandomWalk experiments, great site by the way, bring coffee.
The thing that was cool about his way of doing it was that he constrains the “walkers” to only move: up, down, left and right. Absolutely no diagonal movement. This produces a strange grid looking pattern.

The code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

*/

//playing around with something Zevan Rosser from http://actionsnippet.com/?p=1236 did

//on his blog



package {
    

    import flash.display.*;

    import flash.events.*;
    

    [SWF( width="512", height = "512", backgroundColor = "0x222222", frameRate = "120" )]

    

    public class RandomWalk extends Sprite 

    {
        private var _canvas:BitmapData;

        private var _count:int = 100;

        private var _movers:Vector.;

        

        public function RandomWalk()

        {

            var w:Number = 512;

            var h:Number = 512;

            scaleX=scaleY = 0.25;

            _canvas = new BitmapData( w * 4, h * 4, false, 0x222222 );

            addChild( new Bitmap( _canvas ));

            

            _movers = new Vector.();

            

            for ( var i:int = 0; i < _count; i++ ) 

            {

                _movers[ i ] = new Mover( _canvas, w * 1.5 + Math.random() * w, h * 1.5 + Math.random() * h );

            }

            addEventListener( Event.ENTER_FRAME, onRun );

        }

        private function onRun( evt:Event ):void 

        {

            for (var i:int = 0; i < 200; i++) 

            {

                for (var j:int = 0; j < _count; j++) 

                {

                    _movers[ j ].run();

                }

            }

        }

    }

}



import flash.display.BitmapData;

class Mover 

{

    public var x:Number;

    public var y:Number;

    public var velX:Number;

    public var velY:Number;

    public var speed:Number;

    private var _canvas:BitmapData;

    private var _color:uint;

    

    public function Mover( canvas:BitmapData, xp:Number, yp:Number ) 

    {

        _color = 0xFF6600;//Math.random() * 0xFFFFFF;

        _canvas = canvas;

        x = xp;

        y = yp;

        velX = 0;

        velY = 0;

        speed=Math.random() * 5 - 2.5;

    }

    

    public function run():void 

    {

        x += velX;

        y += velY;

        _canvas.setPixel( x, y, _color );

        

        var dir:Number = int( Math.random() * 4 );

        

        if (dir == 0) 

        {

            velX = 0;

            velY =- speed;

        } 

        else if (dir == 1) 

        {

            velX = 0;

            velY = speed;

        } 

        else if (dir == 2) 

        {

            velX =- speed;

            velY = 0;

        } 

        else if (dir == 3) 

        {

            velX = speed;

            velY = 0;

        }

    }

}



/*

Homegrown Tentacles

Ricki — Thu, 06 Aug 2009 18:03:40 +0000

I had been scurrying about over on the Soulwire blog, again, and looking at the tentacles. I did some experiments of
my own, but the tentacles never came out right, not organic enough. I wrote Justin and asked him how he did it and he was really cool about helping out with a code example of how he did that part.

The Soulwire Tentacles was an experiment in PixelBender speed and usability, so he makes it look as if the tentacles are really growing, i.e. starts out small and each “joint” grows as the tentacles grows. Mine is just a look into the random-organic way they grow. Also I was trying to see what kinds of speed I would get by using the Bitmap approach.

Here are the Soulwire Tentacles

And here are my Tentacles… that came out wrong…

The code:

/**
*
 * @BitmapSpore.as	:	inspired by http://blog.soulwire.co.uk/flash/actionscript-3/pixel-bender-growing-tentacles/
 * @Date  08/06-09
 * @Ricki Gregersen
*/

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;

	[SWF( width="512", height = "512", backgroundColor = "0x222222", frameRate = "30" )]

	public class BitmapSpore extends Sprite
	{
		private static var fading : ColorTransform = new ColorTransform( 1, 1, 1, 0.99999 );
		private static var _blur : BlurFilter = new BlurFilter( 1, 1, 2 );

		private var _bmd:BitmapData;
		private var _bmp:Bitmap;
		private var _container:Sprite;

		public function BitmapSpore()
		{
			_bmd = new BitmapData( 512, 512, true, 0x222222 );
			_bmp = new Bitmap( _bmd );
			addChild( _bmp );
			var s:Spore;
			addChild( _container = new Sprite() );
			for( var i:int = 0; i < 500; i++ )
			{
				s = new Spore( 256, 256, range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ));
				s.scaleX = s.scaleY = Math.random() * 2;
				_container.addChild( s );
			}
			addEventListener( Event.ENTER_FRAME, update );
		}

		private function update( event:Event ):void
		{
			var n:int = _container.numChildren;
			var s:Spore;

			for( var i:int = 0; i < n; i++ )
			{
				s = Spore( _container.getChildAt( i ));
				s.move();
				s.x = s.loc.x;
				s.y = s.loc.y;
			}
			_bmp.filters = [  _blur ];
			_bmd.colorTransform( _bmd.rect, fading );
			_bmd.draw( _container );
		}

		private function range(min:Number, max:Number = NaN):Number
		{
			if(isNaN(max)) {max = min; min = 0}
				return min + (Math.random() * (max - min));
		} 

	}
}
	import flash.geom.Point;
	import flash.display.Shape;

	class Spore extends Shape
	{
		public var loc:Point;

		private var angStep:Number;
		private var posStep:Number;
		private var curl:Number;
		private var n:Number = 0;
		private var a:Number = Math.random() * Math.PI * 2;

		function Spore( xPos:Number, yPos:Number, aStep:Number, pStep:Number, c:Number )
		{
			loc = new Point( xPos, yPos );
			angStep = aStep;
			posStep = pStep;
			curl = c;
			graphics.lineStyle( 0, 0x222222, 0.7 );
			graphics.beginFill( 0xFF6600, 0.7 );
			graphics.drawCircle( 0, 0, 5 );
			graphics.endFill();
		}
		public function move():void
		{
			n += Math.random() * (angStep - -angStep) + -angStep;
			n *= 0.9 + curl * 0.1;
			a += n;
			loc.x += Math.cos( a ) * posStep;
			loc.y += Math.sin( a ) * posStep;
			this.scaleX = this.scaleY *= 0.98;
			var s:Number = this.scaleX = this.scaleY;
			if( s < 0.1 )
			{
				loc.x = loc.y = 256;
				this.scaleX = this.scaleY = Math.random() * 2;
			}
		}
	}

Perlin Noise used to drive vector flow field

Ricki — Sat, 20 Jun 2009 12:07:12 +0000

This post is essentially the same as this one, only difference is that a BitmapData.perlinNoise() is used instead of the BitmapData.draw(video) to produce a background that influences the flow field.

I have not posted the code to this one because the two are so similar, but if anyone want me to, just leave a comment and I’ll get right on posting it:) or send it to you.

More camera flow field fun

Ricki — Tue, 16 Jun 2009 20:10:06 +0000

Apparently I have not finished my little Flow Field craze, In one of my math books I saw a picture of a flow field
as it is depicted in math terms, as a little grid of arrows. I thought it could be fun to play around with this idea.

The code is really sloppy this time, only took an hour or two, so I’ll post the example here along with the project (A Flash Builder Flash Project SDK 4.0 to be precise, will run in the Flash IDE, no problem).

This is your brain, and this is your brain on vectors!

(Warning, this could potentially push your browser to the limit if you are to eager with the sliders. So please save any unfinished pulitzer price article you are currently working on in Google docs, I really don’t want to piss of anyone )

Source is here, I included Bit-101′s minimalComps sine Im using that library, they are great for these things!

Ant build scripts part 01 (Gumbo Flex SDK 4.0.0)

Ricki — Sun, 14 Jun 2009 20:16:47 +0000

(Warning: lengthy and boring… and subsequently extremely useful)

I have been in the process of building an Ant script for the main project/customer at work.
It is an Air project that consists of 9 applications, each in their own project space. They get compiled into modules, they have
their own external assets and so forth. When we need to update/release these applications all the swf’s and assets are moved to a final package, which
essentially is a MainApp.swf that loads in these 9 applications at runtime.

Because we needed a way to test and develop the individual modules, without relying on the Main.swf, or any other modules to be present, each project had
a dummy Main, so checking out SubApp0 from SVN and running DummyMain.mxml inside it would result in the SubApp0.swf module being loaded. Modules can’t run by themselves.

There are two deployment cases, one where the customer needs an entire new MainApp.air file installed and a case where we only need an individual module recompiled and sent
to the customers installation. e.g. SubApp1 has been updated and the SubApp1.swf module file is to be moved into the MainApps application directory, so that MainApp can load it. (This is done via a completely different system that tests for files on our server with newer timestamps and moves the files out to the customers clients).

It was becoming a bit of a burden keeping track of 9 modules/projects and their assets, so 6 months back I wrote an applescript that moved the assets and the modules
into the main application, where I could ask Flex Builder to package them into an Air bundle. This however does not help my Windows colleagues, do any testing on the bundle or keep any track on versioning.
So now it is time to get out the magnifying glass and burn some Ant. I don’t know how many parts this will be (2-4) but I am hoping on getting it up and running with both automatic Unit testing, automatic retrieval of latest code from SVN and some sort of reporting system(mail, ftp, red blinking lights on my phone?)… oh yeah and the dreaded asdoc.

I’ll be referring to the two cases mentioned above as the “deploy case”" i.e. only compile and collect, and the “release case” i.e. compile, collect, version and package as an Air bundle.

The first part is how to set up Gumbo/Flash Builder 4 (Flex builder/Eclipse has the same procedure) for Ant tasks, the structure of these tasks, the different files and lastly a small example that compiles three swf’s and their SWC’s using a macro and finally move these to a directory called “deploy”.

The second part will then look at a conceptually similar case as the one I described in the introduction, MainApp, SubApp0 and SubApp1 are all to be compiled, have their assets moved and everything bundled into an Air package.

I will see how far I get over the next couple of weeks, if I get SVN and Unit testing up and running I will post that as well.

On with it!

Prerequisite

Your Eclipse/Gumbo/Flash Builder/Flex Builder, from now on just called “Eclipse”, will need the the “Java Development Tools” installed. This can be found under “help” ->”Software updates” -> “Find and install”. The “Java Development Tools” should be on the list.

An Ant build script consists of, at least, a build.xml file. The build file holds a set of instructions wrapped in targets, it is in essences an xml file with
commands and parameters to be run by the ant.jar “engine”.

For us to use Ant to compile flash files, Adobe must deliver command line tools we can point Ant at so it can compile and manipulate the raw classes, i.e. .as and .mxlm files. Luckily Adobe has made these for us:

mxmlc.jar is the mxml compiler.
adt.jar is the air debug tool
adl is the air debug launcher (adl.exe on Windows)
asdoc is the actionscript documenter (asdoc.exe on Windows)

There is some information on these command line tools at Adobes livedocs and the tools themselves you already have if you have an Flex/Flash Builder installation.
They reside in the “sdks” folder, which is located somewhere like ../users/applications/Adobe Flash Builder/sdks/4.0.0/
If you don’t have anything named like this anywhere, you maybe running Eclipse and haven’t installed the Flex builder plugin yet, this can be done from the Adobe downloads section.

Once we are ready we are going to start a new Air project called MainApp, so go into Eclipse, “File” -> “New Flex Project” -> make sure it is set to be an Air project and click “Finish”.
Right click on the project in the navigator view (package view in Gumbo) select new and click “folder”, name the folder “build-files”, right click that new “build-files” folder and select new and click “file”, name the file “build.xml”. We are almost ready now.

We are going to copy the “mxmlc.jar” and “flexTasks.jar” file into our project. This is done so the project sdk version always fit the current project, it is also done
to avoid referencing long different paths on e.g. Mac, Linux and Windows. The “adt.jar” and “adl” files are not copied as these rely on other tools located in the
sdk and moving these will make them behave irregular.
So before we move on find these files, on Mac, in:

/Applications/Adobe\ Flash\ Builder\ Beta/sdks/4.0.0/ant/lib/flexTasks.jar
/Applications/Adobe\ Flash\ Builder\ Beta/sdks/4.0.0/lib/mxmlc.jar

And copy them into the project we made in the “libs” folder.

Now we are ready and your project should look something like this

Let’s try out Ant

Open the “build.xml” file and type in these instructions:

Notice the path property “MAIN” this should of course be changed to fit the path on your system. Select “Window” -> “Other views” -> “Ant” in Eclipse to open the Ant view. Drag the “build.xml” onto this window, if it is not already there, right click on the “clean” target and select “Run As” -> “Ant Build”. Now you should see that Ant has made a “deploy” folder in your “MainApp” project root. Ok things to notice here: the “target” node holds the tasks we want to carry out, the “property” is a way to set an alias that will be used instead of a long path. In the amount of blog posts and manual I have been through the last couple of days it seems there are two conventions when typing these out. One is “ALL_CAPS” and the other is “source.dir”. I like using the ALL_CAPS, like constants in programming, for the paths.
You can type them as you like, no problem. Notice that in the target, we reference a property name using ${MAIN}, we will utilize this a lot more, not just to make smaller build scripts, but also to make it possible to have this script running on other developers computers, who probably don’t have folders and sdks in the same location. Now right click the “build-files” folder and select “New” -> “File” name the file “build.properties” this file will hold all the aliases that we deem necessary.

	project.name=MainApp
	author=Ricki Gregersen
	project.version=0.1.0

	#System depend paths
	FLEX_ROOT=/Users/rickigregersen/Documents/Programming/FlashBuilder
	FLEX_HOME=/Applications/Adobe Flash Builder Beta/sdks/4.0.0
	AIR_HOME = /Applications/Adobe Flash Builder Beta/sdks/4.0.0/frameworks/libs/air

Now change the “build.xml” file to look like this:

Notice the “build.properties” is included as a property file. So why not just put the ${MAIN} alias into the “build.properties” as well? We surely could, but the ${MAIN} alias is only valid for this particular “build.xml” and not a general path. So we leave it in here for a developer to see. The goal is for a developer to pull down this project from, say, subversion, edit the three aliases in the “build.properties” and then be able to build everything of the bat. But we are not really doing anything interesting yet, Ant can make directories, delete directories, move files, replaces files and so on. Lets compile our MainApp. This time I made quite a few add-ons to the script, but I’ll explain them all:

Ok this just got interesting, a few new aliases turned up, we covered how to do that already. A new target was included, yes this it how it goes.
You can just add as many targets as you need inside the project node, notice that this new target “compile” also turned up in the Ant window in eclipse.
You can now click either “clean” or “compile” and have that target run. The “compile” target has a new attribute called “depends”. This means exactly what it says: this task depends on the clean task being successfully run before it starts! This is great, we can now determine what tasks should run and in what order. Selecting “compile” in the Ant window and running it will make “clean” execute and when it is done, “compile” will run.
This new compile target has an tag. If you have ever used a terminal, this is the xml equivalent. The “grep” command in Unix has this description
grep [options] PATTERN [FILE...] which means, type grep -any_options a_string in_a_file.txt, so when you give the terminal this command it understands how to search for the “a_string” in the “in_a_file.txt” with “-any_options” in mind. This is the same thing, the mxmlc.jar file is executed, with the attributes as parameters. This makes sense, it needs to know the location of the MAIN_APP_MXML file, which holds our code, it needs to know where to put it and the “debug” and “optimize” parameters are the options. You should now have a “MainApp.swf” in your “deploy” folder.
I have included some code in the mxmlc tag, this is to show how external SWC files can be compiled into the swf. When the mxmlc runs the MainApp.mxml will raise a flag saying that a swc is needed, if you have a swc included in the library path og MainApp of course, this takes care of that.

Now it makes sense to have the “clean” target as we would like to ensure that only freshly compiled code ends up in the “deploy” folder.
The last thing we will look at in this walk-through is to write a macro to bundle functionality together, compile and move two additional mxml files into the deploy folder.

A macro is a way of having Ant carry out a number of tasks in sequence. Before we get into to macroes, make two new projects called “SubApp0″ and “SubApp1″, just like we made the “MainApp” project, like in the picture above. These projects will have nothing in their “libs” folder, they will not have “deploy” folder or any of the functionality/assets we added to the “MainApp”. I also made 2 new Library Projects called “AntSwc0″ and “AntSwc1″, I then right clicked “MainApp”, “SubApp0″ and “SubApp1″ and selected “Properties” -> “Flex Build Path” -> “Library Path” and include the “AntSwc0″ and “AntSwc1″. This is just to show this functionality, if you have no need for swcs, just omit compiler.library-path tag from the macro.

This is how the “build.xml” looks like now:

The macro takes the parameters you specify, here it is “source” and “target”, notice that in the tag, these properties are
accessed using @ instead of $, this is so the macro can distinguish between global aliases and local aliases. Everything you put between
the will be run by the macro.

I added a last target called “run_all”, you can see it is empty but the clever thing is that it depends on “clean” and “compile” to run before it will
execute, so this essentially runs all.

Evil & Loud Perlin noise

Ricki — Thu, 28 May 2009 18:42:54 +0000

In regards to my previous Perlin Flowfield post, it was a bit strange because I could simply not remember the basics about Perlin noise. Yes, as my colleague I falsely believed Perlin to be the evil brother of Merlin.

I have previously used Perlin noise in Processing, it is a bit different in some of the aspects of how you “access” it. In Processing you sort of get the values representing the noise iteration, whereas In Flash you actually build a noise Bitmap and read pixels from this to produce numerical noise. I Processing I guess you would do the opposite, i.e. building all the noise values into a bitmap to get something similar to the noise below.

So I build this little app to play around with the parameters and to see how much detail one can get away with, before the calculation load gets to heavy for practical use. The values that can be adjusted below are those that go into the BitmapData.perlinNoise method If you would like to put in more controls or whatever you feel like doing with this small app then: Snatch the entire Flex project here (SDK 3.3), swf included.

I recalled that when dabbling with Perlin noise, a year ago, in Processing I found Ken Perlin’s talk on… well, noise I guess It is very interesting and even though words like permutations and fractals are used to some extend it is mainly an interesting story about this invention.

Webcam Flow field in Flash

Ricki — Mon, 25 May 2009 21:02:48 +0000

I was lurking about over at Justin Windle’s blog Soulwire, wish my blog had an alter ego with a cool name..

Now I know how Neo felt..

Which makes this Keanu Reeves..

He had been building some flow fields using Perlin noise, which my colleague think is Merlins evil brother for some reason.

I was writing a vector library for a particle engine Im going to publish here some day and thought that implementing theSoulwire flow field would be nice. Justin has been so kind as to put out the source, which is awesome when your code is that good and visually stunning. As I played around with the code I got an idea, I think it is inspired by something I saw on the Processing site the idea was to use the input from my webcam as the noise map, instead of the MPerlin noise. I made a quick mockup, that actually looks quite promising. It needs some sort of effect, maybe an IR webcam, a 5×5 meter black wall to project it on, before it is ready, also the manipulation of the webcam image before it get’s read by the particles could give it a little extra. It is ticking along quite well on my Macbook Air, running the webcam and 5000 vectors.

For now I’ll just put the source code up here:

(It is build using Eclipse (Flex Builder Plugin), so it extends UIComponent, not something I would recommend, but if someone can tell me how to add Sprites to the stage of an AIR app, I will surley change it)

package
{
	import com.rickigregersen.flow_bump.Arrow;

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.filters.ColorMatrixFilter;
	import flash.geom.ColorTransform;
	import flash.media.Camera;
	import flash.media.Video;

	import mx.core.UIComponent;

	public class Main extends UIComponent
	{
		//theese are the values I had fun playing with, but you might want something a bit more crazy:)

		private static const TRAIL : Number = 0.95;
		private static const BOOST : int = 110;
		private static const VECTORS : int = 1000;
		private static const BLUR : int = 4;
		private static const SCALE : Number = 6.0;
		private static const BACKGROUND : uint = 0x000000;
		;

		private static var fading : ColorTransform = new ColorTransform( 1, 1, 1, TRAIL );
		private static var blurFilter : BlurFilter = new BlurFilter( BLUR, BLUR, 3 )
		private static var grayMatrix : Array = [                       0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0 ];
		private var grayFilter : ColorMatrixFilter = new ColorMatrixFilter( grayMatrix );
		private var brightMatrix : Array = [                      1, 0, 0, 0, BOOST, 0, 1, 0, 0, BOOST, 0, 0, 1, 0, BOOST, 0, 0, 0, 1, 0 ]
		private var brightFilter : ColorMatrixFilter = new ColorMatrixFilter( brightMatrix );

		private var camBMD : BitmapData;
		private var camBMP : Bitmap;
		private var renderBMD : BitmapData;
		private var renderBMP : Bitmap;
		private var vid : Video;
		private var cam : Camera;
		private var w : int, h : int;
		private var flowImage : Sprite;

		public function Main( _w : int, _h : int )
		{
			//width and height, also a sprite for holding the little particles;
			w = _w;
			h = _h;
			flowImage = new Sprite();
			//get the video;
			cam = Camera.getCamera();
			vid = new Video( w, h );
			vid.attachCamera( cam );

			//make a bitmap for drawing the video into
			camBMD = new BitmapData( w, h, false, BACKGROUND );
			camBMP = new Bitmap( camBMD );

			//a bitmap to stuff it all into and give some sort of effect
			renderBMD = new BitmapData( w, h, false, BACKGROUND );
			renderBMP = new Bitmap( renderBMD );

			//add the cam bmp and the rendered bmp
			addChild( camBMP );
			camBMP.y = h;

			addChild( renderBMP );
			//build the little vectors
			buildVectors();
		}

		private function buildVectors() : void
		{
			//place, rotate and scale them randomly
			var a : Arrow;

			for ( var i : int = 0; i < VECTORS; i++ )
			{
				a = new Arrow();
				a.x = Math.random() * w;
				a.y = Math.random() * h;
				a.rotation = Math.random() * 360;
				a.scaleX = a.scaleY = Math.random() + 0.1;
				flowImage.addChild( a );
			}
			addEventListener( Event.ENTER_FRAME, update, false, 0, true );
		}

		private function update( event : Event ) : void
		{
			//draw the cam to the stage, appy the grayscale Matrix, sometimes blur and brightfilters too
			camBMD.draw( vid );
			camBMP.filters = [                         grayFilter /*, blurFilter, brightFilter */  ];

			var a : Arrow;
			var brightness : Number;
			var radians : Number;
			var angle : Number;
			var speed : Number;
			var pixel : int;

			for ( var i : int = 0; i < VECTORS; i++ )
			{
				a = flowImage.getChildAt( i ) as Arrow;
				//get the brightness values of the pixel positioned directly under the vector
				pixel = camBMD.getPixel( a.x, a.y );
				brightness = pixel / 0xFFFFFF;
				//adjust spped and angle acording to the brightness
				speed = 0.1 + brightness * a.speed;
				angle = 360 * brightness * a.wander;
				radians = angle * Math.PI / 180;
				//make sure the vector is moving in the same direction as it's velocity
				a.x += Math.cos( radians ) * a.speed;
				a.y += Math.sin( radians ) * a.speed;
				//scale and rotate the vector according to brightness and
				a.rotation = angle;
				a.scaleX = a.scaleY = 0.1 + brightness * SCALE;
				//wrap around
				if ( a.x > w )
					a.x = 0;
				else if ( a.x < 0 )
					a.x = w;
				if ( a.y > h )
					a.y = 0;
				else if ( a.y < 0 )
					a.y = h;

			}

			//apply the colortransform, it determines the transparency of the bitmaps being stacked
			renderBMD.colorTransform( renderBMD.rect, fading );
			//draw the Sprite that hold all the vectors.
			renderBMD.draw( flowImage );

		}
	}
}

Here is the Arrow Class:

package com.rickigregersen.flow_bump
{
	import flash.display.Shape;

	public class Arrow extends Shape
	{
		public var speed : Number = Math.random() * 3;
		public var wander : Number = Math.random() * 0.5;

		public function Arrow()
		{
			draw();
		}

		private function draw() : void
		{
			/* 			graphics.clear();
			   graphics.lineStyle( 0, 0xFF0000, 0.4 );
			   graphics.moveTo( 0, 0 );
			   graphics.lineTo( 3, 0 );
			   graphics.moveTo( 2, -1 );
			   graphics.lineTo( 3, 0 );
			 graphics.lineTo( 2, 1 ); */

			/* 			graphics.beginFill( 0xFF0000, 0.9 );
			   graphics.drawEllipse( 0, 0, 6, 2 );
			 graphics.endFill(); */

			/*
			   graphics.beginFill( 0x00FF00, 0.9 );
			   graphics.drawCircle( 0, 0, 5 );
			   graphics.endFill();
			 */
			graphics.clear();
			graphics.beginFill( 0xff6600, 1.0 );
			graphics.moveTo( -1, -0.5 );
			graphics.lineTo( 1, 0 );
			graphics.lineTo( -1, 0.5 );
			graphics.lineTo( -1, -0.5 );
			graphics.endFill();
		}
	}
}

Encapsulate some of the Event and try/catch clutter in AS3 and Flex

Ricki — Mon, 20 Apr 2009 20:03:53 +0000

A few months back I finally got to clean up some of my classes in an old project. I realized that it was way overdue with a custom PictureLoader Class, a lot of the clutter that made my classes hard to read was try catch and Event handling. When loading a simple piece of graphics into an AIR app(Flash, Flex also of course) you will go through at least these steps:

declare loader, url and eventListener.
write listener method
start loading
catch complete event and add the loader to the displayList

Ok, not that much work and only a bit of clutter, however I am programming these AIR apps for a 52″ touch screen, meaining no mouse or keyboard, and any exception not caught will result in the UI being rendered useless and me having to VPN into the system and restart it. I really do not want to do this so here is the list that everyone should abide by when loading anything

declare loader, url and eventListener for ProgressEvent, IOErrorEvent and CompleteEvent
write listener methods for all of the above events
wrap the loader into a try/catch block to catch exceptions
catch complete or error event and remove all the EventListeners
cast the content of the loader into the appropriate type
copy this new content into a new object so that the loader can be null’ed and memory freed up

Ok, suddenly a lot of work and subsequently heaps of clutter. This is a result of the Event driven way of ActionScript 3.0 but a small price for the OOP architecture it now builds upon. I wished to encapsulate all the Event logic into the loader and have that deal with it, the Event code adds clutter. The solution uses the same approach as the Proxy Class so if You tried extending that this will make perfect sense. The main idea is to instantiate a PictureLoader object and pass it the methods that should be executed when events happen and let the PictureLoader handle all garbage collection and event clutter (Ok I’ll stop using the word clutter now, promise).

/**
* Author: Ricki Gregersen www.rickigregersen.com
* GPL: All code is snatch and grab
*/
package com.rickigregersen.loaders
{
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.net.URLRequest;

	public class PictureLoader extends Loader
	{
		private var pic:Bitmap;
		private var loader:Loader
		private var percent:int;
		private var failFunction:Function;
		private var progressFunction:Function;
		private var successFunction:Function;

		public function PictureLoader()
		{
			//the worlds blankiest blank...
		}
		public function loadPicture(url:String, success:Function = null,  progress:Function = null, fail:Function = null):void
		{
			//set the local functions to your global functions
			failFunction = fail;
			progressFunction = progress;
			successFunction	= success;
			//make the needed objects ready
			pic = new Bitmap();
			loader = new Loader();
			//Add a listener for all the different events the could be fired
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, pictureProgress, false, 0, true);
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, pictureFailed, false, 0, true);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureLoaded, false, 0, true);
			//Wrap the load method in a try-catch to catch any wildcard errors that could break the VM
			try{
				loader.load(new URLRequest(url));
			}catch(error:Error){
				pictureFailed();
			}
		}
		//getters for the percent loaded and the picture
		public function get progress():int
		{
			return percent;
		}
		public function get picture():Bitmap
		{
			return pic;
		}
		//Functions to catch the events
		private function pictureProgress(event:Event):void
		{
			percent = (loader.contentLoaderInfo.bytesLoaded / loader.contentLoaderInfo.bytesTotal) * 100;
			//call the parents progressFunction to alert it that a loadProgress has happend
			progressFunction();
		}

		private function pictureLoaded(event:Event):void
		{
			//cast the picture into a bitmap, before this the picture is of type "loader.content"
			pic = (Bitmap)(event.target.content);
			//remove the eventlistener
			loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, pictureLoaded);
			loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, pictureFailed);
			loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, pictureProgress);
			//make sure to free the memory and null the loader
			loader.unloadAndStop(true);
			loader = null;
			//call the parents pictureLoaded function to alert it the picture was loaded and ready to be picked up
			successFunction();
			//successFunction(pic); could have been used, just send the parent function a reference to the picture.
			//But I like getter/setters. As long as the method in the parent accepts a bitmap as input you don't have to worry about it
			//in here.
		}
		private function pictureFailed(event:Event = null):void
		{
			//Loading failed, so clean the loader and alert the parent
			loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, pictureLoaded);
			loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, pictureFailed);
			loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, pictureProgress);
			loader.unloadAndStop(true);
			loader = null;
			failFunction();
		}
	}
}

This is how it is used, notice that this is complete with all the logic for listening for the complete, progress and error events.

			import com.rickigregersen.loaders.PictureLoader;

			private var picLoader:PictureLoader;
			private var pic:Bitmap;
			private var container:Sprite;

			private function init():void
			{
				picLoader = new PictureLoader();
				picLoader.loadPicture("assets/picture.png", picLoaded, picProgress, picFailed);
			}

			private function picProgress():void
			{
				trace(picLoader.progress);
			}
			private function picLoaded():void
			{
				pic = picLoader.picture;
				rawChildren.addChild(pic);
			}
			private function picFailed():void
			{
				trace("error loading picture");
			}

The functions passed to the PictureLoader are not mandatory, they are all set to null as default.

This means that the really short version of using this Class is like this:

			import com.rickigregersen.loaders.PictureLoader;

			private var picLoader:PictureLoader;
			private var pic:Bitmap;
			private var container:Sprite;

			private function init():void
			{
				picLoader = new PictureLoader();
				picLoader.loadPicture("assets/picture.png", picLoaded);
			}

			private function picLoaded():void
			{
				rawChildren.addChild(picLoader.picture);
			}

The use of rawChildren.addChild(picLoader.picture) is because this originates from a UIComponent in Flex so all other places you would use addChild.

So when building Components or just Classes that handle lots of Events and loading of external assets, this approach is something to consider.