木疙瘩应用 - 关于如何跳转到某一页的某一帧.doc

学设计,来火星! ( ) 木疙瘩应用- 关于如何跳转到某一页的某一帧现今,随着 H5 动画越来越成为富媒体传播的主要手段, 围绕着 H5 动画设计制作的各种云平台也愈来愈专业。今天我们重点来介绍木疙瘩云平台中的一个小技巧—如何结合代码,巧妙的控制跨页的帧数跳转! 什么叫做跨页的帧数跳转? 我们简单来普及一下“页”和“帧”的区别! 学****过木疙瘩的同学都知道, “页”是使用木疙瘩云平台在制作 H5 动画时的基础概念,相当于 FLASH 中的场景。当一个场景中的动画内容播放完毕,可以通过木疙瘩云平台预设的过渡方式,自动跳转到第二个场景中进行动画播放。而由该平台制作完成的 H5 动画,大多数情况下是由多个场景(页)组成,用来叙述动画的故事(段落)内容。这就是页。如果说,“页”代表一个动画故事的其中一个段落,那么“帧”就代表这个段落中的每一个时间节点。我们可以认为是这一段动画中的每一个点点滴滴,都是由“帧”这个单位进行记录的。在木疙瘩云平台中, “帧”就是最小的时间单位。学设计,来火星! ( ) 那么,回到主题。跳转到某一页的某一帧,就好比是我们在看某一集动画片的时候,突然想看前一集的某一个精彩部分。这个时候我只要通过点击一个按钮, 就可以回到我想让他去的某一个点上。这岂不是很方便!? 那我们怎么来做呢? 我带大家一起来做一个案例,通过案例步骤的解析,带大家来了解这种方式如何实现! 先呈上案例预览地址: ./campaigns/578846528e28cdb85e8b4619/2016092 9035949/579ef178a34834277d000dfe/ 学设计,来火星! ( ) 好吧,既然时下是一个小鲜肉横行的世界,那么我们姑且就借用当红炸子鸡,韩国BigBang 组合来完成我们的案例。在制作的同时,也大可让腐妹们的内心默默的泛起涟漪。那么如果看完了动画,我们快速进入主题。在这个案例中,我们能看到:当我们进入到小鲜肉的幻灯片播放页面时,一边留着口水看完,一边点击右下角的“BACK ”按钮,我们又回到了封面页,可是这里要抛出的问题是: 我们回到了封面的第一帧了吗? 不,请仔细看,我们其实回到了封面页的最后一帧! 那为什么一定要回到最后一帧? 因为, 如果不这样做,如果我们回到了页面的第一帧,那么,岂不是每点击一次“BACK ”,就必须要把第一页的整段动画从头至尾看一遍? 好,点击一次,看一遍。点击两次,看两遍!点击三次,看三遍!点击四次……我觉得,这个时候怎样的吐槽都无法形容我的无奈了! 小鲜肉再美丽也无法按捺住要关闭的冲动。那么我们换一个思路。如果我们每点击一次“BACK ”,都可以把那段该死的动画给省略掉,岂不是就完美了? 带着这个思路,我们进入案例的制作。首先我们来进行封面页面的制作。 1. 将图层一名称改为“BG”,并从素材库里找到封面的图片,将其置入到场景中,匹配场景的大小进行调整。(所有素材图片,随本案例奉送,腐妹们欢呼吧!) ,改名为“半透明”。然后用适量工具绘制一个比背景图略大一些, 透明度为 60% 的黑色矩形,并将它移动到图片的底端。(思路:为什么要这样做? 很简单,我希望通过对封面图片做一个手指向上滑动的动作,然后半透明的黑色矩形,就可以“PIU ”一下飞上来改在