意派Epub360高级教程：全局变量

什么是碰撞检测？Epub360新增加了碰撞检测组件，可以侦测组件的位置变化，当不同组件之间碰撞时，利用触发器触发各种动作。

这里是一个简单的效果示例。

碰撞检测的几个概念∙碰撞目标元素／碰撞元素被用来设定为可以触发碰撞事件的两组组件，针对任意一个碰撞检测组件，都需要设置这么两组对象。

这两组对象，可以各一个，也可以各多个。

∙碰撞时触发器用于设定当发生碰撞时，可以触发到动作这里讲解一下，如何设置碰撞检测。

添加碰撞检测组件点击操作页面上方的菜单栏，点击高级组件，在交互组件下选择碰撞检测组件；碰撞检测对象设定针对一个“碰撞检测”组件，设定方法如下图：1.PS作两张图，命名为小球和碰撞方块，并导入到画布中:2.设置碰撞物小球：点击碰撞组件，点击右侧添加按钮，勾选小球，点击确认；3.同理设置碰撞目标方块：点击碰撞组件，点击右侧添加按钮，勾选方块，点击确认；4.设置小球飞入动画：给小球添加飞入动画，设置重复次数为一直播放，设置动画效果为Expo.easeIn，点击确认；5.同理设置小球飞出动画：给小球添加飞出动画，设置出现方式为和上一个一起开始，设置动画效果为Expo.easeOut，勾选等待触发，设置动画结束时触发刚刚设置的小球飞入动画，点击确认；6.将小球移动到画布的的最下方；7.设置碰撞方块可移动：点击碰撞方块，勾选可拖动，设置拖拽限制为水平；预览效果这时候我们点击左上角的预览按钮，选择预览当前页，在小球一直掉落的时候左右拖拽方块，看看小球与方块碰撞后的效果吧。

小技巧提示∙“小球”上设定了两个动画▪设定为等待触发，在“碰撞时”，触发播放▪飞出动画结束时，也需要再次触发“飞入动画（1）”▪飞入动画（1），并且飞入动画结束时，再次触发执行“飞入动画（1）”▪飞出动画（2）∙“色块”设定了可拖放，并且限定在水平方向拖动碰撞检测配置项说明前面介绍了“碰撞目标元素”、“碰撞元素”以及“碰撞触发器”，其他需要介绍的配置项如下：偏移∙边界：是指以组件边界为基准，周围多少像素内，算是碰撞区域以“以边界计算偏移10个像素”举例，示意图如下∙中心：是指以组件中心为圆心，周围多少像素内，算是碰撞区域触发∙单次：触碰时触发，在接触后，不会再触发持续：只要处于接触状态，就一直触发碰撞后消失勾选后，碰撞元素会在发生碰撞时消失（如下图所示）Demo案例（可拷贝）/v2/manage/book/dyhvcl/present。

