flex：嵌入应用程序资源
<span style="color: #000000;">可以在 Adobe® Flex™ 应用程序中嵌入各种类型的资源。嵌入的资源被编译到 Flex 应用程序的 SWF 文件中。 它们不是在运行时加载的, 您并非必须使用您的应用程序部署原始资源文件。<span style="color: #000000;">提示: 嵌入资源的另一种方法是在运行时加载它们。在运行时加载的资源必须使用您的应用程序进行部署, 因为它们没有被编译到您的应用程序中。 这具有保持 Flex 应用程序的文件大小更小和缩短其初始加载时间的优点。
可以嵌入具有 PNG、JPEG 和 GIF 文件格式的图像, SWF 文件, 具有 MP3 文件格式的声音文件, SVG 文件和字体。 下列主题描述如何嵌入这些资源:
[*]图像 (多个实例)
[*]图像 (单一实例)
[*]使用 scale-9 拉伸的图像
[*]用于与 CSS 和外观一起使用的图像
[*]SWF 文件
[*]SWF 库资源
[*]声音文件
[*]SVG 文件
[*]字体
<a name="EmbeddingImages" />嵌入图像 (多个实例)
<span style="color: #000000;">可以在 Flex 应用程序中嵌入具有 PNG、JPEG 或 GIF 文件格式的图像并创建它的一个或多个实例。
<span style="color: #000000;">此示例使用 元数据标签在您的应用程序中嵌入图像并将它与可绑定的 ActionScript 类相关联。 接着它将 Image 控件的 source 属性绑定到 Logo 类。 可以将 Logo 类绑定到采用某个图像的任何组件属性, 比如 Button 控件的 icon 属性。
<span style="color: #000000;">示例
<?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>
<!
"assets/logo.png")]
[Bindable]
public var Logo:Class;
]]>
</mx:Script>
<mx:Image id="myLogo" source="{Logo}"/>
<mx:Image id="myLogo2" source="{Logo}"/>
</mx:Application><span style="" />
结果
<span style="">
<span style="color: #000000;">若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
D:\flex学习\EmbeddingImages\ EmbeddingImages.mxml
返回顶部
<a name="EmbeddingAnImage" />嵌入图像 (单一实例)
<span style="color: #000000;">可以使用线上 @Embed 指令在 Flex 应用程序中嵌入只希望显示一次的图像。
此示例将一个图像组件添加到一个应用程序中并使用其 source 属性中的 @Embed 指令。 若要在另一个 Image 控件中使用这一相同的图像, 则还必须将它嵌入到该组件中。 如果希望显示嵌入的图像的多个实例, 请使用 元数据标签<span style="color: #000000;">。
<span style="color: #000000;">示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingAnImage/index.html"
width="200" height="240"
>
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
</mx:Application><span style="" />
<span style="color: #000000;">结果
<span style="">
<span style="color: #000000;">若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
D:\flex学习\EmbeddingAnImage\ EmbeddingAnImage.mxml
返回顶部
<a name="EmbeddingImagesScale9" />嵌入使用 scale-9 伸缩的图像
您可以将某个图像文件嵌入到您的 Flex 应用程序并以类似组件的方式智能地缩放它。 通过使用 scale-9 功能, 您的图像的四个角根本没有缩放, 水平边框仅在水平方向上缩放, 而垂直边框仅在垂直方向上缩放。 例如, 这对于以下情况很有用: 创建使用圆角的框, 或在您希望在缩放组件时保持边框清晰的位置进行组件样式调整。
<span style="color: #000000;">此示例使用 Embed 元数据标签的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和 scaleGridRight 网格线位置属性来创建您的 scale-9 网格。
<span style="color: #000000;">提示: 获得网格线位置的值的一种比较容易的方法是将指南与 Adobe® Photoshop® 中的 Rectangular Marquee 工具和 Info 选项板一起使用。
<span style="">
<span style="color: #000000;">提示: 旋转嵌入的 scale-9 图像的实例会关闭该图像的 scale-9 以在将来进行任意大小转换。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingImagesScale9/index.html"
layout="vertical" width="400" height="480"
>
<span style="" />
页:
[1]