Flex3 快速入門:嵌入應用程式資源

 from:http://www.airia.cn/FLEX_Directory/embedding_assets/

Flex3 快速入門:嵌入應用程式資源[ 來源：Adobe.com ]
[ 作者：Adobe devnet ]
[ 日期：08-07-31 ]
[ 瀏覽：1328
次]

 可以在 Adobe Flex 應用程式中嵌入各種類型的資源。 內嵌資源被編譯到 Flex 應用程式的 SWF 檔案中。 它們不是在運行時載入的, 您並非必須使用您的應用程式部署原始資源檔。

提示: 嵌入資源的另一種方法是在運行時載入它們。 在運行時載入的資源必須使用您的應用程式進行部署, 因為它們沒有被編譯到您的應用程式中。 這具有保持 Flex 應用程式的檔案大小更小和縮短其初始載入時間的優點。

可以嵌入具有 PNG、JPEG 和 GIF 檔案格式的映像, SWF 檔案, 具有 MP3 檔案格式的音效檔, SVG 檔案和字型。 下列主題描述如何嵌入這些資源:

映像 (多個執行個體)
映像 (單一執行個體)
使用 scale-9 展開的映像
用於與 CSS 和外觀一起使用的映像
SWF 檔案
SWF 庫資源
音效檔
SVG 檔案
字型

內嵌影像 (多個執行個體) 可以在 Flex 應用程式中嵌入具有 PNG、JPEG 或 GIF 檔案格式的映像並建立它的一個或多個執行個體。

此樣本使用 [Embed] 中繼資料標籤在您的應用程式中內嵌影像並將它與可綁定的 ActionScript 類相關聯。 接著它將
Image 控制項的 source 屬性綁定到 Logo 類。 可以將 Logo 類綁定到採用某個映像的任何組件屬性, 比如 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>

結果

下載原始碼

 內嵌影像 (單一執行個體)

可以使用線上 @Embed 指令在 Flex 應用程式中嵌入只希望顯示一次的映像。

此樣本將一個映像組件添加到一個應用程式中並使用其 source 屬性中的 @Embed 指令。 若要在另一個 Image 控制項中使用這一相同的映像, 則還必須將它嵌入到該組件中。 如果希望顯示嵌入的映像的多個執行個體, 請使用 [Embed]中繼資料標籤。

樣本

<?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 伸縮的映像

您可以將某個影像檔嵌入到您的 Flex 應用程式並以類似組件的方式智能地縮放它。 通過使用 scale-9 功能,
您的映像的四個角根本沒有縮放, 水平邊框僅在水平方向上縮放, 而垂直邊框僅在垂直方向上縮放。 例如, 這對於以下情況很有用:
建立使用圓角的框, 或在您希望在縮放組件時保持邊框清晰的位置進行組件樣式調整。

此樣本使用 Embed 中繼資料標籤的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和 scaleGridRight 網格線位置屬性來建立您的 scale-9 網格。

提示: 獲得網格線位置的值的一種比較容易的方法是將指南與 Adobe Photoshop 中的 Rectangular Marquee 工具和 Info 選項板一起使用。

提示:
旋轉嵌入的 scale-9 映像的執行個體會關閉該映像的 scale-9 以在將來進行任意大小轉換。

樣本


<?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 應用程式中內嵌影像並將它用於設定組件的外觀。

您可以定義一個 CSS 類型選取器為給出類型的所有組件設定外觀。 在此樣本中, 您為 Button 控制項建立了一個類型選取器。
類型選取器通過使用 Embed指定這些映像用作您的組件的外觀屬性。 您還可以定義一個類別選取器來建立可作為樣式應用到特定組件的自訂 CSS 類。

提示: 類別選取器建立可用來設定單獨的組件的樣式的已命名樣式類, 方法是通過使用 styleName 屬性將類別選取器分配給該組件。 類型選取器為給出類型的所有組件設定樣式, 如下面的樣本所示。

樣本

<?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 檔案的執行個體當作 MovieClip 類的執行個體處理。 (它們實際上是 MovieClipAsset 類的子類, MovieClipAsset 類是 MovieClip 類的子類。)

注意: 您無法直接存取嵌入的 SWF 檔案的屬性或方法。 但是, 您可以使用 LocalConnection 以允許它們進行通訊。

樣本

<?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 庫資源

您可以在應用程式中嵌入來自現有 SWF 庫中的特定符號。 Flash 定義三種類型的符號: Button、MovieClip 和
Graphic。 您可以在 Flex 應用程式中嵌入 Button 和 MovieClip 符號, 但您不能嵌入 Graphic 符號,
因為無法為 ActionScript 匯出 Graphic 符號。

此樣本使用 [Embed] 中繼資料標籤的 source 屬性來指定包含您的庫的 SWF 檔案, 並使用 [Embed] 中繼資料標籤的 symbol 屬性來指定您要在該庫中嵌入的符號的連結 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 應用程式中通過使用 [Embed] 中繼資料標籤嵌入 MP3 檔案並播放它。

注意: 記住嵌入的音效檔會成為您的應用程式 (最終的 SWF 檔案) 的一部分, 而 MP3 檔案會很大, 從而會使您的應用程式變得很大並會對應用程式的下載速度產生負面影響。

此執行個體將該 MP3 的一個新執行個體建立為一個 SoundAsset。它使用 SoundAsset 類的 play() 方法來播放 MP3
檔案的執行個體, 並儲存返回的 SoundChannel 對象, 從而您可以稍後調用 SoundChannel 對象的 stop()
方法以結束播放。

樣本

<?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 應用程式中。

嵌入 SVG 檔案與內嵌影像幾乎是相同的。 差別在於您可以將嵌入的 SVG 檔案的執行個體當作 Sprite 類的執行個體處理。 (它們實際上是
SpriteAsset 類的執行個體, SpriteAsset 類是 Sprite 類的子類。) 嵌入的 SVG 檔案還保留它們的向量屬性,
且在被縮放或轉換時不會顯示像素。

注意: 不能在運行時匯入 SVG 檔案；僅可以在編譯時間在 Flex 應用程式中嵌入它們。

樣本

<?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 應用程式並從操作功能表中選擇“查看原始碼

”。

提示: SVG 青娃圖形是 Architetto Francesco Rollandin 建立的, 他慷慨地將它發布到 Open Clip Art Library 的公用地區中。 您可以在網站找到其他可免費使用和實驗的 SVG 檔案。
返回頂部

嵌入字型

您希望在 Flex 應用程式中嵌入一種字型並將它用作基於文本的組件的樣式。

下面的樣本建立引用嵌入的字型的 font-family 名稱的一個類別選取器。 接著它會建立一個 Text 控制項並將其樣式設定為該類別選取器。

提示: 您在嵌入字型以節省檔案大小時僅可以從字型添加某些字元, 方法是指定您的 @font-face 聲明的 unicode-range 屬性。

詳細資料: 有關使用字型的詳細資料, 請參閱 Flex 2 開發人員指南*中的“使用字型”。

樣本

<?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 應用程式並從操作功能表中選擇“查看原始碼

”。