看完上期的设计趋势&上上期的刷屏案例，今天我们就来总结下2017年各种H5 刷屏技巧，从形式上来说，基本涵盖了各种刷屏案例，赶在2017的车尾学习一下，说不定明年的升职加薪，就全靠它了！刷屏技巧一：装逼神器大家可以看到，今年PV 量最大的刷屏H5 《穿上军装》，以及上周圣诞节意外爆火的小程序《圣诞头像》，从本质上来说，它们都是一款装逼神器 . 之所以能在短时间之内刷屏朋友圈，除了恰到好处的运用了“ 节日热点” 这个核心因素外，洞察用户的心理也是创意来源的关键.各种证照生成器H5当然，《圣诞头像》这个装逼神器是用小程序来制作的，涵盖了设计、开发、后台等多个流程，技术门槛较高. 为此我们特意设计了H5 版《圣诞头像生成器》，省去了这些复杂的的技术限制，只需要一位设计狮即可搞定，在实现难度上比起小程序小了很多.from：意派科技《圣诞头像生成器》不过，这类短时间刷屏的装逼神器们，由于流量剧增的“ 异常现象”，如果没有官方的技术加持，很容易就会被微信注意和封杀掉，如何避免此类问题，前两天搜狗出品的H5 倒是指了一个方向：用多种不同的标题进行转发，分散流量注意.至于到底哪些算是微信的违规操作，详见《注意这5点，再也不怕H5被封了》刷屏技巧二：交互视频这两年，交互视频在H5 中的运用变得越来越频繁，创意搭配也更加得当. 究其原因，恐怕还是“ 技术问题” . 倒不是说原生的HTML 动画亦或是序列帧等实现效果不佳，更多的考虑在于，视频这种形式原本就是许多创意人、广告人所擅长的，即能满足创意的完美呈现，又不用为实现技术而烦恼.总体来说，目前交互视频H5 主要有“明星/ IP + 跌宕的故事剧情”、“自由选择触发多条故事线”、”互动游戏“、” VR / AR 交互“这四种形式.关于上述四种内容形式的解析，详见《抢着吃鸡手游的腾讯、网易，竟然连H5都不放过...》而在制作视频H5 的时候，到底采用什么样的视频尺寸、以及如何进行手机适配，这些一直是许多派友所头疼的问题. 下面就明确一下这些问题，供各位参考：①关于视频尺寸：官方建议为750*1200②关于手机适配：填充模式为缩放以填充模式，同时勾选视频启用尺寸自适应，再点击固定四边③关于视频播放：由于安卓端的微信限制，目前最稳妥的方式就是采取手势触发播放的形式（如点击） .刷屏技巧三：微信模拟可能是由于无数千篇一律的微信模拟H5 ，已使用户产生审美疲劳，所以今年许多案例开始寻求转变. 鉴于有道翻译官的戏精H5 的创意，到小姐姐入职网易第一天H5 的延伸，微信模拟有了不一样的新的玩法 .from：有道翻译官《深夜，男同事问我睡了吗...》原先采用聊天对话框递进弹出、最后引入主题或者品牌植入的内容，形式上过于呆板，也不够活泼（套路用多了也是会腻的）. 而现在是通过模拟一个真实的微信账号，利用这种戏精式的表现手法，使观看用户成为旁观的第三方，隐隐有种八卦窥屏的刺激感受.关于微信这部分的制作方法，仅需要一个录屏工具就能搞定，详见《实用技术贴| 如何快速搞定微信群聊H5》同时，也有许多其他类似的H5，不再选择忠实于原生的微信界面，而是趋向于以手绘风格进行呈现 . 这在视觉上不仅显得更加有趣，也更令人有耳目一新的感觉.from：意派科技《双11你敢挑战老婆的购物车？》途家《老板在群聊中@了你》刷屏技巧四：一镜到底自奶奶级国牌百雀羚广告刷屏之后，这种长页面的创意形式就一发不可收拾 . 最常见的一镜到底，就是上下左右交互的长页面H5 .from：春颜秋色《万科滨水大宅新作全球首发》天猫《外星人入侵地球竟是为了…》处理长页面H5 时，有几个需要注意的制作要点：①如长页面中有需要触发的动画，可使用锚点进行动画效果的触发，动画较多时可进行分组处理②如图片的长度过长，可能会影响到作品在移动端的显示效果，因此可先切割成几个较小的长图，后续再进行拼接处理关于具体的长页面制作过程，详见《如何制作横屏H5》上述这类长页面H5，还是属于二维平面形式的范畴，而在一镜到底H5 中，最有代表性、也较为复杂的，就是连续不间断的镜头拉伸效果，这样的场景在体验上会有一种穿梭空间的感觉.from：意派科技《回望过去探索未来》如何实现这种特殊效果呢？简单来说，就是结合特定的“ 一镜到底” 功能，通过设置一层层的layer 页面之间的距离与出现时长，来实现此效果.详见《打造酷炫的“一镜到底”效果，3步就够了...》今年的刷屏技巧就总结到这里啦，希望能给各位派友带来不错的灵感哦，最后祝大家跨年&元旦都能准时不加班，来年再见咯～。

