Archive for December, 2007

AS3 Window Class (real-time skinnable)

Wednesday, December 12th, 2007

[edit august 21st 2008] Hey guys this code is available but it is messy and the project has been scrapped. I will pick it up again, probably with OpenGL and C++[/edit]

In an effort to (maybe) find a new job, depending on what happens with my current one, I’m releasing a preview of my GUI classes. This class is a window class. It contains your display objects in a nice, draggable, scrollable and real-time skinnable window. You can make your own graphics for the window and configure button placement, scrollbar offsets, label, offsets and all other text goodies from an external config.xml script. There’s nothing to keep in your library and it’s not that big. It would be nice if anyone who uses it can tell me their memory stats, as I’m currently looking to make sure my code is clean and there are no leaks. Click the link below for a little demo.

Here’s the demo!

If you’re interested in using the class you can dive in headfirst at your own risk. It’s kinda long (about 1200 lines). I’ll be working on completely revising it from the ground up as it really is a big mess right now.

Source: GUI – mess

AS3 doLater/todo Function Queue

Saturday, December 8th, 2007

While working on my windowing system I ran into a problem. Every time I tried to set the width of my window class instance I’d get an error from my bitmap resource handler telling me the resources hadn’t been loaded. This makes it impossible to set widths for a window before it’s loaded, and since the entire system is supposed to be deployable online, loading time is not anything I can count on. I wrote this small class to take care of executing functions at a given time (like after loading is finished). The class is called Queue and here is some usage:

import com.efnx.utils.Queue;

function blah(val1:int, val2:int):void

function blah2(val1:int, val2:int):void

var queue:Queue = new Queue();
    queue.push(blah, 1, 5);
    queue.push(blah, 2, 5);
    queue.push(blah, 4, 5);
    queue.push(blah2, 3, 5);


That code does this -> First we define two different functions, blah and blah2. Then we push the functions to be executed into the queue. Here’s the interesting part. Since the Dictionary Object inside the class used to list functions is not weakly referenced Duplicate entries cannot be made by the same function regardless of it’s parameters. In the the example above I push blah into the queue three times, but the only one that fires and traces is the third because the queue’s key is the function itself [or the "closure object (ie. the "behind the scenes" object that facilitates method closure by maintaining a reference back to the method and its scope)" as described by Grant Skinner], so the function replaces itself in the queue. This is nice for doing things like setting widths and resizing, although not so great for things like sending different strings to some handler. As of now calling start() applies the functions asynchronously and nullifies anything left in the queue. You’ll see the output traces this:

object [Queue]
->  function Function() {}  3,5
->  function Function() {}  4,5

First it traces the Queue Object which contains references to the two functions and their parameters (not in the order we gave them) then the output. Bam! Done. Oops! Not quite… …At any point you can flush the queue without executing the functions by calling abort(). There, done.

This class can be easily extended or modified to include directives to execute functions in a given order or multiple entries of one function, so get crackin!

Queue Class Source Code

AS3 Bitmap Resource Manager

Saturday, December 1st, 2007

I’m now using a new class for this task which can be found here. That said, feel free to read on about this outdated class.

I’ve completely rewritten my multiple bitmap loader into a new machine. It now uses weak referenced dictionary objects to store bitmapData after it has been extracted or loaded from the web. It is meant to hold all instances of bitmapData for a class, a set of classes or a whole game even. The class, bitmapDataRsrc, takes either a bitmap, bitmapData or string path to an image or an array consisting of either bitmaps, bitmapData, string paths, or some combination thereof, along with a string identifier and loads the bitmapData into a dictionary object with it’s identifier as a key. It then pushes it’s load status [true or false] into another dictionary with the object itself as the key, so every bitmapData resource and it’s load status is accessible through the identifier. Once every resource is loaded bitmapDataRsrc dispatches an Event.COMPLETE event. For instance, let’s say I wanted to load and store all the bitmapData needed to build a GUI window:

import com.efnx.utils.bitmapDataRsrc;

var rsrc:bitmapDataRsrc = new bitmapDataRsrc();

rsrc.addEventListener(Event.COMPLETE, attachGraphicElements, false, 0, true);

