goTOP
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/
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我