Home » 線上教學 » 第八章 進階 Dynamic Panel » 8-1 進階互動設計:旋轉木馬

8-1 進階互動設計:旋轉木馬

本節學習目標

  • 學會使用進階Dynamic Panel(動態面板)
  • 透過Dynamic Panel製作旋轉木馬的照片輪播效果

本節學習主要透過Dynamic Panel製作旋轉木馬的照片輪播效果,共可分為四部分:

1

1. 設置首張輪播圖片及按鈕

首先,先將製作輪播效果所需要的物件(一張圖片、按鈕)從Widgets窗格內拖曳至Wireframe,即可輕鬆建立輪播的第一張書籍圖片,Widgets窗格內拖曳出之按鈕可作為切換輪播互動效果的觸發按鈕,並將按鈕文字設置為「Next」。


3

2. 編輯Dynamic Panel與命名

基本設置完成後,請在第一張輪播圖片上點選滑鼠右鍵,選擇「Convert to Dynamic Panel」,即可將圖片轉換成Dynamic Panel,並且可以透過右上方Widget Interactions and Notes窗格的「Dynamic Panel Name」將輪播圖片Dynamic Panel命名。接著移至Axure右下方的Widget Manager窗格,於Dynamic Panel按滑鼠右鍵,點選「Add State」,新增兩個State後,可對每個State進行命名。

State命名完,進入State1後,新增輪播圖片至State2與State3,即可開始編輯Dynamic Panel了。


4

3. 編輯觸發事件

新增完輪播圖片回到主頁後,接著必須編輯按鈕的互動效果,圖片才能輪播,所以我們要選擇Axure畫面右上方Widget Interactions and Notes窗格內Interactions中的「OnClick」游標點擊時的觸發事件(Event)進行編輯。

開啟事件編輯器後,可以看見四個窗格

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

  • 步驟一:新增假設條件(Add Case)
    • 開啟事件編輯器後,在左方Click to add actions窗格中的Dynamic Panel中選擇「Set Panel State」。此時會在Organize actions中增加一個假設條件(Case):Set Panel State。
  • 步驟二:設定假設條件
    • 點選剛才所增加的假設條件Set Panel State,在Configure actions窗格中勾選「(Dynamic Panel)」,於下方Select the State選擇「Next」,勾選「Wrap from last to first」反覆輪播。也可以透過Animate in 或Animate out選擇圖片切換的效果。

  

4. 預覽成果

上述步驟皆完成後,可以透過工具列 Preview或F5預覽成果。

Leave a Reply