收藏本站 关于我们

怎么做出昨天爆火的“此处故意留白”?(原创文章)

发布时间:2017-04-09 21:46:28   来源:PS教程   人气:0

前言:不难看出,Sigma这个H5的基调和原作一模一样,还有很多画面是直接从原图上改的,比如把主人公Audrey全都换成符合广告公司形象的“广告狗

\


不难看出,Sigma这个H5的基调和原作一模一样,还有很多画面是直接从原图上改的,比如把主人公Audrey全都换成符合广告公司形象的“广告狗”。

 

2)交互形式一致


H5和原作都是向左滑动,触发画面切换、动效、音效。Sigma虽然用了原作的BGM,但几乎给所有场景道具都配了音效。


3)新的元素和转场效果



H5中多处采用了一群或一支乌鸦进行转场,配上乌鸦的叫声,给整个作品定下了压抑、凄凉的基调。


这一块,应该是主创团队的创意,也是一大亮点。


2、未来故事都得这么讲


Phallaina,一个体积高达333MB的APP,据说是世上第一个可以在移动端观看的、只需要向左滑动画面的卷轴形漫画数字书。这部超现实漫画的作者是漫画师 Marietta Ren,讲的是一个名叫 Audrey 的女孩奇幻生活。


漫画制作精良,但付出的心血也是巨大的。首先原画的素材非常庞大,在手机或平板上会看到各种实时的视差动效(前景移动快、后景移动慢)、听到各种应景的音效(打碎东西、流水,等等),简直就是2D版的VR体验!


 

这种介于电影、漫画、交互动画之间的形式,可能是未来讲故事的一大法宝,尤其在H5的助力下,会让这种互动电子书更加容易传播。


近的是这个现在已经打不开的H5《此处故意留白》,据说5小时内依靠自传播就惊动了15万广告人,如果没有及时下线不知道会飙到多高。


稍远的还有悟脚叔叔的神作《致胜之道:致炫勇士冒险战记》,模仿美漫的画法、美国英雄电影的特效,讲故事的节奏和交互效果堪称一绝。




二、H5完全实现的实战教程


扒完了创意和互动本质,接下来说说这个H5的完整实现吧,涉及滑动交互、进度条显示和记录播放进度三大要点。


由于原H5已经打不开,如果你想回顾的话,可以看以下我们使用iH5.cn部分复现的版本:


 

[注] 为了方便教学,这里直接在原作品扒了素材(赶在它下线之前),在此承诺非商用,素材归原创团队所有。另外,原案例为开发实现,并非使用iH5制作。

 

1、先让长背景滑起来!

 


先在舞台下设置一个40秒(时间自定)、大小与舞台一致的滑动时间轴。


然后把完整的背景图平均切成很多张小图——避免加载时间过长;接着选中滑动时间轴,把切出来的第一张素材拖进工作台,调整好位置后添加轨迹。


注:制作横屏案例时,有一个小技巧——右键舞台,先将其旋转-90°,在做完之后再将其恢复正常,这样能避免歪着脖子做案例。


接下来,把背景图移到屏幕最右边,直至在屏幕范围消失时,设第一个关键帧。


然后在播放末尾(比如40秒处)添加第二个关键帧,点击选中这个关键帧(激活成黄色),调整它的y坐标为完整图片长度的负值。



接下来,把其他图片拖到第一张图下面,调整位置为彼此衔接,因为其他图片是第一张图的子对象,也会和它一起向左运动。

 

注:有几个参数需要特别注意——

 

① 滑动放大比例:可以理解为画面滑动时的变化幅度,推荐值:0.03-0.1;

② 滑动方向:上/下/左/右,任选一个,选中后的方向即为滑动正方向,比如选了“上”,那么页面可以上下滑动,其中上滑为正方向,下滑为反方向。推荐设置:上;

③ 自动跳转控制点:关闭。

 

2、设置有视差动效的素材

 

 

有视差效果的素材,实际上和背景图位移的原理是一样的,只是位移的速度、时间有所差异。


这里得把背景素材一一拖到时间轴下,然后拖动时间轴拉杆到与背景匹配的对应位置,为背景素材设置位移。原则只有一个,它的时间间隔要比背景同样位移的间隔短——这样运动速度更快。

 

注:如果想要更佳的视差效果,还可以修改这些独立元素的“视距”参数,让它与背景图之间的上下层关系更为明显。

 

3、底部进度条的设置

  

进度条的制作看起来复杂,其实是最简单的,只需在滑动时间轴下放一个黑色的小矩形,控制它的总时长和时间轴、背景图一致,改变它的宽度就好:

 

① 滑动时间轴第一个关键帧——宽度=0

② 滑动时间轴第二个关键帧——宽度=最长时。

 

4、音效触发

 

音效的触发,需要在滑动时间轴下添加和对应时间匹配的事件——

 

这个看起来简单,但反而很复杂。


这个H5的音效不是单次触发的,而是在某个时间范围内循环播放,这就意味着每个时间范围内需要分别在起点、终点设两个触发器:


第一个用于控制动画向后播到起点时,音效播放(即正向播放);向前播到起点时,音效停止(即反向播放)。


第二个用于控制动画向前播到终点时,音效播放;向后播到终点时,音效停止。



注:大家可以先设完全部音频的正向播放&暂停事件,再调转播放&暂停的两个触发时间,变成反向控制,这样就简洁且不易出错了。


5、怎么记录播放进度?

 

看到一半退出再次进这个H5,你会发现居然会回到上次播放的位置!其实原理很简单,主要使用浏览器的Cookie记录播放进度,在iH5上使用变量就可以实现。

 

注:Cookie可以理解为每个网站在你的浏览器上保存的标识,比如用户名和密码,多用于个性化服务。

 

1)新建变量1


变量名称可以随便填,比如“speed”,用于存取Cookie的属性。

 

为你要保存的Cookie标识起个名字,比如“进度”,利用上面的变量存取内容。

 

2)新建时间轴1


自动播放、循环播放设为YES,总时长可以是1。

 

说明一下,这个时间轴是用来自动更新Cookie的,它的总时长设为1,表示每隔1秒更新一次名为“进度”的Cookie。这个时间最好不要太短,否则更新太频繁;也不能太长,不然保存的进度不够准确。

 

3)为时间轴1添加事件组


事件组设置当它结束时,触发两个事件,分别是:



这一步表示每一秒结束,先把动画播放的当前时间赋值给变量1,再把变量1的值写入Cookie,赋值给名为“进度”的标识。

 

4)为舞台添加事件组

 

这个事件组设置初始化完成时,触发两个事件,分别是:

 

 

这里一方面把浏览器中保存的Cookie调出来,赋值给变量1(即speed,记得要加前缀$,表示引用这个变量);另一方面又把滑动时间轴的时间设为变量1的值,实现了调出历史进度给当前动画的效果。


总算写完了……


总之,这件事告诉我们:好的东西总是会发光的。还是继续坚持创作吧!

本文来自PS教程网www.46PS.com,转载请注明!关键词:平面设计平面设计教程原创自译教程


PS教程