公开课回顾 | 序列帧的三种玩法

【 Epub360公开课：魔力序列帧 】本周二已顺利结课。非常感谢 Mgaic（唐仲龙）老师的辛苦准备和讲解，还有各位派友的热情参与。

这次公开课可以说是干货满满，都是H5商业项目的实操经验：

1. 为什么要用序列帧

2. 序列帧的三种玩法

3. 素材准备要点

4. 其他注意事项

这里我们全面回顾一下：

为什么要用序列帧

Magic老师上来就泼了一盆冷水：序列帧的地位其实不高。从效果角度、排位在前面还有Canvas、视频。那为什么我们还需要使用序列帧呢？

最关键的因素是什么？性价比！

客户最关心的，还是H5的效果和投入费用。Canvas需要程序员参与开发、制作视频的投入也不小，用序列帧的话，效果也能得到提升、费用方面也更具竞争力。

对设计师来说，H5项目包括从策划、制作到交付的完整过程，如果想自己完全掌控的话，序列帧有着先天优势：可以用自身积累的PS、AI、AE等技能，快速上手实现序列帧；结合Epub360序列帧组件的播放控制和联动组件，可以做出各种酷炫的交互效果。

序列帧的三种玩法

基于Epub360平台，序列帧可以用来做动画播放展示、可以支持用户交互播放控制、还可以用多个序列帧做联动播放控制。

1）动画播放展示

这是序列帧组件的基本用法，只要素材准备到位、简单设置一下，就OK了。

查看案例 -->> 万达影业2016年片单

2）交互播放控制

通过触发器来控制序列帧播放区间，感觉是在进行精确的定位控制，在交互方面很具有趣味性。

查看案例： -->> 阿宝@你 快来帮忙

3）联动播放控制

使用联动组件，通过操控一个序列帧、来控制另外一个序列帧组件的播放。利用针对性的素材准备，效果很新颖。

查看案例 -->> 在这里，跨年很温暖！

后续我们会制作专门的案例作品供大家复制研究，有兴趣的请留意社区论坛更新。

序列帧的素材准备

序列帧素材一般用 AE 或 PS 准备，在公开课最后10分钟里，Magic老师实际操作了一下如何用工具处理序列帧。工具怎么用这里就不展开了，还是重点介绍一下素材处理的注意事项。

H5中序列帧的效果好不好，素材准备是关键，直接决定了这个H5作品最后的成败。原因很简单：图片资源加载、播放的流畅性，直接受到序列帧图片大小、多少的影响。

怎样把握效果体验的一个平衡呢？

1）帧率的选择

8帧还是14帧？换言之，清晰还是顺滑？具体到Epub360的序列帧组件设置，就是播放时间间隔是0.13还是0.07（秒）。从数字上就可以看出两者差异很明显。

8帧还是14帧，其实都可以，但有各自最适合的场景：

• 选用8 帧：

• 前后页或当前页已经承载了大量交互负荷

• 在作品中后段使用序列帧尺寸占页面50%以上

• 序列帧格式为PNG

• 选用14帧：

• 在首页/扉页使用

• 前后页/当前页不承载大量交互

• 序列帧的尺寸较小

• 序列帧格式为JPEG

总而言之：大的，复杂的，或者PNG图片适合使用8帧，反之，若是小的、简单的，或者是JPEG图片则使用14帧，效果更好。

2） 图片格式 PNG 或着 JPG ？

• 选用JPEG的情况

• 页面背景色跟序列帧背景的颜色相同

• 没有景深动画，不需要透底

• 序列帧尺寸超过50%以上

• 选用PNG的情况

• 小尺寸素材

• 有景深动画，需要透底

3）图片尺寸及导出质量

从Magic、还有李志老师的实际操作经验来讲，全幅尺寸的序列帧，尺寸只需要 370 x 568 就够了。在PS导出序列帧时，选择质量在5-8之间。

4）压缩、压缩、还是压缩

重要的事情说三遍，派友们都喜欢用 http://tinypng.com 做压缩，效果很好。

综合上面四点进行素材准备，基本可以确保性能和质量的相对均衡。

其他技巧

1. 配合播放的音频文件，一定要用格式工厂处理，可以确保播放的稳定性；

2. 序列帧配合使用预加载功能，让素材提前加载到位，确保序列帧播放的完整性、避免漏帧；

在公开课结尾时，Magic结合了一个案例，从整个H5制作的角度，分析了我们设计师在素材准备充分的情况下，能用Epub360做到何种程度。答案是90%，序列帧功不可没。

最后，Magic老师快速从视频素材开始，用AE做了一个序列帧，全程只花了6分钟，相当快。从一个侧面证明序列帧对于我们专业设计师来说，是个能够快速上手，提升质感的利器。

这次的公开课就是这样了，再次感谢Magic老师、感谢各位派友参与。对下次公开课内容，也希望大家提出自己的需求和建议！

附：

-> Magic（唐仲龙）个人作品集

-> 公开课讲义下载

-> 公开课视频下载