Embedding assets from SWF files

Another cool way to embed assets into a Flex application is to load a SWF file and embed specific library assets using the [Embed] metadata and specifying the library symbol to embed.

Full code after the jump.

The following example embeds three different symbols from the “assets/icons.swf” file. Each asset is given its own unique variable so even though there is only one SWF file, you can easily reference each individual library asset:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed('assets/icons.swf', symbol='bulletCheck')]
            private static var BULLET_CHECK:Class;

            [Bindable]
            [Embed('assets/icons.swf', symbol='bulletCritical')]
            private static var BULLET_CRITICAL:Class;

            [Bindable]
            [Embed('assets/icons.swf', symbol='bulletWarning')]
            private static var BULLET_WARNING:Class;
        ]]>
    </mx:Script>

    <mx:Button id="checkBtn" label="Check" icon="{BULLET_CHECK}" />
    <mx:Button id="warningBtn" label="Warning" icon="{BULLET_WARNING}" />
    <mx:Button id="critcalBtn" label="Critical" icon="{BULLET_CRITICAL}" />

</mx:Application>

You could also make the code a bit nicer (in my opinion) by moving those Embed tags and variable names into an external ActionScript file, as seen in the following example:

Images.as

/**
 * http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/
 */
package
{
    public class Images
    {
        [Embed('assets/icons.swf', symbol='bulletCheck')]
        public static const BULLET_CHECK:Class;

        [Embed('assets/icons.swf', symbol='bulletCritical')]
        public static const BULLET_CRITICAL:Class;

        [Embed('assets/icons.swf', symbol='bulletWarning')]
        public static const BULLET_WARNING:Class;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Button id="checkBtn" label="Check" icon="{Images.BULLET_CHECK}" />
    <mx:Button id="warningBtn" label="Warning" icon="{Images.BULLET_WARNING}" />
    <mx:Button id="critcalBtn" label="Critical" icon="{Images.BULLET_CRITICAL}" />

</mx:Application>

Pretty neat.

Updated 7/29/2007

Another trick when embedding assets from SWF files is you can use the following shorthand notation:

[Bindable]
[Embed('assets/icons.swf#bulletCheck')]
private var BULLET_CHECK:Class;

[Bindable]
[Embed('assets/icons.swf#bulletCritical')]
private var BULLET_CRITICAL:Class;

[Bindable]
[Embed('assets/icons.swf#bulletWarning')]
private var BULLET_WARNING:Class;

Note that the Flash library symbol name is appended after the SWF with a “#” sign.