技能制作教程以及局部变量与全局变量的讲解序：春雨知时节.当春乃发生、春天是个播种的季节.我也学习农民伯伯播撒技能的种子.希望秋天会有很多个技能大神长出、欢迎大家走进技能的殿堂.我是小暧(QQ:515417775.)、很荣幸的在这里可以为新手讲解技能的编辑.1年前我和你们一样满世界的寻求帮助.到处询问技能的制作、到后来在这里为你们讲解技能的编辑.命运就是这样充满意外、(Ps：真的有想法把命运用触发给改了、笑~)简单的说技能编辑其实so easy~了、像我这种超级大白痴都可以自己编辑出来、再次申明一下此教程不是我一个人的原创、还有月协的教程帖子.我只是整理出来加点自己的原创、呈献给大家.让大家对技能的编辑了如指掌而已、我一直相信你们.从古到今~一直都是这样、其实到目前为止有很多的技能编辑讲解.我为什么还要画蛇添足呢、原因是这样的.因为我感觉好多技能教程单调无谓、没有什么激情.而且不容易让新手接受而且很多人是看懂了教程但是不能自由使用、要不就是只会单纯的模仿自己创新又不敢做针对以上出现的问题.此版教程拥有一下几点有点、1：吸收了以前教程的精华.并且补充了些东东、2：本教程采用语言幽默风趣、图文解说并且带有演示.重视自己动手能力、现在请你打开你的WE跟着我的脚步.一步一步的踩、知道鞋子破了为止、此每节教程负有作业交作业有浮云的哦、显然教程这种东西的不能太依赖.也不值得信任、何况又是我编辑的、本教程主要分为9个部分：[1：简单魔兽原有技能讲解、][2：点、特效与闪电特效的讲解、][3：马甲的讲解、][4：技能叠加、][5：伤害与算法、][6：局部全局变量的讲解、][7：排泄、][8：心得体会、][9：一些自己收藏的技能、]学习流程：从简单到复杂、从表面到深处、从上到下提示：本教程最后附有本人收集起来的一些不错的技能演示简单魔兽原有技能讲解先来看看我们的技能编辑器这就是我们每次做技能最开始的地方、我们所有的技能都是在这里先自定义的、技能大改分为4类吧、1：无目标(原地释放、像牛头人的战争践踏、山丘的雷霆一击等)2：单位目标(对单位释放、像山丘的风暴之锤、先知的闪电连等)3：点目标(对地面一处释放、像先知的地震、大法的暴风雪、血法的烈焰风暴等)4：点或单位目标(既可以对地面也可以对单位、像牛头的震荡波、冲击波等)还有些别的技能、比如说变身、镜像、吸取生命魔法、召唤类型的、通魔(此技能强大)、这里向对单位的技能和点的技能修改对单位的范围、类型等等、在这里修改(看图)。

