FLASH下载

设为首页
繁體中文
闪客留言

 首页 | FLASH动画 | FLASH专辑 | FLASH短片 | FLASH游戏 | FLASH歌曲 | FLASH教程 | Flash播放器代码
您当前的位置:flash下载 -> FLASH教程 -> AS教程 -> 文章内容  
栏目导航 相关文章
· FLASH基础 · FLASH实例教程
· FLASH技巧 · AS教程
·[图文]翻书效果(一)
·[图文]Flash翻书效果研究
·用Flash5制作翻书效...


翻书效果(二)

作者:转载  来源:[闪客]  发布时间:2006-5-22 21:26:53  编辑人:[FLASH教程]

减小字体 增大字体


  建电影剪辑“go”:这是本节的第一重点,做完了它,您的相册也就算完成了。

  共三层,我们一层一层的来看:

  最下面是leftpage,这一层是书面翻到左面后的效果,把库中的图片集拖入此层,实例名为:leftpage,在场景中的位置为X轴-290,Y轴为0。

  中间层是rightflip,这一层是书面翻到右面的效果,把库中的图片集拖入此层中,实例名:rightflip,在场景中的位置为X轴0,Y轴0。
  

  在第一帧中加指令:

with (_root.go.rightflip) { nextFrame();}
在第二帧中加指令:
with (_root.go.rightflip) { nextFrame();}with (_root.go.rightflip) { nextFrame();}

    最上面一层是leftflip,这一层是设置左右翻页的效果,把库中的图片集拖入此层中,实例名:,leftflip,在场景中的位置为X轴0,Y轴0。在第1,2,9,10,19,21,21,29,30,40处加关键帧,在第11,19,21,29帧处,设置X轴坐标为-290。

  怎样才能让leftflip实现上述翻页设置呢?您会不会对着空空如也的场景发愁?哈,看俺的,打开库中的图片集这个mc,新加一层,在其第一帧放入一个内页,X轴为0,Y轴为0,第二帧加空白关键帧,再回场景中看看,是不是三个mc实例全能看到了?这是在处理空帧时的一个小技巧。关闭rightflip和leftpage二层的眼睛,让我们集中兵力来对付leftflip。

  打开网格和标尺,编辑网格大小为50*50,在Y轴-120处拉出一根辅助线,做变形时的高度参考,向左翻页分二步,以第一页为例:先掀起右页向左翻,这是第2-10帧之间的动作,过中线后翻转成第二页,这是第11-19帧的动作,选取第10帧,用任意变形工具中的倾斜和缩放功能使影片剪辑leftflip变成向右上的狭长的平行四边形,为了帮助新来的朋友明白,下面的图三,图四是运用缩放和倾斜功能的示意图,先缩放再倾斜,注意图中这二种不同功能时鼠标的形状不同,做第11-19帧之间的翻转时要先移动注册点,这样才能让书页沿中线翻转,请看图一,图一所示leftflip位于-290处时有二个注册点,左面的为元件自己的注册点,右面的为go 这个mc的注册点,翻转前先移动leftflip的注册点和mc的注册点重合,如图二所示,然后在11帧处用任意变形工具缩放,倾斜,使第11帧处也变成向左上倾斜的狭长平行四边形,图四是变成的狭长平行四边形的形状,第21和第29帧之间的变形也要先移动注册点再缩放倾斜,最后,在2,11,21,30帧处建立补间动画。在第39帧处建立关键帧。

  缩小场景至25%,把第20,40帧处的mc拖出场景处,使肉眼不可看,这是本例的第二个技巧,俺在看源文件时为找出它的芳踪,苦熬了三个小时也没明白它上哪去了,最后还是学习来了老师火眼金睛,给俺找出来的。

  给各帧设置动作指令:

  第一帧:

stop();

  第二帧:

with (_root.go.leftflip) { nextFrame();}

  第十帧:

with (_root.go.leftflip) { nextFrame();}

  第十九帧:

with (_root.go.leftpage) { nextFrame();}with (_root.go.leftpage) { nextFrame();}

  第二十帧:

stop();

  第二十一帧:

with (_root.go.leftpage) { prevFrame();}with (_root.go.leftpage) { prevFrame();}

  第三十帧:

with (_root.go.leftflip) { prevFrame();}

  第四十帧:

with (_root.go.leftflip) { prevFrame();}with (_root.go.rightflip) { prevFrame();}with (_root.go.rightflip) { prevFrame();}stop();

  现在请您用鼠标拉着播放头试试第三层中的这个mc是不是从右翻到左,又从左翻到右了?要是行了,我们的组件就算建完了,下面在场景中要做的事就简单的不用写教程了。

  场景中分四层,最下面是背景,颜色任意,星星是用的以前的元件,彩点是用笔刷任意点的。第二层把库中叫“go”的mc拖过来,放在场景中下部,实例名:go,第三层放置标题字《闪客沙龙部分作品集》,第四层设置stop();

  测试一下,前后翻页有没有问题?不要点击过快,因为页面的翻转需要时间,如果有问题,检查您是不是忘了设置实例名?您是不是把动作指令加错了对象?翻页的动作您做对了没有?如果实在找不出问题所在,干脆重做一百遍,钢铁就是这么炼成的,嘿嘿~~~,要是没有一点问题,恭喜您了,别忘了删除我们加在“图片集”这个mc上的新层,别说俺没提醒过您~~~~,要是您想多加几张图片,请在“图片集”这个mc中任意加帧,注意指令不要加错就行了,不过,图片往往体积较大,要是想在网上发布,还是不要太多为好,您可分成几个专题制作相册。

  和网上的同类实例相比,这个实例的好处是省事,制作简单,只做一个翻页动作,就可以翻好多页书了,特适合俺这号的懒人。

nextFrame();//跳转到后一帧并停止。prevFrame();//跳转到前一帧并停止。//当释放鼠标时,在上一级目录中播放第二帧on (release) {with (_parent) {gotoAndPlay(2);}}
?

    哈,stop,不用俺解释了吧?就这么几句,足足让蜘蛛精想了几天!晕!笨!菜!

  请您拿起一本书来翻翻看看,您会发现要完成完整的一个翻页要牵涉到四个页面,以向左翻为例,最左面的第一页要被盖住,原来是右面的第二页要转到左面并被遮盖,原来在下面看不到的第三页要转到左面平铺显示,原来也是看不到的第四页要在右面平铺显示出来,随着书页的翻动,这个变化一直进行下去,全翻完了还要回到封面,准备再次打开阅读,下面我以打开封面后的变化来简单谈谈本例构思的巧妙,我们来看“go”中的前几帧的变化:

  第一帧中,三层中的“图片集”初始都为第一帧,我们还记得,“图片集”中的第一帧是空帧,这样我们应该看不到封面,但rightflip第一帧的指令为: nextFrame();,“图片集”的第二帧是封面,这样我们就看到了封面并停止在这里,等待我们的触发动作,这个动作就是按下封面上的隐形按钮,执行“go”这个mc的第二帧,在这一帧中,leftflip也进入了下帧,并开始翻页,同时,rightflip向前跳转二帧,从第二帧进入第四帧,这样当封面翻到左面后,右面就会显示出“图片集”的第四帧,也就是学习来了老师的作品。

  整个的动作构成很难在这里用文字说清,这是一个动态的,时时变化的过程,我将在讲课时一一道来,请大家在讲课时手边最好放一本书,通常形象思维要比逻辑思维容易一点。课前务必下载源文件,因为很多地方没有抓图,我将对着源文件讲解,同时,本例的素材也在源文件里。

  本讲的源代码来自泸上老康老师,在备课过程中得到老康和学习来了二位老师的大力帮助,蜘蛛精在此深谢了。

  本例还有哪些错误,烦请大家告诉俺哈~~~~~。

(完)

[] [返回上一页] [打 印]
下一篇文章:翻书效果(一)
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [查看评论>>>]