標題：伊比力斯 親善系統 技術架構
出處：A.PAO designSTUDIO BLOG
時間：Thu, 13 Dec 2018 11:14:32 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1280/

內容：
到現在為止大多以FLASH來製作這類的說明動畫，但是FLASH卻只能停在原有的技術，實在可惜。甚至在手機上無法直接執行，Android 需要另外下載.APK，Apple手機則是無法執行FLASH。始初想到如果能使用GIF的動畫的話，檔案又不要太大的話，就十分有可能可以克服這個門檻，在讀書會中工程師們不斷絞盡腦汁，利用可能的技術，來取代逐漸被新技術淡忘的FLASH，簡單的說就是結合以下技術：
HTML5：網頁架構
GIF：動畫
CSS3：動畫移動或切換 
JavaScript：場面切換與選擇 
Webstorage：記憶使用者故事路線
來試圖做出類似繪本的網頁，甚至能夠比FLASH還要更小的傳輸檔案量。

▼解說伊比力斯（癲癇）與進入親善系統

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3034

▼可進入「巴士」「MRT」「學校」等三個背景環境

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3035


▼巴士情境（1/3）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3039

▼學校情境（2/3）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3037

▼MRT情境（3/3）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3038

▼出現各種癲癇狀況（全身與局部）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3040

▼下一步選擇1（局部）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3041

▼下一步選擇2（局部）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3042

▼下一步選擇3

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3043

▼結語

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3044


▼記憶使用者選擇背景與故事路線（Webstorage）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=3045


相關連結：
http://story.childepi.org.tw/


Generated by Bo-blog 2.1.1 Release