24. 理解全局对象_________________________________________第二十四章理解全局对象24. 理解全局对象__________________________________________ 本章目的本章将介绍另外几个iFIX的图形开发工具，包括：∙使用全局变量∙使用全局表∙使用全局过程图24-1：应用开发流程图（显示图形开发）A．注释：∙在工作台系统树中，有一项称为Global∙默认时，Global 文件夹中包含“User”和“Plug and Solve”-Plug and Solve 全局是Intelltuion为即插即解决应用提供的-本节重点介绍“User”全局∙在系统树中，User项上右击鼠标，可以添加“Global”∙在应用过程中可以进行访问，而与画面打开与否无关∙用户全局可包括如下：-变量对象-阀值表-过程 (VBA子程序和函数)-窗体图24-2: 工作台中的“User”全局A．理解全局变量∙与其它变量相比，使用全局变量的优点在于只要工作台运行，变量的数据将一直保存-通常，执行一个过程时，其变量被初始化并保存数值的变化直到退出该过程-下一次执行该过程时，又需要对该变量进行初始化∙全局变量在应用启动时被装载并在该应用关闭后仍然保留∙建议只有在必要时才使用全局变量，因为全局变量会影响系统性能B．添加全局变量∙有两种方式增加变量对象：-右击用户全局并选择“创建变量”-从“工具框”中选择“变量”按钮∙注释：-用“工具框”中的“变量”按钮可以创建本地或全局的变量◊本地变量只有在当前画面打开时才有效24.3. 全局变量 ____________________________________________图24-3：创建全局变量 - 例子一图24-4：创建全局变量 - 例子二C．使用全局变量∙全局变量的值可通过下面表达式获得：-User.VariableName.CurrentValue∙全局变量的其它属性可通过属性窗口或动画对话框显示图 24-5：全局变量的属性图 24-6：全局变量的属性图24-7：查看全局变量A．全局阀值表∙又称为查找表∙常用于创建反复使用、有共性的表∙可用于：-颜色阀值（图24-8）-字符串值或范围（图24-9）∙例如：-开关量的红、绿颜色-不同温度范围的颜色-不同的数字范围转换成字符串B．创建全局阀值表∙右击“Globals”内的“User”并选择“创建阀值表”∙右击阀值表并选择“属性窗口”可为阀值表命名-修改阀值表的“Name”属性图24-8：创建全局颜色阀值表图 24-9：创建字符阀值表C．使用全局阀值表∙全局阀值表的值可通过下面表达式获得：-User.TableName-不需要特殊的属性∙选择“共享查找表”，使用全局阀值表-参照图24-10和图24-11∙阀值表的其它属性可通过“属性窗口”或“动画对话框”显示图 24-10：使用全局阀值表24.4. 全局阀值表 __________________________________________图 24-11：配置全局阀值表A．全局过程∙iFIX 提供了许多全局过程和函数，如OpenPicture，ToggleDigitalPoint和OnScan-这些过程和函数可直接在画面和调度中使用-这些过程和函数存储在独立的Global区域内，称为FactoryGlobals ∙可在User全局内创建用户自定义的全局过程和函数-可以在全局范围内调用这些自定义的过程和函数B．添加全局过程∙打开“Visual Basic编辑器”，并确保“工程资源管理器”是打开的∙在工程浏览器中选择“Project_User”工程∙打开“插入”菜单选择“模块”-全局过程的代码应该保存在模块中而不是在Project_User页里-也可以使用已经存在的模块-在Project_User工程内的模块可以包含多个全局过程C．引用全局过程∙只需在VBA 脚本内引用全局过程名即可调用该过程D．全局窗体∙在User全局页内使用窗体是很有帮助的，这是因为系统只保留一个副本-使得版本控制更容易，又优化了iFIX画面文件的大小图 24-12：使用全局过程理解全局对象练习24学习目的：完成本实验练习后，学员应能够：1.创建全局阀值表2.在动画中使用全局阀值表完成本练习的时间：30 分钟实验内容在这个练习中，将添加一个全局阀值表，此表把布尔值映射为颜色，值为假（0）时为红色，值为真（1）时为绿色。

图片(Image)组件是最基本的构成元素，掌握了图片组件的使用，Epub360基本上就算是入门了。

图片组件能做到的事情有很多，遮罩属性可以配合滑动和重力感应达到丰富有趣的交互效果。

（重力感应需要先勾选可滑动，只能手机端预览）。

格式：JPG（JPEG）、GIF（可以直接用图片组件添加，不需要做任何改动）、PNG、SVG（矢量图）做页面背景底图点击图片组件，在素材选择窗口中点击选择准备好的图片调整在画布的位置，这样作为背景底图的使用完成了关于背景图的尺寸要求请看这里图片样式调整在Epub360中，可以对图片进行简单的样式调整尺寸及位置可以对宽高进行单独设置，也可以锁定比例后再调整边框及圆角设置1.在右侧属性面板切换到“背景及边框模块”，可以设置以下参数：a.线宽：以像素位单位b.颜色：选择线框的颜色c.样式：设置边框的样式，从左往右依次为：无边框、直线线框、点线线框、线段线框d.圆角：以像素为单位，默认是四个角统一调整，也可以单独设置某一个角的圆角值，以左上角为例，如下图，阴影设置（在边框及圆角设置面板的下方）1.可以为图片素材添加阴影如上图所示，a.可以设置X、Y轴的数值b.选择阴影颜色c.设置阴影的虚化值，默认的阴影是非常生硬的效果，如下图，2.滤镜效果（在阴影设置面板的下方）可以为图片素材添加高斯模糊的滤镜效果a.虚化，数值越大，素材越模糊b.饱和，数值越大，素材颜色越鲜艳c.色调，中间值为暖色调，两侧数值为冷色调d.亮度，数值越大，素材明暗面都会整体提亮e.对比，数值越大，素材的明暗对比度明显如何确保图片清晰首先看微信内容画布及出血区尺寸（如下图）：微信里满幅的图片，可以处理成740*1136（如图），然后在页面里，选择按50%显示：其他用于主要视觉显示的图片，也采用同样的处理方法（用50%显示）即可。

