December 13, 2018
到現在為止大多以FLASH來製作這類的說明動畫,但是FLASH卻只能停在原有的技術,實在可惜。甚至在手機上無法直接執行,Android 需要另外下載.APK,Apple手機則是無法執行FLASH。始初想到如果能使用GIF的動畫的話,檔案又不要太大的話,就十分有可能可以克服這個門檻,在讀書會中工程師們不斷絞盡腦汁,利用可能的技術,來取代逐漸被新技術淡忘的FLASH,簡單的說就是結合以下技術:
HTML5:網頁架構
GIF:動畫
CSS3:動畫移動或切換
JavaScript:場面切換與選擇
Webstorage:記憶使用者故事路線
來試圖做出類似繪本的網頁,甚至能夠比FLASH還要更小的傳輸檔案量。
▼解說伊比力斯(癲癇)與進入親善系統
▼可進入「巴士」「MRT」「學校」等三個背景環境
▼巴士情境(1/3)
▼學校情境(2/3)
▼MRT情境(3/3)
▼出現各種癲癇狀況(全身與局部)
▼下一步選擇1(局部)
▼下一步選擇2(局部)
▼下一步選擇3
▼結語
▼記憶使用者選擇背景與故事路線(Webstorage)
相關連結:
http://story.childepi.org.tw/
HTML5:網頁架構
GIF:動畫
CSS3:動畫移動或切換
JavaScript:場面切換與選擇
Webstorage:記憶使用者故事路線
來試圖做出類似繪本的網頁,甚至能夠比FLASH還要更小的傳輸檔案量。
▼解說伊比力斯(癲癇)與進入親善系統
▼可進入「巴士」「MRT」「學校」等三個背景環境
▼巴士情境(1/3)
▼學校情境(2/3)
▼MRT情境(3/3)
▼出現各種癲癇狀況(全身與局部)
▼下一步選擇1(局部)
▼下一步選擇2(局部)
▼下一步選擇3
▼結語
▼記憶使用者選擇背景與故事路線(Webstorage)
相關連結:
http://story.childepi.org.tw/
0 Comment(s)