在Flash中嵌入元數據標籤

參考:http://www.eb163.com/wiki/index.php?doc-view-424.html

 

這篇文章描述了在Adobe Flash CS4專業版中怎麼利用[Embed]元數據標籤來嵌入不同類型的媒體、數據和圖片資源。文章提供了多個例子關於怎麼鏈接和現實元數據信息,並討論了在你的工程中加入元數據標籤有用的多種原因。

元數據在Flash CS4以前的版本中是不支持的。這對於在Flex中寫代碼然後嘗試在Flash中編譯的人會產生一些問題。在Flash CS4中使用元數據標籤的主要優勢之一就是她簡化了Flex-Flex的工作流程。  

目錄

[顯示全部]

 

基本要求 回目錄


爲了能夠完成這篇文章中的示例,你需要如下軟件和文件:

Flash CS4 Professional; Flex 3 SDK

示例文件: http://download.macromedia.com/pub/developer/embed_metadata.zip (ZIP, 390K)


 

儲備知識 回目錄

建議有AS3編程經驗,使用Flash創作環境,Flex3 SDK環境的也是有幫助的。

這項工作採用授權方式爲: Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License


 

關於作者 回目錄

Tareq AlJaber是Adobe的一位軟件質量工程師,他專注於Flash-Flex工作流程以及編譯特性。在進入Adobe之前,他在一個製造工作制作3D動畫,爲Jordan Television創立了虛擬實驗室。Tareq在 Jordan University獲得了計算機科學學位,並獲得了 Cal State East Bay University的MBA。在他的空閒時間裏,Tareq喜歡看和玩足球或者籃球,並很喜歡閱讀。他最喜歡的書是Leap of Faith: Memoirs of an Unexpected Life。這是他的博客flashauthoring.blogspot.com。


嵌入GIF,PNG,JPEG,MP3文件
這一部分描述怎麼中Flash CS4專業版中利用[Embed]元數據標籤嵌入GIF,PNG,JPEG,或者MP3文件。第一個示例來看看嵌入GIF文件的過程。

如果你沒有準備好,一定要下載本文章第一頁可用的樣例文件。跟着提供的例子,解壓ZIP文件,然後打開名稱爲gif的目錄檢查示例文件:

1、選擇"文件">"新建">"Flash文件(ActionScript 3.0)"菜單,創建一個新的Flash CS4文件.

2、保存這個Flash文件爲GIFEmbed.fla.

3、選擇"文件">"新建">"ActionScript文件",來創建一個新的ActionScript文件.

4、保存ActionScript文件爲GIFEmbed.as.

5、當GIFEmbed.as是活動標籤,拷貝並粘貼如下代碼到腳本窗口:

package
{
   import flash.display.*;
   public class GIFEmbed extends Sprite
   {
       [Embed(source = "../assets/talapetra.gif")]
       private var theClass:Class;
       public function GIFEmbed ()
       {
           var displayObj:DisplayObject = new theClass();
           addChild (displayObj);
       }
   }
}
代碼中的高亮行包括了源屬性,指示了嵌入的名稱和資源的路徑。你可以使用絕對路徑或者文檔文件的相對路徑來包含嵌入的描述。在這個示例中,這個名稱爲GIFEmbed.as的ActionScript類指示了定位到命名爲assets的文件夾中,這個文件夾包含了talapetra.gif的圖片文件。

注意:[Embed]元數據標籤可以有另外一個可選屬性,mimeType,它允許你指定鏈接資源的MIME類型。我將在後面再具體的討論這個屬性。

ActionScript代碼的順序非常重要。你必須在聲明變量前添加[Embed]元數據標籤,而且這個變量的類型會是Class。在下面的代碼片段中,[Embed]元數據標籤中一個成爲theClass,類型聲明爲Class的私有變量前使用:

   [Embed(source = "../assets/talapetra.gif")] 
   private var theClass:Class;
在名稱爲GIFEmbed的函數內部,一個新的類型爲DisplayObject命名爲displayObj的變量被用來實例化theClass爲一個新的DisplayObject。下一行使用addChild方法將displayObj添加到了顯示列表當中,並在舞臺上渲染:

    var displayObj:DisplayObject = new theClass();
    addChild (displayObj);
參考示例文件,查看文件夾結構,確認GIFEmbed.as類文件和名稱爲 talapetra.gif的GIP圖片的路徑(放在assets目錄中)。

6、做了這些改變之後,保存GIFEmbed.as 。

7、點擊相應的標籤打開 GIFEmbed.fla文件。點擊舞臺,在屬性面板中查看發佈屬性。

8、在文檔類輸入框中輸入類名,將類作爲文檔類與Flash文件關聯。在這個示例中,輸入你創建的類名GIFEmbed(如圖1)。

