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.
![[comment icon]](http://www.gamepoetry.com/wpress/wp-content/themes/gamepoetry_pany/images/icon_comment.gif){kind=icon}
![[digg icon]](http://www.gamepoetry.com/wpress/wp-content/themes/gamepoetry_pany/images/10x10-digg-thumb.gif)
[…] Well I wasn’t making a game but I just went through what the author describes: finishing up the app, gotta set up the preloader. I did a manual version of this but I like this idea. However I am not using FlashDevelop. I am in the Flash IDE for compiling. I have thought of being able to just embed assets from Flash CS3 into a Flexbuilder / Flashdevelop AS3 project. And it seems to be becoming a popular thing to do. […]
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
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.
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
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.
[…] Embedding assets in an ActionScript 3 project […]