特别提醒：有些只是做背景图的，没有必要用2倍精度。

做微信内容，需要考虑素材的优化压缩，推荐在线压缩PNG图片工具https://有些图片的长度或宽度超过了2048px就会被默认压缩为小尺寸的图片，导致不清晰。

表单一般用于活动报名、收集反馈信息等。

Epub360表单是一个相对独立的功能模块，可以通过工作台进行编辑与设定，完成后通过表单组件插入作品。

使用说明
启用“表单”功能
由官网进入我的工作台，左侧面板中有“表单”选项
创建表单
点击左边栏“表单”菜单项，打开“表单”管理页面（如下图所示）。

点击【新建表单】按钮，即可创建新的表单，同时系统会弹出新创建
表单的编辑窗口（如下图）：
表单管理
对于表单的管理，见下图。

预览表单
点击“预览”菜单项目，即可打开已定义好的表单，并且可以实际填写数据进行测试。

数据管理
可通过点击查看数据，左边栏菜单项“信息列表”来查看通过表单收集的数据，并可将数据导出为CSV格式的文件，该格式文件支持用Excel打开进行统计分析。

使用基础表单
在交互元素编辑界面中通过顶部工具栏选择表单交互元素插入已创建的表单（如下图）：
选择需要添加的表单
效果展示
基础表单的样式固定如图，不可修改样式。

如果想要修改丰富的表单样式，可以使用付费功能——高级表单。

该后台表单新建好后，也可用于高级表单，高级表单具体教程可戳链接。

关联控制，是Epub360特色组件，可以将各个组件进行逻辑上的关联、通过手势进行统一控制。

目前还仅限于对动画的关联控制，后续会增加支持更丰富的交互效果。

可以先看一个案例了解一下：关联控制案例展示/v2/manage/book/kkdrkj/present/设置方法在添加“关联控制”组件后，具体设置方法如下：∙主控方式：目前只有“手势滑动”方式∙方向限定：针对“手势滑动”的滑动方向设置∙Y＋，上下滑屏控制，起始从下往上（一般的上下翻页的下一页手势）∙X＋，左右滑屏控制，起始从右向左（一般的左右翻页的下一页手势）∙Y－，上下滑屏控制，起始从上往下（与一般的上下翻页手势相反）∙X－，左右滑屏控制，起始从左向右（与一般的左右翻页手势相反）∙长度：用来计算手指在屏幕上的滑动距离，设置数值后，规定了滑动区间范围，即滑动多少距离后，动画被触发播放。

∙初始：动画初始状态，例如长度为400的动画，初始为200时，那么这个动画开始就是已经到执行了一半的状态。

∙延迟：在动画触发前预留一段滑动距离，例如长度设置为400，手指已经滑动了400，这时动画应该被触发播放了，但是设置了延迟，这个动画会推迟播放，延迟的数值越大，动画播放推迟的时间越久。

∙延长：在动画执行完后滞留一段滑动距离。

主要针对双向滑动的情况，例如：当手势向下滑动到一定距离后动画播放完毕，这时手势要反向滑动，动画应该是立即反向执行，但是设置了延长值，就要推迟一会，推迟的时间就是由延长的数值决定的（动画播放完毕后，延长才起作用，动画播放途中手势反向滑动，延长无效果）。

∙单向控制：∙默认不勾选。

来回滑动都可以影响动画播放∙如果勾选，则仅限于从起始向结束单向播放动画∙开启惯性：∙默认勾选，这样手势停下来，动画会继续运行一段∙如果不勾选，滑动动作一旦停止、动画会立即停止设置原理相当于给动画规定了一个播放控制条（如上图所示），通过手势滑动，控制动画播放的进度。

延迟、与延长，是指在此区间滑动，不会触发动画。

嵌入网页/Html
使用嵌入网页(Html)组件，可以引入第三方的网址、嵌入代码、以及HTML包（如全景图），极大拓展了Epub360的灵活性。

使用说明
支持三种嵌入方式
HTML压缩包（ZIP）
在右侧功能面板选择package，上传符合规范的ZIP文件。

