【幕后】用C4D打造一个音乐之城的八音盒H5

 2017-11-13  

关联项目

西门子：音乐之城

八音盒的上半部分，是七组城市的流畅变化，下半部分是为这七个城市生活带来便利的西门子业务。

为了做到流畅这短短的几十秒，在动画的部分甚至需要精确到半秒来制作。虽然是大家无法直接看到的细节，但是带着匠人之心…来自NIX团队的Nixer们还是强迫症般的做了。

接下来就一起来看看这几十秒是怎么“偏执”出来的吧。

Client：SIEMENS
Agency：NIX Studio
Creative Director：朱青
Animation Director：木木
3D Sketch：Tracy / 李明辉
3D Design：Yuko / Tuparke
3D Animation：杨泽坤 / 攀攀 / UKll
AE Animation：木木
Music：刘天义Studio
Illustration：熊猫
Copywriting：某花

一、整个H5最初的样子？

在最初的时候，我们主要考虑到西门子的业务是城市发展的幕后支撑，是不被大家看到的智慧。所以八音盒这个元素被我们看中，圆形的八音盒上面是展现的城市，下面是内里的运转。

而在最下面，用一个城市长图，体现出城市“群”的概念。会根据八音盒城市而自动移动到相关的位置。

二、以半秒为单位计算的3D动画，制作过程是什么样？

1.草图-精致草图

最初必须绘画草图，并且绘画草图的时候就要考虑到动态设计。大概长以下这样。

在沟通清楚之后，开始绘画精致草图，因为如果不画精致草图，3D同学并无法想象出来最后想要的效果…虽然，我们画的精致草图，真的有点太精致到3D很难实现的程度吧…在画完之后，建模了P1，效果还不错。

精致草图是真的很精致就对了…

2.视觉风格的探索

实际上，视觉风格在一开始我们找了不少ref，也不是一开始就确定用c4d来制作。在大海捞针的找了许多“现代感”风格的案例之后，都觉得还是有点“俗套”。

来看看那些看着都差了点意思的视觉ref…（弱弱：当然其实这些ref都是很高水平的！

所以，最终总结出来一个问题，就是在做一个创意的时候，如果用已有的ref直接作为参考，会带来的问题一个是可能最后无法追到这个ref的效果，最重要的是，现成的东西是无法直接贴合原创想法的！

然后就大概做了一个结构小样，类似原型图。颗颗，下半部分一开始就是其实想的有个大屏幕，现在看起来真是……呃，失态了。

最后我们决定用C4D进行三维建模制作，在看遍了能找到的参考后，也无法直接找到符合我们这次方案想要到达的“优雅且高科技”的感觉。虽然这个感觉到底是什么感觉，到了现在我们也还是没有定论。

在这样的前提下，自己动手丰衣足食，我们开始了自我探索之路。果然世界上最近的道路是套路，但是能走的好的只能是自己走出的路啊。当然探索的过程中也有很多不忍直视的方案。。

下半部分一直在纠结，一些无法直视的方案…

底部城市的图呈现出来的效果也经历了不少的挣扎。

最后的最后，我们终于把主场景的图给做出来啦！锵锵锵~

3.用生命+生命+n条生命做动画

做动画这件事就是一件让人又爱又恨的事，爱的是你做出来一个动画的成就感和喜悦感，恨的是在做的过程中真的很辛苦很累，尤其是渲染了三天三夜出来的素材最后又发现bug的时候…

所以在一次次的崩溃中，我们最终完成了初版的动画。

AE小伙伴进行最终的合成也是无比辛苦的事情，因为3D直接导出的素材bug重重，AE进行最终的后期合成往往伴随着修修补补的感觉，有种修补匠的感觉，有图为证…

4.技术难点

这一次最难的部分，当然是在于每一组动画的自循环和每一组动画之间的流畅衔接。因为用户在停留在当前页面的时候，画面上要一直有动态，然而这个动态如果不是循环的，就会一直跳。但是当用户点击下一页的时候，如果不是流畅的过渡，也会觉得没有sense…

因此，最终给到技术同学的制作要求大概就长成了这个样子…

P1.【循环5s】0-125(共5s125帧)循环
P1-P2【过度4s】126-224散开聚拢(4s)
P2【循环3s】225-300(共3s75帧)
P2-P3【过度2s】301-349散开聚拢(2s)
P3【循环3s】350-425(共3s75帧)
P3-P4【过度2s】426-474散开聚拢(2s)
P4【循环3s】475-550(共3s75帧)
P4-P5【过度2s】551-599散开聚拢(2s)
P5【循环3s】600-675(共3s75帧)
P5-P6【过度2s】676-724散开聚拢(2s)
P6【循环3s】725-800(共3s75帧)
P6-P7【过度2s】801-849散开聚拢(2s)
P7【循环3s】850-925(共3s75帧)

*C4D工作界面