嵌入程序资源

Adobe Flex Quick Starts 中文翻译之五：嵌入程序资源
五、嵌入程序资源
原文作者：Aral Balkan
原文地址：http://www.adobe.com/devnet/flex/quickstart/embedding_assets/
__________________________________________________________________________________
译者：Dreamer http://www.zhuoqun.net
你可以在 Adobe® Flex™ 应用程序中嵌入各种类型的资源。嵌入的资源会被编译到

Flex 程序的 SWF 文件中。它们不是在运行时被载入的，所以你不用为你的程序部署
原始的资源文件。
提示：另一种嵌入资源的方法是在运行时加载它们。在运行时加载资源需要在程序
中部署它们，因为资源并没有编译到文件中。这种做法的好处是可以减小程序文件
的大小并加快程序的加载速度。
你可以在程序中嵌入 PNG，JPEG，GIF 格式的图像，SWF 文件，MP3 格式的声音文件，

SVG 文件，以及字体。接下来的几个主题描述了如何嵌入这些资源。
• 图像（多个实例）
• 图像（单个实例）
• 通过 scale-9 缩放的图像
• 用于 CSS 和皮肤的图像
• SWF 文件
• SWF 库资源
• 声音文件
• SVG 文件
• 字体
嵌入图像（多个实例）
你可以在 Flex 应用程序中嵌入一个 PNG，JPEG 或 Gif 格式的图像并且为其创建一个

或者多个实例。
下面这个例子使用[Embed]元数据标签将图像嵌入的程序中并且将其与一个可绑定
的 ActionScript 类相关联。然后 Image 控件的 source 属性被绑定到了 Logo 类。你
可以将 Logo 类绑定到任何组件的需要图像的属性上，比如 Button 控件的 icon 属性。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingImages/index.html"
layout="horizontal" width="350" height="250">
<mx:Script>
<![CDATA[
[Embed(source="assets/logo.png")]
__________________________________________________________________________________
[Bindable]
public var Logo:Class;
]]>
</mx:Script>
<mx:Image id="myLogo" source="{Logo}"/>
<mx:Image id="myLogo2" source="{Logo}"/>
</mx:Application>
运行结果图示
译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。
嵌入一个图像（单个实例）
你可以使用一个内联的 @Embed 指令在 Flex 程序中嵌入一个你只想显示一次的图

像。
下面的例子通过在 source 属性中使用 @Embed 将一个 Image 组件添加到了程序中。

要在另外一个 Image 控件中使用相同的图像的话，你必须在那个组件中也嵌入它。
如果你想要显示一个图像的多个实例，请使用 [Embed] 元数据标签。
__________________________________________________________________________________
示例
<mx:Application
viewSourceURL="src/EmbeddingAnImage/index.html"
width="200" height="240">
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
</mx:Application>
运行结果示例
嵌入使用 scale-9 缩放的图像
你可以在 Flex 程序中嵌入图像文件并且使其根据组件的方式灵活地缩放。通过使用

scale-9 特性，图像的四个角并不会都缩放，水平的边框只是在水平方向缩放，垂直
边框只是在垂直方向上缩放。当你创建圆角方框，或者调整组件大小时希望可以保
持边框是直角的时候，这个会很有用。
下面的例子使用Embeded元数据标签创建scale-9 的网格并使用了网格线属性
scaleGridTop, scaleGridBottom, scaleGridLeft 和scaleGridRight。
__________________________________________________________________________________
提示：为网格线位置获取值的一个简单方法是使用 Adobe® Photoshop® 中矩形选取

工具和信息面板中的栏线。
提示：旋转嵌入的 scale-9 图像的一个实例会在以后任何的大小改变中关掉这个图

像的 scale-9 特性。
示例

<mx:Application
viewSourceURL="src/EmbeddingImagesScale9/index.html"
layout="vertical" width="400" height="480">
<mx:Script>
<![CDATA[
[Embed(
source="assets/fancy_border.png",
scaleGridTop="55", scaleGridBottom="137",
scaleGridLeft="57", scaleGridRight="266"
)]
[Bindable]
__________________________________________________________________________________
public var FancyBorderImage:Class;

]]>
</mx:Script>
<mx:Image source="{FancyBorderImage}" width="146" height="82"/>

