WEB开发网
开发学院图形图像Flash Flash实例:漂亮的翻书动画制作 阅读

Flash实例:漂亮的翻书动画制作

 2008-08-14 19:15:37 来源:WEB开发网   
核心提示:第28帧处用变形工具把遮片调成宽166.5高392.5,X值为0,Flash实例:漂亮的翻书动画制作(2),Y值为-242.5,再用线条工具画二条斜线, 至此,整个动画制作完成,去掉下部分和左上部分,选中遮罩1图层创建形状补间
第28帧处用变形工具把遮片调成宽166.5高392.5,X值为0,Y值为-242.5,再用线条工具画二条斜线。去掉下部分和左上部分,选中遮罩1图层创建形状补间,第55帧延长帧,删除第28帧后的形状补间。如图:

Flash实例:漂亮的翻书动画制作


  图12

  1-7、首页图层第一帧将库中“首页”影片剪辑元件拖入,X值为225,Y值为135,打开变形工具把“首页”影片剪辑元件的注册点移到页的右下角,“首页”影片剪辑元件的左下角与“封面”影片剪辑元件的右下角交叉摆放,第10、20、40帧插入关键帧,第10帧移动“首页”影片剪辑元件右下角与“封面”影片剪辑元件的左下角对齐,X值为0,Y值为-90。第20帧移动“首页”影片剪辑元件左上角与“封面”影片剪辑元件的右上角对齐,X值为-52.1,Y值为-150,也可打开变形面板,约束打勾,旋转设为77.4。第40帧“首页”影片剪辑元件垂直中齐、右对齐,X值为 -240,Y值为-150,第55帧延长帧。如图:

Flash实例:漂亮的翻书动画制作


  图13

Flash实例:漂亮的翻书动画制作


  图14

  1-8、遮罩2图层打开标尺,在“页”的底部和“页”的左面各拖一标尺线,第1帧用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小16*16,X值为224,Y值为134。放在封面页的右下角用线条工具斜角对斜角画一直线删除下半部并删除直线。也可用黑剪头选择工具放在矩形右下角,待鼠标出现小三角符号时向上推。如图:左图。

  第10帧插入空白关键帧,用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小240*240,X值为0,Y值为-90。用线条工具斜角对斜角画一直线删除下半部并删除直线。也可用黑剪头选择工具放在矩形右下角,待鼠标出现小三角符号时向上推。如图:右图。

Flash实例:漂亮的翻书动画制作


  图15

第20帧插入空白关键帧,用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小300*240,X值为 -50,Y值为-145。把矩形左下角移到“封面”页上左下角压在竖标尺与横标尺之间,打开变形工具旋转-12度,调整好位置使矩形覆盖整个“首页”,用黑剪头选择工具放在矩形右下角,待鼠标出现小三角符号时向上推。或用直线工具划线删除。

  第21帧插入关键帧,用黑剪头选择工具放在矩形上,待鼠标出现小三角符号时,调整矩形,如图:

Flash实例:漂亮的翻书动画制作


  图16

  第28帧插入关键帧,用黑剪头选择工具放在矩形上,待鼠标出现小三角符号时,调整矩形。

  第33帧插入关键帧,用黑剪头选择工具放在矩形上,待鼠标出现小三角符号时,调整矩形。

  第40帧插入空白关键帧,用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小258*462,把矩形右下角移到“页1”页上左下角压在竖标尺与横标尺之间,用黑剪头选择工具放在矩形的右上角上,待鼠标出现小三角符号时,调整矩形。第55帧延长帧。如图:

Flash实例:漂亮的翻书动画制作


  图17

  1-9、高光3图层做法和遮罩2的做法一样,第1 帧、第10帧(插入空白关键帧)、第20帧(插入空白关键帧)第21帧(插入关键帧)、第28帧(插入关键帧)、第33帧(插入关键帧)、第40帧(插入空白关键帧),第55帧延长帧。不同地方是矩形用线形填充,笔触无,从左至右的色码依次为:#010101,Alpha值为0,#F9F9F9, Alpha值为25,#000000,Alpha值为0,如图:

Flash实例:漂亮的翻书动画制作


  图18

Flash实例:漂亮的翻书动画制作


  图19

Flash实例:漂亮的翻书动画制作


  图20

Flash实例:漂亮的翻书动画制作


  图21

1-10、高光3遮罩图层,做法与首页图层基本一样,第一帧用矩形工具,笔触无,画一矩形宽240,高300,X值为 225,Y值为135,打开变形工具把矩形的注册点移到右下角,矩形的左下角与“封面”影片剪辑元件的右下角交叉摆放,第10、20、40帧插入关键帧,第10帧移动矩形右下角与“页1”影片剪辑元件的左下角对齐,X值为0,Y值为-90。第20帧移动矩形左上角与“页1”影片剪辑元件的右上角对齐,X值为-52.1,Y值为-150,也可打开变形面板,约束打勾,旋转设为77.4。第40帧矩形垂直中齐、右对齐,X值为-240,Y值为-150,第55 帧延长帧。参照例图在图层上设好遮罩。
  2、制作“翻页3”影片剪辑元件,库中直接复制“翻封面”改名为“翻页3”,双击进入编辑场景。

  2-1、增加和调整图层,从第1层开始,页1图层改为页3图层,在页3图层上增加首页图层,在光1图层上增加光1左、封面图层改为页1,首页图层改为页 2,自下而上分别是:页3、首页、光1、光1左、页1、高光2、遮罩1、页2、遮罩2、高光3、高光3遮罩共11个图。如图:

