精华内容
下载资源
问答
  • axure实现图片轮播

    千次阅读 2016-11-21 09:04:41
     关于用axure做轮播图的教程有很多,不过条条大道通罗马。崇尚简单快速的朋友不妨看看本文介绍的方案。 前段时间做一个开放平台的原型。 大家讨论完需求就希望,快点出原型(第二天)。而且要求“高保真”。 ...



    图片轮播效果

    效果说明:(1)页面载入后定时4s自动循环轮播;(2)图片向左滑动,原点指示随图片滑动变化;(3)鼠标移入原点可切换到对应的图片。

    制作前准备:Axure8+3张图片 

    动效制作:

    1.将page1命名为“图片轮播”——拖入“图片”控件,将其命名为“pic",并调整其样式大小为“375*200”。


    step1

    2.双击“pic"控件添加图1,调整图片大小为375*200,将其转换为“动态面板”,再分别添加两个状态,在状态2,3添加图2和图3。


    step2

    3.回到图片轮播页,拖入”椭圆“控件,调整大小及样式,复制2个,平行排列对齐。将原点1灰色填充,原点2,3白色填充。将3个原点组合并将其转换为"动态面板”,添加状态2(命名为2),状态3(命名为3),分别在状态2,3填充第2和第3个原点为灰色,其余为白色。

    4.拖入3个“热区”控件,分别覆盖在原点1,2,3上(热区大小与圆大小一致),分别命名为point1,point2,point3。


    step3&step4

    5.添加用例——自动循环轮播:

    (1)用例1,选中“图片轮播”页面,选择交互“页面载入时”,添加动作“设置面板状态”,在配置动作做选择“pic动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为向左滑动。同样的,设置“point动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为逐渐。


    step5

    步骤5基本上就完成了图片定时自动循环轮播的效果了

    展开全文
  • Axure8.0图片旋转注意

    2019-09-25 19:00:16
    Axure当中,经常会用到一些箭头类的图片,如: 讲该图片复制并旋转180度后,变为 此时,若要对两张图设定隐藏/显示动作(向左滑动、向右滑动等)时候。 第一张图会按照指定动作进行;第二张旋转180度的,...

    在Axure当中,经常会用到一些箭头类的图片,如:

    讲该图片复制并旋转180度后,变为

    此时,若要对两张图设定隐藏/显示动作(向左滑动、向右滑动等)时候。

    第一张图会按照指定动作进行;第二张旋转180度的,按照指定动作的反方向动作。

    也就是说,第二复制的图片,并非一个单独的个体图片。它的坐标位置随着旋转角度也发生相应变化,如果旋转180度,那么就会出现指东打西,指上打下的状况。

    转载于:https://www.cnblogs.com/loyfee/p/5681340.html

    展开全文
  • Axure教程|Axure图片处理技巧分享

    千次阅读 2012-02-02 09:35:04
    本人在日常使用Axure的过程中会大量得使用图片,而这些图片基本都来自于现有产品界面,即以截图方式插入Axure,由于Axure没有自带图片处理的功能,所以在如何整出一个比较满意的界面上,花了不少心思; 但是...
      
    

    本人在日常使用Axure的过程中会大量得使用图片,而这些图片基本都来自于现有产品界面,即以截图方式插入Axure,由于Axure没有自带图片处理的功能,所以在如何整出一个比较满意的界面上,花了不少心思;

    但是,一来本人PS技艺不精,二来觉得这样倒来倒去麻烦,所以在不使用专业截图及图片处理软件的情况下摸索出了一些事半功倍的方法,分享给大家,希望对大家有帮助。

    另外本文涉及的图片处理只涉及以下程序或工具:

    1. 画图版(mspaint)

    2. SnapShot:从QQ中剥离出的截图工具

    image 点此下载

    注:具体使用方法与QQ截图相同

    3. Office2007-PowerPoint

    注:用PPT可以很快得得到一些常用的图片效果,得到效果后直接Ctrl+C,到Axure中Ctrl+V搞定。

    4. Maxthon2.0及以后版本

    Axure中图片处理的小技巧:

    一、Axure中使用截图-使用SnapShot:

    a. 在工具栏的快速启动中放个SnapShot的快捷方式

    image

    b. 要用到的时候点击快捷方式

    c. 选中要截图的区域

    d. 双击取图

    e. 在需要用到截图的地方Ctrl+V

    二、Axure中使用截图-使用Maxthon:

    如果是对页面的截图,那推荐使用Maxthon了,原因有下:

    1. 截图方便:默认设置,在Maxthon激活的情况下,Ctrl+F1就是打开区域截图功能;

    2. 保存方便:直接指定图片格式并另存到指定文件夹

    a. 打开Maxthon的网页工具(快捷键Ctrl+B)

    b. 依次选择“屏幕截图”-“截图选项”

    image

    c. 设置图片格式和保存文件夹

    image

    小提示:如果对单一图片需要截取不同部分时,可以使用Maxthon打开图片,然后再按需截取。

    三、Axure中图片处理-使用PPT(2007版本)

    在Axure中无法编辑图片,这点很痛苦;有时候只要对图片做个大小/镜相效果/圆角效果处理,需要打开PS等大软件,麻烦!用PPT吧:

    1. 将需要处理的图片或截图拉到PPT中;

    2. 双击图片,工具栏上就有一栏效果供选择咯;

    3. 调整得到最终所要的效果后,选中图片Ctrl+C

    4. 到Axure里Ctrl+V,搞定!

    小提示:有时候做镜相处理的进候,图片下半部分会很大,但是多余部分又不需要的时候,使用SnapShot在PPT里直接截想要的部分,再复制到Axure中

    四、Axure中图片处理-使用剪贴版

    有时候需要的截图是菜单下拉,或者只有当被激活时才显示的选项,无法使用截图工具直接截取(尝试过使用其它专业截图工具,但是我还是觉得麻烦,特别是我开双显,很多截图工具会出错)。

    1. 打开或激活待截取的菜单;

    2. PrintScreen,如果对单个窗口可使用Alt+PrintScreen只截取当前激活的窗口;

    3. 打开剪贴板(Windows开始键-R-mspaint-回车);

    4. Ctrl+v,再选择截取需要的内容

    五、Axure中图片处理-使用Widgets-Rectangle

    在Axure中贴图后,特别是直接引用现有产品功能点的时候,需要对图片中的文字或图案稍加处理,比如去掉/加上/修改两个字,可以不打开专门的图片编辑软件,使用Rectangle实现以上一系列操作,以调整现有产品中的功能名称为例:

    1. 截图并粘贴到Axure中,需要将“加为客户”修改为“删除客户”;

    image

    2. 拖入Rectangle组件,输入“删除客户”,去边框,根据目标区域调整底色和字体颜色,调整大小,将文字顺序调整为靠左对齐:

    image

    3. 将调整好的组件覆盖到目标区域,Over!参见修改前和修改后对比:

    image image

    小提示:以上方法变通一下,可以在Axure中直接实现对素材的修改达到预期效果,而不用打开专业的软件。

    展开全文
  • 首先我们先添加一个动态面板名曰东京食尸鬼(似乎暴露了什么),为其设置多个状态,每个状态下放入一张图片(就是你想要播放的那些图片) 然后设置页面载入事件(OnPageLoad):设置东京食尸鬼状态设置为状态1(淡入...

      首先我们先添加一个动态面板名曰东京食尸鬼(似乎暴露了什么),为其设置多个状态,每个状态下放入一张图片(就是你想要播放的那些图片)

      然后设置页面载入事件(OnPageLoad):设置东京食尸鬼状态设置为状态1(淡入淡出效果随意)

      最后对东京食尸鬼面板添加事件:OnPanelStateChange(动态面板状态改变时),具体设置请看下图:

      最后一publish就好了

      最后来总结一下原理:东京食尸鬼默认状态为1,页面载入事件将其状态变为状态1,于是触发了OnPanelStateChange事件,第一次触发时东京食尸鬼从状态1变为状态2,而这再次触发了OnPanelStateChange事件,于是其状态变为状态3,然后,OnPanelStaeChange再次被触发,img变为1,这便形成了一个完整的循环。
    注:状态标注有点乱,四个状态(1、状态1、状态2、状态3),造成麻烦谅解

    转载于:https://www.cnblogs.com/shanyuemoxi/p/4758314.html

    展开全文
  • Axure动态图片墙交互 先看一下整体浏览效果 鼠标移入时图片会变成彩色的,下方会有提示框显示出来,鼠标移出时颜色会慢慢变暗,点击图片会将图片放大至全屏 重难点讲解: 点击放大图片操作:热区 (添加一个动态...
  • 回答:您好如做的是室内设计的话,那么来说可能会些参数提供给您的(例如长宽高)如果没有参数的话,只要把比例做好就可以了。只要比例做好了,东西看起来就自然像。至于教程的话,一般录制教程前都会有做好准备的,...
  • Axure http://dummyimage.com/350x200/200/fffhttp://c7sky.com/the-top-10-placeholder-image-services.htmlhttp://zhanweitu.com/600x100 转载于:https://www.cnblogs.com/csjoz/p/7243938.html
  • 2回答2020-08-18浏览:71分类:绘图建模回答:1、谷歌内核的浏览器需要安装Axure的插件才能访问2、火狐浏览器(好像可以)与IE浏览器3、可以用本机搭建一个服务器,让人家访问你的IP(任何浏览器都可以)1回答2020-10-20...
  • Axure

    2021-01-17 19:49:28
    HTML CSS js:JavaScript 框架语言: jQuery vue(react/angular) node … 企业级框架: vue-element-admin/template Mysql Axure: 原型设计 项目: 可行性分析:项目经理 需求分析:开发人员、...
  • 基本工具 本章节主要对功能区域的基本工具区域进行简要说明,基本工具区域可以让我们快速的进行原型的编辑。...(生成了Html文件,可以配置生成的界面、说明、交互、字体等等属性) 登录 登录Axure的账号
  • axure

    2018-05-26 17:16:00
    你轻松快捷的以鼠标的方式创建带...Axure RP 的工作环境:Windows、OS X。 1.主菜单和工具栏 执行常用操作,如文件打开、保存文件,格式化控件,自动生成原型和规格说明书等操作。 2.站点地图面板 对所设计的页面...
  • Axure RP是一款专业的快速原型设计工具,学习过程中我们可以根据自己的习惯设置属于自己的快捷键,轻轻松松的学习Axcure原型设计软件。(以下快捷键可通过键盘操作实现)(图片素材来源于包图网)基本快捷键打开:【Ctrl...
  • 我们在画产品原型的时候,也常常需要画出上传图片的效果,但是Axure里面并没有上传图片的元件,导致我们不能画出高保真的上传图片的原型。 所以本期教程主要介绍如何通过代码制作上传本地图片的原型模板,让我们...
  • 但是这种部件库的ICON一般都是图片,当颜色与当前原型色调不一样的时候,就不能用了。而且ICON常常表示状态,不同的状态需要不同的颜色,用图片做原型ICON就不合适了。字体CION方式后来发现了一个神器,字体icon,每...
  • AXURE

    2019-07-03 19:49:17
    AXURE电商后台原型图 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新...
  • Hello,今天和大家分享AXURE手机版的图片管理器,总共有4个案例,分别是图片上传单图和多图案例,以及图片分享单图和多图案例。然后里面图片都是用中继器维护的,你们使用也非常简单,只需要在中继器内导入图片,...
  • macw小编为大家带来axure拖动图片可以改变大小尺寸的教程。 动态效果演示: 教程开始: 1、首先准备元件,两个文本标签分别起名字width、height(用于获取图片的宽度跟高度),一张图片(转换为动态面板)。 如图:...
  • 教程来源: http://www.woshipm.com/rp/1072958.html 练习目的: 第一个小游戏,不希望太有难度,简单即可 发现用Axure可以做一些好玩的事情 成果: 收获:
  • baiduYunpan:http://pan.baidu.com/s/1eRPCy90 里面的“图片轮播”部件即可实现这个功能 转载于:https://www.cnblogs.com/dengyg200891/p/5514971.html
  • axure教程

    2020-02-01 22:19:10
    名词解释 线框图:一般就是指产品原型,比如:axure教程把线框图尽快画出来和把原型尽 快做出来是一个意思。 axure 元件:也叫 axure 组件或 ...生成原型:是指把绘制好的原型通过 axure rp 生成静态的 html 页...
  • Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 101 Article 5: Introduction介绍 - HTML Prototypes - HTML原型Overview概述 1. Prototypes Demo 1. 原型演示 2. HTML Prototypes 2. HTML原型 
  • Axure中插入图片后,点击鼠标右键,选择编辑图片。逐个使用了一下: 不懂的地方,请指教,大家互相学习。 导入图片 指定显示的图片文件 编辑文字 图片上显示的文字(应该是上下左右都居中显示),...
  • 利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定。 双击动态面板,然后双击...
  • 程矢Axure夜话:Axure基础系列视频教程之图片手动播放 案例描述:图片手动播放 知识点: 动态面板事件属性 效果图:   本站在线效果预览:...
  • 淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片图片引入至axure中,...
  • 原型预览:https://www.pmdaniu.com/storage/121050/6f1cd5148df7c367957aa9b6f35bef6b-69620/start.html 原型介绍 作品页数:共6页,分别为顶部图片轮播图、顶部大小轮播图、上下滑动轮播图、全屏轮播图、心形...
  • 程矢Axure夜话:Axure基础系列视频教程之图片自动循环播放 案例描述:图片自动循环播放 知识点: 动态面板事件属性 效果图:   本站在线效果预览:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,248
精华内容 1,299
关键字:

axurehtml图片