About 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:

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.

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