The syntax that you use for embedding assets depends on where in your application you embed the asset. Flex supports the following syntaxes:
- [Embed(parameter1, paramater2, ...)] metadata tag
You use this syntax to embed an asset in an ActionScript file, or in an <mx:Script> block in an MXML file. For more information, see Using the [Embed] metadata tag.
- @Embed(parameter1, paramater2, ...) directive
You use this syntax in an MXML tag definition to embed an asset. For more information, see Using the @Embed() directive in MXML.
- Embed(parameter1, paramater2, ...) directive
You use this syntax in an <mx:Style> block in an MXML file to embed an asset. For more information, see Embedding assets in style sheets.
All three varieties of the embed syntax let you access the same assets; the only difference is where you use them in your application.
Escaping the @ character
You can use the slash character (\) to escape the at sign character (@) when you want to use a literal @ character. For example, the string "\@Embed(foo)" means the literal string "@Embed(foo)"). You use two slash characters (\\) to escape a single backslash character. For example, use the character string "\\@" to specify the literal strings "\@".
Embed parameters
Each form of the embed syntax takes one or more optional parameters. The exact syntax that you use to embed assets depends on where they are embedded. Some of these parameters are available regardless of what type of asset you are embedding, and others are specific to a particular type of media. For example, you can use the source and mimeType parameters with any type of media, but the scaleGridRight parameter applies only to images.
The following table describes the parameters that are available for any type of embedded asset. For more information, see About the source parameter and About the MIME type.
|
Parameter
|
Description
|
| source |
Specifies the name and path of the asset to embed; either an absolute path or a path relative to the file containing the embed statement. The embedded asset must be a locally stored asset. Therefore you cannot specify a URL for an asset to embed.
For more information on setting the path, see About setting the path to the embedded asset.
|
| mimeType |
Specifies the mime type of the asset.
|
The following table describes the parameters that are specific for images and Sprite objects. For more information, see Using 9-slice scaling with embedded images.
|
Parameter
|
Description
|
| scaleGridTop |
Specifies the distance in pixels of the upper dividing line from the top of the image in a 9-slice scaling formatting system. The distance is relative to the original, unscaled size of the image.
|
| scaleGridBottom |
Specifies the distance in pixels of the lower dividing line from the top of the image in a 9-slice scaling formatting system. The distance is relative to the original, unscaled size of the image.
|
| scaleGridLeft |
Specifies the distance in pixels of the left dividing line from the left side of the image in a 9-slice scaling formatting system. The distance is relative to the original, unscaled size of the image.
|
| scaleGridRight |
Specifies the distance in pixels of the right dividing line from the left side of the image in a 9-slice scaling formatting system. The distance is relative to the original, unscaled size of the image.
|
The following table describes the parameter that is specific to SWF files. For more information, see Embedding SWF files.
|
Parameter
|
Description
|
| symbol |
Specifies the symbol in a SWF file to embed, for use with Adobe Flash Player 8 and earlier.
|
About the source parameter
In almost all cases, you must specify the source parameter, or nothing is embedded.
The source parameter is the default parameter of the [Embed] metadata tag; therefore, if you are not specifying any other parameters, you can just supply its value without explicitly including the parameter name or assigning it the desired value, as the following example shows:
<mx:Style>
.myCustomButton {
overSkin:Embed("overIconImage.gif");
upSkin:Embed(source="upIconImage.gif");
downSkin:Embed(source="downIconImage.gif");
}
</mx:Style>About setting the path to the embedded asset
You can specify a fully qualified path to the image or a URL, as the following examples show:
<mx:Button label="Icon Button"
icon="@Embed(source='c:/myapp/assets/logo.gif')"/>
<mx:Button label="Icon Button"
icon="@Embed(source='http://host.com/myapp/assets/logo.gif')"/>
Note: Do not use the backslash character (\) as a separator in the path.
If the path does not start with a slash character, Flex first searches for the file relative to the file that contains the [Embed] metadata tag. For example, the MXML file testEmbed.mxml includes the following code:
<mx:Button label="Icon Button" icon="@Embed(source='assets/logo.gif')"/>
In this example, Flex searches the subdirectory named assets in the directory that contains the testEmbed.mxml file. If the image is not found, Flex then searches for the image in the SWC files associated with the application.
If the path starts with a slash character, Flex first searches the directory of the MXML file for the asset, and then it searches the source path. You specify the source path to the Flex compiler by using the source-path compiler option. For example, you set the source-path option as the following code shows:
-source-path=a1,a2,a3
The MXML file a1/testEmbed.mxml then uses the following code:
<mx:Button label="Icon Button" icon="@Embed(source='/assets/logo.gif')"/>
Flex first searches for the file in a1/assets, then in a2/assets, and then in a3/assets. If the image is not found, Flex searches for the image in the SWC files associated with the application.
If the MXML file is in the a2 directory, as in a2/testEmbed.mxml, Flex first searches the a2 directory and then the directories specified by the source-path option.
About the MIME type
You can optionally specify a MIME type for the imported asset by using the mimeType parameter. If you do not specify a mimeType parameter, Flex makes a best guess about the type of the imported file based on the file extension. If you do specify it, the mimeType parameter overrides the default guess of the asset type.
Flex supports the following MIME types.
- application/octet-stream
- application/x-font
- application/x-font-truetype
- application/x-shockwave-flash
- audio/mpeg
- image/gif
- image/jpeg
- image/png
- image/svg
- image/svg-xml
Using the [Embed] metadata tag
You can use the [Embed] metadata tag to import JPEG, GIF, PNG, SVG, SWF, TTF, and MP3 files.
You must use the [Embed] metadata tag before a variable definition, where the variable is of type Class. The following example loads an image file, assigns it to the imgCls variable, and then uses that variable to set the value of the source property of an Image control:
<?xml version="1.0"?>
<!-- embed\ImageClass.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="80" borderStyle="solid">
<mx:Script>
<![CDATA[
[Embed(source="logo.gif")]
[Bindable]
public var imgCls:Class;
]]>
</mx:Script>
<mx:Image source="{imgCls}"/>
</mx:Application>