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

2-4 基礎互動設計:示範互動事件 OnMouseOut

本節學習目標

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



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


2-4-basic-interaction-ommounseout-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中選擇Hide,再按 OK ,就設定完成了。


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