延伸_學校簡介

2019/03/05 謝碧景(c)編製更新

學習目標

  • 學會『新增螢幕』(Screen)及不同螢幕之應用。

  • 學會專案設計流程：參閱→雲端資源專題應用

    • 專案發想(動機&目的)

    • 專案總覽

    • 介面配置(畫面編排Designer)

    • 專案分析和程式設計說明

    • 未來展望

  • 學會成果報告書編撰：參閱→109&110_資專學生作品彙整

◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)

◆延伸：請以多頁面製作學校簡介／個人簡介。

【重點：學會Connectivity(通訊)類別中【ActivityStarte啟動器】、【WebViewer網路瀏覽器】元件及多頁面的設計與應用】(專案名稱：School.aia)。※建議：【ActivityStarter啟動器】元件以行動設備(即實機)操作。

  • Screen1

  • 『美麗的山』頁面

一、專案發想

二、選單按鈕圖案製作

(一)以影像處理軟體製作按鈕圖

  • PhotoImpact→元件設計師 (可利用『大小』將整個按鈕列之寬高比例放大)→匯出：至影像最佳化程式(每個按鈕輸出成個別的影像檔.png)、

(二)以路徑繪圖工具製作logo圖

三、介面配置(畫面編排Designer)

(一)新增頁面：

  • 如下圖，可按下【新增螢幕】即可增加頁面設計，本專案有4個頁面簡述如下。

(二)ScreenLssh頁面

  • 介面配置如下圖，【螢幕方向→設定『鎖定直式畫面』允許捲動】，以利垂直方向編排與使用者瀏覽。

  • 使用元件及其屬性設定：

  • 介面配置：

(三)ScreenAlbum頁面及ScreenMap頁面

  • 同上方式設計，相關介面配置雷同，僅WebViewer的首頁地址不同，介面配置如下。

(四)Screen1頁面：製作『主選單』。

  • 使用元件及其屬性設定：

  • 介面配置：

＊註：為避免按鈕垂直距離太貼近，可利用水平配置(HorizontalArrangement)元件，以高度5像素區隔，畫面較美觀。

四、程式設計(Blocks)

    • 請以實機操作(專案名稱：School.aia)

(一)Screen1頁面：

1.『主選單』頁面開啟時設定Clock1計時器時間間隔5秒(5000毫秒)，即5秒後執行Clock1.計時事件，ImageLogo元件每隔3秒交替更換ls_logo.png及ls_logo2.png圖片，讓首頁有動態效果，如下圖。

2.按下主選單各按鈕執行程式方塊。

(1)當按下ButtonLssh【美麗的山】按鈕被點選，則執行『開啟另一螢幕』名稱"ScreenLssh"頁面。

(2)當按下ButtonArt【校園藝術】按鈕會以Activity啟動器 元件啟動瀏覽器線上觀看校園藝術影片。

(3)當按下ButtonEnd【結束導覽】按鈕即以 退出程式 方法關閉應用程式。

(二)其他三個頁面：

  • ScreenLssh、ScreenAlbum、ScreenMap三個頁面程式相同，當按下【首頁】按鈕，即以『關閉螢幕』方法關閉該頁面，返回主選單頁面。

五、下載 .apk

  • 先以QR碼掃瞄器掃描二維條碼，接著下載*.apk檔，安裝至手機執行結果：選取功能列【打包apk→打包apk並顯示二維條碼】(註：此二維條碼僅維持2小時)。