文: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