Flash Game Development Tutorial 2: Loading assets

The first problem I ran across when trying to publish the Fisher Girl game onto portals was that I had used more than one file when building the game. I was dynamically loading in external assets like xml, png, and mp3. Most game portal sites only want one file, so all of those assets need to be embedded in one .swf file. Once you have a single swf your game can go viral because now when a portal sees your game and they can download it and host it easily.

In this tutorial I am going to be embedding assets from the Lost Garden Fishing Girl game, so you will need to download the .swf file from Fishing Girl:Game Prototyping Challenge. Of course you could use any swf that has linkage ids set.

Opening a Shared Library in FlashDevelop

Start a new AS3 project in FlashDevelop. Create a new folder inside the src folder called assets and copy the FishingGirl.swf into that folder. In FlashDevelop you should now see your assets folder and the swf file. Expand the swf file by clicking on it. You should see a small grayed out folder called Symbols, expand the Symbols folder. The items inside the Symbols folder that have a small image next to them are the symbols in the Flash file that have a linkage id set.

Embedding Assets

Open your Main.as file and put your editing cursor at the top of the class and then double click on the fishSmall1 symbol. This will auto fill in the Embed code for you. Directly under the Embed code type in a class name, so that your code should end up looking something like this:

...
public class Main extends Sprite
{
[Embed(source = 'assets/FishingGirl.swf', symbol = 'fishSmall1')]
private var FishSmall1:Class;
public function Main():void
...

To learn more about the Embed syntax: http://www.bit-101.com/blog/?p=853

Now when you compile your .swf the asset FarGround1 is actually embedded in your swf and can by referenced by the class name "FarGround1." To get a DisplayObject you can now call
var fish:DisplayObject = new FishSmall1();

However, It's too much work to always be referencing these assets as Classes, I'd rather be able to say something like SpriteManger.getSprite("fishSmall1") and get back a DisplayObject that I can put right onto the stage no matter how the fishSmall1 was embedded. My SpriteManager does just that. It is a singleton so it can be accessed anywhere and you can add a Class and give that class an id String. Then whenever you want a copy of that image you can just call getSprite with that String. Example:
//add the class to the SpriteManager
SpriteManager.getInstance().addClass("fishSmall1", FishSmall1);

//create a display object that can be shown on the stage
var fish:DisplayObject = SpriteManager.getSprite("fishSmall1");

//add to the stage
stage.addChild(fish);

So now you can embed an asset from a shared library swf and display it on the stage. Feel free to use the SpriteManager class in your project and if you find a better way to manage sprite assets in a code only Flash project let me know.

2 Response to "Flash Game Development Tutorial 2: Loading assets"

  • abiyasa Says:

    I am developing my Flash game and was wondering if I should produce one single SWF file or have the game assets separated (and load it during the runtime).

    Thanks for the post, especially the part that most game portals prefer one file. Now I am sure to embed everything into one SWF file.


  • Keerthi Says:

    The flash games require special attention when writing the code. The important factor one need to consider is to check the game performance in different browsers to ensure the games designed are supported by different browsers. All these are the basic factors taught in my game development course and am in process of designing a new flash game. I am also facing many challenges in this process.


Post a Comment