▪zip包根目录内必须有一个index.html 或index.html 网页索引文件
▪zip包文件建议不超过30M
▪压缩时，需要选中文件进行压缩，不要直接压缩文件夹
∙HTML代码
在右侧功能面板选择Embed，可以直接将HTML代码插入功能面板中进行使用。

∙网址
在右侧功能面板选择URL，直接将网址在右侧功能面板输入后，即可完成网站的页面插入使用。

设置面板介绍
具体操作方法
1.如何嵌入自己的HTML包
2.如何确保嵌入网页与屏幕同宽，避免出现漏白
3.如何嵌入优酷视频
4.如何嵌入QQ视频。

目前的H5设计软件，基本分为两大阵营，简易模板类和专业工具类。

简易模板类：以大家熟悉的易企秀等为代表，操作方便快捷但功能有限；专业工具类：以意派Epub360等代表，可以实现更酷炫的动画及交互，并拥有强大的逻辑功能。

下面，通过和设计师的使用交流并结合自身的体会，为几个较为专业的H5制作平台进行评述。

供大家参考。

1.稳定性判定一个平台的好坏，不仅仅是看这个平台的功能有多强大、效果有多酷炫，最为重要的还是平台的稳定性强不强。

意派Epub360：在滴滴出行公众号推送的“三人行、必有我师”的H5中，以同时在线几万人的承载量完美应对了访问冲击。

iH5：功能强大，但据了解用户在使用iH5的过程中，出现过数据丢失和动画效果紊乱等问题，稳定性还是有待改善。

Mugeda：平台还是挺稳定的，但其注册量没有其他两个网站高，所以稳定性有待验证。

2.易用性意派Epub360：类似PPT的操作方式，加之丰富的教程，简单易上手iH5：功能较多，但用户引导不够完善，学习上手需花费较多时间Mugeda：基于Flash动画的设计师较容易上手，但较高级的功能需要代码的协助，无法做到零代码操作。

3.功能（特色）意派Epub360: 序列帧、SVG变形动画、拖拽交互、参数、高级表单、数据应用iH5：滑动时间轴、交互视频、多屏互动木疙瘩：联动动画、关键帧动画、陀螺仪这几个平台的基本功能都比较完善，各有所长。

Epub360提供的高级表单功能可以突破传统单一的表单，设计感更强；iH5可以实现多屏的交互功能，效果比较酷炫；木疙瘩有直观的时间线，对动画的操作更为直观，在制作动画方面更为细致。

4.收费a.去除logoEpub360：直接购买149元/个/月；也可购买账号类型去除logo，价格从999元/年到59999元/年不等。

iH5：600元/月木疙瘩：免费b.导出Epub360：购买账号类型导出，价格从999元/年到19999元/年不等，导出次数最少的为25次超出199元/次，企业版不限量。

Epub360教程：如何制作横屏H5
[原创]2016-08-04 小派意派科技
横屏H5该怎么做？应该会有很多派友想知道吧，今天我们就给同学们说道一下，希望能够帮到你哦～
在案例“来了就是深圳人”中，“只做设计”李志用了一个很有创意的方式（如下图所示），这里分享给大家。

立即感受->>来了就是深圳人
原理介绍
Epub360制作的H5，采用按比例缩放适合＋显示画布外内容的方式，来适配各种的手机屏幕，前者确保画布区域完整显示、后者确保不会露白。

先简单设置一个横屏画布尺寸，来具体演示一下：
再看看在手机中的显示效果：
所以，只要在竖屏模式下，画布的上下两边，给出需要横屏的提示就可以了。

设置方式
1.横屏画布设置：宽度740px，高度340px
2.提示图片准备
3.在画布中设置提示图片组件尺寸、位置
4.看看效果如何
好了，到这一步就算是设置完成了。

实际项目中，可以把整个横屏提示内容放到Layer里，在每一页里通过Layer 容器引用，这样只需要设置一次，如果H5有很多页的话，这样会简单很多。

相关资源：
->>素材资源包
->>可复制案例/v2/manage/book/ezm011/present
（在桌面浏览器打开，点击下面“拷贝”按钮即可）
关于横屏你有什么秘籍呢？期待您的分享～
Epub360-专业H5设计工具
Coolsite360-专业响应式网站/小程序设计工具
公众微信号/新浪微博：epub360
关注我们，一起探索营销之道和设计之术。