• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:原型设计之播放控制条

Axure教程:原型设计之播放控制条

作者: @维度 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure app原型教程,axure原型设计教程,axure原型图教程,axure制作app原型教程,原型工具axure教程等相关知识, @维度 希望在学习及工作中可以帮助到您

看视频时或者听音频时,播放控制条基本是必备的控件,以方便用户随意快进快退到随意一个点,这也正是互联网便捷人性的体现。看似简简单单的播放控制条,若想将其原型制作成可拖动效果,还是得下一番功夫的,这篇文章就教大家如何使用axure原型工具制作播放控制条。

第一步:拖拉摆放控件

首先,拖拉一个动态面板(600X100)放在适当位置,命名为“面板1”;

然后,在“面板1”的state1面板状态中放置3个控件;

  1. 一个动态面板(10X30),命名为“面板2”,另外,因为只有动态面板才有拖动时用例,所以要在“面板2”的state1面板状态中放置一个黑框灰底矩形(10X30),命名为“控制点”;
  2. 一个黑框白底矩形(600X10),命名为“控制条”;
  3. 一个黑框灰底矩形(600X10),命名为“控制槽”。

第二步:为“面板2”设置拖动时用例

在拖动时用例中,添加2个移动动作。

移动“面板2”,移动设置为“水平拖动”,添加左侧边界大于等于0,添加右侧边界小于等于“控制槽”的宽度。

移动“控制条”,移动设置为“水平拖动”,添加左侧边界大于等于“控制点”的宽度减去“控制条”的宽度,添加右侧边界小于等于“控制槽”的宽度。

至此已经制作完成,预览时拖动“控制点”即可以看到效果。

效果图:http://hjchbk.axshare.com

您可能想查找下面的文章:

  • Axure教程:微信聊天列表原型制作(二)
  • Axure教程:微信聊天列表原型制作(一)
  • Axure教程|原型设计之抽屉列表
  • Axure教程:原型设计之多用户注册登录
  • Axure教程:如何制作一个不区分大小写的验证码原型?
  • Axure教程:原型设计之转盘抽奖
  • Axure教程:原型设计之水泡导航栏
  • Axure教程:原型设计之播放控制条
  • Axure教程:微信面对面建群原型设计
  • Axure教程:原型设计之弹幕

相关文章

  • 2017-06-13Axure教程:微信面对面建群原型设计
  • 2017-06-14Axure7.0教程(八)函数介绍
  • 2017-06-14axure实现坦克游戏原型
  • 2017-06-14Axure7.0教程(四)中继器的使用(4)
  • 2017-06-13Axure教程:用中继器和日期函数实现万年历
  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-14Axure教程|如何制作”返回顶部”原型功能?
  • 2017-06-14Axure教程|购物车商品增减删除练习
  • 2017-06-13Axure教程丨制作自己的Axure元件库
  • 2017-06-13Axure教程:12306图片验证码的实现(随机可验证)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)
    • Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • 自定义微信元件库:Axure基本元件的应用(下)
    • Axure教程:移动端原型页面横纵向滑动同时实现
    • Axure教程:12306图片验证码的实现(随机可验证)
    • Axure 制作下拉框省市县三级联动
    • banner轮播axure最简易实现及手动切换
    • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
    • Axure PR 7.0 实现页面纵向滑动效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有