(圖)在Flash中嵌入元數據標籤圖1

圖1:在屬性面板的文檔類框中輸入類名

9、選擇"控制">"測試影片"來測試影片。

一個錯誤信息會出現,因爲項目嘗試用了一個在Flash CS4中的特性,這需要一些額外的Flex類。Flash檢測了缺少的Flex類,並顯示如圖2的信息。

(圖)在Flash中嵌入元數據標籤圖2

 圖2:Flex SDK需求信息窗口

在這個對話框中,你有一個選項可以將路徑指向Flex SDK,但是這並不是必須瀏覽指向的,因爲路徑已經設置了。你需要做的是,點擊"更新庫路徑"按鈕來確保flex.swf的正確路徑($(FlexSDK)/frameworks/libs/flex.swf)自動地添加到當前FLAS文件的庫路徑中。

注意:在第一次運行SWF文件之後,Flex SDK需求窗口不會再出現。取而代之,你會看到編譯錯誤,看成是缺失類(如圖3)。

(圖)圖3圖3

 圖3:隨後嘗試運行SWF時編譯錯誤結果

10、點擊"更新庫路徑"按鈕將flex.swf文件從Flex SKD添加到FLA文件的庫路徑。

11、根據如下步驟,你會看到會發生什麼:

   1、選擇"文件">"發佈設置",然後點擊Flash標籤;
   2、點擊腳本下拉菜單後面的設置按鈕(如圖4);
  

(圖)在Flash中嵌入元數據標籤圖4


   圖4:在Flash標籤上,點擊設置按鈕訪問ActionScript的設置
   3、在高級AS3設置窗口中,選擇庫路徑標籤。列表包含了Flex SDK目錄中的flex.swc的路徑(如圖5)。
  

(圖)在Flash中嵌入元數據標籤圖5


   圖5:檢查flex.swf顯示在庫路徑標籤列表中
12、點擊確認按鈕關閉AS設置窗口。然後點擊確認關閉發佈設置對話框。

13、選擇"控制">"測試影片"來再次測試SWF。獨立的Flash播放器顯示了SWF文件,現在它正確地顯示了嵌入GIF文件(如圖6)。

(圖)在Flash中嵌入元數據標籤圖6

   
    圖6:SWF文件顯示了嵌入元數據源的數據
   
正如我之前提到的,[Embed]元數據標籤帶有兩個屬性: Source:(必選的)使用這個屬性來確認嵌入資源的名稱和路徑。如果你嵌入了一個元件,你可以用元件的關鍵詞確定元件認嵌入到SWF中的名字。 mimeType:(可選的)使用這個屬性來確定嵌入資源的MIME類型。如果這個屬性沒有設置,Flash會在源屬性中根據導入資源文件的擴展名載入合適的類型。

Flash CS4專業版支持與Flex一樣的一系列MIME類型:

   application/x-font
   application/x-font-truetype
   application/x-shockwave-flash
   audio/mpeg
   image/gif
   image/jpeg
   image/png
   image/svg
   image/svg-xml

在幀腳本中使用[Embed]標籤 回目錄


同前面列出的過程一樣,元數據也可以應用到幀腳本。在這段中,我會描述怎麼利用[Embed]標籤來嵌入元數據到幀腳本中。如果你跟着示例文件,請參閱目錄下的文件:

1、通過選擇"文件">"新建">"Flash文件(ActionScript 3.0)"菜單來創建一個新的Flash CS4文件;

2、將這個Flash文件保存爲GIFEmbed.fla。

3、選擇圖層1的第一幀並打開動作面板("窗口">"動作")。

4、拷貝如下代碼,並粘貼到腳本窗口:

   [Embed(source="../assets/talapetra.gif")]
   var theClass:Class;
   var displayObject:DisplayObject = new theClass();
   addChild(displayObject);
5、重複前面一個段落的10-13步測試SWF文件,並更新Flex SDK目錄庫路徑來添加flex.swc文件。


 

從SWF文件中嵌入一個元件 回目錄


在前面的段落中,我寫了使用[Embed]標籤利用GIF文件嵌入圖像的元數據的過程。顯示外部數據非常有用,但是當使用[Embed]元數據標籤是會有很多可能的情況。這個段落中會描述嵌入整個SWF文件或者一個SWF文件中的一些特殊元件的步驟。

如果你隨着下載的示例文件學習,請參閱文件夾中的文件名爲的示例 。按照如下步驟:

1、在Flash CS4中,選擇"文件">"打開",從示例文件的目錄中選擇"Movie.fla"文件。

2、選擇"窗口">"庫",打開庫面板(如果它還沒有打開的話)。

