我们是JZ 多媒体解决方案，这是我们第四年在全国各所学校举办 Prezi 技术公益巡回讲座，以往我们都会在讲座启程前，通过视频宣传片这一普通形式进行预热。
2016年，我们开始考虑全新的预热形式，其中就重点考虑了移动 HTML5 页面，但一直没有一个夺人眼球的画面设计。直到 iPhone7 快闪视频为人们所知，JZ 就开始考虑以类似的效果制作非视频视觉方案。
所以在动手H5 之前的一个月，JZ 还用PPT 仿制过一个快闪开头，之后综合评估了制作难度和 Epub360 的平台可行性，大约通过5个完整工作日的时间完成了这份快闪作品《Prezi要你好看》
将H5 以近乎视频的体验效果呈现是一个不小的挑战，因为本质上它的制作流程等同于视频，而在没有明确时间轴概念的 Epub360 平台上，我们就必须通过动画顺序或触发关系的让音频和动画同步——你不能像AE当中，前前后后穿插制作动效画面，必须以每个0.1或0.2秒为间隔，按时间顺序往后制作。
下面来谈一谈快闪式H5 的制作要义：
1.总时长有限
不同于视频的音画绝对同步，在HTML5 环境下音频和动画能否持续同步会受到网速、设备等浮动因素制约。这份《要你好看》的主体时间是107秒，也几乎到达了HTML5 环境下音画同步的极限——如果你用电脑浏览这份H5，其实动效到后期是快于音频的，但是 JZ 在各类移动端测试下来看，后期的动效会因为网络延迟等原因基本和音频咬合。
所以，不要去尝试太长的快闪H5。
2.音频处理
既然快闪式 H5 是视频化制作流程，那么其中牵涉的大部分技术都是视频基本功。本人大概已经有6、7年的视频制作经历，所以相对来说容易把控这份H5——比如从音频开始。
苹果原片的背景音乐因穿插了各类实拍画面而时有暂停或混响，那么首先第一件事是找到原曲，比较靠谱的方式当然是网易云音乐的歌曲识别，找到了原曲《Tiger Rhythm - Surkin》，但是发现苹果的BGM 其实请了原作者做了二次创作，所以牵涉到了原曲和苹果BGM 的混合剪辑。
原片中最后有一段大学教授的实拍答疑，这里我们修改为提问“H5 是什么？”，原先也考虑过做一段我个人的实拍，但是受制于时间，决定恶搞使用谷歌翻译的人声来念，效果也很有趣。也建议大家人声处理过程中如果条件有限，也可以采用谷歌、度娘、洛天依、言和等声源。
音频 Remix 完结后，一定要压缩音质确保大开顺畅，而且千万不要直接让背景音乐在 Epub360 中自动播放，因为动画加载必然在音乐之后才能开始。在JZ 的作品中，音频是第一个动画结束时触发播放的。
3.辅助视频素材
H5 快闪中和苹果一样，引用了不少视频素材，之所以会在快闪中加入慢动作，主要是对快闪的动作进行停顿，毕竟从头闪到底视觉会非常疲劳，快闪中要不断穿插慢速和停滞效果，那么传统的视频素材或慢镜头素材就是很好的选择。JZ 的作品的辅助食品素材全部来自 Prezi 官网和官方的 Youtube 频道。
4.全局预加载
快闪的动效奇多，所以这份作品的第一页其实是一个纯黑的页面，在画面打开时加载后面的全部页面，当加载完毕时快闪开始。
5.节奏把控
通过一些虚拟打碟机，JZ 预先读取了音频的BPM，随后根据它确定动效的最短间隔时间。比较巧的是，这首BGM 基本上以0.2秒为节奏间隔点。
那么画面如何与背景音乐契合呢？请注意1）画面的节奏重音可以略微先于音乐，但是千万不能迟到 2）大幅度的视觉对比，如黑白背景切换（而且一般来说切黑屏效果比较好）、大小切换、动效速度切换 3）JZ 换一行说
① 基本动画之“闪”——快闪里不同的元素会高速出现和消失，但问题是具体用的动画是哪种的？这里的建议是，元素出现时请在 Epub360 中选择“显示元素或组件”，消失时使用淡出，因为瞬时出现的视觉效果会更有力。至于在什么位置出现，是连续同坐标出现还是排序横向闪现等等可以自行选择。
② 基本动画之“位移”——这里要谈的不是位移的方向，而是位移采用的缓动函数方法——JZ 相对建议用 Epub360 中的 Power4 easeout，无缓动的位移是完全做不出苹果的快闪效果的，所有带移动的动画都有缓动冲量。
6.视频预隐藏与预播放
视频在H5里播放一定会先停顿一下再开始，这会让快闪体验非常糟糕，解决办法是让视频提前播放，但是视频上方用形状遮挡，等需要展现时刻再把形状淡出或隐藏。
7.文案脚本
文案占快闪水平的一半，当然好在有苹果的范本，那么可以沿用其思路，加入自己的创意即可。但建议由设计师本人写，而且考虑到横屏与竖屏的差别，很多文案还是特意为竖屏准备的。
不必在下手前全部写完文案的，边做边写，会有脑洞惊喜！
8.翻页控制
Epub360 是翻页式框架做DOM执行，如果用上一页的动作行为触发翻页，翻页后的动画执行往往会有一个停顿。所以翻页建议是全局参数来触发，而为读取的是音乐播放时间。
在音频软件中，找到翻页的时间点，精确到毫秒，然后设定为全局参数在 Masterpage 画布外随意完成一个动效，用动效触发翻页，相对来说节奏上更稳妥一些。
以上基本就是快闪式H5 的制作要义，当然不得不说现在H5 营销不得不在一定程度上放弃安卓用户，比如视频部分对于安卓来说必须手点才行，体验很不好。所以另外我们也将 iPhone 手机的播放效果录制了下来。通过手机连接MAC 电脑，用 QuickTime 直接录制了流畅的播放效果，适当用PR 做了音画教准，以竖屏的尺寸上传到腾讯。那么当用户点开这个腾讯视频后，它看到的效果和手机启动H5 就是一样的了。
关于快闪式H5或者其它创意设计，可以关注我们的Epub360主页，也可以通过我们的微信公众号JZplus（微信号：jzcs0320）与我们交流探讨。
关注更多H5设计、案例、资讯