使用Axure制作进度条

一、实现的效果

效果连接：

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

密码：hanyu2012

二、做前准备

背景图片：1张
软件：Axure

 

三、制作流程

1、在开打的空页面上添加一张已经准备好的背景图片（X：50，Y：50 ; W：620 ，H : 320）,如图：

2、在背景那个图片上添加一个按钮控件（X:120,Y:200 ; W :500,H:20），同时设置按钮的填充色为无色，如图：

3、在按钮上添加一个动态面板（X:121,Y:201 ; W :498,H:18），将面板命名为 “进度条”

4、双击“State1”进入动态面板编辑界面，再在该界面上添加一个“矩形控件”（X:0,Y:0; W :498,H:18）。

5、设置矩形控件的边框颜色为无色，填充色如下图：

6、在动态面板“进度条”的状态“State1”的“矩形控件”上添加一个“动态面板”（X:0,Y:0; W :498,H:18），命名为“进度”

7、在动态面板“进度”的“State1”编辑界面上添加一个“矩形控件”（X:0,Y:0; W :498,H:18），设置其边框色为无色，背景设置如下图：

8、在主界面添加“页面载入时”事件，如图：

 

9、制作完成，点击“发布-生成HTML文件”，运行一下测试效果。

 

运行效果OK！大功告成！

转载于:https://www.cnblogs.com/hanyu2012/p/4026811.html