可以在 Adobe® Flex™ 应用程序中嵌入各种类型的资源。 嵌入的资源被编译到 Flex 应用程序的 SWF 文件中。 它们不是在运行时加载的, 您并非必须使用您的应用程序部署原始资源文件。
提示: 嵌入资源的另一种方法是在运行时加载它们。 在运行时加载的资源必须使用您的应用程序进行部署, 因为它们没有被编译到您的应用程序中。 这具有保持 Flex 应用程序的文件大小更小和缩短其初始加载时间的优点。
可以嵌入具有 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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
嵌入图像 (单一实例) 可以使用线上 @Embed 指令在 Flex 应用程序中嵌入只希望显示一次的图像。
此示例将一个图像组件添加到一个应用程序中并使用其 source 属性中的 @Embed 指令。 若要在另一个 Image 控件中使用这一相同的图像, 则还必须将它嵌入到该组件中。 如果希望显示嵌入的图像的多个实例, 请使用 [Embed]元数据标签。
示例
<?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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
嵌入使用 scale-9 伸缩的图像 您可以将某个图像文件嵌入到您的 Flex 应用程序并以类似组件的方式智能地缩放它。 通过使用 scale-9 功能, 您的图像的四个角根本没有缩放, 水平边框仅在水平方向上缩放, 而垂直边框仅在垂直方向上缩放。 例如, 这对于以下情况很有用: 创建使用圆角的框, 或在您希望在缩放组件时保持边框清晰的位置进行组件样式调整。
此示例使用 Embed 元数据标签的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和 scaleGridRight 网格线位置属性来创建您的 scale-9 网格。
提示: 获得网格线位置的值的一种比较容易的方法是将指南与 Adobe® Photoshop® 中的 Rectangular Marquee 工具和 Info 选项板一起使用。
提示: 旋转嵌入的 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"
>
<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:Image source="{FancyBorderImage}" width="266" height="150"/>
<mx:Image source="{FancyBorderImage}" width="325" height="183"/>
</mx:Application>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
使用 CSS 为外观嵌入图像 您可以在 Flex 应用程序中嵌入图像并将它用于设置组件的外观。
您可以定义一个 CSS 类型选择器为给出类型的所有组件设置外观。 在此示例中, 您为 Button 控件创建了一个类型选择器。 类型选择器通过使用 Embed指定这些图像用作您的组件的外观属性。 您还可以定义一个类选择器来创建可作为样式应用到特定组件的自定义 CSS 类。
提示: 类选择器创建可用来设置单独的组件的样式的已命名样式类, 方法是通过使用 styleName 属性将类选择器分配给该组件。 类型选择器为给出类型的所有组件设置样式, 如下面的示例所示。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
嵌入 SWF 文件嵌入 SWF 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SWF 文件的实例当作 MovieClip 类的实例处理。 (它们实际上是 MovieClipAsset 类的子类, MovieClipAsset 类是 MovieClip 类的子类。)
注意: 您无法直接访问嵌入的 SWF 文件的属性或方法。 但是, 您可以使用 LocalConnection 以允许它们进行通信。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingSwfFiles/index.html"
layout="horizontal" width="290" height="290"
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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
嵌入 SWF 库资源 您可以在应用程序中嵌入来自现有 SWF 库中的特定符号。 Flash 定义三种类型的符号: Button、MovieClip 和 Graphic。 您可以在 Flex 应用程序中嵌入 Button 和 MovieClip 符号, 但您不能嵌入 Graphic 符号, 因为无法为 ActionScript 导出 Graphic 符号。
此示例使用 [Embed] 元数据标签的 source 属性来指定包含您的库的 SWF 文件, 并使用 [Embed] 元数据标签的 symbol 属性来指定您要在该库中嵌入的符号的链接 ID。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingSwfLibraryAssets/index.html"
layout="horizontal" width="450" height="240"
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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
嵌入声音文件 您可以在 Flex 应用程序中通过使用 [Embed] 元数据标签嵌入 MP3 文件并播放它。
注意: 记住嵌入的声音文件会成为您的应用程序 (最终的 SWF 文件) 的一部分, 而 MP3 文件会很大, 从而会使您的应用程序变得很大并会对应用程序的下载速度产生负面影响。
此实例将该 MP3 的一个新实例创建为一个 SoundAsset。它使用 SoundAsset 类的 play() 方法来播放 MP3 文件的实例, 并存储返回的 SoundChannel 对象, 从而您可以稍后调用 SoundChannel 对象的 stop() 方法以结束播放。
示例
<?xml version="1.0" encoding="utf-8"?>
<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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
返回顶部
嵌入 SVG 文件 可以将 SCG 文件嵌入到 Flex 应用程序中。
嵌入 SVG 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SVG 文件的实例当作 Sprite 类的实例处理。 (它们实际上是 SpriteAsset 类的实例, SpriteAsset 类是 Sprite 类的子类。) 嵌入的 SVG 文件还保留它们的矢量属性, 且在被缩放或转换时不会显示像素。
注意: 不能在运行时导入 SVG 文件;仅可以在编译时在 Flex 应用程序中嵌入它们。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
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>结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
提示: SVG 青娃图形是 Architetto Francesco Rollandin 创建的, 他慷慨地将它发布到 Open Clip Art Library 的公共区域中。 您可以在网站找到其他可免费使用和试验的 SVG 文件。
返回顶部
嵌入字体 您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。
下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。
提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。
详细信息: 有关使用字体的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用字体”。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
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>结果
分享到:
相关推荐
Flex应用程序中嵌入各种类型的资源方法总结 中文说明文档和代码, 简单明了好资料
利用google-iframe在flex中嵌入网页是在swf上覆盖一个div,flex与网页无法融合,这样会出现各种显示,控制问题,如页面自适应,页面显示控制,内容遮盖,网页内容不随flex滚动条滚动等,现在这些问题都解决了
flex中嵌入html,完整代码,下来即可使用
Doc文档整理:集成 Flex 与 Ajax 应用程序,喜欢Flex的朋友别错过了
sfapi 可以expose flex应用程序的控件,以便测试程序通过执行js方法调用而操作flex界面控件
这是一本入门级的Flex电子书,适合入门的朋友看!
在手机应用程序中嵌入字体 在手机控件中使用 HTML 文本 第 6 章: 外观设计 手机外观设计的基础知识 为手机应用程序创建外观 应用自定义手机外观 第 7 章: 运行和调试手机应用程序 管理启动配置 在桌面上运行和...
Flex 模块化应用程序开发,本人博客中还有更多详细信息 http://gaobo403163953.blog.163.com
使用 Adobe Flex 3 开发 Adobe AIR 1.1 应用程序
译自Flex Builder 3 帮助文档,仅作技术交流用
一样在 Flex 中轻松而高质量地开发移动设备应用程序。 许多现有的 Flex 组件已扩展到移动设备上,其中包括增加了对触摸滚动的支持。Flex 还包含一组新组件,可用来轻松构建采 用手机和平板电脑标准设计模式的应用...
FLEX中下拉框嵌入Checkbox
flex嵌入jsp所需要的所有jar包,拷贝到项目对应的目录即可完成flex与jsp的整合
使用Flex开发Android应用程序,欢迎大家下载查看。
Flex页面嵌入jsp文件 flex-iframe1.5.1.zip解压找到flex-iframe-1.5.1\flex-iframe-1.5.1\bin\flex-iframe-1.5.1.swc放入flex项目的libs里面如果不是web项目就放倒lib里面,然后在你的mxml的头部里输入xmlns:名字(你...
flex C# 基于socket 通讯 应用程序源码 客户度用flex 服务端用winform 的通讯程序,可以互发消息。
使用Flex2的本地化特性我们可以很容易创建多语言本地化的Flex应用,为我们的Flex应用打入国际市场添威助力,不过不像Java的 本地化资源动态获取的方式,目前Flex2的本地化特性只支持静态的本地化资源嵌入,还不支持...
Flex与ActionScript3程序开发》一书由易到难、由浅人深、循序渐进地介绍了Flex与ActionScript3程序开发的一般步骤与常用的程序技巧,内容通俗易懂,使用大量实例贯穿全书,力求以实战的形式让读者快速掌握知识点。...
本人经常丢手机。所以做了个电话本,是桌面应用程序。好用。需要安装FLEX相关插件才可安装运行。