flash cs4入门与提高 第18章 翻动的书页

第18章翻动的书页

本章重点本章将向读者介绍一个很漂亮的动画效果，即单击“下一页”按钮，书页向后翻页，单击“上一页”按钮，书页向前翻，翻到最后一页时，单击“完”按钮，书本合上。内容包括封面的设计，隐形按钮的制作，书页翻动的动画，各层动画和播放时间的设置，以及javascript语句，书页翻动的效果图如图所示。学习目的通过本章的学习，您可以：掌握滤镜的使用方法。掌握对象变形及中心点编辑的方法。掌握隐形按钮的制作方法。掌握javascript和关键帧动画。18.1封面设计

（1）新建一个Flash文档，选择“修改”|“文档”命令打开“文档属性”对话框。设定影片标题为“翻动的书页”，尺寸为400×300，然后单击“确定”按钮关闭对话框。（2）选择“插入”|“新建元件”命令打开“创建新元件”对话框，新建一个名称为“cover”，类型为图形的元件。选中绘图工具栏中的矩形工具，设置其笔触颜色为无，填充颜色为红褐色，在舞台上画一个矩形。选中矩形工具后，在属性面板上将其宽改为300，高为400，左上角对齐舞台的中心点。（3）导入一幅图片，选择“修改”|“转换为元件”命令将其转换为影片剪辑元件。在属性面板上单击“滤镜”折叠按钮打开滤镜面板。单击“添加滤镜”按钮打开滤镜菜单，选择“模糊”命令，并设置模糊X和模糊Y的值为2，柔化图片边缘。再从滤镜菜单中选择“发光”命令，设置模糊X和模糊Y均为10，发光颜色为白色。（4）选择绘图工具栏中的文字工具，设置字体为楷体，大小为50，颜色为黄色，在舞台中输入“咖啡文化”。（5）将图片和文字拖放到矩形的适当位置，完成封面的制作，如图所示。18.2页面设计

（6）执行“插入”|“新建元件”命令新建一个名为“page”的图形元件。选择矩形工具，在舞台上画一个宽为300，高为400的矩形，并将其左上角对齐舞台的中心点。（7）执行“插入”|“新建元件”命令新建一个名为“button”的按钮元件。选取“点击”帧，并按F6插入一个关键帧，在舞台用矩形工具画一个矩形。（8）执行“插入”|“新建元件”命令新建一个名为“pages”的影片剪辑元件。单击“插入图层”图标新建一个图层，在图层名称上双击，并将其重命名为“book”。（9）右键单击book层的第1帧，在弹出的上下文菜单中选择“转换为空白关键帧”命令。选中第1帧，在“动作”面板中输入stop();，如图所示。（10）在第2帧处按F7插入空白关键帧，在库面板中将元件cover拖放到舞台上，左上角和舞台中心点对齐。（11）在第3帧处按F7插入空关键帧，将元件page拖放到舞台上，并和cover的实例对齐。（12）在第8帧按F5插入帧，使book层的帧扩展到第8帧。（13）单击“插入图层”图标，在book层上新建一个图层，在图层名称上双击，并将其重命名为“button”。右键单击第1帧，在弹出的上下文菜单中选择“转换为空白关键帧”命令。在第2帧处按F6插入关键帧，将按钮元件button拖放到舞台中，在属性面板中将其宽设为300，高设为400，并覆盖在cover上方，如图所示。（14）在“button”层的第3、4、5、6、7、8帧处分别建立关键帧，用文字工具输入页码1、2、3、4、5、6。（15）单击“插入图层”图标，在button层上新建两个图层，在图层名称上双击，分别将其重命名为“pagebutton”和“text”。将pagebutton层的第4帧转换为关键帧，制作向后翻页按钮“下一页”；将text层的第4帧转换为关键帧，插入图片或输入文本，完成后的页面效果如图所示。（16）按照上一步的操作将pagebutton层的第5、6、7、8帧转换为关键帧，在第5帧和第7帧制作向前翻页按钮“上一页”；在第6帧制作向后翻页按钮“下一页”；将text层的第5、6、7帧转换为关键帧，输入文本。将pagebutton层的第8帧转为关键帧，制作按钮“完成”，作用是当按下此按钮时，书本合上，返回到初始状态。如图所示。18.3翻页动画制作

