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

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