在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(' ...
随机推荐
- NOIP2016 toy
题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...
- linux下jdk安装步骤
1. 登录Linux,切换到root用户 su root 获取root用户权限,当前工作目录不变(需要root密码) 或 sudo -i 不需要root密码直接切换成root(需要当前用户密码) 2. ...
- linux常用命令(配置查看,定时任务)
1.查看所有待挂载设备信息 fdisk -l # fdisk -l Disk /dev/sda: bytes heads, sectors/track, cylinders, total sector ...
- 如何用纯 CSS 创作一台拍立得照相机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可 ...
- Python中变量的作用域
一.变量作用域的含义 变量的作用域说白了就是变量的值从哪里获取,或者说变量取值的地方 我们在写代码过程中会用到很多变量,这些变量会出现在各种代码块中,有的出现在函数块里,有的在函数块外,例如: def ...
- Python爬虫,爬取实验楼全部课程
目的: 使用requests库以及xpath解析进行实验楼所有课程,存入MySQL数据 库中. 准备工作: 首先安装,requests库,lxml库,以及peewee库.在命令行模式,使用以下命令. ...
- IDEA入门学习笔记1:资料收集
IDEA2018软件下载 :https://mp.weixin.qq.com/s?__biz=MzIwMjE1MjMyMw==&mid=2650200056&idx=1&sn= ...
- LeetCode(307) Range Sum Query - Mutable
题目 Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclus ...
- eclipse使用技巧的网站收集——转载(三)
本文来自:https://www.cnblogs.com/jeffen/p/5965227.html,未经更改,尊重作者 工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本 ...
- MIP启发式算法:Variable neighborhood search
*本文主要记录和分享学习到的知识,算不上原创. *参考文章见链接. 本文主要讲述启发式算法中的变邻域搜索(Variable neighborhood search).变邻域搜索的特色在于邻域结构的可变 ...