Have you ever wondered how runtime shared libraries get into Flex? No? Well, neither did I. Lets face it, it’s not the hottest or most common thing to arise in the world of Actionscript development.

Today, however, I did have a need to understand the process. I’ve been tasked with building a system for a large game we are developing, which needs to load modules and RSLs. In a Flex application, this process is hidden as part of it’s initialisation – the SystemManager class handles this magic. Pass in the RSL URLs (try saying that quickly ten times) to the compiler, and it’s loads ‘em. Great for Flex, but not so great for us building Actionscript only projects.

My initial research focussed on the mx.managers.SystemManager which is ‘possibly the most important class in Flex’. This has the responsibility of booting up any Flex application. It is the factory class called from any Application subclass (subclass being very important, but more later).

If you look at the SystemManager class, you’ll notice that it has an info() method that returns an empty Object. If you look at other parts of the class, you’ll see it referring to data in the info Object (e.g. info()['rsls']). The odd thing is, is that the object info returns is always empty – return {}; – so whats going on?

It turns out that SystemManager is actually a base class that has subclasses automagically generated by the compiler. If you use the -keep compiler argument in a Flex project, you’ll see these generated classes. SystemManager implements IFlexModuleFactory, whose methods (including info()) are actually the ones generated. In the generated class you’ll see that the info() object now has references to some of the compiler arguments.

So, how do we retrieve this info() info in a non-Flex project?

After a little more research and experimentation I discovered it’s fairly simple. Firstly we need to create a factory which implements IFlexModuleFactory. In it’s most basic form, we only need to add a listen to an Event.COMPLETE from the loaderInfo, which then creates and adds the main application class. Also, this factory must extend Movieclip.

1
2
3
4
5
6
7
8
9
10
11
12

	public function Factory()
	{
		super();
		stop();
		loaderInfo.addEventListener(Event.COMPLETE, onComplete);
	}
 
	private function onComplete(event:Event):void
	{
		nextFrame();
		addChild(create() as DisplayObject);
	}

Simple enough. Since a subclass of this will be generated, we need do nothing with any of the other methods.

Now we need to use this factory. Following a similar method to creating a preloader we will use the Frame metadata. However, we can’t exactly follow this. In a seemingly odd move, we have to add the metadata to a superclass of the main application class, not the application class itself. I guess this is because in the flex world, a main application class extends mx.core.Application which has the metadata in it.
Therefore, we create a class that extends Sprite which acts as the application superclass, then extend this to create the actual application class

package
{
	import flash.display.Sprite;
 
	[Frame(factoryClass="factory.Factory")]
	public class ApplicationBase extends Sprite
	{
		public function ApplicationBase()
		{
			super();
		}
	}
}

I”ve created a simple project which demonstrates this. I’ve added a -runtime-shared-libraries compilier argument which you can see in the factory as info()['rsls'].

Of course, it isn’t just RSLs you can access, a quick look through the source of SystemManager will reveal others. I’m sure there are many other uses, and at the very least it gives an interesting insight into what the mxmlc compiler does.

Ok, in a decidedly odd tangent I’m going to post up recipes as well as any computery based posts. I love cooking, as much as I enjoy making things using computers, so why not feature both? Also, my memory for my own recipes is rubbish, so it serves a memory bank.

First up is something I thought up on the way home the other day. I was pondering classic, prosaic food done in an unexpected fashion. Lofty thoughts, but really I was in a Homer Simpson-esque food day dream. Mmm…sausages. Ok, enough of the dreaming, onto the real food.

Here’s a Moroccan-ish version of sausage and mash. It combines spicy kofte with a sweet spice-infused butternut squash mash. To got with it is a fresh mint and parsley pesto. It’s good with a simple chopped salad and a bit of yoghurt.

Sausages (well, kofte)

• 500g lamb mince
• 100g breadcrumbs
• 1 egg
• 1 tbsp Ras-al-hanout
• 1 tsp hot paprika
• 1 tsp sweet paprika
• 1/2 onion
• 1 clove garlic
• Parsley
• Kebab sticks – I use bamboo ones

Put the onion, garlic, parsley, spices in a food processor and run it for a little bit. Put this in a mixing bowl and add the meat, egg and seasoning. Mix it together for a bit, then add some of  the breadcrumbs. Mix it and add breadcrumbs until it starts to come together and feel doughy.

Once done, break it up into fist sized pieces. Roll each of these out into a rough sausage shape, and poke a stick through the middle of it (lengthways! it’s not a cocktail sausage). Carefully continue to roll it out until the whole thing resembles a shish kebab.

