網頁

2011年6月19日 星期日

網頁傳遞SWF參數的方法

文：Vainer
一般網頁內嵌SWF的做法通常有兩種，第一種是使用標籤＜Object＞來包裹整個flash物件內容，第二種則是使用swfObject物件，實體化後再載入flash動畫。所以，底下的範例分別針對這兩種版型的網頁，探討究竟可以用什麼樣的方法，在網頁中將參數傳遞給SWF，相對的，我們也實做了一個AS 3.0版本的Flash動畫程式(Flash Builder 4開發)，展示Actionscript程式如何接收網頁傳遞的參數值。

一、 網頁傳遞SWF參數的實做方法
1.1.網址參數 – 直接將參數設定值加在SWF的網址後面基本寫法是以問號開頭，其後跟著鄰接”參數名稱=值”形式參數設定值，不同的參數則用符號”&”來區隔。這種寫法的優點是簡單、直觀，但缺乏彈性、保密性。

‧Object標籤的寫法示範 - sendFlashvars_Object_1.html (注意紅色文字部份)
＜html＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=utf-8"＞
＜title＞ Send variables to SWF with Flashvars in Object tag ＜/title＞
＜/head＞
＜body＞
＜object id="FlashObj" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" 
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" align="middle" height="600"＞
＜param name="allowScriptAccess" value="sameDomain" /＞
＜param name="allowFullScreen" value="false" /＞
＜param name="movie" value="FlashvarsTemplate.swf?myName=Masie&mySex=Male&myAge=48" /＞
＜param name="quality" value="high" /＞
＜param name="bgcolor" value="#cccccc" /＞
＜embed src="FlashvarsTemplate.swf?myName=Masie&mySex=Male&myAge=48" width="800" height="600" /＞
＜/object＞
＜/body＞
＜/html＞

‧swfobject的寫法示範 - sendFlashvars_SwfObject_1.html 
＜html＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=utf-8"＞
＜title＞Send variables to SWF with Flashvars in SwfObject＜/title＞
＜script type="text/javascript" src="swfobject.js"＞＜/script＞
＜script type="text/javascript"＞
var flashVars = {};
var params = {};
var attributes = {};
swfobject.embedSWF("FlashvarsTemplate.swf? myName=Masie&mySex=Male&myAge=48", "flashDiv", "800", "600", "9.0.0", false, flashVars, params, attributes);
＜/script＞
＜/head＞
＜body＞
＜div id="flashDiv"＞ Here is show flash animation.＜/div＞
＜/body＞
＜/html＞

1.2. FlashVars - 使用FlashVars參數或者FlashVars物件變數來傳遞參數值- Object標籤式類型的網頁，可以新增一個子標籤＜Param name=”FlashVars” …/＞，把參數內容 放進裏頭，同時也在子標籤＜embed＞裏頭定義相對的FlashVars的屬性及內容。
- swfObject物件類型的網頁，則是宣告一個flashVars物件變數，並且定義flashVars的屬性及屬性內容，最後把flashVars物件當作swfObject的embedSWF函式的參數之一。這樣的寫法無疑地具有更大的應用彈性，首先它對於網頁的其他內容影響最小，其次它可以在SWF實體化前，進行參數的動態設定，甚至我們還可以引用其他的網頁參數、外部文件檔、動態網路服務程式等資料類型，提供更廣泛、動態性、保密性的整合應用。

‧Object標籤的寫法示範- sendFlashvars_Object_2.html 
＜html＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=utf-8"＞
＜title＞Send variables to SWF with Flashvars in Object tag＜/title＞
＜/head＞
＜body＞
＜object id="FlashObj" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" 
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" align="middle" height="600"＞
＜param name="allowScriptAccess" value="sameDomain" /＞
＜param name="allowFullScreen" value="false" /＞
＜param name="movie" value="FlashvarsTemplate.swf" /＞
＜param name="FlashVars" value="myName=Peter&mySex=Male&myAge=80" /＞
＜param name="quality" value="high" /＞
＜param name="bgcolor" value="#cccccc" /＞
＜embed src="FlashvarsTemplate.swf" width="800" height="600" FlashVars="myName=Peter&mySex=Male&myAge=80" /＞
＜/object＞
＜/body＞
＜/html＞

