Home » 8.0 線上教學 » 9-1 進階 Dynamic Panel:旋轉木馬

9-1 進階 Dynamic Panel:旋轉木馬

本節學習目標

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



9-1-carousel-1
準備需要的物件
先將製作輪播需要的物件(圖片、按鈕)從物件庫拖曳至工作區。


9-1-carousel-2
將物件轉換成 Dynamic panel
選擇在畫面中想要轉換成 Dynamic panel 的物件按下右鍵,在選單最下方點選「Convert to Dynamic Panel」。


9-1-carousel-3
替 Dynamic panel 進行命名
編輯時可以替物件進行命名,之後建置物件時,比較容易辨識,完成以後按下 OK 即可。

增加 State 層級
點擊「+」Add State新增 State,可對每個 State 進行命名。

開啟要編輯的 State
點擊兩下開啟 State 編輯頁。進入 State1 後,新增輪播圖片至 State2 與 State3,即可開始編輯 Dynamic Panel。


9-1-carousel-4
編輯互動事件
選取「上一頁」的按鈕,點擊兩下檢視窗格屬性中的「OnClick」,開啟事件編輯器進行編輯。

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

  1. 選擇「Set Panel State」
  2. 勾選「要輪播的 Dynamic Panel」
  3. 選擇輪播順序:「Previous 前一個」
  4. 勾選重複輪播功能:「Wrap from first to last」
  5. 設定圖片切換的方向 與 移動速度