When they are all done, put them on a plate and into the fridge to harden up for  at least 20 minutes – this helps to stop them falling apart when cooking. If you can, prepare them a few hours in advance so they marinade and get even better. You can also freeze them.

To cook them, put them under a medium grill until they brown, roughly 15 minutes.

Squash mash!

• 1 butternut squash (or any squash really)
• Aromatic whole spices such as cloves, cinnamon, aniseed, cardamom, etc.
• Cumin seeds for garnish (optional)
• Lemon or orange zest
• Butter

You’ll need a saucepan with a steamer attachment. If you don’t have that, get McGyver-like and make up something using a colander. I’m unsure if you could use a bespoke steamer, the spices get added to the water so might interfere with it. It might be possible to boil it, but I’ve never done that – the spices will get mixed up with it unless you put them in a little muslin bag.

In the pan, add an inch of boiling water and put the whole spices in. Peel the squash and slice it into big chunks and put the chunks into the steamer basket. Let the squash steam for about 40 minutes, until it’s soft and squidgy. As it softens it absorbs the aromas of the spices. While it’s steaming, make the pesto and anything else you fancy.

When it’s cooked, put the squash in a colander and drain the water out of the pan and throw away the spices. Add the squash back into the pan, add a knob of butter, and zest. Mash it up, sprinkle over the cumin seeds. Done.

Mint and parsley pesto

• Bunch of fresh mint
• Bunch of parsley
• Whole almonds
• 2 clove garlic
• Good extra virgin olive oil

Toast the almonds in a dry pan until they get a bit of colour on them. Make sure they don’t get burnt, that tastes awful. When toasted use a big mortar and pestle to break them up into small chunks.

Chop up the herbs and put into the mortar and pestle. Finely chop the garlic and add it. Bash the ingredients together and add the oil a bit at a time until it’s texture is somewhere between a sauce and a paste, and hey presto! you’ve got pesto (groan).

The other day I found a pair of 3d glasses on my desk. You know, the red and green/blue ones which make you look like Dr Jacoby from Twin peaks…

…or not. I certainly don’t have such a splendid beard, or (seemingly) a fondness for listening to the cries of unborn chicks.

The glasses split from a copy of .NET magazine, advertising The Alien Abduction Lamp, whatever that is. They also seem to have been designed for someone with an alien head shape.

Being at a lose end, I pondered that philosophical question “Can I make an anaglyph animation in Flash in half an hour?”. 29 minutes later I had my answer – a resounding ‘Yes’. Heres the result.

It’s not perfect by any means, especially the code which is as bizarre and messy as the plot in season two of Twin Peaks.

Achieving the effect is pretty simple in principal. Each textfield (lets call it a virtual textfield) actually consists two textfields – red and cyan. These two textfields are moved together or pushed apart as the virtual textfield moves back and forth. The distance between the textfields is proportional to the z value of the virtual textfield.

One day I’d like to find a practical use for this and take it a bit further, but for no it can take it’s place in the archive next to the ‘Early 90′s TV series’ section.

..No, not a cheap rip-off of Blackhawk Down, but a badly named port of the highly useful lightweight markup Markdown. In reality it’s a direct translation of the JavaScript version Showdown.

The initial reason for this port is for an internal content editing tool I’m developing. I want to provide it as an alternative along side the Flex RichTextEditor control for fast content writing.

It’s at a very early stage at the moment – it’s more of a proof of concept working version. There are no optimisations and adaptations for Actionscript right now and it’s frankly quite ropey (look at those lovely ..rest parameters). Lot’s of changes and updates will follow. It’s also built as a static utility-type class which will change in the future. I just wanted to get it out there now.

Please have a look at Actiondown on GitHub and feel free to make rude comments about the name.

Today I encountered an odd issue using Ant and mxmlc, something I thought would be worth sharing to avoid pain for others. I was compiling projects using Ant within Flash Builder. I built most of them with no problems, except for one which just wouldn’t work. Rather than throw an error to give me some steer it just sat there and did nothing, hanging on the ‘Loading configuration file…’ message.
I eventually figured out it had something to do with embedding images using the [Embed] metatag. It didn’t matter what image or where, it would just stop working. Take out the Embed and it would compile fine. I tried compiling it using the normal Flash Builder setup and that also worked.
After searching the internet I found no similar issues reported, the nearest was references to java heap size and adding in JRE VM arguments. Even though I didn’t think it was this as I got no memory errors I thought I’d give it a go anyway.
I opened the ant Build Configuration and then the JRE tab to add in the VM arguments and noticed instead that for reasons unknown it was using JVM version 1.4. That didn’t sound right to me so I changed it to 1.6 and it, you’ve guessed it, compiled fine.

