入應(yīng)用程序資源
可以在 Adobe? Flex? 應(yīng)用程序中嵌入各種類型的資源。 嵌入的資源被編譯到 Flex 應(yīng)用程序的 SWF 文件中。 它們不是在運(yùn)行時(shí)加載的, 您并非必須使用您的應(yīng)用程序部署原始資源文件。
提示: 嵌入資源的另一種方法是在運(yùn)行時(shí)加載它們。 在運(yùn)行時(shí)加載的資源必須使用您的應(yīng)用程序進(jìn)行部署, 因?yàn)樗鼈儧](méi)有被編譯到您的應(yīng)用程序中。 這具有保持 Flex 應(yīng)用程序的文件大小更小和縮短其初始加載時(shí)間的優(yōu)點(diǎn)。
可以嵌入具有 PNG、JPEG 和 GIF 文件格式的圖像, SWF 文件, 具有 MP3 文件格式的聲音文件, SVG 文件和字體。 下列主題描述如何嵌入這些資源:
圖像 (多個(gè)實(shí)例)
圖像 (單一實(shí)例)
使用 scale-9 拉伸的圖像
用于與 CSS 和外觀一起使用的圖像
SWF 文件
SWF 庫(kù)資源
聲音文件
SVG 文件
字體
嵌入圖像 (多個(gè)實(shí)例) 可以在 Flex 應(yīng)用程序中嵌入具有 PNG、JPEG 或 GIF 文件格式的圖像并創(chuàng)建它的一個(gè)或多個(gè)實(shí)例。
此示例使用 [Embed] 元數(shù)據(jù)標(biāo)簽在您的應(yīng)用程序中嵌入圖像并將它與可綁定的 Action
script 類相關(guān)聯(lián)。 接著它將 Image 控件的 source 屬性綁定到 Logo 類。 可以將 Logo 類綁定到采用某個(gè)圖像的任何組件屬性, 比如 Button 控件的 icon 屬性。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingImages/index.html"
layout="horizontal" width="350" height="250"
>
<mx:
script>
<![CDATA[
[Embed(source="assets/logo.png")]
[Bindable]
public var Logo:Class;
]]>
</mx:
script>
<mx:Image id="myLogo" source="{Logo}"/>
<mx:Image id="myLogo2" source="{Logo}"/>
</mx:Application>
嵌入圖像 (單一實(shí)例) 可以使用線上 @Embed 指令在 Flex 應(yīng)用程序中嵌入只希望顯示一次的圖像。
此示例將一個(gè)圖像組件添加到一個(gè)應(yīng)用程序中并使用其 source 屬性中的 @Embed 指令。 若要在另一個(gè) Image 控件中使用這一相同的圖像, 則還必須將它嵌入到該組件中。 如果希望顯示嵌入的圖像的多個(gè)實(shí)例, 請(qǐng)使用 [Embed]元數(shù)據(jù)標(biāo)簽。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
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>
嵌入使用 scale-9 伸縮的圖像 您可以將某個(gè)圖像文件嵌入到您的 Flex 應(yīng)用程序并以類似組件的方式智能地縮放它。 通過(guò)使用 scale-9 功能, 您的圖像的四個(gè)角根本沒(méi)有縮放, 水平邊框僅在水平方向上縮放, 而垂直邊框僅在垂直方向上縮放。 例如, 這對(duì)于以下情況很有用: 創(chuàng)建使用圓角的框, 或在您希望在縮放組件時(shí)保持邊框清晰的位置進(jìn)行組件樣式調(diào)整。
此示例使用 Embed 元數(shù)據(jù)標(biāo)簽的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和 scaleGridRight 網(wǎng)格線位置屬性來(lái)創(chuàng)建您的 scale-9 網(wǎng)格。
提示: 獲得網(wǎng)格線位置的值的一種比較容易的方法是將指南與 Adobe? Photoshop? 中的 Rectangular Marquee 工具和 Info 選項(xiàng)板一起使用。

