Flex 软件中经常需要使用一些外部的资源,如图片、声音、SWF或字体,虽然你也可以在软件运行的时候引入和载入,但是也可能经常需要直接将这些资源编译(Compile)到软件中,也就是直接嵌入资源(Embedding Assets)。 Flex 中可以直接嵌入图片image,影片movie,MP3,和TrueType文字。
嵌入资源的利处:
1、比起在运行时访问资源,对嵌入资源的访问速度更加快速;
2、可以用简单的变量访问方式,在多个地方引用所嵌入的资源。这是变量就代表资源,提高写代码的效率;
嵌入资源的弊处:
1、增大了SWF文件的大小,因为是将资源直接包含;
2、由于SWF文件增大,将使得初始化的速度变慢;
3、当资源改变后,需要重新编译SWF文件;
嵌入资源的语法:
根据嵌入位置的不同,语法也各不同:
1、[ Embed
(parameter1, paramater2, ...)] 元数据标签
这主要在AS文件中,或MXML文件中的 <mx:Script>标签中使用。
2、@ Embed
(parameter1, paramater2, ...) 指令
这主要在MXML标签中使用。
3、 Embed
(parameter1, paramater2, ...) 指令
这主要在 <mx:Style> 样式表中使用。
根据情况的不同嵌入资源 Embed
的返回类型可以是Class或String。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[ Embed (source="images/btn_login.png",
scaleGridTop="25", scaleGridBottom="125",
scaleGridLeft="25", scaleGridRight="125" )]
[ Bindable ]
public var imgCls:Class;
]]>
</fx:Script>
<s:Panel width="100%" height="100%">
<s:HGroup width="100%" height="100%" left="5" top="5">
<s:Button id="myButton" icon="@Embed('images/btn_login.png')"/>
<mx:Image source="{imgCls}"/>
<mx:Image source="{imgCls}" width="300" height="300"/>
<mx:Image source="{imgCls}" width="450" height="450"/>
</s:HGroup>
</s:Panel>
</s:Application>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[ Embed (source="images/btn_login.png",
scaleGridTop="25", scaleGridBottom="125",
scaleGridLeft="25", scaleGridRight="125" )]
[ Bindable ]
public var imgCls:Class;
]]>
</fx:Script>
<s:Panel width="100%" height="100%">
<s:HGroup width="100%" height="100%" left="5" top="5">
<s:Button id="myButton" icon="@Embed('images/btn_login.png')"/>
<mx:Image source="{imgCls}"/>
<mx:Image source="{imgCls}" width="300" height="300"/>
<mx:Image source="{imgCls}" width="450" height="450"/>
</s:HGroup>
</s:Panel>
</s:Application>