How annoying that was.

Heres a fun little adaptation on the motion detection work I did before. You’ll need a webcam for it to work, and wait a few seconds for the camera to activate and setup.

It’s created using the same base as the initial work I did. Every frame it randomly tests 100 or so pixels – if they are white (motion) it draws a circle, if black (no motion) it does nothing. These are then drawn onto another bitmap, which is blurred every frame, to give the fading blurred trail effect. I also apply a random color transform every few seconds which gives it the trippy look.

Ok, so it’s not really finger painting, more like ‘flail-around-like-a-fool’ painting, but at least your hands are paint free.

Continuing my recent posts of various experments, here is a little experiement about motion tracking and using a webcam (or any digital video camera). Admittedly there is nothing fantastically new here, it’s just my interpretation of a common approach. I got the gist of it from a description on the Flash Game programming course mentioned in previous posts, and decided to have a go at making it from scratch without reference to other sources.

It relys on comparing the difference between two bitmap snapshots of a video – one from the current frame, the other from the previous frame. These two images are combined using a difference blend mode which, as the name suggests, highlights the difference between two bitmaps. In this case the only difference is what moved between the two frames.

Difference blend mode

Once we’ve got the difference a bit of blurring is added to take out the background noise. Also, the contrast is increased to make the movement stand out a bit more.

The final stage is to threshold this image. Each pixel colour value is tested; if it’s above a certain level it’s converted to white, below the level it’s turned to black.

Threshold

Although this isn’t the most exciting looking thing in the world, it’s the foundation for lots of interesting things. It’s not too much extra work to find out the direction and speed of movement. I’ve already started using it in some pretty fun and interesting ways, which I’m sure will be the subject of a future post.

Below is the final working version, just click the ‘Allow’ button to let it use the camera, then wait a few seconds and wave furiously at the camera. If it doesn’t work, please believe it’s not a way to make you look like a fool madly waving at your computer. Or is it?…

A couple of weeks ago I attended the rather good Flash Game Training course in Brighton, run by Seb Lee-Delisle. Over the two days it covered most aspects of Flash game programming you’d expect using lots of examples. Along with being a highly useful course, there were a couple of aspect that really stood out to me, which are more to do with a way of thinking than specific technical details.

I’m with ‘Keep it simple, stupid’

One was a simple rule for making anything – don’t over complicate things. Even though there may a ‘perfect’ way of creating or solving something, it doesn’t necessarily make it the best solution. A lot of the time using a lateral approach is far more practical, though it’s easy to forget this.

In the modern warfare that is Flash we are armed with batteries of  application frameworks and platoons of unit tests. These are fantastially useful additions to our arsenal, but are often overkill and even restrictive in small applications, especially games. Having the freedom to play and experiment are essential to creating novel game experiences, a bit like going…

Back 2 School

After the course, I had a rush of playful energy. Playing around making games was like going back to my first encounters with Flash, when I was bombarded by crazy experiments, cool arty projects, and lots of other visual orgies. It’s been really refreshing to not to think of practicallities, or whether what I make has any real-world uses. It’s like doing letterpress work after years of InDesign or pencil drawing after knocking out Photoshop icons. It’s the reason I got into all this in the first place.

Although not a strict rule, I’m trying to complete each of these experiments within a few hours, just to keep the pace up. It’s too easy to start fiddling with code, or try to make it into an overly open tool or utility. So far I’ve kept up the energetic pace, and produced a fair few experiments, which I’m going to post over the next few weeks.

ASCII Webcam

First up is a classic ASCII art. Hardly original, but still fun to do. Rather than just a static image, I applied to a web-cam feed. Heres what it looks like, just click to ‘Allow’ button.

To achieve this I created an AsciiConverter class. It can take any input BitmapData object and convert it into an output BitmapData object. This means it can be used for any application using bitmaps, including video. Here’s the usage with the web-cam.

