/*
원본 URL :http://livedocs.macromedia.com/flex/2/docs/00000970.html
자원을 내장시키는 방법은 3가지가 있다는 것을 기억하자..
*/
Syntax for embedding assets
The syntax that you use for embedding assets depends on where in your application you embed the asset. Flex supports the following syntaxes:
- The
[Embed(parameter1, paramater2, ...)]metadata tagYou use this syntax to embed an asset in an ActionScript file, or within an
<mx:Script>block in an MXML file. For more information, see Using the [Embed] metadata tag. - The
@Embed(parameter1, paramater2, ...)directiveYou use this syntax in an MXML tag definition to embed an asset. For more information, see Using the @Embed() directive in MXML.
- The
Embed(parameter1, paramater2, ...)directiveYou use this syntax within 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.
Subtopics
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 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 specific for images and Sprite objects. For more information, see Using scale-9 formatting with embedded images.
|
Parameter |
Description |
|---|---|
scaleGridTop |
Specifies the distance, in pixels, of the upper dividing line from the top of the image in a scale-9 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 scale-9 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 scale-9 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 scale-9 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's Macromedia 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 {
overIcon:Embed("overIconImage.gif");
upIcon:Embed(source="upIconImage.gif");
downIcon: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 containing the [Embed] metadata tag. For example, the MXML file testEmbed.mxml file 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 containing 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 a2/assets, and then 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:
[Embed] 메타태그를 사용하기 위해서는 반드시 Class변수 앞에서 사용해야 된다.
그러면 Class 변수에 Embed 자원이 할당된다.
<?xml version="1.0"?>
<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>
Notice that Flex uses data binding to tie the imgCls variable to the source property. If you omit the [Bindable] metadata tag preceding the imgCls variable definition, Flex can only perform the data binding operation once, at application startup. When you include the [Bindable] metadata tag, Flex recognizes any changes to the imgCls variable, and updates any components that use that variable when a change to it occurs.
Generally, this method of embedding assets provides more flexibility than other methods because you can import an asset once, and then use it in multiple places in your application, and because you can update the asset and have the data binding mechanism propagate that update throughout your application.
Using the @Embed() directive in MXML
Many Flex components, such as Button and TabNavigator, take an icon property or other property that lets you specify an image to the control. You can embed the image asset by specifying the property value by using the @Embed() directive in MXML. You can use any supported graphic file with the @Embed() directive, including SWF files and assets inside SWF files.
You can use the @Embed() directive to set an MXML tag property, or to set a property value by using a child tag. The @Embed() directive returns a value of type Class or String. If the component's property is of type String, the @Embed() directive returns a String. If the component's property is of type Class, the @Embed() directive returns a Class. Using the @Embed() directive with a property that requires value of any other data type results in an error.
The following example creates a Button control, and sets its icon property by using the @Embed() directive:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button label="Icon Button" id="b2" icon="@Embed(source='logo.gif')"/>
</mx:Application>
Embedding assets in style sheets
Many style properties of Flex components support imported assets. Most frequently, you use these style properties to set the skins for a component. Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of images, SWF files, or class files that contain drawing API methods.
For more information on skinning, and embedding asset using style sheets, see Using Skins.
Flex 2
The sentence "The embedded asset must be a locally stored asset" is ambiguous. Local to what? the compiler, the running swf?
mpeterson said on Aug 30, 2006 at 9:29 AM :
Locally stored means that the asset must be local to the location of the compiler.
- Mike Peterson
Flex doc team
