有客户咨询在开场预热方面有没有什么好的方案，但一直没有一个夺人眼球的画面设计。直到 iPhone7 快闪视频为人们所知，小橙就开始考虑以类似的效果制作非视频视觉方案。

将H5 以近乎视频的体验效果呈现是一个不小的挑战，因为本质上它的制作流程等同于视频，而在没有明确时间轴概念的 Epub360 平台上，我们就必须通过动画顺序或触发关系的让音频和动画同步——你不能像AE当中，前前后后穿插制作动效画面，必须以每个0.1或0.2秒为间隔，按时间顺序往后制作。

下面来谈一谈快闪式H5 的制作要义：

1.总时长有限

不同于视频的音画绝对同步，在HTML5 环境下音频和动画能否持续同步会受到网速、设备等浮动因素制约。这份《要你好看》的主体时间是107秒，也几乎到达了HTML5 环境下音画同步的极限——如果你用电脑浏览这份H5，其实动效到后期是快于音频的，但是在各类移动端测试下来看，后期的动效会因为网络延迟等原因基本和音频咬合。所以，不要去尝试太长的快闪H5。

2.音频处理

苹果原片的背景音乐因穿插了各类实拍画面而时有暂停或混响，那么首先第一件事是找到原曲，比较靠谱的方式当然是网易云音乐的歌曲识别，找到了原曲《Tiger Rhythm - Surkin》，但是发现苹果的BGM 其实请了原作者做了二次创作，所以牵涉到了原曲和苹果BGM 的混合剪辑。

3.辅助视频素材

H5 快闪中和苹果一样，引用了不少视频素材，之所以会在快闪中加入慢动作，主要是对快闪的动作进行停顿，毕竟从头闪到底视觉会非常疲劳，快闪中要不断穿插慢速和停滞效果，那么传统的视频素材或慢镜头素材就是很好的选择。

4.全局预加载

快闪的动效奇多，所以这份作品的第一页其实是一个纯黑的页面，在画面打开时加载后面的全部页面，当加载完毕时快闪开始。

5.节奏把控

通过一些虚拟打碟机，预先读取了音频的BPM，随后根据它确定动效的最短间隔时间。比较巧的是，这首BGM 基本上以0.2秒为节奏间隔点。

那么画面如何与背景音乐契合呢？请注意1）画面的节奏重音可以略微先于音乐，但是千万不能迟到 2）大幅度的视觉对比，如黑白背景切换（而且一般来说切黑屏效果比较好）、大小切换、动效速度切换

6.视频预隐藏与预播放

视频在H5里播放一定会先停顿一下再开始，这会让快闪体验非常糟糕，解决办法是让视频提前播放，但是视频上方用形状遮挡，等需要展现时刻再把形状淡出或隐藏。

7.文案脚本

文案占快闪水平的一半，当然好在有苹果的范本，那么可以沿用其思路，加入自己的创意即可。但建议由设计师本人写，而且考虑到横屏与竖屏的差别，很多文案还是特意为竖屏准备的。

8翻页控制

Epub360 是翻页式框架做DOM执行，如果用上一页的动作行为触发翻页，翻页后的动画执行往往会有一个停顿。所以翻页建议是全局参数来触发，而为读取的是音乐播放时间。

在音频软件中，找到翻页的时间点，精确到毫秒，然后设定为全局参数在 masterpage 画布外随意完成一个动效，用动效触发翻页，相对来说节奏上更稳妥一些。

以上基本就是快闪式H5 的制作要义，如果有类似的活动开场预热需求，可以联系蓝橙互动客服进行咨询,给你报价和估算制作周期。