Loading assets dynamically (part 1: a primer)
Posted on 2009-09-23
Over the years, we have seen multiple ways to import our visuals and sounds into our projects. Some of these ways would have our assets included into the SWF, which meant the published file could end up quite big. Some other ways would have us load everything dynamically, which could be practical for some assets, but not necessarily flexible enough for all situations. Through all these options, how can we have our assets related to our ActionScript classes? Let’s see and compare what is feasible and what is ideal.
When I first got into Flash in 1999-2000, I only knew one way to import my assets into Flash: File > Import > Import to Stage/Import to Library. It’s actually quite practical, since you can place your elements as you would in Photoshop or Illustrator and create all sorts of MovieClips easily. And it’s actually still the best way to create banners and quick projects.
In order to call the attachMovieClip function (remember this was with AS2), an identifier name was given when the “Export for ActionScript” box was checked. After a while, I learned that I could relate ActionScript classes to that specific MovieClip in the library, so I would end up also a class name like com.clientname.ui.SomeClass, a habit I kept until recently, even in AS3.
This presented some inconvenients, mainly beefing up the size of the file. Also, creating variable names in the class that had the same names as in the MovieClip associated to the said class would cause some namespace issues in AS3.
With Flex Builder, now Flash Builder, you can embed image files in your code and make them act as classes (example 1, example 2). Quite useful, but again, it just makes your file size bigger. Having a preloader that would stop the timeline until all is loaded, or having two separate SWFs with one that loads the other, both those two options seemed a bit unclean and inefficient, especially if you eventually want to hand the project to someone else.
There is also the option of loading everything at runtime. And I mean everything, all images, sounds, etc. It’s a step towards making the file lighter, but sometimes you do need to edit your assets à la Photoshop, have multiple MovieClips, and basically using the Flash IDE at this point would help. Sure you could recreate everything in code, place all your elements, TextFields, MovieClips and the likes in code, but sometimes you may want to use components too, and I’ve faced moments where I could create components dynamically. And doing all that just in code is time consuming, and let’s face it, this industry is based on efficiency and speed of delivery.
Enter SWC files. These files are either a compiled library of code–just like Papervision or Fisix Engine do–or a compiled FLA file that includes a library of assets built in the Flash IDE. There are different ways to use these files and when possible, it is even possible to load them dynamically.
In the next tutorials, I will show how to use and create these files and how to import and use fonts and CSS. All these things may be basic, but I think it is worth it to summarize all the different ways I have learned about on the web and while working in producton teams.