天梯梦 发表于 2013-2-7 19:09:31

使用@Embed嵌入元素

以在Flex应用程序中嵌入各种元素。被嵌入的元素将编译进SWF文件。它们不是在运行时载入的,所以不必为应用程序部署原元素。
 
可以嵌入的图像格式有PNG、JPEG、GIF。嵌入后可以同时使用它的多个实例。

下面的例子使用原标签经image嵌入应用程序,并且采用绑定ActionScript类的形式。这就可以绑定Image控件的source属性到Logo类。可以绑定Logo类到任何可以使用image的组件属性上,比如Button控件的icon属性。
例子:

<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><mx:Application    xmlns:mx="http://www.adobe.com/2006/mxml"    viewSourceURL="src/EmbeddingImages/index.html"    layout="horizontal" width="350" height="250">      <mx:Script>      <!                        public var Logo:Class;                  ]]>    </mx:Script>    <mx:Image id="myLogo" source="{Logo}"/>    <mx:Image id="myLogo2" source="{Logo}"/></mx:Application> 
-----------------------------------------------------------------

如果想只使用一个实例的话,可以使用内部@Embed直接将图像嵌入Flex应用程序。

下面的例子添加了一个Image组件,并且使用@Embed直接定业了它的source属性。要使用相同的image,就必须再次将此image嵌入到那个组件中。

如果想显示一个嵌入image的多个实例,可以用原标签代替。

例子:

<?xml version="1.0" encoding="utf-8"?><mx:Application<!-- http://yecon.blog.hexun.com/29628260_d.html -->    xmlns:mx="http://www.adobe.com/2006/mxml"    viewSourceURL="src/EmbeddingAnImage/index.html"    width="200" height="240">    <mx:Image id="myLogo" source="@Embed('assets/logo.png')"/></mx:Application>  -----------------------------------------------------------------

可以在Flex应用程序中嵌入image,并且可以将它应用于组件的皮肤。可以定义一个CSS选择器,以设置所有组件的皮肤。

在下面的例子中,为Button控件创建了一个CSS选择器。

例子:

<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><mx:Application    xmlns:mx="http://www.adobe.com/2006/mxml"    viewSourceURL="src/EmbeddingImagesCSS/index.html"    layout="horizontal" width="270" height="100"    horizontalAlign="center" verticalAlign="middle">    <mx:Style>      Button      {            upSkin: Embed("assets/box_closed.png");            overSkin: Embed("assets/box.png");            downSkin: Embed("assets/box_new.png");      }    </mx:Style>      <mx:Button/>      <mx:Text text="Roll over and click the box!"/></mx:Application> -----------------------------------------------------------------

嵌入SWF文件的方法与嵌入IMAGE的方法差不多,只是可以把已嵌入的SWF文件实例当做MovieClip类。

(不可直接访问嵌入SWF文件的属性和方法,但是可以使用LocalConnection来允许他们之间的通信)

 
例子:

<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><mx:Application    xmlns:mx="http://www.adobe.com/2006/mxml"   viewSourceURL="src/EmbeddingSwfFiles/index.html"    layout="horizontal" width="290" height="290"    horizontalAlign="center" verticalAlign="middle" >    <mx:Script>    <!                        public var Hourglass:Class;                  ]]>    </mx:Script>    <mx:Image id="hourglass" source="{Hourglass}"/></mx:Application> -----------------------------------------------------------------

可以嵌入存在于应用程序的SWF文件库里的特殊标签。

Flash定义了三种类型的标签:Button、MovieClip、Graphic。可以嵌入Button和MovieClip标签到Flex应用程序,但是不不能嵌入Graphic标签。
 

例子:

<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><mx:Application    xmlns:mx="http://www.adobe.com/2006/mxml"    viewSourceURL="src/EmbeddingSwfLibraryAssets/index.html"    layout="horizontal" width="450" height="240"    horizontalAlign="center" verticalAlign="bottom">   <mx:Script>    <!                        public var BadApple:Class;                                                public var Pumpkin:Class;                              ]]>    </mx:Script>    <mx:Image id="badApple" source="{BadApple}" width="150" height="151.8"/>    <mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>    </mx:Application> 
 -----------------------------------------------------------------

可以通过使用原标签的方法在Flex应用程序中嵌入MP3文件。

 
例子:

<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    layout="vertical" horizontalAlign="center" verticalAlign="center"    viewSourceURL="srcEmbeddingSoundFiles/index.html">    <mx:Script>      <!                        public var Song:Class;            public var mySong:SoundAsset = new Song() as SoundAsset;            public var channel:SoundChannel;                        public function playSound():void            {                // Make sure we don't get multiple songs playing at the same time                stopSound();                              // Play the song on the channel                channel = mySong.play();            }                        public function stopSound():void            {                // Stop the channel, but only if it exists                if ( channel != null ) channel.stop();            }      ]]>    </mx:Script>      <mx:HBox>      <mx:Button label="play" click="playSound();"/>      <mx:Button label="stop" click="stopSound();"/>            </mx:HBox>      <mx:Text width="348" textAlign="center" color="#ffffff">      <mx:htmlText>            <!]>      </mx:htmlText>    </mx:Text>    </mx:Application>  
-----------------------------------------------------------------

可以在Flex应用程序中嵌入SVG文件

 
例子:


<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><mx:Application    xmlns:mx="http://www.adobe.com/2006/mxml"    layout="horizontal"    viewSourceURL="srcEmbeddingSvgFiles/index.html"    width="600" height="470">    <mx:Script>    <!                        public var SvgFrog:Class;                  ]]>    </mx:Script>    <mx:Image id="smallFrog" source="{SvgFrog}" width="128" height="130"/>    <mx:Image id="largeFrog" source="{SvgFrog}"/></mx:Application> -----------------------------------------------------------------

可以在Flex应用程序中嵌入字体

 
例子:

<?xml version="1.0" encoding="utf-8"?><!-- http://yecon.blog.hexun.com/29628260_d.html --><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>  
页: [1]
查看完整版本: 使用@Embed嵌入元素