blog

Embedding assets wisely at Jozef Chúťka's blog

October 14, 2009

asset Bitmap Class embed Flash Flex library SpriteAsset symbol

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:

Flash linkage symbol

Flash linkage properties

Flex embedded symbols

You may Leave a comment or Subscribe to Comments RSS or Trackback this entry.

1 comment so far

Quick tip: embedding in Flex at Jozef Chúťka's blog October 27, 2009 14:08 […] more about embedding assets into ActionScript best practices here. Read basics about embedding […]

Please be polite and on topic. Your e-mail will never be published.