星期六, 5月 16, 2009

AS2呼叫Javascript隱藏(/顯示)指定的Div

有時候我們會在yahoo或其它網站看到Flash的廣告banner在畫面中播放完後自動向上收回去,這效果滿有趣的,因為你可以讓大家看到一個比較完整的廣告效果,然後向上縮回,只留下另一個小廣告banner在同一個位置,不會讓大的廣告banner一直佔據網頁的空間。

其實,這只是在同一個地方放了兩個banner,一個大的、一個小的,播完大banner以後再留下小banner;我們可以用兩個div分別置放大、小banner,然後把播完廣告的大banner在畫面中刪除!

或者,也可以在同一個swf檔裡做兩個banner,在播完大banner之後,讓時間軸跳到小banner的地方,不讓別人看到原來大banner的畫面。

不過,這些都不是困難的問題,我們比較好奇的是,是什麼原因讓大banner播完後,Firefox竟然忘不了這個大banner曾經播放過的事實,因此留下原本大banner的「透明」區塊在畫面之中?!也許這層透明區塊不會對畫面造成影響,但另一個問題是…區塊底下的東西竟然無法點選、連結?!這個可麻煩了!真不知道該怎麼辦才好…

沒關係,感謝Javascript和CSS的強大功能,因為我們可以在Flash中呼叫Javascript功能,讓Javascript使用CSS設定,讓指定的Div消失於無形~!哈哈哈!!!

首先我們要讓Flash在特定的時間或事件之中觸發Javascript機制,例如播完影片之後,或者因為我們已經看過這個畫面,不想再看了!於是,我們可以在時間軸中加上底下的Actionscript(AS2):
getURL("javaScript:hideItem('hideThisDiv');","");
//讓Javascript知道要隱藏哪個Div
接著在html加入底下這段Javascript即可讓Flash自動隱藏起來:
<script type="text/javascript">
<!--
function hideItem(divID) {
hiddenID = document.getElementById(divID);
hiddenID.style.display = "none";
}
//-->
</script>

既然Javascript是用CSS的方式將Div隱藏起來(display:none;),我們同樣也可以把它叫出來,只要將「none」改為「block」(或其它非none的參數應該都可行):
hiddenID.style.display = "block";

解決swf重疊的問題

前陣子同事遇到一個情形就是好幾個swf的flash元件重疊在一起,結果會造成顯示畫面的錯亂…特別是當我們指定某個影片一定要在最上面播放的時候…

原來我們想說是z-index的問題,雖然說z-index的設定得配合使用「position:absolute;」才行,但這點似乎無法解決我們的問題。

在經過一番Google之後,一時間也沒什麼答案,但我們的哈學長居然找到了一個很可能解決的答案,而且,最重要的是這答案確實是讓我們的影片顯示在畫面的最上層,不會被其它swf擋住。

更有趣的是,這方法竟然很簡單,只要將你想放在最上層的swf加上「透明度(transparent)」參數設定,並且確定其它swf「沒有」同時使用透明度設定;此時瀏覽器便使將設有透明度的swf放在最上層。swf的透明度參數設定如下:
<param name="wmode" value="transparent">

假如其它swf也有使用這個透明度設定的話,一樣會造成顯示上的問題。也因並如此,沒必要的話最好不要在swf上有太多重疊的東西,否則很容易會有問題的發生…

AS2影片播放完畢後執行特定動作

今天在公司試著想把Flash的影片在一開始的時間不要自動播放,讓使用者想看的時候再按下預覽視窗裡面的播放箭頭才播放影片;由於公司使用的是Flash 8,想當然爾,自然是用AS2來達到這個功能。做法如下:

首先將Flash的影片播放組件命名my_FLVPlybk為它的實體名稱。在影片的第一個影格事先放置示意的圖案,並命名為preview_btn。當我們按下這個預覽按鈕時,就告訴Flash把影片帶至第二個影格(設定影格名稱為theVideo)停住,並按放影片播放組件所指定的影片畫面。

第一個影格的as2程式碼:
preview_btn.onRelease = function(){
this._parent.gotoAndStop("theVideo");
//告訴flash到上一層時間軸的「theVideo」停住
}


//當flash到theVideo的時候,會觸發該時間軸上預先設定的AS2程式。至於「theVideo」這個時間點上的時間軸程式語法如下,原則上是使用listenerObject來監聽一些動作:
import mx.video.*;
var listenerObject:Object = new Object();
listenerObject.stopped = function(eventObject:Object):Void {
gotoAndStop("theVideo");
到指定的時間軸位置停住不播放。
};
my_FLVPlybk.contentPath = "myvideo.flv";
//指定my_FLVPlybk這個影片播放程式的位置。
my_FLVPlybk.setBufferTime(7);
my_FLVPlybk.addEventListener("stopped", listenerObject);

基本上就是在影片播完「停住」以後才會觸發另外的動作,如果是要影片在完成(complete)播放後觸發某些動作,也可以使用底下的as2程式碼:

import mx.video.*;
var listenerObject:Object = new Object();
listenerObject.complete = function(eventObject:Object):Void {
gotoAndStop("theVideo");
};
my_FLVPlybk.contentPath = "myvideo.flv";
my_FLVPlybk.setBufferTime(7);
my_FLVPlybk.addEventListener("complete", listenerObject);