網頁

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

2011年6月7日 星期二

U Web 網站靜態網頁編輯與基礎CSS應用(下) – 靜態網頁影像編輯

文:Polly L .

U Web除了內容上稿區,更提供靜態網頁編輯區,使用者可以選擇純文字、Word等模式貼上內容,如果我們想要有樣式上的變化,必須進入HTML做原始碼編輯!
我們要介紹基礎的HTML編輯方式與CSS應用,主要分為【表格】與【影像】兩種,今天接著介紹影像的部分。
【Img】編輯:
U Web靜態網頁編輯中有一個很好用的影像編輯區 ( 圖B1 )
在插入圖片後,我們可以做一些基本的設定,讓影像編輯上可以有變化,我們稍後來比對一下前後的比對。
先進入上方影像編輯區做一些微調的設定看看會變成如何呢?點選進入【影像屬性】,我們先選擇【影像資訊】
1. 我們可以先設定影像來源與替代文字的說明 ( 如:信諾科技)。
2. 再來是寬度與高度的設定,依需要的大小來設定即可,(非必填)。
3. 邊框,依需求可填入數字1,2,3….等數字,(非必填)。
4. 水平距離,是指與左右的距離,垂直距離是指與上下的距離。
5. 對齊,可選擇置右或是置左對齊。
接下來我們就來看看設定前後所呈現的效果囉!!呈現效果 (圖B2)
一般在U Web中我們會先將列表或內容頁中的圖片尺寸統一化,另外靜態頁部分的縮圖建議也維持影像的尺寸與排列的統一,否則網頁易顯得較雜亂而不易閱讀喔,記住這些小技巧,編輯的網頁內容將會更豐富且完美。