Axure自動幻燈片製做

一、打開axure7,開始。編輯器

二、拖一個佔位符組件到佈局上(固然也能夠是矩形、圖片之類的),大小270*170,做爲幻燈片的第一張片子,雙擊寫上「第一張片子」。佈局

三、拖一個矩形,設置形狀爲橢圓,調整大小爲10*10,調成一個正圓,Ctrl+D,連續複製到第4個,表示當前幻燈片的數量,排列整齊,放到上面的佔位符下方,設置第一個指示器的背景色爲灰色,表示當前選中狀態。作好的效果以下:動畫


四、如今開始,動態面板上場了:選中佔位符組件,右鍵「轉換爲動態面板」,起個名字main,選中4個圓形指示器組件,右鍵「轉換爲動態面板」,起個名字index。事件

爲何要搞兩個獨立的動態面板?由於咱們想上面的幻燈片有滑動效果,而下面的指示器不須要滑動效果,若是放在一塊兒,作滑動效果時,下面的指示器會跟着一道滑動,實際上咱們看到的指示器通常本身不會滑動。(裏面的當前指示器滑動效果另當別論哈,可使用移動來模擬這個指示器的移動效果)圖片


五、複製動態面板main的第一個狀態爲狀態二、狀態三、狀態4,並依次將裏面的佔位符組件文字改成「第二張片子」、「第三張片子」、「第四張片子」。循環


六、複製動態面板index的第一個狀態爲狀態二、狀態三、狀態4,並依次設置一下第二個狀態到第四個狀態中指示器的背景色,第二個狀態固然是設置第二個指示器的背景色,注意把第二個狀態中以前設置的第一個指示器的背景色還原爲原來的默認白色,這樣切換到第二個狀態時,當前選中的指示器就是第二個了。im


七、關鍵一步:添加自動循環處理,給動態面板添加事件,爲了讓它自動開始,須要在它的「載入時」事件中添加代碼,在「載入時」事件上雙擊,彈出用例編輯器窗口,選擇「設置動態面板狀態」,在右側的窗口中選擇main和index兩個動態面板,在選擇狀態下拉框中,注意選擇「下一步」,而不是選擇特定的某個狀態,而後勾選下方的「從最後一個到第一個自動跳轉」,並設置main進入時和退出時的動畫都爲向左滑動(指示器動態面板index不要設置動畫,它不須要滑動效果),動畫時長默認。img



八、F5預覽一下,發現並無自動播放,由於上一步咱們只在載入時添加了事件,還須要在「動態面板狀態改變時」事件中添加事件,只要把載入時的事件複製到這個事件上便可,事件能夠所有複製和粘貼哦!移動

九、再F5預覽一下,還不行?檢查一下上面的步驟,理論上這時已經自動循環播放了,只是發現速度有點快,由於咱們沒有停留時間。如今在設置動態面板的狀態爲下一步以前添加一個等待事件,設置爲1000毫秒,即等待1秒,注意這個等待1000毫秒不要放在設置動態面板的狀態以後哦!時間



十、再次預覽,看起來正常了吧。

相關文章
相關標籤/搜索