Flash实例:漂亮的翻书动画制作


  图21

  2-2、页3图层上(直接复制过来时是页1)增加首页图层,打开页3图层的锁,点第1帧后点场景中的图元件,点右键交换元件换成“页3”影片剪辑元件。点首页图层第1帧从库中拖入“首页”影片剪辑元件,设X值:-240,Y值:-150。第50帧延长帧。如图:

Flash实例:漂亮的翻书动画制作


  图22

Flash实例:漂亮的翻书动画制作


  图23

  2-3、光1图层上增加光1左图层,点光1图层第一帧复制帧粘帖到光1左图层第1帧,修改—变形—水平翻转,最后移动到位置至X值:-240,Y值:-150。

  2-4、页1图层(复制时是封面)点第1帧、点场景图元件,点右键交换元件换成“页1“,延长帧至28帧,29帧插入空白关键帧。

  2-5、页2图层(复制时是首页)点第1帧、10帧、20帧、40帧,点场景图元件,点右键交换元件换成“页2“,延长帧至55。这样“翻页3”影片剪辑元件就完成了。

  3、制作其它翻页影片剪辑元件,库中直接复制“翻页3” 影片剪辑元件改名为“翻页5”,双击进入编辑,页3图层改为页5同时交换元件,首页图层改为页2同时交换元件,页1图层改为页3同时交换元件,页2图层改为页4图层同时交换元件。最后库中直接复制“翻页5”改为“翻页7”修改方法同上,依此类推制作“翻页9”、“翻页11”、“翻页13”、“翻页15”、 “翻页17”“翻页19”。只要掌握每图层交换元件时页数间隔1位,如页1交换页3、页2交换页4。

  4、制作“翻封底”影片剪辑元件,从库中直接复制“翻页19”,双击进入编辑,按上面方法交换元件,所有图层延长到110帧。在最上面的图层(高光3遮罩层)的110帧上插入空白关键帧,点右键进入动作面板添加stop();代码。所有的“翻页”影片剪辑就完成了,下面要进入场景组合了,等待我在明后两天完成。

Flash实例:漂亮的翻书动画制作


  图24
  

  第三部分: 场景组合

  在库中新建翻页文件夹把所有“翻页”影片剪辑元件放了文件夹中。

  1、进入场景编辑,新建5个图层自下而上分别是:背景、标题、翻书效果、音乐、按钮、AS共6个图层。如图:

Flash实例:漂亮的翻书动画制作


  图25

  2、背景图层。插入新建元件名:背景,类型:影片剪辑,背景影片剪辑元件图层1第1帧用矩形工具,笔触无,填充放射状,颜色:左色标:#0033cc,右色标:#000000,在场景中画一矩形大小设为600*450,全居中,第20、40、60、80帧插入关键,第20帧改变填充颜色左色标:#FFFF99,右色标:#000000,第40帧改变填充颜色左色标:#CC0000,右色标:#000000,第60帧改变填充颜色左色标:#CCFFFF,右色标:#000000,第80帧改变填充颜色左色标:#0033CC,右色标:#000000(当然也可以根据个人爱好)。

  3、选中图层插入形状补间。新建图层2把库中准备好的图片拖入大小设为600*450,全居中,第80帧插入延长帧。回到场景,背景图层第1帧将背景影片剪辑元件拖入,全居中,延长至660帧,上锁。

  4、标题图层第1帧用文本工具写上自己喜欢的标题和签名,延长至660帧,上锁。

  5、翻书效果图层第1帧将库中“翻封面”影片剪辑元件拖入场景把放至合适位置,(参考位置X:318,Y:68)实例名称写上fs,第55帧插上关键帧,右键点场景中元件交换元件换成“翻页3”,第110帧插入关键帧交换元件“翻页5”,依此类推在第165、220、275、330、385、440、 495、550插入关键帧,交换元件分别为“翻页7”“翻页9”“翻页11”“翻页13”“翻页15”“翻页17”“翻页19”“翻封底”。

  6、音乐图层第1帧选中导入的音乐,同步:数据流、重复1次。延长帧至660帧,上锁。

  7、按钮图层第1帧,从库中或自己新建按钮,把按钮放在合适位置,延长至660帧,点中按钮打开动作面板,输入语句:

  on (PRess)
  {
  play ();
  _root.fs.play();
  }

  8、AS图层第1帧打开动作面板,输入语句:
  stop ();
  _root.fs.stop();

  上锁,保存。

  至此,整个动画制作完成。您做好了吗?测试影片吧,祝您成功!

上一页  1 2 

Tags:Flash 实例 漂亮

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接