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

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

本節學習目標

  • 建置一個 OnClick 的互動功能
  • 修改互動事件的方法
  • 認識快速鍵 Create Link



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


2-2-basic-interaction-onclick-2
認識 Case Editor
開啟 Case Editor,可以看見四個窗格:
Case description: 此事件的描述,可以對事件命名
Click to add actions:顯示所有動作型態(Action),我們可以點擊此觸發事件需要的動作型態即可
Organize actions:已經選擇的動作型態和 Configure Actions 內的設定皆會出現在此區塊
Configure actions:設定動作型態的細節內容

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

步驟一:新增假設條件(Add Case)
開啟事件編輯器後,在左方 Click to add actions 窗格中的 Open Link 中選擇「Current Window」。此時會在 Organize actions 中增加一個假設條件(Case):Open Link in Current Window。

步驟二:設定假設條件
點選剛才所增加的假設條件 Open Link in Current Window,在 Configure actions 窗格中的 Link to page in this design 點選「要開啟的頁面」,再按 OK ,就設定完成了。


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


2-2-basic-interaction-onclick-4
快速鍵 Create Link
OnClick 事件只要設定在同一視窗中開啟頁面連結,就可以使用 Create Link 快速鍵。