//load resources///////////////////////
    rsrc.load("rsrc2/bottomBar.png", "bottomBar");
    rsrc.load("rsrc2/contentBG.png", "contentBG");
    rsrc.load("rsrc2/contentOverlay.png", "contentOverlay");
    rsrc.load("rsrc2/leftArrowDown.png", "leftArrowDown");
    rsrc.load("rsrc2/leftArrowOver.png", "leftArrowOver");
    rsrc.load("rsrc2/leftArrowUp.png", "leftArrowUp");
    rsrc.load("rsrc2/upArrowDown.png", "upArrowDown");
    rsrc.load("rsrc2/upArrowOver.png", "upArrowOver");
    rsrc.load("rsrc2/upArrowUp.png", "upArrowUp");
    rsrc.load("rsrc2/rightArrowDown.png", "rightArrowDown");
    rsrc.load("rsrc2/rightArrowOver.png", "rightArrowOver");
    rsrc.load("rsrc2/rightArrowUp.png", "rightArrowUp");
    rsrc.load("rsrc2/downArrowDown.png", "downArrowDown");
    rsrc.load("rsrc2/downArrowOver.png", "downArrowOver");
    rsrc.load("rsrc2/downArrowUp.png", "downArrowUp");
    rsrc.load("rsrc2/leftBar.png", "leftBar");
    rsrc.load("rsrc2/leftBottomCorner.png", "bottomLeftCorner");
    rsrc.load("rsrc2/MbuttonDown.png", "MbuttonDown");
    rsrc.load("rsrc2/MbuttonOver.png", "MbuttonOver");
    rsrc.load("rsrc2/MbuttonUp.png", "MbuttonUp");
    rsrc.load("rsrc2/ObuttonDown.png", "ObuttonDown");
    rsrc.load("rsrc2/ObuttonOver.png", "ObuttonOver");
    rsrc.load("rsrc2/ObuttonUp.png", "ObuttonUp");
    rsrc.load("rsrc2/resizeDown.png", "resizeDown");
    rsrc.load("rsrc2/resizeOver.png", "resizeOver");
    rsrc.load("rsrc2/resizeUp.png", "resizeUp");
    rsrc.load("rsrc2/rightBar.png", "rightBar");
    rsrc.load("rsrc2/rightBottomCorner.png", "bottomRightCorner");
    rsrc.load("rsrc2/hBarLeft.png", "hBarLeft");
    rsrc.load("rsrc2/hBarMiddle.png", "hBarMiddle");
    rsrc.load("rsrc2/hBarRight.png", "hBarRight");
    rsrc.load("rsrc2/vBarBottom.png", "vBarBottom");
    rsrc.load("rsrc2/vBarMiddle.png", "vBarMiddle");
    rsrc.load("rsrc2/vBarTop.png", "vBarTop");
    rsrc.load("rsrc2/windowBarLeft.png", "upperLeftCorner");
    rsrc.load("rsrc2/windowBarMiddle.png", "topBar");
    rsrc.load("rsrc2/windowBarRight.png", "upperRightCorner");
    rsrc.load("rsrc2/XbuttonDown.png", "XbuttonDown");
    rsrc.load("rsrc2/XbuttonUp.png", "XbuttonUp");
    rsrc.load("rsrc2/XbuttonOver.png", "XbuttonOver");

After the resources are done loading you can access the bitmapData using the get() function with the string identifier [2nd parameter] passed with the load() function. Below I’ll demonstrate accessing the last bitmapData, XbuttonOver.png.

function attachGraphicElements(event:Event):void
     var bitmap:Bitmap = new Bitmap();
     bitmap.bitmapData = rsrc.get("XbuttonOver");

If you get lazy and decide not to give bitmapDataRsrc string identifiers to identify your resource, it will make one up for you. If you decide to pass an array of bitmaps, bitmapData and string paths to images as the first parameter to the load() function, and pass a string identifier as the second parameter your resources will be indexed as “string identifier + number” so that all your resources are accessible. When passing an array of resources you can identify each one yourself by first indexing the resource and string identifier in another array and then pushing that array into the parameter array. In this case a second parameter to the load function is not needed. Check it out:

import com.efnx.utils.bitmapDataRsrc;

var rsrc:bitmapDataRsrc = new bitmapDataRsrc();
var array:Array;
var string:String;

for(var i:int = 0; i<100; i++)
    string = "image"+i;
    array = new Array();
    array.push("rsrcPath"+string+".png", string);


I find it a lot easier to load resources one by one and name them, it’s a lot better for me, I like to get to know my bitmapData, but it’s good to have options.

The isLoaded property can be checked to find out if all resources have loaded. At any point the load status of a single resource can be found by calling the hasLoaded(“string identifier”):Boolean function. If no identifier is given bitmapDataRsrc returns it’s isLoaded property. To destroy a given resource call unload(“string identifier”) and to destroy all resources in the manager call unloadAll():


bitmapDataRsrc Source

Follow me on GitHub
Follow me on Google+
Follow me on Twitter