header_v0.7.32

火!一镜到底H5的详细制作攻略

1年前发布

原创文章 / 网页 / 教程
沉沦的巨婴 原创,如需商业用途或转载请与沉沦的巨婴联系,谢谢配合。

写给智商120以上的人的交互教程——创意交互逻辑训练(2)。


28475819bd1ca84a0d304ffab015.jpg


随着VR和H5两个概念在国内兴起,模拟VR效果的H5广告诞生了。

 

这种H5以立体视觉的冲击力为特色,在手机端的体验近似于VR。实现上,主要利用移动端的陀螺仪制造重力感应的效果,但并不一定真的采用WebGL进行3D绘图。

 

在移动H5广告领域,目前有三种设计方法:

 

(1)一镜到底

(2)720°全景聚焦

(3)全景射击游戏

 

接着以iH5.cn为创作工具,分析三种H5的交互实现,分三期。本期先介绍10月比较火的“一镜到底”——

 

1、解说华丽的天猫双十一

 

一镜到底(one continuous shot)是现在影视界很爱用的玩法,镜头不cut、画面不切,一气呵成播到底。它常用于电影(如神作《鸟人》)、各种MV(如让人叹为观止的《I Won’t Let You Down》),画面的连贯性非常有利于故事的讲述。

 

ab8d5819bcb9a84a0e282bd3b333.jpg

▲尽情尽兴,尽在双11(By VML,天猫出品)

 

最近引发业内热议的天猫《尽情尽兴,尽在双11》,就通过拉近镜头/拉远镜头来制造在立体空间中穿梭的视觉氛围。创作团队是VML,今年6月用720°全景重力感应的造物节H5引起一阵刷屏热潮。

 

这个H5的交互实现关键是控制3D空间的观察点,但很多人不了解背后原理。如果是你要做一镜到底,应该怎么办?

 

2、素材的准备

 

VML历时1个月,通过策划、筹备、拍摄、图像设计、网页设计、页面开发等环节,最后做出的H5包含224张分层图片(创作细节可参考文章《天猫双11,穿越宇宙的邀请函》,By LaurentJiang;技术揭秘可参考文章《深度解密双11穿越宇宙的邀请函实现方法!》)。

 

这里为了让视觉上更具冲击力,我找了些GIF和线性图标进行演示。

 

素材与来源标识如下:

 

▲原始素材大合集

 

3、素材的导入


▲全景容器的创建

 

点击左侧“全景容器”组件,在工作区域拖拽一片区域,就能创建容器。全景容器只支持全景背景组、全景图片和全景按钮。

 

这里为初学者提个醒,iH5的工具栏组件比较多,可能需要用鼠标滚动条下滑才能找到第6栏的全景组件。

 

然后把X、Y坐标都设为0,宽高和舞台保持一致。

 

接着选中容器,把所有的素材拖到工作区,就能批量上传。

 

4、原理的把握

 

上传到全景容器的图片,都会变成全景图片,这时它的属性是下面这样的:

 

▲全景图片的属性

 

中心点是一个虚拟的原点,只有位置,没有形态。中心距离表示距离中心点的距离,分正负值。如果给原点赋予一个形态,图片的中心距离为正时表示在原点前方;反过来,距离为负时它就在原点的后方。

 

当你要在图片堆中穿梭,透过图层看到远近处的素材,需要注意什么?

 

1)“从远到近”的深刻含义

 

▲3D视觉空间的结构

 

上面这张图模拟出3D视觉空间,观察点是全景容器的属性,表示你所在位置。

 

首先你会发现为了看到一定中心距离的图片,观察点需要进行调整——

 

A、当观察点为0时,我们在正中间,正面只看得到中心距离为正的图;

B、当观察点越小时,我们和中心距离越大的图靠得越近。

 

所以,从远到近在图片堆中穿梭的过程,其实只意味着观察点的减小。那么对于越远的素材,你就得把中心距离设置得越大。

 

2)“视野”的深刻含义

 


我们眼睛所能看到的视野是一定的。从上面这张图你可以看到同样的金钱图片,在同样的视野范围内,要是离我们太近我们就看不到全貌了,而且不同图层之间也会互相遮挡。

 

所以你需要注意两点:

 

1)控制中心距离大小,为不同的图层之间留出合适的间隙;

2)控制水平偏移、垂直偏移,让有的图靠左、有的靠右,避免遮挡到视线中部。

 

5、参数的设置

 

▲全景容器的属性


理解原理后,改参数这步就简单了。

 

上面是全景容器的属性界面(中间参数太多被省略了一些),关键在于把“滑动焦距控制”设为YES;其中的最小焦距、最大焦距用于控制镜头最短、最长可以拉到什么程度,这里的焦距其实就是观察点。

 

▲素材堆砌的示意图


为了方便调整,堆砌素材最好是从最远的位置开始。

 

你可以一开始就把全景容器的观察点设为0,然后把最远的那张图中心距离设为正值,调整到适合查看的距离x这个x表示看到某一层素材的合适距离,可以作为后面层与层之间距离的重要依据。

 

比如后续图片的中心距离分别设为0、-x、-2x……以此类推即可。

 

所以做每一层的时候,你需要先调整容器的观察点大小,然后分别调试每一组素材的中心距离、水平/垂直偏移(负值表示靠左/上,正值表示靠右/下)。

 

效果如下——

 



 

温馨提示:

 

(1)全景图片有一个放缩比例的参数,支持多位小数,你可以用它来控制图片尺寸。

 

(2)当你设置好两层素材的参数后,最好先预览一次,看看镜头拉伸的效果是否理想;如果不合适,就需要调整全景容器的焦距控制灵敏度,或者重新选择合适的观察点变化数值。



全景的实现,是HTML5网页本来比较少用到的功能,但随着国内VR类广告的兴起,想必发挥空间还很多。

 

P.S.:后两期再介绍全景聚焦、全景射击的交互实现,感兴趣的可以点个赞支持一下。


74
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功