<< 【作品】讓網頁裡的多個Flash互相通訊 (使用LocalConnection) | 回blog首頁 | 【比賽】短短25行程式，可以做出多驚人的Flash？ >>

2008年12月18日

【作品】應景: 讓部落格飄雪吧！

下雪吧!
程式碼貼在這篇內，所以內文就可以看到雪花緩緩飄落。
在IE裡按下 Ctrl+A 會有不同的感覺~

將下列程式碼複製到部落格的自由欄位：(需支援JavaScript 檔的引用)

　　貼上後可以更改雪花的數量，將count=25改成想要的數目，要改的地方共有二處，這樣才能同時支援IE和FireFox(FF)。Flash的透明模式(transparent)滿吃效能的，而且還要放大到整個瀏覽器，雪花數目儘量不要調太多。

　　雪景會隨著瀏覽器縮放而更動，所以不用調整程式碼裡的長與寬，可適用於不同的瀏覽器，原本想要隨游標做出特殊效果，在其中下了不少工夫(透明模式Flash無法偵測滑鼠移動，需透過JavaScript)，不過為了效能考量，只好做個簡易版。

開發時遇到的困難：
  1. 更改Flash的大小，各家瀏覽器有不同的作法。
    解法：在object標籤中設id、embed設name，IE要用window[movieName]，FF用document[movieName]。
  2. Flash在Firefox中若使用透明模式，會蓋住底下連結。
    解法：以CSS將z-index設為-1，缺點是反過來被網頁內容蓋住。
  3. 視窗縮放後，Flash場景沒有跟著變
    解法：監看window.onresize事件。
  4. document.body.clientHeight回傳高度不正確(並非瀏覽器內可視高度)
    解法：比較window.innerHeight、document.documentElement.clientHeight擇一。
參考資源：
  1. 透明Flash網頁的滑鼠偵測／邦邦的部落格
  2. 顯示滑鼠所在座標／9W個人設計工作室
  3. communication between JavaScript and Adobe Flash Player／Adobe
  4. Window size & Scroll position／SoftComplex
  5. onresize事件／W3Schools
  6. CSS:fixed／Jax
  7. Flash snow／KIRUPA



Posted by esabear at 樂多Roodo! │18:18 │回應(14) │引用(0) │Flash筆記
樂多分類：網路/3C 共同主題：Flash筆記 工具：編輯本文
標籤：應景,作品,部落格工具,flash
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/7888139
回應文章

很有飄雪的感覺喔~
想增加點聖誕節氣氛的話~
背景加隻帶聖誕帽的雪人 或許更有應景感喔~~
^_^
Posted by 喵 at 2008年12月18日 19:10
你自己做的雪花喔~好厲害
效果我覺得比我的好耶
只不過好像有點lag
Posted by chris at 2008年12月19日 10:44

啊哈~我家飄起雪很有Fu耶。XD
Posted by Arno Ruan at 2008年12月19日 13:51

To 喵: ^^
To Chris: 謝謝,正努力改進中~
To Arno Ruan: 那是wordpress的外掛吧?真想用用看~
Posted by 熊 at 2008年12月20日 11:31
試試看這段CODE，註解自行移除喔。^^
Posted by Arno Ruan at 2008年12月21日 16:53
script src="http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js"
type="text/javascript">
Posted by undefined at 2008年12月21日 16:54

謝謝你提供的code. It works!
不過使用時似乎會吃掉程式碼後的內容
可能要放在網頁最後方吧~?
Posted by 熊 at 2008年12月21日 19:11
謝謝這麼好的分享
我把語法貼在我Blog了
非常謝謝!!
Posted by 斑比Banbi at 2008年12月22日 11:32

謝謝我把這篇帶回去延伸閱讀了
有連結了你的文章出處和blog網址
這好有 fu~阿~
可是無法限制寬高我使用IE7 blog搜尋那裡會沒辦法打字^^"
Posted by 兔兒 at 2009年01月31日 16:24

好棒的設計唷
謝謝你的分享
Posted by 綺綺 at 2009年02月1日 12:34

謝謝誇獎^^
這個作品確實還有些缺點
用Flash實作全螢幕會有一些點要克服
努力改進中
Posted by 熊 at 2009年02月1日 15:51
雪真的很美~
可惜我不是樂多的使用者更不是會員
想推沒辦法推呢~
感謝你的辛苦結晶^^
它們真的非常美麗
Posted by 幻 at 2009年02月5日 14:36

多謝你的分享囉
很有FU的飄雪^^
Posted by kenas at 2009年03月5日 21:02

謝謝分享囉
好有FU的飄雪阿^^
Posted by KENAS at 2009年03月5日 22:00


回最上方