心得 Youtube 等 flash 檔案遮住 css 下拉式選單

  使用下拉式選單，若下面有嵌入 flash 的話 使用一般的 object, embed 標籤下的話 （ youtube 中 影片右鍵可以 '複製嵌入程式碼'） , 則youtube 的影片在網站上的就會顯示在最上層

若要避免這種情況的話，可以使用 swf object 來必面這個問題

在[1] 有引用swf範例code 如下


<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/e/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "356", "8", null, null, params, atts);

</script>




VIDEO_ID 是上傳youtube , youtube 給的 ID , 可以從連結影片的路徑中

找到





而[2] 中有提到 在 params 中 加入 wmode: "transparent" 參數設定可以解決這個問題

修正後的 變數如下,在此我順便設定了允許全螢幕的選項:


var params = { allowScriptAccess: "always" , allowFullScreen: 'true' , wmode: "transparent"};






詳細 的 params 變數可以參考[3].

參考：
[1]: YouTube API and Tools
[2]: Clayliao.f2e , 解決Flash 遮住 javascript 的小技巧
[3]: swf document

小心得, 在 Goole Site 使用自己的Flash

1 上傳 swf 檔案到 協作平台上, 這裡以 sample 中的雪花場景為例上傳




2 點選view 檢視 網址 並將網址複製下來



3 編輯頁面



4 選擇修改 html




5 在 html 加入 embed tag 把 步驟2複製的網址填入src 屬性






6. 編輯完記得按儲存

網頁嵌入Flash

最近 研究了一下 在網頁 嵌入Falsh的方法

1. 預設（用CS5 匯出的預設選項）

會產生一個 FlashContent 的 div tag, 下面的例子使引用 FlashSample.swf, 寬 320 , 高 240


<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="FalshTT" align="middle">
<param name="movie" value="FalshSample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FalshSample.swf" width="320" height="240">
<param name="movie" value="FalshSample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="取得 Adobe Flash 播放程式" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>




2. 使用 SWFObject


a. 要先下載 SWFObject
在 html 插入以下的code
b. 或使用 Google AJAX load


<script type="text/javascript" src="swfobject.js"></script>

<div id="flashContent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("FlashSample.swf", "mymovie", "200", "300", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashContent");
</script>



3. 直接 embed



<embed SRC="FlashSample.swf" width="320" height="240">



目前使用起來 SWF Object 比較好，搭配 css 等其他設定 沒有出現干擾的現象


參考

[1] 使用 SWFObject 來做 Flash 的漸進增強

[2] SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块

[3] W3cSchools

Flash 儲存資料

Flash 不能和資料庫直接連結，不過要儲存資料的話有以下兩種方法

1. 儲存 在 本機的 cookie

2. 透過 HTTP GET 或 POST 的方式 向中介網站(PHP,ASP,JSP,...)等 再向資料庫溝通

轉貼 AC3 讀取傳送JSON

假設有一個JSON 紀錄學生 id 和 name

[
{"id":"001","name":"Andy"},
{"id":"002","name":"Ben"},
{"id":"003","name":"Chris"},
{"id":"004","name":"Dora"}
]


資料放在Localhost 的本端資料庫上



以下是AC3 的語法





import com.adobe.serialization.json.JSON;


/// Set db path
var url:String = "http://localhost:8888/getStudentJSON"; /// 註1
var urlRequest:URLRequest = new URLRequest(url);

//宣告變數
var LODAR:URLLoader = new URLLoader();

//讀取
LODAR.load(urlRequest);

//監聽事件，當傳輸結束呼叫 decodeJSON function
LDR.addEventListener(Event.COMPLETE,decodeJSON );


function decodeJSON(evt:Event):void
{
/// 宣告 student 陣列
var student:Array = JSON.decode(URLLoader(evt.target).data);

/// 取得每個學生的姓名
for (var i=0; i<student.length; i++) {
trace( student[i].name );
}
}



註1
遠端的位置

參考：

[1] as3corelib

[2] as3 讀取和發送JSON

Flash CS5 引用外部 library 以 com.adobe.serialization.json.JSON 為例

要引用外部的函式庫的話，在CS5 的環境下，流程是這樣


1. 先下載函式 這裡我以 JSON 的函式為例

到這裡下載 https://github.com/mikechambers/as3corelib/blob/master/src/com/adobe/serialization/json/JSON.as

2. 解壓縮

3. 打開CS5

4. 在CS5 選擇 編輯->偏好設定


5. 類別中選擇 ActionScript, 之後在語言 地方 點 ActionScript3.0設定



6. 在 來源路徑中選擇 剛剛解壓縮的資料夾下面的 SRC 資料夾位置


7. 點下 確定 完成設定




之後就可以順利在 ActionScript 中 import 函式庫了

import com.adobe.serialization.json.JSON;

轉貼 Flash AC3 讀取外部資料

AC3 不同於 AC2 在讀取外部資料(或資料庫)的方式，採用不同語法 ，是用 urlRequest 和 URLLoader 的方式來接資料， 而 AC2 是用 Loadvars 的方式， 所以想使用AC3 開發的話，看到 Loadvars 就可以略過了。


以下是簡單的code:




/// Set path
var url:String = "http://localhost:8888/hello"; /// 註1
var urlRequest:URLRequest = new URLRequest(url);

var LDR:URLLoader = new URLLoader();

LDR.load(urlRequest);

//LDR.dataFormat = URLLoaderDataFormat.; /// 註2

LDR.addEventListener(Event.COMPLETE,Loadcomp);

function Loadcomp(event:Event){
trace(LDR.data);
}




註1
所請求的網址，可以是PHP,JSP,Servlet,XML or txt 檔

註2( [2])
接收資料類型
a. BINARY : String = "binary"
[靜態] 會指定以原始二進位資料的形式接收下載的資料。
b. URLLoaderDataFormat TEXT : String = "text"
[靜態] 會指定以文字的形式接收下載的資料。
c. URLLoaderDataFormat VARIABLES : String = "variables"
[靜態] 會指定以 URL 編碼的變數形式接收下載的資料。


參考:

[1] ActionScript3 (AS3) URLLoader 讀取外部變數

[2] ActionScript 3.0 語言和組件參考