3、右鍵(或者蘋果機上Control-click)點擊庫中的"Slice9"元件,從上下文菜單中選擇"屬性"(如圖7)。

(圖)在Flash中嵌入元數據標籤圖7

 圖7:當右鍵點擊庫中的"Slice9"元件是出現的菜單中選擇"屬性"

4、在元件屬性對話框中,選擇"Export for ActionScript"選項(如果沒有被選中的話),如圖8所示。

(圖)在Flash中嵌入元數據標籤圖8

 圖8:在元件屬性對話框中檢查"Export for ActionScript"選項

注意:在這個練習中,也需要確保"Enable Guides for 9-Slice Scaling"選項被選中。

5、選擇"控制">"測試影片"來測試FLA文件。

6、關閉獨立播放器的movie.swf。也關閉Flash的movie.fla。

7、選擇"文件">"新建">"Flash文件(ActionScript 3.0)",命名爲SWFEmbed.fla。

8、選擇"文件">"新建">"ActionScript文件",命名爲SWFEmbed.as。

9、複製並粘貼如下代碼到SWFEmbed.as文件的腳本窗口中:

package
{
   import flash.display.*;
   import flash.events.MouseEvent;
   import flash.geom.Rectangle;
   public class SWFEmbed extends MovieClip
   {
       public var displayObj:DisplayObject;
       [Embed(source="Movie.swf", symbol="Slice9")]
       var theClass:Class;
       public function SWFEmbed()
       {
            displayObj = new theClass();
            addChild(displayObj);
            displayObj.x = 200;
            displayObj.y = 220;
       }
   }
}
在這段代碼中,[Embed]元數據標籤使用了source參數來確認將被嵌入的SWF文件的名稱和路徑。symbol參數來確認特殊元件的名稱,這個元件是從source參數關聯的SWF文件中嵌入的。

10、添加了代碼之後,保存ActionScript文件爲 SWFEmbed.as。

11、點擊Flash CS4中其他的標籤,激活SWFEmbed.fla標籤。在舞臺上點擊一次,在屬性檢查中查看發佈屬性。

12、在文檔類區域,輸入類名SWFEmbed,鏈接ActionScript文件到Flash文件。

13、選擇"控制">"測試影片"來在獨立播放器中查看SWF。Flex SDK Required對話框出現(如圖9)。

(圖)在Flash中嵌入元數據標籤圖9

 圖9:信息表明這個工程需要Flex SDK

14、點擊"Update Library Path"按鈕,從Flex SDK中添加flex.swc到FLA文件的庫路徑中。

15、選擇"控制">"測試影片"來再次預覽SWF,你會看到元件顯示在SWFEmbed.swf文件中(如圖10)。

(圖)在Flash中嵌入元數據標籤圖10

 圖10:在SWFEmbed.swf中顯示元件元數據

使用[Embed]標籤嵌入字體 回目錄


除了嵌入圖片文件,SWFs,還有SWFs中的元件以外,[Embed]元數據標籤還可以嵌入OpenType和TrueType字體到Flash文件中。在這個段落中,我將演示怎麼使用[Embed]元數據標籤在Flash CS4中嵌入字體。這篇文章將定你已經安裝了Arial Bold字體在你的系統中。如果你沒有這個字體,你可以從 SearchFreeFonts.com或者類似網站上購買它。

注意:[Embed]元數據標籤僅僅支持類和成員變量,如果你嘗試在函數前使用[Embed]標籤,如下的編譯錯誤將會顯示: "Embed is only supported on classes and member variables."(Embed僅僅支持類和成員變量)

如果你是跟隨教程學習,請參閱示例文件中TrueType目錄。

1、選擇"文件">"新建">"ActionScript文件",創建一個新的ActionScript文件。

2、保存文件爲FontClass.as。

3、拷貝並粘貼如下代碼到腳本窗口中:

package
{
    import flash.text.*;
    import flash.display.MovieClip;
    public class FontClass extends MovieClip
    {           
     [Embed(source="Arial Bold.ttf", fontName="myFont", fontWeight="bold", advancedAntiAliasing="true", mimeType="application/x-font")]
     private var theClass:Class;
     public function FontClass ()
     {
            var t:TextField=new TextField();
            t.embedFonts = true;
            var textFormat:TextFormat=new  TextFormat();
            textFormat.size = "30";
            textFormat.font = "myFont";
            t.text = "[Embed] metadata rocks!!!";
            t.width = 500;
            t.setTextFormat (textFormat);
            addChild (t); 
     }
    }
}

上面代碼中的高亮部分,[Embed]元數據標籤中使用到如下的參數來嵌入一個Arial bold字體:

