Embedding assets wisely

You can embed various types of assets in your Adobe Flex applications (.jpeg, .png, .swf, .mp3, .svg, .ttf …). Embedded assets are compiled into the SWF file of your Flex application. They are not loaded at run time and you do not have to deploy the original asset files with your application. Read more about embedding assets on Adobe.

Basics first. How to make your symbol from Flash library visible for Flex (see images on the bottom of the artice):

• 1. Create your symbol and linkage (library (Ctrl+L) / {your symbol} / Linkage…).
• 2. Linkage Properties, set your class name that will be used in [Embed] meta.
• 3. Export .swf file and make Assets.as.

It is very handy to use central assets class. This is how I make my assets accessible in Flex application:

package
{
    import mx.core.SpriteAsset;

    public class Assets extends Object
    {
        // change/to/your/uber/cool/path/and/filename.whatsoever
        // you can also embed graphic files (.jpeg, .png, )
        [Embed(source="../libs/assets.swf#symbol1")]
        public static const symbol1Class:Class;
        public static const symbol1SpriteAsset:SpriteAsset = new symbol1Class();
        
        [Embed(source="../libs/assets.swf", symbol="symbol2")]
        public static const symbol2Class:Class;
  
        // embedding Bitmap
        [Embed(source="../libs/image.png")]
        public static const imageClass:Class;
        public static const imageBitmap:Bitmap = new imageClass();

        public function Assets()
        {
            super();
        }
    }
}

There are two ways how to ask for your symbol from .swf library – 1. source=”…#symbol1″ or 2. source=”…” symbol=”symbol2″. Symbol name is whatever you set in Linkage Properties Class in Flash (not symbol name in library!).

Usage example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" applicationComplete="init()">
<mx:Script>
<![CDATA[
    import Assets;
    
    private function init():void
    {
        container1.setStyle("backgroundImage", Assets.symbol1Class);
        container2.setStyle("backgroundImage", Assets.symbol2Class);
        container3.addChild(Assets.symbol1SpriteAsset);
    }
]]>
</mx:Script>
<mx:Box id="container1" width="100" height="100"/>
<mx:Box id="container2" width="100" height="100"/>
<mx:UIComponent id="container3" width="100" height="100"/>
</mx:Application>

Embedding proccess and example result in images:

Image may be NSFW.
Clik here to view.

Flash linkage symbol

Image may be NSFW.
Clik here to view.

Flash linkage properties

Image may be NSFW.
Clik here to view.

Flex embedded symbols