“Prezi要你好看”快闪H5八大制作要义.docxVIP

《Prezi要你好看》快闪H5八大制作要领[原创]2016-10-12计育韬意派科技我们是JZ 多媒体解决方案，这是我们第四年在全国各所学校举办 Prezi 技术公益巡回讲座，以往我们都会在讲座启程前，通过视频宣传片这一普通形式进行预热。 2016年，我们开始考虑全新的预热形式，其中就重点考虑了移动 HTML5 页面，但一直没有一个夺人眼球的画面设计。直到 iPhone7 快闪视频为人们所知，JZ 就开始考虑以类似的效果制作非视频视觉方案。所以在动手H5 之前的一个月，JZ 还用PPT 仿制过一个快闪开头，之后综合评估了制作难度和 Epub360 的平台可行性，大约通过5个完整工作日的时间完成了这份快闪作品《Prezi要你好看》。将H5 以近乎视频的体验效果呈现是一个不小的挑战，因为本质上它的制作流程等同于视频，而在没有明确时间轴概念的 Epub360 平台上，我们就必须通过动画顺序或触发关系的让音频和动画同步——你不能像AE当中，前前后后穿插制作动效画面，必须以每个0.1或0.2秒为间隔，按时间顺序往后制作。下面来谈一谈快闪式H5 的制作要领： 1.总时长有限不同于视频的音画绝对同步，在HTML5 环境下音频和动画能否持续同步会受到网速、设备等浮动因素制约。这份《Prezi要你好看》的主体时间是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执行，如