互动大师入门篇

Title Text,Body Level One,Body Level Two,Body Level Three,Body Level Four,Body Level Five,VXPLO互动大师,交互设计工具,强大的云端设计工具,随心所欲的交互展示,各种网页与手机内容,100%零代码,入门篇,第一章：VXPLO互动大师工具介绍,1.1 VXPLO互动大师是什么？,1.2 VXPLO互动大师可以做什么？,1.3 VXPLO互动大师是否适用于商业用户制作大的商业作品？,1.4 VXPLO互动大师的工作环境,1.5 VXPLO互动大师编辑器中支持的互动事件,第一章：VXPLO互动大师工具介绍,1.1. VXPLO互动大师是什么？,VXPLO互动大师，发音 V-X-PLO（字母V，字母X，explore的plore相同的音节），是一款在线互动富媒体编辑工具,他能够让用户在线创作自己的互动富媒体作品并方便的分享给别人。不同于传统的单机制作工具，VXPLO互动大师将富媒体创作推到一个全新的高度，它拥有以下一些传统工具无法企及的优势：,可以制作任何类型的在线内容,包括: 互动视频、网页特效、微信应用、APP应用、minisite、在线广告、个人博客、在线PPT、互动相册、小游戏等等；,可视化地完成所有设计工作，无需任何编写任何代码，所见即所得；,非常简单就能做出惊艳的互动效果让你的朋友眼前一亮；,无需下载安装任何软件，无论身在何处打开浏览器即可使用；,可以随时随地分享作品，无论windows、osx、智能手机或平板，都能够正常观看；,同时兼容Flash和HTML5两种技术；,公共账户永久免费使用。,第一章：VXPLO互动大师工具介绍,1.2. VXPLO互动大师可以做什么？,VXPLO互动大师真正完全在线编辑，可以直接使用视频、音频、pdf、word，ppt文件，flash，网页等作为制作素材，不再受文件格式所困扰。VXPLO互动大师可以做的作品类型包括但不限于以下几种：,( 1 ) 交互视频，交互微电影,( 2 ) 酷炫PPT:,( 3 ) 个人博客、网站或相册:,( 4 ) 数字简历和贺卡:,( 5 ) 设计原型:,( 6 ) iPhone / Android手机网页，手机APP应用,第一章：VXPLO互动大师工具介绍,1.3 VXPLO互动大师是否适用于商业用户制作大的商业作品？,当然！由VXPLO互动大师做出的作品完全是一个成品，可适用于各种商业场合的展示，并无需受屏幕和设备的限制。,( 1 ) 制作互联网广告:, 只需要拥有优秀的创意，无需专程序员或专业技术团队支持就能够快速的制作效果优秀的互联网广告；, 只需要一行代码就能轻松发布制作完成的互联网广告，专业的统计工具方便随时跟踪广告效果（商业用户专享）；, 广告发布后随时可以方便的修改和撤销，无需再次更新立即生效。,第一章：VXPLO互动大师工具介绍,( 2 ) 互动视频节目和电子商务:, 在普通的视频节目或广告上无缝增加新的互动内容,不需要专业制作团队,普通设计人员就可完成,带给观众全新的观看体验；, 非传统的互动效果，用户直接与视频内容互动，甚至可以实现直接在视频内部进行商品购买的操作。,( 3 ) 微信应用模板:, 在微信公共账号中突破传统的单页面形式，可生成更多的二级或三级页面。, 突破单一的文字及视频内容，可在微信中增加更多的动态效果，互动游戏或商业活动（如刮刮乐等），使品牌微信营销更多样更有效；, 简单几步可直接接入已有的微信公共账号，发送微信更直观。,第一章：VXPLO互动大师工具介绍,( 4 ) 创建支持iOS和Android的APP:,( 5 ) 创建企业网站主页:, 能够方便的创作各种互动功能和动画效果；, 可视化的编辑器助你轻松创建网站；, 灵活的使用方式，无论是直接创建整个网站还是当作局部动画，VXPLO互动大师都能够胜任。,( 6 ) 数字展牌, 可视化地创建互动数字展牌；, 在线监测数字展牌运行情况，并且允许远程更新展牌内容。,( 7 ) 在线教育:, 让传统的在线教育能够做的更有趣更交互进一步增加在线教育的实用性；, 学生与老师能够实时沟通，老师能够立即得到学生的反馈。,第一章：VXPLO互动大师工具介绍,1.4 VXPLO互动大师的工作环境：,VXPLO互动大师对操作系统或是你所用的电脑没有特殊的要求。只要你有网络，能打开浏览器，就可以使用VXPLO互动大师的工具。,编辑器各功能面板如下一页图片所示。,更多关于功能面板的介绍请查看VXPLO互动大师的官网学习页面。（),b. 工具面板,d. 时间轴,a. 菜单栏,f. 对象树,g. 历史面板,c. 属性面板,e. 舞台,编辑器各功能面板,第一章：VXPLO互动大师工具介绍,1.4 VXPLO互动大师的工作环境（续）,a. 菜单栏: 执行常用操作，比如导入，分享，预览，保存，帮助，设置等。,b. 工具面板：是添加各种工具的地方，包括编辑一个VXPLO互动大师案例所需的各种工具，包括添加媒体工具，添加事件工具，管理页面工具等等。,c. 属性面板：是调整和控制对象,属性的，是,VXPLO互动大师,编辑器中最重要的编辑工具之一，它用来设定每一个对象的属性的，比如图片对象的大小，方位，旋转角度，透明度等。定义交互触发的事件和效果也是在事件属性面板中完成。,d. 时间轴：,时间轴窗口会在你选中任意一个具有时间属性的对象后弹出，包括视频，音频，时间轴，运动轨迹等。每一个对象都对应它自己特有的时间轴窗口。,第一章：VXPLO互动大师工具介绍,1.4 VXPLO互动大师的工作环境（续）,e. 舞台：顾名思义是所有设计和事件发生的区域，类似于其他设计软件中画布的概念。在VXPLO互动大师中，舞台也是一个对象，因此也可以在属性面板中对它进行设置。,f. 对象树：,在对象树窗口中，列出了你在一个,VXPLO互动大师,案例中添加的所有对象，这些对象按树状结构组织，以舞台为根对象，组成了一棵对象树。,g. 历史面板：,历史窗口记录了你打开编辑器后每一布的操作，你可以通过双击任意一个过往操作步骤来回到该操作步骤，即这个选中的操作步骤之后的所有操作都会被撤销。,第一章：VXPLO互动大师工具介绍,1.5 VXPLO互动大师编辑器中支持的互动事件,触发事件（指某个交互是由什么触发的）：,点击,鼠标移上,鼠标移出,对象显示,对象隐藏,碰撞,拖拽,键盘按键控制,开始（视频，音频）,结束（视频，音频）,播放时间（视频，音频）,计数器等于某个数值时,摇一摇（手机）,擦除（手机）,滑动Swipe （手机）,不同方向的倾斜（手机）,第一章：VXPLO互动大师工具介绍,1.5 VXPLO互动大师编辑器中支持的互动事件,目标对象动作（指某个交互产生了怎样的效果）：,对象显示不显示,改变对象属性（大小，角度，透明度，颜色，位置等）,删除对象,播放停止重新播放到某一个时刻（视频，音频，时间轴）,对象置于顶层置于底层,改变层序,克隆对象删除克隆对象,振动,交替显示,设置随机,下载,1/1/赋值（计数器）,更换素材,上下翻页到达制定页面,打开网页,设置标题,注册登录,上下滑动翻页（手机）,收集统计信息,返回朋友圈统计图（手机）,入门篇,第二章：创建一个VXPLO互动大师作品流程,2.1 怎样打开VXPLO互动大师编辑器？,2.2 如何新建一个作品？,2.3 如何添加素材对象？,2.4 对象树是如何排序的？,2.5 如何可以改变对象树上对象的排序？,2.6 如何设置交互播放逻辑？,2.7 如何预览你的作品？,2.8 如何保存你的作品？,2.9 如何分享你的作品？,第二章：创建一个VXPLO互动大师作品流程,2.1 怎样打开VXPLO互动大师编辑器？,打开 (国外用户可打开),网站右上方点击“注册”，免费注册VXPLO互动大师账户。,进入“我的作品”页面，点击新建作品。,如果你是第一次使用VXPLO互动大师，我们建议你可以先观看我们的教学视频，或是打开教学作品，进行学习。,第二章：创建一个VXPLO互动大师作品流程,2.2 如何新建一个作品？,新建作品可以有两个选择：从头开始或是使用模板。你可以从头开始你自己的项目，或是利用我们已经在VXPLO互动大师里为你准备好的模板。,新用户，我们建议你先使用模板。可以让你更快地熟悉VXPLO互动大师的工具环境。,若你想从头开始你自己的项目，请最好有一个大概的作品构思或是页面设计的想法。,第二章：创建一个VXPLO互动大师作品流程,2.3 如何添加素材对象？,添加素材对象有两种方式：,1）用工具面板添加：点击左侧工具面板中要添加的工具，看到图标亮起后，用鼠标在舞台上点击定位。会有相应的弹出窗口提示你上传素材或选择素材库的已有素材。,小贴士：如果你是想建立网站或制作其他种类有很多页面层级的作品，可以先在舞台上添加页面。再在页面的基础上添加其他素材。点击工具面板中的“页面”按钮，页面就会自动被添加到舞台上了。,第二章：创建一个VXPLO互动大师作品流程,2.3 如何添加素材对象？,添加素材对象有两种方式：,2）使用对象树面板添加：选中对象树中的舞台，,右键点击,舞台，弹出选项中选择添加。就可以添加入各种素材对象或其他工具对象。用鼠标在舞台上点击定位。会有相应的弹出窗口提示你上传素材或选择素材库的已有素材。,小贴士：你也可以利用右键弹出选项复制，剪切，粘贴该对象。,第二章：创建一个VXPLO互动大师作品流程,2.4 对象树是如何排序的？（图示在下一页）,一般来说在对象树中的对象越靠近舞台对象，在舞台上就越显示在上层。,对象重叠时，子对象总是排列在父对象之上。,越靠近父对象的子对象，在舞台上就越显示在上层。,2.5 如何可以改变对象树上对象的排序？,针对同一个父对象下不同子对象，你可以直接在对象树中拖拽对象来改变它们排列顺序。,在对象树中你不能夸父对象拖拽子对象，即你不能将一个对象拖拽成为另一个父对象的子对象。因此，如果要改变一个对象的父对象，你需要使用,右键点击,，选择剪切-粘贴操作。,“女子”和“彩色圆形”在舞台上是同层级的对象，“女子”图片更靠近“舞台”，所以它在舞台上会挡住”彩色圆形“图片。”QR cdoe“和”棱形1“是”女子“的子对象，它排列在父对象之上，“QR code“图片又排在”棱形1“图片上。,第二章：创建一个VXPLO互动大师作品流程,2.6 如何设置交互播放逻辑？,交互播放逻辑是一个VXPLO互动大师案例的灵魂，你能够通过设定各种播放交互逻辑来控制各个对象的播放过程与交互方式。,1）你可以通过时间轴让一个媒体对象在案例播放到某个特定时刻时出现，或让一个对象在一段时间内移动、旋转或改变任意显示属性，来制作一个简单动画。例如，仍是上图的例子，我在QR code和棱形1图片上增添一个父对象“时间轴1”，然后在分别在QR code和棱形1图片下增添轨迹。根据时间轴上不同的点，可以设置图片不同的位置，或是不同的状态（透明度，尺寸大小，颜色的改变等等），达到图片在舞台上运动的效果。,第二章：创建一个VXPLO互动大师作品流程,2）你也可以在任意对象下方添加“事件”对象，对这个对象设置动作，并设置效果。比如，在棱形图片下添加事件1和事件2，当鼠标移到棱形图案上的时候，QR code会出现。鼠标移开时，QR code会隐藏。（QR code的图片属性中的初试可见选为NO）,小贴士：在“事件”面板中，你也可以点击“从对象树中选择”，则可以在对象树中点击对象作为事件的目标对象。,第二章：创建一个VXPLO互动大师作品流程,3）你可以运用计数器控制事件的发生，并设置效果。比如，在舞台上添加一个会随意出现0-10的计数器，当计数器出现8时，会出现文本1（恭喜你获得了一张8折的优惠券！）。（文本1的属性中的初试可见选为NO）,效果,小贴士：你也可以将计数器的可见属性改为NO，则它就在舞台上隐藏了。,第二章：创建一个VXPLO互动大师作品流程,2.7 如何预览你的作品？,当你的作品完成后，可以点击菜单栏上的预览按钮进行预览。,2.8 如何保存你的作品？,你不需要特别保存你的作品，因为VXPLO互动大师使用的是云端技术，你的作品实际上在你做的过程中实时地被保存了。但是第一次预览的时候，由于要记录你的作品名称，会有保存作品的提示框弹出，按各项目的提示填写就好。,第二章：创建一个VXPLO互动大师作品流程,2.9 如何分享你的作品？,如果预览结束你觉得效果不错，你可以通过菜单栏中的“分享”按钮来将你的案例分享给其他人，或公开发布在某个网站。点击“分享”按钮后，将会弹出一个分享窗口，复制“分享地址“链接就可以发给其他人了。或是用微信扫一扫，就可以在手机上打开观看你的作品。,小贴士：你也可以选择js，div，html的格式将作品嵌入你已有的网站内。,第二章：创建一个VXPLO互动大师作品流程,2.9 如何分享你的作品？,VXPLO互动大师 也为设计师团队的协同合作提供了便利。当你回到“我的作品”页面时，你也可以点击作品上的分享按钮，选择“发送”，,通过,“,发送,”,选项，你可以将你的案例发送给另一个,VXPLO互动大师,用户。（你需要进一步填写接受者的账号，即他在,VXPLO互动大师,注册时使用的邮件地址，以及你的登录密码）发送成功后，接受者的账户中会出现一个你发送案例的拷贝，对于这个案例拷贝，接受者拥有完整的操作权限，即他可以编辑、分享、发布或发送这个案例拷贝。,第一行：接受者账号（Email）,第二行：你自己的密码,入门篇,第三章：简单的案例分享,3.1 点击网页中央的盒子，它会振动,3.2 点击网页中央的盒子，会飞出生日快乐的气球,3.3 页面间的切换,3.4 手机上的滑动效果,第三章 简单的交互效果案例,3.1 点击网页中央的盒子，它会振动。,案例观看地址：,第三章 简单的交互效果案例,3.2 点击网页中央的盒子，会飞出生日快乐的气球,案例地址：,第三章 简单的交互效果案例,3.2 点击网页中央的盒子，会飞出生日快乐的气球,Step1: 在舞台上导入神秘盒子和Happy Bday的图片素材。神秘盒子需要更靠近舞台，因为我们将对其设置点击动作，如果它被Happy Bday的图片挡住，就将无法被点击。,Step2: 因为我们要制作Happy Bday图片飞出的效果，需要利用时间轴。在舞台上添加时间轴后，将Happy Bady的图片剪切粘贴到时间轴1下方，作为其子对象，再在Happy Bday的图片下添加轨迹。,第三章 简单的交互效果案例,3.2 点击网页中央的盒子，会飞出生日快乐的气球,Step 3: 在轨迹的不同时间点上设置关键点：在0秒时设置Happy Bday的透明度为0，初试可见为NO，且此时它位于（279，195）的位置。点击时间轴上的 ，即加好了第一个关键点。,第三章 简单的交互效果案例,3.2 点击网页中央的盒子，会飞出生日快乐的气球,Step 4: 在轨迹的不同时间点上设置关键点：在时间上输入3（表示第3秒的时候），设置Happy Bday的透明度为100，且此时它位于（279，17）的位置，相比刚才更靠近舞台中央。点击,小贴士：你可以点击时间轴上的播放按钮进行预览。,第三章 简单的交互效果案例,3.2 点击网页中央的盒子，会飞出生日快乐的气球,Step 5: 在神秘盒子下添加两个事件。事件1为点击后使时间轴1播放，即气球出现。事件2为点击后删除盒子图片，因此舞台上就会看到盒子消失了。,你可以尝试将事件1和2的位置调换，,即事件1在对象树中的位置位于事件2上方,看看会发生怎样的问题？这是为什么呢？,第三章 简单的交互效果案例,3.3 点击页面间的切换：,案例地址：,第三章 简单的交互效果案例,3.3 点击页面间的切换：,页面是很有用的制作网页的元素，你可以利用点击切换页面做成一个小的网站。你也可以用它作为小游戏的各关卡。,Step 1: 在舞台上插入三个页面元素，这里为了展示作用，只是改变了页面的背景颜色和富文本文字说明。你可以按自己的想法添加更多的东西。,Step 2: 由于按钮是在每个页面上都会出现的，因此在舞台上添加按钮。这里为了方便排版，还添加了一个矩形作为按钮1，2，3的父对象。,第三章 简单的交互效果案例,3.3 点击页面间的切换：,Step 3: 在每个按钮下面设置相应的事项。触发条件为点击，目标对象为“舞台”，目标动作为“挑战页面”，然后选择相对应的页面。,小贴士：对于几乎相同的事件，你可以复制粘贴哦。比如设置完事件1，你只需右键点击，复制它，并粘贴到按钮2，按钮3下方，再调整目标动作的页面就可以了。,第三章 简单的交互效果案例,3.4 手机上的滑动效果，用手滑动看到下一页。,案例链接：,扫码观看,第三章 简单的交互效果案例,3.4 手机上的滑动效果，用手滑动看到下一页。,这个案例的重点是用到滑动时间轴的工具。,Step1: 在舞台上添加滑动时间轴， 随后将你想要的页面素材添加在这个“滑动时间轴1”之下。比如这个案例中都是图片，注意每个图片的大小都是一样的，和舞台大小相同。,第三章 简单的交互效果案例,3.4 手机上的滑动效果，用手滑动看到下一页。,Step 2: 在每个图片下面增加轨迹，并设置位置的变化。这些轨迹会出现在同一个时间轴面板里。,第三章 简单的交互效果案例,3.4 手机上的滑动效果，用手滑动看到下一页。,Step 3: 在每个时间点上设定图片的位置，并设置位置的变化。让图片依次出现在舞台的中央即可。比如00的图片首先在舞台（坐标为0，0）上，然后001图片在1秒后出现在舞台上（坐标为0，0）。,第三章 简单的交互效果案例,3.4 手机上的滑动效果，用手滑动看到下一页。,Step 4: 按下图设置“滑动时间轴1”的属性,比例：为滑动的页面距离和时间的比例,方向：往上滑，还其他三个方向可以选择,自动跳转控制点：YES，表明到某个跳转控制点它会自动调转。,自动跳转时长：表明到这个调转控制点后自动到达目的位置的时间，这里为0.2s,谢谢！,有更多的使用问题，欢迎加入QQ学习群：175098471,