</mx:Application>
运行结果图示
使用 CSS 为皮肤嵌入图像
__________________________________________________________________________________
你可以在 Flex 应用程序中嵌入图像并使用它为组件的加上皮肤。
你可以定义一个 CSS 类型（type）选择符来为同一类型的所有组件设定皮肤。在下面的例子中，

为 Button 控件创建了一个类型选择符。这个类型选择符通过使用 Embed 为组件的皮肤属性指定
了图像。你也可以定义一个类（class）选择符来创建一个自定义的 CSS 类，然后你可以将其作
为一种样式来定义组件。
提示：类选择符创建了已命名的风格类，你可以使用 styleName 属性将类选择符指

派给一个组件。使用类选择符可以为单独的组件定义风格。类型选择符为给定类型
的所有组件定义了样式，就向下面的例子所展示的那样。
示例

<mx:Application
viewSourceURL="src/EmbeddingImagesCSS/index.html"
layout="horizontal" width="270" height="100"
horizontalAlign="center" verticalAlign="middle" >
<mx:Style>
Button
{
upSkin: Embed("assets/box_closed.png");
overSkin: Embed("assets/box.png");
downSkin: Embed("assets/box_new.png");
}
</mx:Style>
<mx:Button/>
<mx:Text text="Roll over and click the box!"/>
</mx:Application>
运行结果图示
__________________________________________________________________________________
嵌入 SWF 文件
嵌入一个 SWF 文件和嵌入一个图像几乎一样。不同的是你可以将嵌入的 SWF 文件看

作是 MovieClip 类的一个实例。（它们实际上是 MovieClipAsset 类的子类，而
MovieClipAsset 类是 MovieClip 类的子类）
注意：你不能直接访问嵌入的 SWF 文件的属性或方法。但是，你可以使用

LocalConnection 来和他们通信。
示例

<mx:Application
viewSourceURL="src/EmbeddingSwfFiles/index.html"
horizontalAlign="center" verticalAlign="middle">
<mx:Script>
<![CDATA[
[Embed(source="assets/hourglass.swf")]
[Bindable]
public var Hourglass:Class;
]]>
</mx:Script>
<mx:Image id="hourglass" source="{Hourglass}"/>

</mx:Application>
运行结果图示
__________________________________________________________________________________
嵌入 SWF 库资源
你可以嵌入程序中既有 SWF 文件的库中的元件。Flash 定义了三种元件类型：Button，

MovieClip 以及 Graphic。你可以在一个 Flex 程序中嵌入 Button 和 MovieClip 元件，
但是你不能嵌入 Graphic 元件，因为它不能被导出到 ActionScript。
下面的例子使用[Embed]元数据标签的 source 属性指定了包含所需库的 SWF 文件，

并使用[Embed]元数据标签的 symbol 属性指定了库中你想要嵌入的 symbol 的连接
ID。
示例

<mx:Application
viewSourceURL="src/EmbeddingSwfLibraryAssets/index.html"
horizontalAlign="center" verticalAlign="bottom" >
<mx:Script>
<![CDATA[
[Embed(source="assets/library.swf", symbol="BadApple")]
[Bindable]
public var BadApple:Class;
__________________________________________________________________________________
[Embed(source="assets/library.swf", symbol="Pumpkin")]
[Bindable]
public var Pumpkin:Class;
]]>
</mx:Script>
<mx:Image id="badApple" source="{BadApple}" width="150"

height="151.8"/>
<mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>
</mx:Application>
运行结果图示
嵌入声音文件
你可以使用[Embed]元数据标签在 Flex 程序中嵌入一个 MP3 文件并播放它。
注意：请记住嵌入的声音文件将会是应用程序（最终的 SWF 文件）的一部分，而且

MP3 文件可以非常大，所以它会使你的程序变大并且影响程序的加载速度。
__________________________________________________________________________________
下面的例子创建了 MP3 文件的一个新的实例并将其作为一个 SoundAsset。它使用了

