如何用 Axure 做輪播廣告的效果？

今天的教學是用Axure做出會自動輪播的輪播廣告喔，就像上面這種東西啦~

第一步 建立Panel

1. 使用 Dynamic Panel 元件
2. 設定成目標大小
3. 為 Panel 命名並新增數個 States

4. 打開每個 States並填入4個不同的圖案/顏色（這樣子才看的出來有輪播）
5. 關閉這個 Panel 的編輯

第二步 新增輪播示意的圓點點

1. 在頁面中，Panel 上新增4個圓點點的圖案
    （當然方形或三角形也可以，隨便你）
2. 設定圓點的樣式，select 的狀態要與一般狀態不一樣

    蛙這邊是灰點，被選擇時顯示白點

3. 設定滑鼠移到點點上時的動態（OnMouseEnter）

    3.1 選擇Set Panel State

          3.1.1 Panel 選擇你剛剛建立的 Panel

          3.1.2 Select the State 選擇剛剛 Panel 的第一個 State，我沒有特別改命名，所以是 State 1

          3.1.3 Animate In / Out 是 Panel 切換時的動畫效果與效果的速度，挑喜歡的就可以了

          3.1.4 設定完成表示當滑鼠移到第一個點的時候，把 Panel 切換到第一個 State

    3.2 選擇 Set Selected/Checked

          3.2.1 選擇 This Widget（當然也可以直接指定這個圓點的名字，但直接用This Widget很方便~）

          3.2.2 底下的設定選擇 value 為 true

          3.2.3 設定完成表示當滑鼠移到第一個點的時候，將第一個點自身的狀態設定 Selected 被選擇的狀態，
                   這樣子設定之後，搭配前面的樣式，就是滑鼠移過去點點會變成白色

4. 設定滑鼠從點點上移開時的動態（OnMouseOut）

    4.1 與 3.2 相同，但這次狀態設定為 false

    4.2 這個設定完成之後，滑鼠從點點上移開之後點點就會恢復為灰色

第三步 設定滑鼠沒動作也會自己輪播的效果

1. 設定元件被讀取出來時會自動執行的動作（OnLoad）

    1.1 選擇 Wait
          設定 Wait 可以讓動作延緩執行，我這邊沒打算讓輪播跑太快，設定等待時間是5000ms

    1.2 選擇 Set Panel State

          1.2.1 Panel 選擇你剛剛建立的 Panel

          1.2.2 Select the State 選擇 Next，表示不管現在在哪一個 State，都切換為下一個 State

          1.2.3 Wrap from last to first 選項打勾，這樣子輪播到最後一個之後他會從第一則再開始播

          1.2.4 Animate In / Out 是 Panel 切換時的動畫效果與效果的速度，挑喜歡的就可以了

          1.2.5 設定完成表示每隔5000ms他會自動的切換為下一個 State

    1.3 因為這個動作在你滑鼠經過 Panel 或是手動切換過 State 之後會被停止，
          因此建議在 OnMouseOut 時也複製一遍這個設定

最後的碎碎念

這樣子做唯一沒有能夠做出來的特效是自動輪播時，沒有辦法用圓點顯示目前位置，如果想要能產生這樣的效果的話，建議可以把圓點點也放進一個Panel中，這樣子就可以囉~

另外，你如果一直去玩弄他的話，他有一陣子會變成快速的跑馬燈啊哈哈哈~

不管怎麼說，這樣子終於完成了！！！！ 感覺好辛苦啊，建議做完了之後直接塞進 Library 或是 Master 中，方便取用囉~ 

（是說...其實也可以一開始就去找人家做好的這個效果... 這樣子快很多啊  XDDD）

！快來看看效果吧！