Adding Images to Flash Programs using FlashDevelop

Images make programs more fun. And in the Flash world, it is all about images. There are essentially two places that your images can come from. You can get them from the internets or you can load them from your Flash project. I've been trying to do both, and finally I've figured out how to do this reliably using the FlashDevelop tool.

Mostly.

Today I'm going to look at loading images from your library, the one that should be the easiest to do. These notes apply to FlashDevelop 3.0.6 which you can find here. I’ve found this stuff out while playing with my Chumby, but you can use the techniques for any flash program.

Say I have an image called “one.png” that I want to add to my project. It just contains the number one:

First thing I do, is add it to the library directory in my project:

It is now in there, along with the font that I’m using to display messages. Note that it is displayed in black though. This is bad, in that it means that it is not part of my project. Attempts to load it won’t work. To make it part of the project I need to right click on it and select “Add to Library” from the context menu that pops up:

Now the item in the project turns blue, which is good  because it means it has an outside chance of working. Next thing i want to do is load the image into a media clip.  I can do this in the Main method of the application class if I like:

static function main(mc:MovieClip)
{   
    var oneImage:MovieClip;
    oneImage = mc.attachMovie("library.one.png", 
                 "oneImage",
                 mc.getNextHighestDepth());
}

The first parameter is the name of the file in the resource. Warning: the property information for a library item (the thing you can see above) has a useful appearing “Insert into document” tab, which will insert the path to your resource into your program. For my one image above it suggests the helpful path “libary/one.png”. This doesn’t work. You need to separate the directories in the path using dots, as I have in my sample code above. I’ve no idea why this doesn’t work, perhaps someone out there can tell me.

The second parameter is the name of the resource you are creating.

The third parameter is the draw depth. You can ask the parent movie clip to give you the next highest draw depth. If you set your new image to this depth it will appear on the screen. If you put this code into the main method of your program it will fetch and draw the item.

Good eh?

If you get any part of it wrong,  get the path wrong, forget to add the item to the library or anything, then it won’t work and you will not get an error. I hate this. The only thing you can do is add trace statements to see what your program is doing. these are printed out

trace(oneImage._url);

This will display the url of the file that has been loaded.