Epub360 APP 《风光滤镜》制作小记

缘起第一次见到张千里老师的时候是在年前的一个下午,老师来得有些匆忙。简短的寒暄后,老师简单地表达了此行的目的,希望可以使用Epub360来快速制作一本APP交互书,这本书的素材将取自老师之后的美洲之行 ...


缘起

第一次见到张千里老师的时候是在年前的一个下午,老师来得有些匆忙。简短的寒暄后,老师简单地表达了此行的目的,希望可以使用Epub360来快速制作一本APP交互书,这本书的素材将取自老师之后的美洲之行……

《风光滤镜》

过程

很快,当老师还在海外时,素材就开始通过网络陆陆续续上传到了 Epub360.com 的素材库中,所有的交互书内容编辑设定工作,也都是由老师和助理在线上进行,与往日大部分的情况一样,我与同事们负责线上支持协助。

由于老师这边的人员十分专业,我们与老师的合作是十分愉快与轻松的:起初,老师这边负责构思、需要的交互效果和展现形式,然后我与同事仔细讲解设定步骤与系统设定的逻辑原理;

很快,老师这边开始自己尝试制作内容与效果,完成后再与我们商量进行调整;再后来,双方基本只在关键环节进行交流,大部分的工作都由老师于他的助理们自主完成了,渐渐地,讲解性的交流越来越少,作品的进展却越来越顺利。

 

APP上线

新年伊始,APP《风光滤镜》成功登陆了苹果应用商店(App Store)。

通过张千里老师的 微博 ,我们发现这本交互书的反响很不错。如果有感兴趣的、喜欢摄影的同学就赶紧下载阅读吧;)

同样,你也可以访问张千里老师的微博与老师互动,了解这本作品的更多信息。

 

 

点滴心得

回头再看看,与老师创作配合协作,基于 EPub360.com 来完成这本交互书的整个过程中,还是有些体会与心得的,在这里也希望能够给大家分享一下。

对于初学者来说,最重要学习内容的不是探索epub360中的各项复杂功能,有探索精神固然很重要,但作为最基础的起步,我们首先需要掌握的是epub360设定的逻辑关系。

  • A 交互元素
    首先,需要知道, EPub360 最基本的元素叫做交互元素,交互元素是素材内容的容器。不同的交互元素对应着相应的素材,音频、视频、图片、序列帧……所以,需要选择合适的交互元素对内容进行组织与表达,这是第一步;
  • B 动画设定
    之后,还需要了解动画设定的原理。 EPub360 中可以添加各种动画效果,大部分的交互元素都支持,但不同的交互元素可添加的动画类型略有不同;
  • C 触发器
    接着,需要掌握如何设定触发器。 EPub360 中大部分交互元素都可以被设定为触发器,通过绑定去触发动画效果。触发器的效果种类也非常多,可以触发执行动画、可以触发页面跳转、可以改变图片/音频/视频等内容的显示隐藏状态……利用好触发器,可以制作出具有极具交互性的效果来。

 

以上三点是掌握 EPub360 的根本,还有一些的高级功能,比如说 MasterPage、Layer等,也是以这些基本功能为基础的。可以这么说,只要熟练掌握以上功能操作,你也能制作出一本图文并茂的交互书来。

 

举些例子

下面,我们简单分享在《风光滤镜》中第十章:“渐变灰滤镜GND”中比较有特点的两页内容的制作方法:

 

A. 滤镜替换动画

这是一个简单地小交互,读者可以通过点击右侧的滤镜,实现一个滤镜更换的虚拟效果。

实现的方法:

  1. 1. 准备一张底图、一张滤镜支架的 PNG 透明图片、三张不同规格的 PNG 透明滤镜图片。
  2. 2. 滤镜支架与滤镜设定为初始隐藏(这样刚开始就不会出现)
  3. 3. 对三张不同规格的 PNG 透明滤镜图片设定一个“直线动画”的动画效果,把那个设定好相应的运动轨迹,并将这三个动画效果命名并改为“等待触发器触发”。(这样动画只有在点击触发器时才会执行)
  4. 4. 之后在背景图三处滤镜的方位添加三组“ LINK ”交互元素。
  5. 5. 分别对 LINK 与其相应的滤镜绑定直线运动的触发器、“显示”相应滤镜的触发器以及显示支架的触发器效果。

OK ,就是这么简单地设定,感兴趣的同学可以自己准备素材试一下哦。

B. 滑动触发渐变效果

这一页是有一组序列帧上下滑动的交互,读者可以感受一下安装滤镜后在相机视窗中所呈现出的效果。

这一页的制作,最主要是准备一组序列帧图片,这组图片之间有细微的变化,之后设定是注意:

  1. 1. 确保顺序正确
  2. 2. 设定为可滑动
  3. 3. 选择控制方向 纵向

 

 

 

先简单介绍这些,具体效果大家可以下载老师的作品,探索一下。如果对书中其他交互设定有兴趣的话,也可以留言或者访问 EPub360 的论坛、或者加入我们的 QQ 群提问,谢谢大家!


EPub360 QQ群: 147962278

10

相关文章: