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上有太多重疊的東西，否則很容易會有問題的發生…

Dreamweaver網頁模組(Web Widgets)

最近jQuery滿流行的，Adobe也在Dreamweaver的「Dreamweaver Web Widgets」頁面提供了各式的網頁模組(Web Widget)給Dreamweaver使用者下載(需先申請免費帳號才能執行下載動作)；這些模組架構包含了jQuery、Spry、Google、Yahoo，以及MooTools等。如果能善用這些Ajax類型的模組，可大大增進網頁的互動效果！同時又不致於讓網頁的檔案過大，加快使用者瀏覽網頁的速度，功能相當強大！

另外，jQuery UI提供了一些使用者介面(User Interface)的設計，「黑暗執行緒」在「邊做邊學」系列教學(觀賞影片需安裝微軟的SliverLight)也放了jQuery教學給有興趣想學習的人。Ka-Yue.com在「優秀jQuery插件17個」也提到不少關於jQuery外掛程式與模組的連結，雖然這篇文章是2007年寫的…時間有一點久遠。