Flex 软件中经常需要使用一些外部的资源,如图片、声音、SWF或字体,虽然你也可以在软件运行的时候引入和载入,但是也可能经常需要直接将这些资源编译(Compile)到软件中,也就是直接嵌入资源(Embedding Assets)。 Flex 中可以直接嵌入图片image,影片movie,MP3,和TrueType文字。
[b]嵌入资源的利处: [/b]
1、比起在运行时访问资源,对嵌入资源的访问速度更加快速;
2、可以用简单的变量访问方式,在多个地方引用所嵌入的资源。这是变量就代表资源,提高写代码的效率;
[b]嵌入资源的弊处: [/b]
1、增大了SWF文件的大小,因为是将资源直接包含;
2、由于SWF文件增大,将使得初始化的速度变慢;
3、当资源改变后,需要重新编译SWF文件;
例子1:一个简单的嵌入资源的例子:
以上粗体部分,使用了@ Embed ()指令,将logo.gif这个图片直接嵌入到程序中,作为Button按钮的Icon图标。
例子2:用变量引用嵌入的资源
ADOBE FLEX 3 BETA 2
以上粗体部分,表示将logo.gif图片嵌入,并让变量imgCls可以引用该资源。[ Bindable ]表示该变量imgCls是可以被数据绑定的。之后,就可以在多个地方引用该嵌入资源的变量(见红色粗体)。
另外也可以通过 Embed ()指令, [b]在样式表中嵌入资源[/b][b] [/b],这通常是在设置UI组件的皮肤时候使用。如下代码:
.myCustomButton {
overSkin : [b]Embed[/b][b] [/b][b](source="overIconImage.gif");[/b][b] [/b]
upSkin : [b]Embed[/b][b] [/b][b](source="upIconImage.gif"); [/b]
downSkin : [b]Embed[/b][b] [/b][b](source="downIconImage.gif");[/b][b] [/b]
}
Style Def" styleName="myCustomButton"/>
以上代码表示在按钮的常态(up)、鼠标悬停(over)、鼠标按下(down)的状态,使用不同的皮肤。 overSkin、 upSkin、 downSkin 是Button的对应状态下的皮肤属性。 [b]1、在代码中使用 Embed 标记 [/b]
[b][Embed(source="../assets/hello.png")] [/b]
[b]public var Hello:Class; [/b]
[b]上面的代码声明了一个 Hello 类,但由于应用了 Embed 标记,所以编译后, 编译器会把资源与 Hello 类关联起来,并把 Hello 类生成为 mx.core.BitmapAsset 类的子类(根据资源的不同,将有不会同的父类),所以可以在代码中这样使用: [/b]
[b]var myHello:Hello = new Hello() as BitmapAsset; [/b]
[b]myHello.smooting = true; // smooting 属性为 BitmapAsset 类的属性 [/b]
[b] [/b][b]2、代码 CSS 和 MXML 中使用 Embed 标记 [/b]
[b]下面分别是在 CSS 和 MXML 中使用 Embed 标签的代码: [/b]
[b]CSS: [/b]
[b]Application { [/b]
[b] backgroundImage:Embed(source="../assets/hello.png" ); [/b]
[b]} [/b]
[b]MXML: [/b]
[b] [/b]
[b] [/b]
[b]上面的两段代码看起来 Embed 没有与相关的类关联,但我想 FLEX 编辑器把生成一个匿名类,然后把生成的类设置给属性或样式 [/b]
[b] [/b][b]Embed 标记除了 source 参数外,还有其他参数,如果是图片资源,可以设置 scaleGridTop、scaleGridLeft、scaleGridRight、scaleGridBottom 四个参数,如果资源为 swf,可以设置 symbol 参数。 [/b]
[b]scaleGridTop、scaleGridLeft 等参数是配制一种叫做 9 切片的缩放技术,就是把图片切成 9 块,如下图: [/b]
[b](原图是[/b][b] [/b]
[b] [/b][b],5 * 5 方格图,每个方格 4 个像素,上图是被放大后的效果) [/b]
[b]上图在四条红线的位置把图片块成的 9 块,四个角,四条边和中间一块,在缩放的时候,四个角始终不变,两条横向边只缩放宽度,高度不变,两条纵向的边只缩放高度,宽度不变,中间一块宽和高同时 缩放,这就是 9 切片缩放的原理。使用这种技术一般是在使用图片做控件的皮肤时使用,很多控件的样式四个角是圆的或不规则的,所以使用这种缩放技术可以保证控件与图片的大 小不一致的时候,图片看起来也不变形。 [/b]
[b]上面图片的交图对 Embed 标签的设置是: [/b]
[b]Embed(source="../assets/msk.gif", scaleGridTop="4", scaleGridLeft="4", scaleGridRight="16", scaleGridBottom="16"); [/b]
[b]symbol 属性配全 swf 资源一起使用,symbol 属性是设置为 swf 里面的 MovieClip 对象的名称,就是指定资源只使用 swf 中特定的 MovieClip 对象。 [/b]
[b] [/b][b]看这两个例子: [/b]
[b]1. [/b]
[b]2. [/b]
[b]区别在于: [/b]
[b]#1中的1.png会被编译进入主swf从而增大发布文件的体积。[/b][b] [/b]
[b]#2中的图片会在运行时被加载,图片不会被编译进入主swf。 [/b]
[b]#1的优点是图片载入没有延时。 [/b]
[b]#2的优点是节省swf体积,与普通html页面载入图片一样。 [/b]
[b]所以根据需要善用好embed与url可以有效的控制我们主swf的大小。 [/b]
[b] [/b][b]在[/b][b] [/b][b]Flex[/b][b] [/b][b]的很多组件,都有icon属性,在设计时对其设置后,在mxml代码里会产生如下代码: [/b]
[b]icon="@[/b][b] [/b][b]Embed[/b][b] [/b][b]('join.GIF')" [/b]
[b]而在某些时候,可能需要在mx script中动态改变icon属性,这个时候显示有些麻烦,比如设置一个Panel的icon属性,Panel.icon=null是可以正确去掉Panel的icon图片,而设置icon图片时,可以使用下面的办法: [/b]
[b] 先加下面的代码,一个mxml文件里可以多个标签。 [/b]
[b] [/b]
[b] [/b]
[b] [/b]
[b]嵌入资源的利处: [/b]
1、比起在运行时访问资源,对嵌入资源的访问速度更加快速;
2、可以用简单的变量访问方式,在多个地方引用所嵌入的资源。这是变量就代表资源,提高写代码的效率;
[b]嵌入资源的弊处: [/b]
1、增大了SWF文件的大小,因为是将资源直接包含;
2、由于SWF文件增大,将使得初始化的速度变慢;
3、当资源改变后,需要重新编译SWF文件;
例子1:一个简单的嵌入资源的例子:
以上粗体部分,使用了@ Embed ()指令,将logo.gif这个图片直接嵌入到程序中,作为Button按钮的Icon图标。
例子2:用变量引用嵌入的资源
ADOBE FLEX 3 BETA 2
以上粗体部分,表示将logo.gif图片嵌入,并让变量imgCls可以引用该资源。[ Bindable ]表示该变量imgCls是可以被数据绑定的。之后,就可以在多个地方引用该嵌入资源的变量(见红色粗体)。
另外也可以通过 Embed ()指令, [b]在样式表中嵌入资源[/b][b] [/b],这通常是在设置UI组件的皮肤时候使用。如下代码:
.myCustomButton {
overSkin : [b]Embed[/b][b] [/b][b](source="overIconImage.gif");[/b][b] [/b]
upSkin : [b]Embed[/b][b] [/b][b](source="upIconImage.gif"); [/b]
downSkin : [b]Embed[/b][b] [/b][b](source="downIconImage.gif");[/b][b] [/b]
}
Style Def" styleName="myCustomButton"/>
以上代码表示在按钮的常态(up)、鼠标悬停(over)、鼠标按下(down)的状态,使用不同的皮肤。 overSkin、 upSkin、 downSkin 是Button的对应状态下的皮肤属性。 [b]1、在代码中使用 Embed 标记 [/b]
[b][Embed(source="../assets/hello.png")] [/b]
[b]public var Hello:Class; [/b]
[b]上面的代码声明了一个 Hello 类,但由于应用了 Embed 标记,所以编译后, 编译器会把资源与 Hello 类关联起来,并把 Hello 类生成为 mx.core.BitmapAsset 类的子类(根据资源的不同,将有不会同的父类),所以可以在代码中这样使用: [/b]
[b]var myHello:Hello = new Hello() as BitmapAsset; [/b]
[b]myHello.smooting = true; // smooting 属性为 BitmapAsset 类的属性 [/b]
[b] [/b][b]2、代码 CSS 和 MXML 中使用 Embed 标记 [/b]
[b]下面分别是在 CSS 和 MXML 中使用 Embed 标签的代码: [/b]
[b]CSS: [/b]
[b]Application { [/b]
[b] backgroundImage:Embed(source="../assets/hello.png" ); [/b]
[b]} [/b]
[b]MXML: [/b]
[b] [/b]
[b] [/b]
[b]上面的两段代码看起来 Embed 没有与相关的类关联,但我想 FLEX 编辑器把生成一个匿名类,然后把生成的类设置给属性或样式 [/b]
[b] [/b][b]Embed 标记除了 source 参数外,还有其他参数,如果是图片资源,可以设置 scaleGridTop、scaleGridLeft、scaleGridRight、scaleGridBottom 四个参数,如果资源为 swf,可以设置 symbol 参数。 [/b]
[b]scaleGridTop、scaleGridLeft 等参数是配制一种叫做 9 切片的缩放技术,就是把图片切成 9 块,如下图: [/b]
[b](原图是[/b][b] [/b]
[b] [/b][b],5 * 5 方格图,每个方格 4 个像素,上图是被放大后的效果) [/b]
[b]上图在四条红线的位置把图片块成的 9 块,四个角,四条边和中间一块,在缩放的时候,四个角始终不变,两条横向边只缩放宽度,高度不变,两条纵向的边只缩放高度,宽度不变,中间一块宽和高同时 缩放,这就是 9 切片缩放的原理。使用这种技术一般是在使用图片做控件的皮肤时使用,很多控件的样式四个角是圆的或不规则的,所以使用这种缩放技术可以保证控件与图片的大 小不一致的时候,图片看起来也不变形。 [/b]
[b]上面图片的交图对 Embed 标签的设置是: [/b]
[b]Embed(source="../assets/msk.gif", scaleGridTop="4", scaleGridLeft="4", scaleGridRight="16", scaleGridBottom="16"); [/b]
[b]symbol 属性配全 swf 资源一起使用,symbol 属性是设置为 swf 里面的 MovieClip 对象的名称,就是指定资源只使用 swf 中特定的 MovieClip 对象。 [/b]
[b] [/b][b]看这两个例子: [/b]
[b]1. [/b]
[b]2. [/b]
[b]区别在于: [/b]
[b]#1中的1.png会被编译进入主swf从而增大发布文件的体积。[/b][b] [/b]
[b]#2中的图片会在运行时被加载,图片不会被编译进入主swf。 [/b]
[b]#1的优点是图片载入没有延时。 [/b]
[b]#2的优点是节省swf体积,与普通html页面载入图片一样。 [/b]
[b]所以根据需要善用好embed与url可以有效的控制我们主swf的大小。 [/b]
[b] [/b][b]在[/b][b] [/b][b]Flex[/b][b] [/b][b]的很多组件,都有icon属性,在设计时对其设置后,在mxml代码里会产生如下代码: [/b]
[b]icon="@[/b][b] [/b][b]Embed[/b][b] [/b][b]('join.GIF')" [/b]
[b]而在某些时候,可能需要在mx script中动态改变icon属性,这个时候显示有些麻烦,比如设置一个Panel的icon属性,Panel.icon=null是可以正确去掉Panel的icon图片,而设置icon图片时,可以使用下面的办法: [/b]
[b] 先加下面的代码,一个mxml文件里可以多个标签。 [/b]
[b] [/b]
[b] [/b]
[b] [/b]