About embedding assets

When you embed an asset, you compile it into your application’s SWF file. The advantage of embedding an asset is that it is included in the SWF file, and can be accessed faster than it can if the application has to load it from a remote location at run time. The disadvantage of embedding an asset is that your SWF file is larger than if you load the asset at run time.

You should use the Image tag when embedding a general purpose image file in an application. The Spark component set also includes a BitmapImage class, but that class should be used only for embedding images in skins and FXG components. For more information, see Image control.

Examples of embedding assets

One of the most common uses of the embed mechanism is to import an image for a Flex control by using the @Embed() directive in an MXML tag definition. For example, many controls support icons or skins that you can embed in the application. The Button control lets you specify label text, as well as an optional icon image, as the following example shows:

<?xml version="1.0"?>
<!-- embed\ButtonIcon.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Button label="Icon Button"
        height="30" 
        icon="@Embed(source='logo.gif')"/>
</s:Application>

The executing SWF file for the previous example is shown below:

Another option for embedding is to associate the embedded image with a variable by using the [Embed] metadata tag. In this way, you can reference the embedded image from multiple locations in your application, as the following example shows:

<?xml version="1.0"?>
<!-- embed\ButtonIconClass.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            [Embed(source="logo.gif")]
            [Bindable]
            public var imgCls:Class;
        ]]>
    </fx:Script> 

    <s:Button label="Icon Button 1" 
        height="30" 
        icon="{imgCls}"/>
    <s:Button label="Icon Button 2" 
        height="30" 
        icon="{imgCls}"/>
</s:Application>

The executing SWF file for the previous example is shown below:

For style properties, you can embed an asset as part of a style sheet definition by using the Embed() directive, as the following example shows:

<?xml version="1.0"?>
<!-- embed\ButtonIconCSS.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Style>  
        .myCustomButton {
            icon:Embed(source="logo.gif");
        }
    </fx:Style>

    <s:Button label="Icon Button Style Def" 
        styleName="myCustomButton"/>
</s:Application>

The executing SWF file for the previous example is shown below:

Note: The equal sign (=) in the style sheet is a Flex extension that may not be supported by all CSS processors. If you find that it is not supported, you can use the Embed(filename) syntax.

Accessing assets at run time

The alternative to embedding an asset is to load the asset at run time. You can load an asset from the local file system in which the SWF file runs, or you can access a remote asset, typically through an HTTP request over a network.

Embedded assets load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded assets also require you to recompile your applications whenever your asset changes.

Assets loaded at run time exist as separate, independent files on your web server (or elsewhere) and are not compiled into your Flex applications. The referenced assets add no overhead to an application’s initial load time. However, you might experience a delay when you use the asset and load it in Adobe® Flash® Player or Adobe® AIR™. These assets are independent of your Flex application, so you can change them without causing a recompile operation, as long as the names of the modified assets remain the same.

For examples that load an asset at run time, see Image controland SWFLoader control.

For security, by default Flash Player does not allow an application to access some types of remote data (such as SWF files) at run time from a domain other than the domain from which the application was served. Therefore, a server that hosts data must be in the same domain as the server hosting your application, or the server must define a crossdomain.xml file. A crossdomain.xml file is an XML file that provides a way for a server to indicate that its data and documents are available to SWF files served from specific domains, or from all domains. For more information on application security, see Security.

Supported file types

You can embed the following types of files in a Flex application.

File Type

File Format

MIME Type

Description and Examples

Images

GIF

image/gif

Embedding JPEG, GIF, and PNG images

Images

.JPG, .JPEG

image/jpeg

Embedding JPEG, GIF, and PNG images

Images

PNG

image/png

Embedding JPEG, GIF, and PNG images

Images

SVG

image/svg

image/svg-xml

Embedding SVG images

Flash

SWF

application/x-shockwave-flash

Embedding SWF files

Flash

Symbols stored in a SWF file

application/x-shockwave-flash

Embedding SWF files

Audio

MP3

audio/mpeg

Embedding sounds

Font

TTF (TrueType)

application/x-font-truetype

 

Font

FON (System font)

application/x-font

 

All other types

 

application/octet-stream

Embedding all other file types