/*
AsciiConverter(input:BitmapData,
			output:BitmapData,
			charSize:int = 10,
			characters:Array = null,
			brightnessValues:Array = null,
			font:String = '_sans', isBold:Boolean = false)
*/
private function init():void
{
	//Get the camera
	camera = Camera.getCamera();
	camera.setMode(CAM_WIDTH, CAM_HEIGHT, 20);	
 
	//Create a Video object
	video = new Video(CAM_WIDTH, CAM_HEIGHT);
	video.attachCamera(camera);
 
	//inputData holds the video data
	inputData = new BitmapData(CAM_WIDTH, CAM_HEIGHT, false, 0);
	//outputData holds the processed data
	outputData = new BitmapData(CAM_WIDTH, CAM_HEIGHT, false, 0xFFFFFF);
	outputBitmap = new Bitmap(outputData);
 
	addChild(outputBitmap);
 
	//create the AsciiConverter
	asciiConverter = new AsciiConverter(inputData, outputData, 8, ['O', '~', '\'', ' '], [230, 128, 64, 0], 'Verdana', true);
 
	//update every frame
	addEventListener(Event.ENTER_FRAME, loop);
}
 
private function loop(event:Event):void
{
	//this runs every few seconds to set the stage fromaeRate to the camera, which
	//helps to make it run smooth.
	if (count++ % 60 == 0)
		stage.frameRate = (camera.currentFPS <= 10) ? 10 : camera.currentFPS | 0;
 
	outputData.lock();
 
	//draw the video to the input
	inputData.draw(video);
 
	//update the converter
	asciiConverter.update();
 
	outputData.unlock();
}

I’ve put up the code for the AsciiConverter up on my Google Code site, which I’ll get round to commenting properly. It’s a pretty fast method for doing this. It comfortably runs at 20fps on my PC, which is the maximum frame rate of the camera.

Here is my latest piece of Actionscript code added to my Google code project, PatternsUtils.

What does it do? Simple, it outputs bitmap patterns such as stripes, and, well, whatever other patterns I decide to add. It started off when I needed to produce a checkerboard pattern for use as a image to blank out the background. You know, the translucent black or white screens behind popups or other modal items. Obviously I could have produced a checkerboard pattern using some graphics program, but I decided to resolve in code as it’s quite fun working out the algorithm. After completing the checkerboard, I carried on and produced stripes and grids.

It’s usage is a simple as can be:

var desitinationBitmapData:BitmapData = PatternUtils.Grid(1000, 1000);

One of my aims when I decided to put this out to the world, was to make it as fast as I could. The results are pretty good, and fantastic for most applications – a 1000 by 1000 pixel pattern is produced in around 20 milliseconds, 500 by 500 in 4 milliseconds. I made the patterns using a two stage method. The first stage was to create on single repetition of the pattern pixel by pixel into a ByteArray. The second stage was to then copy this pattern into the destination BitmapData. By doing this you are obviously saving a load of repetitions of code, and using a ByteArray seems to be the fastest way to input the pixels. I also used lots of bitwise operations which are very fast, though not the easiest things to read and understand.

I also made a simple PatternFill method that takes a bitmap (in the demo its a 10 by 10 pixel houndstooth pattern, very fashionable) and fills a larger bitmap with it.

[Embed(source='SomeImage.png')]
public var clazz:Class;
 
var sourceBitmap:Bitmap = new clazz() as Bitmap;
var destinationBitmapData:BitmapData = PatternUtils.PatternFill(800, 600, sourceBitmap.bitmapData);

Obviously the uses of these utilities is fairly limited, but one interesting possibility is to use the algorithms in other applications, for instance positioning objects on the stage.

I suppose a demo is needed, so here it is. It’s not the most pretty thing in the world, but you get the idea.

I’m planning to keep on adding more patterns as and when I can. I’m also considering taking away from being a bunch of static helpers and making it object based.

Ever wondered how to distribute points evenly around the surface of a sphere in Actionscript?

No? Well, your going to learn anyway if you carry on reading this.

After a bit of initial research I discovered that it’s not the simplest thing in the world. Except in a few cases there is no perfect way to distribute a given number of points evenly. It’s therefore down to weird and wonderful geometry to sort out. This article about points on spheres saves me repeating everything here, but the summary is that there are two approximation methods.

The first involves making each point a particle that has a replusive force, so that the particles ‘push’ themselves into distributing evenly. Since this is a physics based solution, it requires using itterations to calculate more accurate positions, the downside being increased computation time, the up being the distribution is a more accurate. Here is a fine example of this method by a the very noisy Ken Perlin (only geeks get that one sadly).

However, I’m writing about the second method – using pattern algorithms. These use differing formula to arrange the points in a pattern across the surface, generally from pole to pole. There are several algorithims, but I’ve used two – Golden Spiral and the oddly named Saff and Kuijlaars – ported from the Python code in the previously mentioned article. I am, therefore, no expert on these things.

I’ve made a utility class which has both algorithms. It’s on my Google Code project along with bits of usefulness