Home » 8.0 線上教學 » 2-3 基礎互動設計:示範互動事件 OnMouseEnter

2-3 基礎互動設計:示範互動事件 OnMouseEnter

本節學習目標

  • 建置一個 OnMouseEnter 的互動功能
  • 修改互動事件的方法



2-3-basic-interaction-ommounseenter-1
選取物件,至 Inspector: Rectangle 窗格的(Properties)屬性,找到互動事件「OnMouseEnter」,點擊兩下開啟 Case Editor 來編輯互動事件。


2-3-basic-interaction-ommounseenter-2
認識Case Editor
開啟 Case Editor,可以看見四個窗格:

Case description: 此事件的描述,可以對事件命名
Click to add actions:顯示所有動作型態(Action),我們可以點擊此觸發事件需要的動作型態即可
Organize actions:已經選擇的動作型態和 Configure actions 內的設定皆會出現在此區塊
Configure actions:設定動作型態的細節內容

設定OnMouseEnter互動事件
兩個步驟設定觸發事件

步驟一:新增假設條件(Add Case)
開啟事件編輯器後,在左方Click to add actions窗格中選擇 Show/Hide。此時會在Organize actions中增加一個假設條件(Case):Show/Hide Widgets。

步驟二:設定假設條件
點選剛才所增加的假設條件 Show/Hide Widgets,在 Configure actions 窗格中的 Select the Widgets to show/hide 點選「要顯示的物件」,在 Visibility 中選擇 Show,再按 OK ,就設定完成了。


2-3-basic-interaction-ommounseenter-3
設定完成的互動事件可以在 Inspector: Rectangle 窗格的(Properties)屬性中看到,對互動事件點擊兩下,可再次開啟 Case Editor 來編輯互動事件。


2-3-basic-interaction-ommounseenter-4
隱藏物件
選擇圖片物件,至工具列勾選「Hidden」。