最近在幫「雄 : HTML5 : 造句靈感產生器」改造，讓它可以變身為一直未改版為 HTML5 的「雄:Flash : ImageSelector 圖片隨選器」。「靈感產生器」抽牌時，採用的是翻牌動畫，而「圖片隨選器」用的是快速抽換多張圖片，翻牌只是兩張圖片的變換，看不出圖片檔來不及載入的問題；而快速抽換多張圖片，如果有圖片檔案太慢載入，就會造成「閃爍」的情形。
所以，為了解決「閃爍」的問題，只好將要用到的圖片檔案都先載入後，再開始製作動畫效果。根據以往的經驗，有時候，只要新增元件，不用將它加到畫面中，就能達到「預載」的效果；實作的結果，原本閃爍的問題在 iOS 上很明顯，利用「new Image」，並將圖片的路徑指定給它後，不需要加到網頁的頁面中，在 iOS 上的 Safari 就不閃爍了。但是......哈！可怕的「但是」出現了！在 Chrome 中卻偶爾會閃一下，在 Firefox 上則完全沒有效果，閃到眼睛都花了。
為了解決在 Chrome 及 Firefox 的問題，試著在預載的程序中多做一個動作，將圖片真的加到頁面中，果然就不閃爍了。可是大大的預覽圖片實在破壞版面，那～將它放到畫面可視範圍外，眼不見為淨，總可以了吧？哈！我測試的結論是，Chrome 欣然接受，Firefox 還是不高興。最後一招，將圖片的大小設為 1x1 後，再加入頁面中；這招在早期設計網頁時，滿常用的，我們眼睛看不見，但是瀏覽器卻因此而認定它是存在的，而不會不載入圖片。
果然！將所有的圖片都用 1x1 的尺寸大小，加入頁面中後，Firefox 也開心了，解決了將「靈感產生器」變身為「圖片隨選器」的大問題。
下面是利用張崴耑老師「搜秀資源網」中的台灣行政區手繪地圖：
將 22 張縣市的手繪地圖，結合改版後的「雄 : HTML5 : 造句靈感產生器」，製作成範例「地圖隨選器」。
 |
| [圖1] 按紅色箭頭處可抽地圖 |
 |
| [圖2] 按語音播放鈕可聽縣市名稱 |
玩法是這樣的：
- 先按一下 [圖1] 中的問號，或是畫面右下角的「洗牌圖示」，它會隨選一張縣市地圖。
- 想一想，地圖是哪一個縣市的？
- 想核對心中的答案是否正確，就如 [圖2] 所示，按一下地圖下方的語音播放鈕，程式會以合成的語音說出縣市名稱。
「臺灣行政區地圖隨選器」的連結在下方，按一下就可以考考自己記得多少：
如果也想做一個自己的圖片隨選器，可以使用這個：
發表文章
沒有留言:
張貼留言