使用Axure制作進度條


一、實現的效果

image

效果連接:

http://1128ab.axshare.com/prototype/login/1128ab

密碼:hanyu2012

二、做前准備

背景圖片:1張
軟件:Axure

 

三、制作流程

1、在開打的空頁面上添加一張已經准備好的背景圖片(X:50,Y:50 ; W:620 ,H : 320),如圖:

image

2、在背景那個圖片上添加一個按鈕控件(X:120,Y:200 ; W :500,H:20),同時設置按鈕的填充色為無色,如圖:

image

3、在按鈕上添加一個動態面板(X:121,Y:201 ; W :498,H:18),將面板命名為 “進度條”

image

image

4、雙擊“State1”進入動態面板編輯界面,再在該界面上添加一個“矩形控件”(X:0,Y:0; W :498,H:18)。

image

5、設置矩形控件的邊框顏色為無色,填充色如下圖:

image

6、在動態面板“進度條”的狀態“State1”的“矩形控件”上添加一個“動態面板”(X:0,Y:0; W :498,H:18),命名為“進度”

image

7、在動態面板“進度”的“State1”編輯界面上添加一個“矩形控件”(X:0,Y:0; W :498,H:18),設置其邊框色為無色,背景設置如下圖:

image

8、在主界面添加“頁面載入時”事件,如圖:

SNAGHTML1c79e3a

image

 

9、制作完成,點擊“發布-生成HTML文件”,運行一下測試效果。

 image

運行效果OK!大功告成!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM