使用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