深入探讨动画书本的制作原理(庆祝青春家典系列杂志顺利发布^^)

ngzyz

    呵呵，本人做flash时间不长，在杂志社忙活了老半天，感觉自己比进入杂志社之前会得多了，进步总是有的^^，但是接触的时间不长就是不长嘛，所以我在帮做咋杂志的时候自己也各方面找资料看 ，所以嘛，欢迎像我一样热心的新手朋友们加入杂志社，不会不要紧，可以通过学习讨论共同进步^^，当然我在杂志社的这段时间跟很多人交流过，在这里要谢谢了，首先要谢谢博爱，他制作方面懂得比我多多了，跟他交流感觉受益匪浅哈，还有蜗牛，对我提了很多宝贵意见，还有社长烟雨MM、虫子、阿达都有交流过^^还有c0c0，一个也会做flash的杂志社成员
    说了这么多废话哈，其实我就是按照这个转帖的flash制作教程做的“青春家典no5”中的“沙滩边的那本词典”这个flash，呵呵，不是原创哈，下面看看具体怎么制作的^^    
   

   　　刚接触flash时，也曾被一种能翻页的书本动画深深吸引，便对其源文件进行研究，因实在太复杂，一知半解而作罢。后来曾断断续续看源文件，发现这个动画奥妙无穷，自己仿照着做了一个书本，引起不少朋友的兴趣，要求说清其原理。那么，让我试试吧：
　　首先，请点击这里看看效果：浏览动画书本
　　再点击这里下载源文件：下载源文件(456K)

　　请打开源文件，先看看作品大致结构：
　　Symbol库内是两个MC：BOOK及PAGES，一个按钮、两个图像。主场景其实仅一个层（另一个是控制）仅一条语句“stop”。
　　场景内仅一个MC，即BOOK。双击这个BOOK后看到该MC包含三层，而场景中除了几个控制点及一张封面空无一物，再点击各层的关键帧，发现原来是PAGES及它的三个实例：“rightflip”、“leftflip”、“leftpage”。
　　其实，这四个MC实际就是一个MC，即“PAGES”。
　　那么，我们先看看最底层的MC“PAGES”。在此前，让我们先弄懂后面将出现的action指令：
·prevFrame():发送播放器到动画的前一帧并停止。
·nextFrame():发送播放器到动画片断的下一帧。
·tellTarget(){}:小括号内是强制指定时间线的目标路径，花括弧内是到达新目标后的动作指令。

　　我们看到的这个PAGES就是构成书本的所有实际内容，并且每页上均有一个隐形按钮。
　　所有按钮都是“总按钮”的实例应用，并把它调成适当大小，再将其颜色属性设置成透明，另外添上“下一页”、“上一页”等字符。我们注意到，书本左右页的按钮指令分别是：
on (release) {tellTarget ("..") {gotoAndPlay (2);}}
及
on (release) {tellTarget ("..") {gotoAndPlay (20);}}

　　其功能是：单击后强行将播放指针转到上一级（".."）时间线（也就是“BOOK”MC）然后分别跳到MC的第2帧、第20帧播放（仅最后一页的按钮指令不同）。
　　好了，“PAGES”就这么简单，但必须指出，这个范例的巧妙之处在于第一帧，这里有个“stop”，不难理解，让书本开始时停止，但该帧特地设为空白，而不是封面图！这一思路是本作品的精髓！因为第一帧就放上封面，它的上级MC“BOOK”就无法正常显示了，因为BOOK包含多个PAGES实例，界面上会出现多本“有形的”书。同时，这个空白帧也为我们带来了巨大的困惑：在MC“BOOK”中，“PAGES”是无形的！仅见几个控制点，根本无法理解各MC的情况及各关键帧的变化状态！为了能够看透MC“BOOK”，请你临时在“PAGES”的第一帧上放个与内页一样大小的图形，否则，实在无法看清“BOOK”的真面目啊！（如图一）

