在AxureRP8中实现广告文字滚动效果
本文是实现动态文字在一个区域中滚动的效果,大概实现过程如下:
先准备一个区域,然后让文字在该区域内水平移动,本文是实现了从右到左的轮询的效果,其他雷同。
在Axure中,这种移动的过程需要动态移动,利用动态面板的状态切换来改变文本标签的值,从而实现了定时的功能
最后需要再页面加载的时候动态的触发动态面板的状态切换以及触发状态改变事件。貌似也可以不要触发状态改变事件。
具体流程如下:
1、打开Axure RP8软件后,系统自动创建了index页面,如图一所示:
图一 index页面
2、在内容区域内拖入一个矩形3,在拖入一个文本标签(将名称设置为:滚动文字),如图二所示:
图二 设置区域及文字信息
3、将文本标签转换为动态面板,操作为:选择“文本标签”,然后鼠标右键,选择“转换为动态面板”,然后将动态面板命名为“滚动文字动态面板”,如图三所示:
图三 转换动态面板
4、向“滚动文字动态面板”动态面板中添加状态,我采用了复制状态按钮实现,选择State1,然后State1中的“复制状态”按钮,如图四所示:
图四 复制状态
5、选择文字标签,然后再属性--交互--“状态改变时”双击,如图五所示:
图五 添加状态事件
6、向文本标签设置动作,在弹出框中添加动作一栏,找到 “移动”后点击,然后在右侧配置动作中选中“滚动文字动态面板(动态面板)”,如图六所示:
图六 添加移动事件
7、配置移动参数,还是在图六所示的图中,找到配置动作下方的移动选项,将移动选中设置为“绝对位置”,然后选中x:文本框后的fx,点击fx设置偏移量,
点击fx后弹出页面,在弹出页面中找到最上面的插入变量和函数并点击,然后选中元件中的x值,最后将This.x后增加“-10”
如图七所示:
图七 设置参数
8、增加全局变量my_move_x,将变量值设置为500(因为矩形3的宽度决定),如图八所示:
图八 添加自定义全局变量
9、添加判断条件,如图九所示:
图九 添加判断条件
10、将文本标签移动到右侧初始位置,如图十所示:
图十 移动文本标签
以上为文本标签移动配置,所有的准备好后,还需让让文本标签的“状态改变时”事件触发,下面开始触发“状态改变时”的事件。
11、选中矩形3,然后右侧属性--交互中选中“载入时”,如图十一所示:
图十一 增加触发事件
总结:
动态面板状态改变可当作定时器来使用
附件下载地址:https://files.cnblogs.com/files/-ShiL/%E6%96%87%E5%AD%97%E6%BB%9A%E5%8A%A8%E6%A1%88%E4%BE%8B.rar
在AxureRP8中实现广告文字滚动效果的更多相关文章
- Flash 开发环境搭建和文字滚动效果实例
Flash 开发环境搭建和文字滚动效果实例 一.Flash 开发环境搭建 Flash发布的时候可以将资源(即将库中的元件)集成到swf运行文件中.Flash没有代码自动输入补全功能,因此需要一个英文一 ...
- android采用SurfaceView实现文字滚动效果
前言 为了实现文字的滚动效果,之前也重写了TextView效果都不太好,后来对SurfaceView进行完善. 声明 欢迎转载,但请保留文章原始出处:) 小崔博客:http://blog.c ...
- 如何在HTML中实现图片的滚动效果
<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...
- js文字滚动效果实现
纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...
- html笔记——网页中视频播放,文字滚动
转载地址:http://blog.chinaunix.net/uid-191945-id-2792153.html <代码1无限次播放> <EMBED src="地址&qu ...
- TextView文字滚动效果
ScrollText.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...
- 文字滚动效果,jquery和marquee标签
链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...
- js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
随机推荐
- 【莫队】bzoj4866: [Ynoi2017]由乃的商场之旅
莫队的一些套路 Description 由乃有一天去参加一个商场举办的游戏.商场派了一些球王排成一行.每个人面前有几堆球.说来也巧,由乃和你 一样,觉得这游戏很无聊,于是决定换一个商场.另一个商场是D ...
- Python基础教程2-3:以正确的宽度在居中的“盒子”内打印一个句子
代码示例:#获取句子长度sentence = input('Plese input a sentence:')#He's very naughty boyscreen_width =100#获取文本的 ...
- [提供可行性脚本] RHEL/CentOS 7 多节点SSH免密登陆
实验说明: 在自动化部署时,会经常SSH别的机器去操作,然而每次的密码认证却很令人烦躁,尤其是很长的密码,因此SSH免密登陆就显得必不可少: 在机器数目很多的时候,使用更过的往往是Ansible分发并 ...
- 自动化运维工具——pssh
PSSH介绍 pssh是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的.它的用法可以媲美ansible的一些简单用法,执行起来速度比ansible快它支持 ...
- 【mysql】【windows】MySQL 服务无法启动,服务没有报告任何错误,请键入 NET HELPMSG 3534 以获得更多的帮助。
成功安装以后,启动MySQL,输入: net start mysql 提示: ”MySQL 服务无法启动,服务没有报告任何错误,请键入 NET HELPMSG 3534 以获得更多的帮助.” 查了下, ...
- thinkphp5中php7中运行会出现No input file specified. 这个你改个东西
<IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteCond %{RE ...
- python网络-Socket之TCP编程(26)
一.TCP简介 1.TCP介绍 TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议. TC ...
- SimpleDateFormat优化写法
在一个读取数据库数据导出到excel文件的例子当中,每次处理一个时间信息的时候,就需要创建一个SimpleDateFormat实例对象,然后再丢弃这个对象.大量的对象就这样被创建出来,占用大量的内存和 ...
- Linux编程中链接库的使用
链接库本质上是一段可执行的二进制代码,可以被操作系统载入内存执行.按加载的时机不同,链接库可以分为静态链接库和动态链接库. 静态链接库:编译过程中加载进可执行文件的库(静态库省去了运行时加载的消耗,但 ...
- 初试webpack打包
第一次接触webpack,学习了如何用webpack打包,记录一下过程. 1.在项目根目录安装webpack $ npm install webpack --save-dev 2.新建一个webpac ...