<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[伊比力斯 親善系統 技術架構]]> apao <apao@www.apao.idv.tw> Thu, 13 Dec 2018 03:14:32 +0000 https://blog.apao.idv.tw/post// 到現在為止大多以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/
Tags - , , , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] 伊比力斯 親善系統 技術架構]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment