| Flex 2 Developer's Guide > Flex Programming Topics > Embedding Assets > 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 when 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.
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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button label="Icon Button" icon="@Embed(source='logo.gif')"/>
</mx:Application>
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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Embed(source="logo.gif")]
[Bindable]
public var imgCls:Class;
]]>
</mx:Script>
<mx:Button label="Icon Button 1" icon="{imgCls}"/>
<mx:Button label="Icon Button 2" icon="{imgCls}"/>
</mx:Application>
For style properties, you can embed an asset as part of a style sheet definition by using the Embed() directive. One common use for style properties is to set a component's skins. For example, you can set skins for a Button control by using the overSkin, upSkin, and downSkin style properties, as the following example shows:
<?xml version="1.0"?>
<!-- embed\ButtonIconCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myCustomButton {
overSkin:Embed(source="overIconImage.gif");
upSkin:Embed(source="upIconImage.gif");
downSkin:Embed(source="downIconImage.gif");
}
</mx:Style>
<mx:Button label="Icon Button Style Def" styleName="myCustomButton"/>
</mx:Application>
|
NOTE |
|
The equal sign (=) in the style sheet is a Flex extension that might not be supported by all CSS processors. If you find that it is not supported, you can use the |
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 though 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 additional 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. 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 and asset at run time, see Image control or SWFLoader control.
For security, by default Flash Player does not allow an application to access some types of remote data at run time, such as SWF files, 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 Applying Flex Security in Building and Deploying Flex 2 Applications.
You can embed the following types of files in a Flex application:
Flex 2.01