（17）选择“插入”|“新建元件”命令新建一个名为“flip”的影片剪辑，在第37帧右击，从上下文菜单中选择“插入帧”命令，将帧扩展至37帧。在flip层上新建一个图层，重命名为“rightflip”，将影片剪辑pages放置在舞台内，右上角和舞台中心点对齐，即，在“信息”面板中，其坐标为x=-150，y=200。在属性面板将其命名为rightflip。（18）在rightflip层下新建leftpage层。将影片剪辑pages放置在舞台内，打开“信息”面板，将其坐标设置为x=-450，y=200。并在属性面板中将其命名为leftpage。此时，rightflip

和leftpage的位置如图所示。两者间的距离为书本的宽度。（19）在rightflip层上方再新建leftflip层。将影片剪辑pages放置在舞台内，和rightflip对齐，并将其命名为leftflip，这个层主要用来实现翻页效果。（20）选中leftflip层的第2帧和第9帧，按F6将其分别转换为关键帧。选择工具面板上的任意变形工具，将pages的中心点移至左上角，在“变形”面板中将第9帧处的pages的水平缩放设置为85%，垂直倾斜设置为-85，如图所示。（21）将leftflip层的第10帧转换为空白关键帧，将影片剪辑pages拖放到舞台上，在“信息”面板中设置其坐标为x=-150，y=200。然后选择工具面板上的任意变形工具，将pages的中心点移至左上角。（22）将leftflip层的第18、19、20、29帧转换为关键帧。（23）将第10，第29帧处pages的“变形”设置为：水平缩放85%；垂直倾斜85。效果如图所示。（24）将第19帧的pages拖放在舞台外。（25）选择第9帧，单击右键，从上下文菜单中选择“复制帧”，在第30帧上单击右键，选择“粘贴帧”；同理，将第2帧复制至36帧，将第19帧复制到第37帧。（26）第36帧处将pages的“变形”设置为：水平缩放95%；.垂直倾斜10。（27）在帧面板中，将第2～9、10～18、20～29、30～36帧的渐变设置为动画渐变动画。如图所示。18.4ActionScript语句

（28）新建Actions层，在第1帧处按F6建立关键帧，打开“动作”面板，输入以下ActionScript语句。stop();tellTarget("rightflip"){nextFrame();}（29）同理，在第2、10、18、19、20、29、37帧处建立关键帧，并分别设置其ActionScript语句如下所示：第2帧：tellTarget("rightflip"){nextFrame();}tellTarget("rightflip"){nextFrame();}tellTarget("leftflip"){nextFrame();}第10帧：tellTarget("leftflip"){nextFrame();}第18帧：tellTarget("leftpage"){nextFrame();}tellTarget("leftpage"){nextFrame();}第19帧：stop();第20帧：tellTarget("leftpage"){prevFrame();}tellTarget("leftpage"){prevFrame();}第29帧：tellTarget("leftflip"){prevFrame();}第37帧：tellTarget("leftflip"){prevFrame();}stop();tellTarget("rightflip"){prevFrame();}tellTarget("rightflip"){prevFrame();}（30）单击时间轴上的编辑元件按钮，切换到影片剪辑pages，单击层button的第2帧，选中舞台上的按钮，在动作面板中输入如下代码：on(release){tellTarget(".."){gotoAndPlay(2);}}（31）在pagebutton层，单击第4帧，选中舞台上的“下一页”按钮，在动作面板中输入如下代码：on(release){tellTarget(".."){gotoAndPlay(2);}}（32）同理，设置第5帧“上一页”按钮的代码如下：on(release){tellTarget(".."){gotoAndPlay(20);}}第6帧“下一页”按钮的代码如下：on(release){tellTarget(".."){gotoAndPlay(2);}}第7帧“上一页”按钮的代码如下：on(release){tellTarget(".."){gotoAndPlay(20);}}

第8帧“完成”按钮的代码如下：on(release){tellTarget("../leftpag