SoundAsset 类的 play() 方法来播放这个 MP3 文件的实例，并且保存了返回的
SoundChannel 对象以便于随后调用 SoundChannel 对象的 stop()方法来停止播放。
示例

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" horizontalAlign="center" verticalAlign="center"
viewSourceURL="srcEmbeddingSoundFiles/index.html">
<mx:Script>
<![CDATA[
import mx.core.SoundAsset;
import flash.media.*;
[Embed(source="assets/pie-yan-knee.mp3")]
[Bindable]
public var Song:Class;
public var mySong:SoundAsset = new Song() as SoundAsset;

public var channel:SoundChannel;
public function playSound():void

{
// Make sure we don't get multiple songs playing at the same

time
stopSound();
// Play the song on the channel

channel = mySong.play();
}
public function stopSound():void

{
// Stop the channel, but only if it exists

if ( channel != null ) channel.stop();
}
]]>
__________________________________________________________________________________
</mx:Script>
<mx:HBox>
<mx:Button label="play" click="playSound();"/>
<mx:Button label="stop" click="stopSound();"/>

</mx:HBox>
<mx:Text width="348" textAlign="center" color="#ffffff">
<mx:htmlText>
<![CDATA[<a
href="http://derekaudette.ottawaarts.com/music.php">Pie-Yan-Knee Written
and Performed by: Derek R. Audette © 2004 (Creative Commons Attribution
License)</a>]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
运行结果图示：
嵌入 SVG 文件
你可以在 Flex 应用程序中嵌入 SVG 文件。
嵌入一个 SVG 文件几乎同潜入一个图像一样。不同的是你可以将嵌入的 SVG 文件看

作是 Sprite 类的实例。（它们实际上是 Sprite 类的子类 SpriteAsset 类的实例）。
嵌入的 SVG 文件也保留了它们的向量属性而且在缩放或者改变的时候不会失真。
注意：你不能在运行时导入 SVG 文件，你只能在编译时将它们嵌入到 Flex 程序中。
示例
__________________________________________________________________________________

<mx:Application
layout="horizontal"
viewSourceURL="srcEmbeddingSvgFiles/index.html"
width="600" height="470">
<mx:Script>
<![CDATA[
[Embed(source="assets/frog.svg")]
[Bindable]
public var SvgFrog:Class;
]]>
</mx:Script>
<mx:Image id="smallFrog" source="{SvgFrog}" width="128" height="130"/>
<mx:Image id="largeFrog" source="{SvgFrog}"/>

</mx:Application>
__________________________________________________________________________________
提示：这个SVG青蛙图形是Architetto Francesco Rollandin的作品，他很慷慨地将

这个发布到了Open Clip Art Library 的 Public Domain。你可以从那里找到其他
的可供你免费使用和观看的SVG文件。
嵌入字体
你可能需要在 Flex 程序中嵌入字体并将其作为基于文本的组件的样式。
下面的例子创建了一个类选择符，它引用了嵌入字体的 font-family 名字。然后又

创建了一个 Text 控件并将它的风格设定为这个类选择符。
提示：你可以通过定义@font-face 声明的 unicode-range 属性，只从一种字体中添

加某些字符来减小文件的大小。
深入：更多关于使用字体的信息，请看 Flex 2 Developer's Guide中的 “使用字

体”。
示例

<mx:Application
layout="horizontal"
horizontalAlign="center"
verticalAlign="center"
viewSourceURL="src/EmbeddingFonts/index.html">
<mx:Style>
@font-face
{
font-family: Copacetix;
src: url("assets/copacetix.ttf");
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */

U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
__________________________________________________________________________________
.MyTextStyle
{
font-family: Copacetix;
font-size: 24pt;
}
</mx:Style>
<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!"

width="100%"/>
</mx:Application>
Copacetix TrueType 字体是Copacetix.com提供的。遵循Creative Commons

Attribution-ShareAlike 2.0 许可。
更多信息
关于嵌入资源的更多信息，请看Flex 2 Developer's Guide中的“嵌入资源”。
__________________________________________________________________________________

嵌入程序资源

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

嵌入程序资源

Uploaded by

Copyright:

Available Formats

Adobe Flex Quick Starts 中文翻译之五：嵌入程序资源

你可以在 Adobe® Flex™ 应用程序中嵌入各种类型的资源。嵌入的资源会被编译到

你可以在程序中嵌入 PNG，JPEG，GIF 格式的图像，SWF 文件，MP3 格式的声音文件，

你可以在 Flex 应用程序中嵌入一个 PNG，JPEG 或 Gif 格式的图像并且为其创建一个

<?xml version="1.0" encoding="utf-8"?>

public var Logo:Class;

<mx:Image id="myLogo" source="{Logo}"/>

<mx:Image id="myLogo2" source="{Logo}"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

你可以使用一个内联的 @Embed 指令在 Flex 程序中嵌入一个你只想显示一次的图

下面的例子通过在 source 属性中使用 @Embed 将一个 Image 组件添加到了程序中。

<?xml version="1.0" encoding="utf-8"?>

<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

嵌入使用 scale-9 缩放的图像

你可以在 Flex 程序中嵌入图像文件并且使其根据组件的方式灵活地缩放。通过使用

提示：为网格线位置获取值的一个简单方法是使用 Adobe® Photoshop® 中矩形选取

提示：旋转嵌入的 scale-9 图像的一个实例会在以后任何的大小改变中关掉这个图

<?xml version="1.0" encoding="utf-8"?>

public var FancyBorderImage:Class;

<mx:Image source="{FancyBorderImage}" width="146" height="82"/>

<mx:Image source="{FancyBorderImage}" width="266" height="150"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

你可以在 Flex 应用程序中嵌入图像并使用它为组件的加上皮肤。

你可以定义一个 CSS 类型（type）选择符来为同一类型的所有组件设定皮肤。在下面的例子中，

提示：类选择符创建了已命名的风格类，你可以使用 styleName 属性将类选择符指

<?xml version="1.0" encoding="utf-8"?>

<mx:Text text="Roll over and click the box!"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

嵌入一个 SWF 文件和嵌入一个图像几乎一样。不同的是你可以将嵌入的 SWF 文件看

注意：你不能直接访问嵌入的 SWF 文件的属性或方法。但是，你可以使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Image id="hourglass" source="{Hourglass}"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

你可以嵌入程序中既有 SWF 文件的库中的元件。Flash 定义了三种元件类型：Button，

下面的例子使用[Embed]元数据标签的 source 属性指定了包含所需库的 SWF 文件，

<?xml version="1.0" encoding="utf-8"?>

<mx:Image id="badApple" source="{BadApple}" width="150"

<mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

你可以使用[Embed]元数据标签在 Flex 程序中嵌入一个 MP3 文件并播放它。

注意：请记住嵌入的声音文件将会是应用程序（最终的 SWF 文件）的一部分，而且

下面的例子创建了 MP3 文件的一个新的实例并将其作为一个 SoundAsset。它使用了

<?xml version="1.0" encoding="utf-8"?>

public var mySong:SoundAsset = new Song() as SoundAsset;

public function playSound():void

// Make sure we don't get multiple songs playing at the same

// Play the song on the channel

public function stopSound():void

// Stop the channel, but only if it exists

<mx:Button label="stop" click="stopSound();"/>

<mx:Text width="348" textAlign="center" color="#ffffff">

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

你可以在 Flex 应用程序中嵌入 SVG 文件。

嵌入一个 SVG 文件几乎同潜入一个图像一样。不同的是你可以将嵌入的 SVG 文件看

注意：你不能在运行时导入 SVG 文件，你只能在编译时将它们嵌入到 Flex 程序中。

<?xml version="1.0" encoding="utf-8"?>

<mx:Image id="smallFrog" source="{SvgFrog}" width="128" height="130"/>

<mx:Image id="largeFrog" source="{SvgFrog}"/>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

提示：这个SVG青蛙图形是Architetto Francesco Rollandin的作品，他很慷慨地将

你可能需要在 Flex 程序中嵌入字体并将其作为基于文本的组件的样式。

下面的例子创建了一个类选择符，它引用了嵌入字体的 font-family 名字。然后又

提示：你可以通过定义@font-face 声明的 unicode-range 属性，只从一种字体中添