读书人

Flex Embed标签的施用

发布时间: 2012-10-13 11:38:17 作者: rapoo

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

读书人网 >flex

热点推荐