Embedding Assets in an AS3 Only Project
In Make Flash Games for Free, I went over the steps necessary to use FlashDevelop to compile .swfs using the Flex Command Line Compiler and the productivity boosting FlashDevelop IDE. That’s all we need to know if we’re building a code only game. Usually, however, art and sound is just as important to the game itself (usually more), so this article covers the basics of how to embed these assets in your Actionscript 3.0 only project.
For a simple example of embedding assets in a .swf, download the source code for this article. All the assets in the example were embedded using the Flex compiler embed tag.
Uber Tower Defense Game Of Massive Victory
Embedding an asset in your AS3 only project requires the following steps.
Step 1
Get the asset into an intelligent spot in relation to your project. I usually drop them in an /assets directory, and do subdirectories from there as necessary.
Step 2
Pick which class will embed the asset as a member variable. If you’re not sure where it goes, it’s usually the class that is going to be instantiating the asset.
Step 3
Drop in the embed code. For this example we want to be able to instantiate a png file:
public class Main extends Sprite
{
// ...
[Embed(source='assets/background.png')]
private static var BackgroundPNG: Class;
// ...
This tells the Flex compiler to embed the asset at assets/background.png and associate it with the class member BackgroundPNG in class Main. I typically name these class members with format FilenameEXT. This clearly distinguishes my embedded assets from any other variables in my class.
Step 4
Instantiate the asset.
// somewhere in your code
var backgroundBitmap : Bitmap = new BackgroundPNG();
Step 5
Celebrate! You just successfully embedded an asset in your AS3 application! Woo!
Tidbits
You can embed MP3s, graphics (png, jpgs, gifs) and entire .swfs using this same strategy.
You can embed only a specific symbol from inside an external .swf. An example of that might look like:
[Embed(source='asset_library.swf', symbol='SomeLinkageID')] private static var SomeSymbol: Class;FlashDevelop can generate the Embed tag for you automatically. In the project panel, browse to your assets directory and right click on an asset and choose “Insert Into Document.” Consult the following picture if you’re having issues:
Warning: While the embed tag works fine in AS3 only and Flex projects, the Flash CS3 compiler does not like them at all. If you need to create a project that is truly portable between the Flex compiler and the Flash CS3 compiler, there are a few best practices to be followed to minimize the amount of work to support both. This is something I can explore for you in a later article if you would find it useful.
Download the source code if you want to pick apart the example code for embedding bitmaps and sounds into an AS3 only project.
michaelangela
Thanks for the informative posts. I have been using Flexbuilder to code for Flash CS3 recently and have been wondering about this very thing. I’d love to be able to just do the compile in Flex without going back to Flash every time. So your comment on best practices to support both Flex and Flash for a common project would be most welcome!
And I haven’t used FlashDevelop in a long time. It seems to have really matured!
Thanks again, Michael
June 14th, 2008 at 8:13 pmPanayoti
The three minute overview is that you create an AssetCreator class with a static “createAsset” function that returns a reference that you can down cast to type of asset you need (or you make a createSound createMovieClip createBitmap). createAsset should take a string. For the Flash version, use getDefinitionByClassName to get a reference to the asset you need. For the Flex version, you create a second dynamic class, AssetLibrary, which is where you attach all your embedded assets. You basically then just do a “return AssetLibrary[ a_assetName ];” (where assetName is the string that came into createAsset).
When you change from your Flash application to Flex (or vice versa), you just need to tweak which of these implementations you have used, rather than trying to fix your whole application.
There might be a “cleaner” way to do it using subclassing, which I guess I’ll address when I get around to doing the formal write up.
June 14th, 2008 at 9:39 pmmichaelangela
Ah this sounds good. I understand it conceptually but I’ll have to go from concept to code.
Currently I use the Flash file Document Class to set the main class of the app. The main components are on the Flash stage. With the setup you describe, perhaps it would be better to make the app a symbol and have that linked to the main class instead of the document itself. Would that make this process easier?
Thank you for sharing your expertise!
Michael
June 17th, 2008 at 12:43 pmPanayoti
If I understand what you’re describing, you’re talking about subclips within a clip you have instantiated on the stage, manually by dragging? That does make things a little less black and white, but it is certainly still doable. The thing I’d suggest there is instead of using your custom class as the Document Class, instead instantiate it on a frame in the .fla and add it to the stage. This should work just fine unless you’re doing code that requires a reference to the stage inside the constructor of the class you’re now manually adding to the stage.
June 23rd, 2008 at 6:38 pmmicky
maybe this is linux-related but the example works much better if the sound is instanciated once in the constructor rather than each time playConstructionSound is called
December 22nd, 2008 at 8:57 amMrBob
Hi there. Nice article, thanks for putting it up. I’m currently using Flex 3 + AS3 to write a small game, and there’s one thing I wish I could do: automatically pre-generate embeds from all images in my asset directory. I will probably have quite a few images in the future, and would like an artist or the like to just be able to drop an image file into the requisite directory, compile in flashdevelop which will run a pre-compile ‘embed’ meta data generation step. This pre-gen step could regenerate my AssetLoader class which currently contains a few Embeds that I did myself.
Do you know of any way to do this easily, or shall I write my own tool to auto-magically pre-instance this Embed meta data?
December 28th, 2008 at 8:35 pmurbansquall
I cheated. I used a hacked together AIR app to spider the directories and trace the appropriate embed statements that I then just copy pasted into the source file. It’s not the best solution in the world, but it works.
December 28th, 2008 at 11:31 pmMrBob
Hi urbansquall, thanks for the reply. By trace do you mean you simply retrieved the files absolute path and setup the embed path relative to a central .as file in your app? I am thinking I’ll just do something similar to yourself and write a command line app that will output a simple class definition with all the assets of a certain type included.
December 29th, 2008 at 5:01 amurbansquall
That’s correct. It would be good to have a reusable app to do the spidering. Might be worth doing an article about that in the future.
December 29th, 2008 at 10:18 amIain
You can also embed vector graphics from SVG files this way.
January 28th, 2009 at 10:39 am