Source: 這個參數指出了font文件的位置。如果願意,你可以使用systemFont參數確認名稱而不是source來嵌入系統字體。 fontName: 這個參數指明瞭嵌入字體的名稱,字體的名稱是一個唯一標識,所以你可以通過名稱來調用字體。 mimeType: 這個參數描述了嵌入元數據的MIME類型。因爲你在這個例子中嵌入了一種字體,你可以設置MIME類型爲"application/x-font"。 fontWeight: 這個參數表明了字體的粗細,如粗體或者正常。

注意:如果字體有粗細,並且你沒有在[Embed]元數據標籤中包含fontWeight參數,當測試SWF文件是,你會看到如下編譯錯誤:

Exception during transcoding: Font for alias 'myFont' with plain weight and style was not found at... (意外的轉換:帶有粗細和樣式的別名爲'myFont'的字體沒有被找到在...)

隨着嵌入字體的路徑(如圖11)。

(圖)在Flash中嵌入元數據標籤圖11

 圖11:如果嵌入字體的粗細在參數中沒有明確,將會顯示編譯錯誤

如果嵌入字體有特殊的樣式(如斜體),在[Embed]元數據標籤中沒有使用fontStyle參數來明確,同類型的錯誤也將會顯示出來。當使用元數據嵌入字體時,請確保明確所有必需的參數。

4、粘貼代碼到腳本窗口後,確保保存文件爲FontEmbed.as。

5、選擇"文件">"新建">"Flash文件(ActionScript 3.0)"來創建一個新的Flash文件。

6、保存Flash文件爲EmbedFont.fla。

7、點擊舞臺訪問屬性窗口(選擇"窗口">"屬性")。

8、在發佈屬性中,輸入類型FontClass到文檔類文本框中。

9、選擇"控制">"測試影片",測試FLA。

10、當對話框出現時,點擊按鈕。這引導Flash將flex.swc添加到FLA文件的庫路徑。你可以再次測試FLA文件。

11、選擇"控制">"測試影片"。這次,預期的文本(粗體的Arial字體)顯示在EmbedFont.swf文件中(如圖12)。

(圖)在Flash中嵌入元數據標籤圖12

 圖12:使用嵌入字體外觀和粗細,測試FLA文件,查看顯示信息


 

使用嵌入的XML文件 回目錄


在這篇文章的前面段落中,我講述了使用 [Embed] 元數據標籤嵌入圖形文件,SWF文件,SWF文件中元件,還有字體等到SWF中。所有這些可能性都是非常有用的,不過還有另外一種類型的文件也可以採用 [Embed] 元數據標籤嵌入到SWF中:XML文件。

我保留最好的到最後,這是因爲這個功能對於將外部數據導入到SWF中非常用用 -- 而且很直接地就可以完成。根據嵌入的XML數據,你可以做一些有趣的事情,爲將來的工程記住這個是一個極好的提醒。

下面的示例提供了使用 [Embed] 元數據標籤嵌入一個XML文件的一個說明。如果你跟隨教程學習,請參閱示例文件的XML目錄。

1、選擇"文件">"新建">"Flash文件(ActionScript 3.0)"創建文件,並保存文件爲XMLLoader.fla。

2、選擇"文件">"新建">"ActionScript文件"創建文件,並保存文件爲 XMLLoader.as。

3、當XMLLoader.as被激活,拷貝並粘貼如下如下代碼到腳本窗口:

package
{
    import flash.display.*;
    import flash.utils.ByteArray;
    public class XMLLoader extends Sprite
    {
      [Embed(source = "training.xml",mimeType = "application/octet-stream")]
      private var theClass:Class;
      public function XMLLoader ()
      {
           var xmlObj:Object = new theClass();
           trace(xmlObj);
      }
     }
}
注意:當嵌入XML數據時,你必須將mimeType參數設置爲"application/octet-stream"。 Flash不能通過XML文件的擴展名檢測正確的MIME類型,所以無論什麼時候你嵌入XML數據時都要設置mimeType參數。

4、將代碼粘貼到腳本窗口後,確保保存XMLLoader.as文件。

5、激活XMLLoader.fla標籤頁。如果屬性窗口還沒有打開,在舞臺上點擊一次,打開屬性檢查器("窗口">"屬性")。

6、在發佈屬性中,在文檔類文本框中輸入類名。在這個示例中,添加你創建的類:XMLLoader。

7、選擇"控制">"測試影片"測試FLA。對話框出現了。

8、點擊< Update Library Path >按鈕將flex.swc添加到FLA文件庫路徑。

9、再次選擇"控制">"測試影片"測試FLA。這次你會看到XML數據顯示在輸入面板中(如圖13)。

(圖)在Flash中嵌入元數據標籤圖13

 圖13:輸出面板顯示嵌入到SWF中的XML數據


 

發佈了24 篇原創文章 · 獲贊 2 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章