Flex Embed标签的使用

在FLEX里,你能够插入不同类型的资源,你能够插入PNG,JPEG,GIF文件格式的图片,SWF文件,以及MP3,SVG文件.

 

下面我们来介绍如何插入文件：

一、插入图片：

这个实例是用[Embed]标签在你的的程序里插入图片。 

它用[Bindable]标签绑定为一个AS类，这样就可以绑定在图片控件的SOURCE属性中，你可以绑定这个类于任合用图片的属性中。

例如按钮的ICON属性

源文件：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
       <![CDATA[
           [Embed(source="assets/001.png")]
           [Bindable]
           public var logo:Class
       ]]>
    </mx:Script>
    <mx:Image id="myLogo" source="{logo}"/>
</mx:Application>

 

你能够用@Embed在你的FLEX程序中插入图片

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="200" height="200">
    <mx:Image source="@Embed(source='assets/002.png')"/>
</mx:Application>

 

图片使用the 9-slice scaling feature在你的FLEX插入图片时，你可以自由缩放图片。用the 9-slice scaling feature，这四个角的图形大小不变，只是改变横，竖方向的大小。

 

下面的例子，用scaleGridTop,scaleGridBottom,scaleGridLeftandscaleGridRight网格线定位属性，创建你的9-slice scaling grid.

源文件：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="480">
    <mx:Script>
       <![CDATA[
           [Embed(
               source="assets/bk.jpg",
               scaleGridTop="100",scaleGridBottom="120",
               scaleGridLeft="150",scaleGridRight="266"              
           )]
           [Bindable]
           public var aImage:Class
       ]]>
    </mx:Script>
    <mx:Image source="{aImage}" width="146" height="82"/>
    <mx:Image source="{aImage}" width="266" height="150"/>
    <mx:Image source="{aImage}" width="325" height="183"/>   
</mx:Application>

 

二、嵌入SWF文件

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
       <![CDATA[
           [Embed(source=("assets/loud.swf"))]
           [Bindable]
           public var aa:Class;
       ]]>
    </mx:Script>
    <mx:Image id="img" source="{aa}"/>
</mx:Application>

 

三、嵌入图像做为CSS皮肤：

你可以使用嵌入图片做为你的FLEX皮肤。

源文件：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Style>
       Button
       {
          upSkin:Embed("assets/001.png");
          overSkin:Embed("assets/002.png");
          downSkin:Embed("assets/003.png");
       }
    </mx:Style>
    <mx:Button x="100" y="100"/>
</mx:Application>

 

四、嵌入SWF文件里的可导出的类文件

在m.swf里有两个可以导出的类文件，mc1,及mc2

源文件如下：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
       <![CDATA[
           [Embed(source="assets/m.swf",symbol="mc1")]
           [Bindable]
           public var aa:Class;
           [Embed(source="assets/m.swf",symbol="mc2")]
           [Bindable]
           public var bb:Class;          
       ]]>
    </mx:Script>
    <mx:Image id="mc01" source="{aa}" width="100" height="100"/>
    <mx:Image id="mc02" source="{bb}" width="100" height="100"/>
</mx:Application>

 

五、嵌入声音文件

使用[Embed]你能够嵌入一个声音文件在你的FLEX程序中。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
       <![CDATA[
           import mx.core.SoundAsset;
           import flash.media.*
           [Embed(source="assets/CottonSwabPhilosophy_DerekRAudette.mp3")]
           [Bindable]
           public var Song:Class;
           public var mySong:SoundAsset=new Song() as SoundAsset;
           public var channel:SoundChannel;
           public function playSound():void
           {
			  stopSound();
			  channel=mySong.play();
           }
           public function stopSound():void
           {
              if(channel!=null)channel.stop();
           }
          
       ]]>
    </mx:Script>
    <mx:Button label="play" click="playSound()"/>
    <mx:Button label="stop" click="stopSound()"/>
</mx:Application>

 

六、嵌入字体：

你想在你的FLEX程序里嵌入字体

源文件：

<?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>