本文是实现动态文字在一个区域中滚动的效果,大概实现过程如下:

先准备一个区域,然后让文字在该区域内水平移动,本文是实现了从右到左的轮询的效果,其他雷同。

在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中实现广告文字滚动效果的更多相关文章

  1. Flash 开发环境搭建和文字滚动效果实例

    Flash 开发环境搭建和文字滚动效果实例 一.Flash 开发环境搭建 Flash发布的时候可以将资源(即将库中的元件)集成到swf运行文件中.Flash没有代码自动输入补全功能,因此需要一个英文一 ...

  2. android采用SurfaceView实现文字滚动效果

    前言 为了实现文字的滚动效果,之前也重写了TextView效果都不太好,后来对SurfaceView进行完善. 声明     欢迎转载,但请保留文章原始出处:)  小崔博客:http://blog.c ...

  3. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  4. JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  5. js文字滚动效果实现

    纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...

  6. html笔记——网页中视频播放,文字滚动

    转载地址:http://blog.chinaunix.net/uid-191945-id-2792153.html <代码1无限次播放> <EMBED src="地址&qu ...

  7. TextView文字滚动效果

    ScrollText.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  8. 文字滚动效果,jquery和marquee标签

    链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...

  9. js文字滚动效果

    function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...

随机推荐

  1. 35. Search Insert Position@python

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  2. BZOJ 2002 弹飞绵羊(分块)

    题目:弹飞绵羊 这道题,据说是lct裸题,但是lct那么高级的数据结构,我并不会,所以采取了学长讲过的分块做法,我们对序列分块,可以定义两个数组,其中一个表示从当前位置跳出当前块需要多少步,另一个数组 ...

  3. 初识Mysql之基本简单语法总结

    一.  DDL(data definition language)语句:数据定义语言. 这些语句定义了不同的数据段.数据库.表.列.索引等数据库对象.常用语句关键字:create.drop.alter ...

  4. 笔记--Day1--python基础1

    一.目录 1.Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum),目前已经是使用频度特别高的开发语言. 主要应用领域: 云计算:云计算最火的语言,典型应用有Op ...

  5. Python基础——数值

    运算 运算 运算符 示例 加 + 减 - 乘 * 除 / 取余 % 幂 ** 赋值 = 绝对值 abs 取整(四舍五入) round 最大值 max 最小值 min 科学计数法 e 十六进制 0x 逻 ...

  6. day 35 补充

      MySQL数据库初识   MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集 ...

  7. hdu 6318

    Long long ago, there was an integer sequence a.Tonyfang think this sequence is messy, so he will cou ...

  8. SpringMVC之Controller简单使用

    //环境 spring-4.3.18/JDK1.8/开发工具/IntelliJ IDEA 2018.2.5 x64 //工程结构图 //web.xml <?xml version="1 ...

  9. Python动态属性和特性(一)

    在Python中,数据的属性和处理数据的方法统称为属性.其实,方式只是可调用的属性.除了这二者之外,我们还可以创建特性(property),在不改变类接口的前提下,使用存取方法(即读取值和设置值方法) ...

  10. sql 查询数据库中每个表的大小

    For example: exec sp_MSForEachTable @precommand=N'create table temp(name sysname,rows bigint,reserve ...