图一
　　好啦，让我们再来看看MC“BOOK”：
　　在第一帧，各层分别放了“rightflip”、“leftflip”、“leftpage”其中后者放在左边，前两者重叠，（别忘了还有一个封面图，就是刚开始可看到封面，弥补了“PAGES”第一帧的空白）第一帧的语句是“stop”，停在那儿等待你操作按钮。
　　从第2帧到18帧是页向左翻；从20帧至37帧是向右翻，其变形过程从场景中我们临时加的图上看出，如图二所示。

图二
　当然你可打开“Transform”及“Instance”两个面板，进一步研究各关键帧是什么MC实例以及翻页过程的变形数据，（如图三）：　　至此，你应该明白MC“PAGES”中各按钮的作用了吧？！
　　我们先看看按下“下一个”按钮，执行
tellTarget ("..") {
gotoAndPlay (2);
}
　　就是从MC“BOOK”的2帧播放，而BOOK的第2帧中语句是：
tellTarget ("leftflip") {
nextFrame ();
}

图三
　　就是把“PAGES”的实例“leftflip”左翻一页，同时执行运动变形，这样一个生动的翻页动作产生了，我们可以注意到一个翻页其实分两部分组成这在“BOOK”中看得很清楚！
　　至于第18帧中的action指令是：
tellTarget ("leftpage") {
nextFrame ();
}
tellTarget ("leftpage") {
nextFrame ();
}
　　及第3层第2帧中的指令：
tellTarget ("rightflip") {
nextFrame ();
}
tellTarget ("rightflip") {
nextFrame ();
}
语句有点让人如堕五里雾中（还有其它关键帧也有类似语句），为什么要连用多句重复的，这里的篇幅不可能解释每句过程，但有一点你必须明白，因为为了控制需要，MC“BOOK”中放了四个“PAGES”实例（其中“PAGES”实例在运动过程中出现，从图中看出leftpage实例显示左边的页面，rightflip及leftflip分别显示下一页、上一页翻动时的页面，PAGES显示右边的页面，而并且记住，leftPage
及PAGES两个MC是静态显示左右结果，rightflip及leftflip分别显示变形过程。而每翻一页，其实界面上必须显示四页内容（封面翻开时及合上书本时除外）原来左右两页，翻动后左右两页，所以在不同的  
关键帧中，有的使用了重复的“nextFrame()”语句，有的仅一个，而向前向后翻的原理是一样的。这里我仅假设从2页后翻一页的情况：
2页翻一页后左边是第3页；右边应该是第4页，所以对左边说是nextFrame()一次，对翻的过程是两次，对右边应该是三次（即2、3、4页），请再对照图四中各MC，可以反复琢磨一下！
　　所以最多三次，因为包括最后新显示的页，只须三次！这道理就很明白了！同时也就理解了为什么需要四个MC实例的原因。
这里的tellTrget可以看作“跳转”语句，连续不断地跳转到相关实例MC上，你不妨再把各个实例移开看看，如图四：
相信你会逐渐领悟其非常精细严密的构思！
　　构思严密，制作巧妙，效果逼真是本作品的特点，同时，让我们又一次感叹flash创意的无限性！

图四


呵呵，希望大家喜欢，如果大家支持的话，以后会继续发帖和大家讨论
附，点：青春家典No.5 《小家三周年庆典征文集》

[ 本帖最后由 ngzyz 于 2009-9-27 22:04 编辑 ]

hd880814

额，俺也客串了QQ20


玩笑。。。

话说回来，兄弟真辛苦你了，在家典NO.5和即将面世的家典NO.4兄弟都做了很多，付出了很多。。。

杂志组有兄弟你这样的人才，一定很快壮大的

博爱共梦想飞

很好，十分感谢，我也学习一下这些flash技术，为兄弟分担一些flash制作工作

xbcell

flash做好了很厉害的，楼主加油，专一行就够了

raineey

江山代有材人出啊！兄弟出息了。贺你一下。

zzjkzz8888

有点门路~还能看懂~！
学习了~谢谢LZ分享~！