Embed


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

猜你喜欢

转载自meiyang.iteye.com/blog/1573668
今日推荐