提示: 旋轉(zhuǎn)嵌入的 scale-9 圖像的實(shí)例會(huì)關(guān)閉該圖像的 scale-9 以在將來(lái)進(jìn)行任意大小轉(zhuǎn)換。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
viewSourceURL="src/EmbeddingImagesScale9/index.html"
layout="vertical" width="400" height="480"
>
<mx:
script>
<![CDATA[
[Embed(
source="assets/fancy_border.png",
scaleGridTop="55", scaleGridBottom="137",
scaleGridLeft="57", scaleGridRight="266"
)]
[Bindable]
public var FancyBorderImage:Class;
]]>
</mx:
script>
<mx:Image source="{FancyBorderImage}" width="146" height="82"/>
<mx:Image source="{FancyBorderImage}" width="266" height="150"/>
<mx:Image source="{FancyBorderImage}" width="325" height="183"/>
</mx:Application>
使用 CSS 為外觀嵌入圖像 您可以在 Flex 應(yīng)用程序中嵌入圖像并將它用于設(shè)置組件的外觀。
您可以定義一個(gè) CSS 類型選擇器為給出類型的所有組件設(shè)置外觀。 在此示例中, 您為 Button 控件創(chuàng)建了一個(gè)類型選擇器。 類型選擇器通過(guò)使用 Embed指定這些圖像用作您的組件的外觀屬性。 您還可以定義一個(gè)類選擇器來(lái)創(chuàng)建可作為樣式應(yīng)用到特定組件的自定義 CSS 類。
提示: 類選擇器創(chuàng)建可用來(lái)設(shè)置單獨(dú)的組件的樣式的已命名樣式類, 方法是通過(guò)使用 styleName 屬性將類選擇器分配給該組件。 類型選擇器為給出類型的所有組件設(shè)置樣式, 如下面的示例所示。
示例
<?xml version="1.0" encoding="utf-8"?>
<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 文件嵌入 SWF 文件與嵌入圖像幾乎是相同的。 差別在于您可以將嵌入的 SWF 文件的實(shí)例當(dāng)作 MovieClip 類的實(shí)例處理。 (它們實(shí)際上是 MovieClipAsset 類的子類, MovieClipAsset 類是 MovieClip 類的子類。)
注意: 您無(wú)法直接訪問(wèn)嵌入的 SWF 文件的屬性或方法。 但是, 您可以使用 LocalConnection 以允許它們進(jìn)行通信。
示例
<?xml version="1.0" encoding="utf-8"?>
<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>
<![CDATA[
[Embed(source="assets/hourglass.swf")]
[Bindable]
public var Hourglass:Class;
]]>
</mx:
script>
<mx:Image id="hourglass" source="{Hourglass}"/>
</mx:Application>
嵌入 SWF 庫(kù)資源 您可以在應(yīng)用程序中嵌入來(lái)自現(xiàn)有 SWF 庫(kù)中的特定符號(hào)。 Flash 定義三種類型的符號(hào): Button、MovieClip 和 Graphic。 您可以在 Flex 應(yīng)用程序中嵌入 Button 和 MovieClip 符號(hào), 但您不能嵌入 Graphic 符號(hào), 因?yàn)闊o(wú)法為 Action
script 導(dǎo)出 Graphic 符號(hào)。
此示例使用 [Embed] 元數(shù)據(jù)標(biāo)簽的 source 屬性來(lái)指定包含您的庫(kù)的 SWF 文件, 并使用 [Embed] 元數(shù)據(jù)標(biāo)簽的 symbol 屬性來(lái)指定您要在該庫(kù)中嵌入的符號(hào)的鏈接 ID。
示例
<?xml version="1.0" encoding="utf-8"?>
<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>
<![CDATA[
[Embed(source="assets/library.swf", symbol="BadApple")]
[Bindable]
public var BadApple:Class;
[Embed(source="assets/library.swf", symbol="Pumpkin")]
[Bindable]
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 應(yīng)用程序中通過(guò)使用 [Embed] 元數(shù)據(jù)標(biāo)簽嵌入 MP3 文件并播放它。
注意: 記住嵌入的聲音文件會(huì)成為您的應(yīng)用程序 (最終的 SWF 文件) 的一部分, 而 MP3 文件會(huì)很大, 從而會(huì)使您的應(yīng)用程序變得很大并會(huì)對(duì)應(yīng)用程序的下載速度產(chǎn)生負(fù)面影響。
此實(shí)例將該 MP3 的一個(gè)新實(shí)例創(chuàng)建為一個(gè) SoundAsset。它使用 SoundAsset 類的 play() 方法來(lái)播放 MP3 文件的實(shí)例, 并存儲(chǔ)返回的 SoundChannel 對(duì)象, 從而您可以稍后調(diào)用 SoundChannel 對(duì)象的 stop() 方法以結(jié)束播放。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="center" viewSourceURL="srcEmbeddingSoundFiles/index.html">
<mx:
script>
<![CDATA[
import mx.core.SoundAsset;
import flash.media.*;
[Embed(source="assets/pie-yan-knee.mp3")]
[Bindable]
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>
<![CDATA[<a href="
http://derekaudette.ottawaarts.com/music.php">Pie-Yan-Knee Written and Performed by: Derek R. Audette ? 2004 (Creative Commons Attribution License)</a>]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
嵌入 SVG 文件 可以將 SCG 文件嵌入到 Flex 應(yīng)用程序中。
嵌入 SVG 文件與嵌入圖像幾乎是相同的。 差別在于您可以將嵌入的 SVG 文件的實(shí)例當(dāng)作 Sprite 類的實(shí)例處理。 (它們實(shí)際上是 SpriteAsset 類的實(shí)例, SpriteAsset 類是 Sprite 類的子類。) 嵌入的 SVG 文件還保留它們的矢量屬性, 且在被縮放或轉(zhuǎn)換時(shí)不會(huì)顯示像素。
注意: 不能在運(yùn)行時(shí)導(dǎo)入 SVG 文件;僅可以在編譯時(shí)在 Flex 應(yīng)用程序中嵌入它們。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="horizontal"
viewSourceURL="srcEmbeddingSvgFiles/index.html"
width="600" height="470"
>
<mx:
script>
<![CDATA[
[Embed(source="assets/frog.svg")]
[Bindable]
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 應(yīng)用程序中嵌入一種字體并將它用作基于文本的組件的樣式。
下面的示例創(chuàng)建引用嵌入的字體的 font-family 名稱的一個(gè)類選擇器。 接著它會(huì)創(chuàng)建一個(gè) Text 控件并將其樣式設(shè)置為該類選擇器。
提示: 您在嵌入字體以節(jié)省文件大小時(shí)僅可以從字體添加某些字符, 方法是指定您的 @font-face 聲明的 unicode-range 屬性。
詳細(xì)信息: 有關(guān)使用字體的詳細(xì)信息, 請(qǐng)參閱 Flex 2 開(kāi)發(fā)人員指南*中的“使用字體”。
示例
<?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%"/>
posted on 2007-02-28 17:03
???MengChuChen 閱讀(258)
評(píng)論(0) 編輯 收藏