‧swfobject的寫法示範 - sendFlashvars_SwfObject_2.html 
＜html＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=utf-8"＞ 
＜title＞Send variables to SWF with Flashvars in SwfObject＜/title＞
＜script type="text/javascript" src="swfobject.js"＞＜/script＞
＜script type="text/javascript"＞
var flashVars = {};
flashVars.myName = "Mary";
flashVars.mySex = "Female";
flashVars.myAge = 18;
var params = {};
var attributes = {};
swfobject.embedSWF("FlashvarsTemplate.swf", "flashDiv", "800", "600", "9.0.0", false, flashVars, params, attributes);
＜/script＞
＜/head＞
＜body＞＜div id="flashDiv"＞ Here is show flash animation.＜/div＞ ＜/body＞
＜/html＞
二、 Actionscript 接收網頁傳遞參數的方法
AS 3.0的程式語法中提供了新的loaderInfo類別物件，可以用來幫助我們取得網頁傳遞的參數內容。在範例程式FlashvarsTemplate.mxml 中，我們宣告了三個文字輸入欄位，當做網頁參數內容的容器。當動畫被加入舞台畫面時，觸發事件監聽器addToStageHandler()函式時，函式第一行程式指令 var params:Object = LoaderInfo(this.root.loaderInfo).parameters，即利用了loaderInfo的屬性parameters來取得所有的網頁參數值內容，然後接著利用條件判斷式檢查，尋找對應的參數myName、mySex、myAge，如果找到了就把參數內容放進對應的文字欄位裏。
＜?xml version="1.0" encoding="utf-8"?＞
＜s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
fontSize="24" minWidth="800" minHeight="600"
creationComplete="initApp(event)"＞
＜fx:Declarations＞
＜!-- Place non-visual elements (e.g., services, value objects) here --＞
＜/fx:Declarations＞ 
＜fx:Script＞
＜![CDATA[ 
import flash.display.LoaderInfo;
import flash.events.Event; 
import mx.events.FlexEvent; 
private function initApp(e:FlexEvent):void{
this.addEventListener(Event.ADDED_TO_STAGE,addToStageHandler); 
} 
private function addToStageHandler(e:Event):void{ 
//parser flashvars from html
var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
if(params.myName){
myName.text = params.myName;
}
if(params.mySex){
mySex.text = params.mySex;
}
if(params.myAge){
myAge.text = params.myAge;
} 
this.removeEventListener(Event.ADDED_TO_STAGE,addToStageHandler); 
} 
]]＞
＜/fx:Script＞ 
＜s:Group top="10" left="10"＞
＜s:layout＞
＜s:VerticalLayout horizontalAlign="left" gap="15"/＞
＜/s:layout＞
＜s:Label text="網頁所傳遞的參數內容：" /＞
＜s:HGroup＞
＜s:Label text="姓名 :" /＞
＜s:TextInput id="myName" /＞ 
＜/s:HGroup＞
＜s:HGroup＞
＜s:Label text="性別 :" /＞
＜s:TextInput id="mySex" /＞ 
＜/s:HGroup＞
＜s:HGroup＞
＜s:Label text="年齡 :" /＞
＜s:TextInput id="myAge" /＞ 
＜/s:HGroup＞ 
＜/s:Group＞ 
＜/s:Application＞

三、參考範例檔說明與下載
● sendFlashvars_Object_1.html，使用Object標籤內嵌SWF的網頁範例1
● sendFlashvars_Object_2.html，使用Object標籤內嵌SWF的網頁範例2
● sendFlashvars_SwfObject_1.html，使用swfObject物件內嵌SWF的網頁範例1
● sendFlashvars_SwfObject_2.html，使用swfObject物件內嵌SWF的網頁範例2
● FlashvarsTemplate.mxml，讀取網頁參數的Flash動畫檔，使用Flash Builder 4工具開發

Download：http://www.utrust.com.tw/dispGetFile/Get.aspx?FileLocation=Files%5c&FileName=505.zip
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)