畢業紀念App_04設置熱區與交互行為

Posted by fatball on 星期六 十二月 17, 2016 Under →Smart Apps Creator, ★六年級資訊教學

本單元進度說明:
我們希望觸摸主畫面的某一位同學時,畫面可以跳轉到該位同學的介紹畫面。

因此本單元進度就是要建立觸摸熱區並設定其交互行為。

 

01.請切換到主畫面,並點選『插入』索引標籤→『背景』→『熱區』。

01

 

02.這時在畫面中央位置會出現一個淡藍色的熱區(熱區名稱可以在右邊的『層』窗格中進行修改)。

02

 

03.我們將熱區移動到左邊這位同學的位置,並且調整熱區範圍,讓熱區可以覆蓋這位同學大部分的位置。

03

 

04.接著要建立熱區的交互行為。請點選『交互』索引標籤,底下則分別是交互行為的『事件』、『對象』與『動作』項目。

04

 

05.我們希望觸摸到這位同學的熱區範圍時能觸發反應,所以左邊的『事件』項目請點選『觸摸時』,而在『對象』下拉選單中選取剛剛建立的『熱區3』。

05

 

06.我們希望的觸發反應是跳轉到該位同學頁面。因此在右邊的『動作』項目請選擇『跳轉』。

06

 

07.在『頁面跳轉』視窗中,點選該位同學頁面的右上角的『+』→『確定』,最後務必點選右上角的『添加』鈕。

07

 

08.當我們幫這個熱區添加了交互行為設定,可以在右邊的『屬性欄』窗格中看到這個熱區的交互行為。為了確認熱區交互行為設置是否正確,這時我們可以點選程式視窗右上角的『預覽當前』按鈕來測試查看。

08

 

09.在模擬器畫面中,是使用滑鼠點選動作來模擬觸控動作。我們用滑鼠去點選剛剛設置的同學熱區範圍,看看是否能觸發跳轉頁面的動作。(點選模擬器的HOME鍵就能關閉模擬器,回到程式設計介面。)

09

 

10.利用模擬器確認第一個同學的熱區交互行為正確後,我們開始建立第二個同學的熱區範圍,這時要注意熱區不要重疊。

10

 

11.設定第二個同學熱區的交互行為。

11

 

12.3位同學都完成了熱區的建立與交互行為設定。

12

 

13.再次開啟模擬器來確認所有熱區設置是正確的。這時我們發現了一個問題,當我們跳轉到某位同學詳細介紹頁面後,該如何看另一位同學的詳細介紹頁面呢,我們這時必須按模擬畫面中左上角的『房屋』圖示來回到主頁。

13

14.為了避免使用者找不到回到主頁面的方法,因此我們將在同學的詳細介紹頁面中增加一個『回到首頁的圖示』,並建立熱區交互行為讓我們可以觸摸而跳轉回到主頁面。請點選『插入』索引標籤→『圖片』。

14

 

15.選擇一個事先準備好的『BACK』圖示。

15

 

16.把『BACK』圖示移動到適合的位置。

16

17.依照這單元前述建立熱區並設定交互作用的方法,建立一個熱區並設定回到主頁的交互行為。

17

 

18.由於每個同學詳細介紹頁面都需要這個『BACK』圖示,而且熱區交互行為都是一樣的,因此我們複製第一個同學頁面的熱區來套用到其他同學頁面即可。對第一個同學頁面的熱區按『滑鼠右鍵』→選擇『複製』。

18

 

19.在第二與第三個同學頁面按『滑鼠右鍵』→選擇『粘貼』,即可完成熱區的建立與交互行為設定。

19

 

20.再次開啟模擬器畫面進行最後確認。

20

Comments are closed.