專案開發實例：Papora 拍瀑拉文化基地導覽 (Color、Flung、ActivityStarter) 靜宜大學資管系 楊子青

App創作企劃書 作品名稱 創作背景及動機 作品說明 功能簡介 預期效益 參考文獻 說明市場需求、欲解決的問題、提供使用者的價值 說明商業價值、帶給使用者之良好體驗或實質效益等 參考文獻 研究論文、圖書、報章雜誌或網頁資料等

期末競賽評分 20%：簡報及Demo能力 20%：結合行動裝置特性與創意表現 20%：使用者介面親和性與美感 40%：對服務機構的瞭解及貢獻程度(應用價值)

專案需求及完成時之介面 ① ③ ② ④ 按Menu，顯示功能表；若再按一次則隱藏 Canvas可抓取使用者滑動的事件，來進行背景圖片切換 各選單內容，以半透明方式疊在背景圖上 ② ③ 練習：向右滑動切換到下一張圖片；向左滑動則切換到上一張 呼叫手機的其他應用程式，來播放影片、上網、查詢地圖及撰寫mail與撥打電話 ④

介面設計(1) Screen1及不可見元件 Screen1的相關屬性 AppName：拍瀑拉基地 BackgroundImage： p1.jpg Icon： p1.jpg Title：拍瀑拉文化基地導覽

介面設計(2) 版面設計 ② ① ③ ④ ⑤ BackgroundColor 屬性均設為None(透明) Button HorizontalArrangement1 ① ③ ④ VerticalArrangementAll Vertical Arrangement Menu ⑤ CanvasFlung

介面設計(3) 加入Button及Label 各個Label的Height屬性設為1 pixels (當間距用)

1. 功能選單顯示/隱藏 ① ③ ② ④ 按Menu，顯示功能表；若再按一次則隱藏 Canvas可抓取使用者滑動的事件，來進行背景圖片切換 各選單內容，以半透明方式疊在背景圖上 ② ③ 練習：向右滑動切換到下一張圖片；向左滑動則切換到上一張 呼叫手機的其他應用程式，來播放影片、上網、查詢地圖及撰寫mail與撥打電話 ④

應用程式啟始時，先隱藏功能選單

功能選單顯示/隱藏

2. 半透明按鈕處理 ① ③ ② ④ 按Menu，顯示功能表；若再按一次則隱藏 Canvas可抓取使用者滑動的事件，來進行背景圖片切換 各選單內容，以半透明方式疊在背景圖上 ② ③ 練習：向右滑動切換到下一張圖片；向左滑動則切換到上一張 呼叫手機的其他應用程式，來播放影片、上網、查詢地圖及撰寫mail與撥打電話 ④

基礎顏色

自行配色

配色公式、實例及常見色碼表

設定顏色並加入透明度

模擬結果 (由於程式是寫在Initialize，若要重跑執行結果，可以任意設定Screen1的背景顏色)

練習：自行調配前景及背景顏色 可參考RGB配色表

3. 快滑螢幕，切換背景圖片 ① ③ ② ④ 按Menu，顯示功能表；若再按一次則隱藏 Canvas可抓取使用者滑動的事件，來進行背景圖片切換 各選單內容，以半透明方式疊在背景圖上 ② ③ 練習：向右滑動切換到下一張圖片；向左滑動則切換到上一張 呼叫手機的其他應用程式，來播放影片、上網、查詢地圖及撰寫mail與撥打電話 ④

運用Canvas的Flung事件 當使用者手指滑過(快速滑動)畫布 回傳（x,y）座標代表使用者所起始的位置 "speed"代表手指在畫布上移動的速度 "heading"代表逆時針旋轉的角度，從 0 開始為水平。 （xvel, yvel）這組值代表X與Y的速度分量 "FlungSprite" 代表指定動畫元件是否被使用者甩出，判定標準為距離起始點的位置。

撰寫程式，背景切換成下一張圖片

練習：如果往左滑動，則往前翻頁 ？ 提 示 1 提 示 2 Current每次減1 什麼時候，Current 要變成最後一張？ 90 135 45 提 示 2 Current每次減1 什麼時候，Current 要變成最後一張？ 180 ？

4.呼叫行動裝置裡的其他應用程式 ① ③ ② ④ 按Menu，顯示功能表；若再按一次則隱藏 Canvas可抓取使用者滑動的事件，來進行背景圖片切換 各選單內容，以半透明方式疊在背景圖上 ② ③ 練習：向右滑動切換到下一張圖片；向左滑動則切換到上一張 呼叫手機的其他應用程式，來播放影片、上網、查詢地圖及撰寫mail與撥打電話 ④

ActivityStarter說明 http://www.appinventor.tw/ai2_connectivity_activitystarter 讓您的應用程式呼叫另一項活動（Activity），例如可用來啟動手機內的應用程式 方法：

ActivityStarter 說明 屬性 Action：欲執行的行動 DataUri android.intent.action.VIEW：顯示資料 android.intent.action.CALL：直接播出電話 … DataUri 欲呼叫 activity 的 URI（Uniform Resource Identifier）

ActivityStarter運作圖示

撰寫一副程式，執行ActivityStarter Action屬性：android.intent.action.VIEW DataUri屬性：呼叫 activity 的 URI

輸入不同的DataUri屬性，執行VIEW動作 播放YouTube影片 例如：來去清水散步－古道老街篇 https://youtu.be/FuxAhS5TMv0

輸入不同的DataUri屬性，執行VIEW動作 (2) 瀏覽網頁 例如：拍瀑拉文化基地 粉絲團 https://www.facebook.com/PaporaCultureSite/

輸入不同的DataUri屬性，執行VIEW動作 用Google搜尋網頁關鍵字 http://www.google.com/m?q=[search term] 例如以「楊子青」為關鍵字 http://www.google.com/m?q=楊子青

輸入不同的DataUri屬性，執行VIEW動作 (3) 查詢Google Map geo:[緯度],[經度]，例如靜宜大學： geo:24.2267756,120.5771591 查詢附近店家，例如餐廳： geo:24.2267756,120.5771591?q=restaurants 還可輸入如：書店, 便利商店, 加油站,公車站… 從目前位置導航至某地，要到「靜宜大學」 google.navigation:q=靜宜大學 步行：&mode=w 開車：&mode=d 用地名查詢 geo:0,0?q=拍瀑拉文化基地

輸入不同的DataUri屬性，執行VIEW動作 (4) 寄發電子郵件 例如寄信給子青老師 mailto:tcyang@pu.edu.tw 若有兩個以上可用的應用程式 會讓使用者自行挑選

「寄送郵件」按鈕，寄發email 寄送郵件給協助導覽的清水散步吳老師 mailto:gomach436@gmail.com?subject=感謝導覽&body=吳理事長，您好！\n我是靜宜大學的學生\n本學期修習「創意App實作」課程\n非常感謝您的導覽\n讓我更瞭解清水在地人文！&cc=tcyang@gm.pu.edu.tw,tcyang1971@gmail.com

輸入不同的DataUri屬性，執行VIEW動作 (5) 撥電話 例如撥電話到子青老師研究室 tel:0426328001,18110 拍瀑拉電話 tel:0426222596