Flash制作漂亮的翻书动画

知识点：遮罩的运用学习无脚本软翻书教材前请先看看遮罩的知识：1、遮罩动画的概念（1）什么是遮罩？“遮罩”：顾名思义就是遮挡住下面的对象。

在Flash8.0中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。

（2）遮罩有什么用？在Flash8.0动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。

2、创建遮罩的方法（1）创建遮罩在Flash8.0中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。

你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了。

（2）构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。

被遮罩层中的对象只能透过遮罩层中的对象被看到。

在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。

下面开始本教程打开FLASH文档，名称：《软翻书》文档属性大小：600*450其它默认。

素材准备：1、准备20张图片，用PS处理成：200*150像素。

2、准备1张背景图片，PS处理成：600*450像素。

3、以及兰花、荷花的动画。

4、字体：毛泽东字体、文鼎CS大隶书繁、方正小篆体。

新建位图文件夹，将位图全部导入。

第一部分：制作“页”影片剪辑元件1、制作“封面” 影片剪辑元件，插入新建元件影片剪辑名为“封面”。

1-1、在图层1上新建六个图层，自下至上分别是：背景、花边、边线、字框、字、动画（图片也行）、遮罩7个图层1-2、图层1（背景）第1帧用矩形工具，无笔触，画一矩形：240*300，颜色：#333300，全居中。

翻转动画——世界名画欣赏旋转、缩放、移动是课件中常用的动画方式，包括文字、图像、图形等对象的动作动画。

而翻转则是让动画对象以一个轴作翻转的过程，如书的翻页，文字的翻转等。

一、运行结果运行该动画，一幅幅外国名画沿着它的一条边自右向左翻转，向学生展示其风貌，如图1所示。

图1二、知识要点本例表现的是一种书页翻动的效果：翻动前，图像按所在层进行上下排列，上层的图像在上面，下层的图像在下面；翻动到左侧后下面一层的图像将遮挡上层的图像。

三、操作步骤1．设置文件属性及视图(1)执行“开始”—“Macromedia”—“Macromedia Flash MX 2004”命令，启动程序，并创建一个新Flash文档。

(2)选择“修改”→“文档”命令，在文档属性对话框中，按图2所示进行设置，背景选择青色。

以上参数也可以在属性面板中修改。

#669999图2(3)选择“视图”→“标尺”命令，在窗口中显示标尺。

(4)将鼠标放在左侧纵向标尺上，按住鼠标向右拖动，产生一条竖向的参考线，并拖动到编辑区的中央，标尺为350的位置。

2．输入文字(1)选择“绘图”工具栏上的“文字”工具，设置文字为：字体（华文行楷）、加粗、字号（55）、文字颜色（金黄色），在编辑区中输入文字“世界名画欣赏”。

(2)用鼠标拖动文本框右上角的调整点，向左移动，使文字变成竖排，并将其放在适当的位置，如图3所示。

图33．制作文字动画(1)在图层1的20帧单击鼠标右键，在快捷菜单中选择“插入关键帧”命令，插入一个关键帧。

(2)选中图层1的第1帧，选择工具面板中的“任意变形工具”，将图层1中的文字旋转180度角，并缩小。

(3)选中图层1的第1帧，在属性面板中，选择“补间”下拉列表中的“动作”，并保持右边“缩放”选项已被选中，如图4所示。

按下回车键可观看动画效果。

图44．制作第一页的翻页动画(1)单击“时间轴”面板上的新建图层按钮，新建图层2。

(2)选中图层2的第1帧，执行“文件”→“导入”→“导入到舞台”命令，打开“导入”对话框，选择素材中要导入的“外国名画1”图像文件，点击打开按钮，当出现对话框询问“此文件看起来是图像序列的组成部分，是否导入序列中的所有图像？”时，选择“否”，将指定的图像导入编辑区。

flash⾮组件的翻书效果制作过程flash⾮组件的翻书效果制作过程作者:tiger_0309 | 来源:⽹上有好多这样的东西，但是⼤都⽤组件做成的，有的往往还有收费，我的这个不⽤组件，基本都是代码，但是结构很简单，⼀⽬了然，⼤家下载原⽂件就可以看出来，⾄于代码的含义我就不详细说了，我在这主要说⼀下替换⾃⼰的图⽚时候怎么样改写代码。

主场景⼀共有四帧代码：第⼀帧代码：x1=50;y1=50x2=250;y2=50x3=450;y3=50x4=50;y4=200x5=250;y5=200x6=450;y6=200//这六个坐标点就是书摊开后的左上，中上，右上，左下，中下，右下点；其中左上点(x1,y1)是定位点，可以决定书在舞台的位置,然后其余的五个坐标就由你的图⽚⼤⼩决定，(x2-x1)和(x3-x2)相等是书的单页宽，同理(x5-x4)和(x6-x5)相等也是⼀样的道理，(y4-y1)和(y5-y2)和(y6-y3)相等是图⽚的⾼。

attachMovie("cover","p0",100)//这是第⼀张attachMovie("bottom","p19",120)//这是最后⼀张for(i=2;i<=20;i+=2){attachMovie("Page"+i,"p"+i,100+i/2)}//17这个数字是总图⽚数20-3得出for(i=1;i<=17;i+=2){//这个111的数字是根据上⾯Page20的level是110得出attachMovie("Page"+i,"p"+i,111+(i-1)/2)}//你的图⽚多少不⼀样，每张图⽚所在的level也很重要，这要你⾃⼰根据我的原⽂件的图⽚数⽬和你的⽐较后调整//图⽚都是从库⾥调⽤，所以都要有链接标识符，得把所有的图⽚建成影⽚剪辑，在每个影⽚剪辑⾥都要把图⽚左对齐和底对齐到舞台，这点很重要，还有你要准备的图⽚必须是双数//影⽚剪辑Page20⾥⾯画⼀个和图⽚⼤⼩⼀样的矩形，颜⾊和背景⾊⼀样，也要左对齐和第对齐到舞台mask1._x=x6；mask1._y=0mask2._x=x6mask2._y=0//遮罩尽量做⼤⼀点，在主场景⾥各占⼀半mask1._visible=falsemask2._visible=falsepage=0mouse2=0x=x6y=y6xmouse=x6ymouse=y6第⼆帧代码：flag=1if(page>0){eval("p"+(page-1))._visible=trueeval("p"+(page-1))._x=x4eval("p"+(page-1))._y=y4eval("p"+(page-1))._rotation=0}//20是我⽤的图⽚数字，你⽤多少改为多少if(page<20){eval("p"+page)._visible=trueeval("p"+page)._x=x5eval("p"+page)._y=y5eval("p"+page)._rotation=0eval("p"+(page+1))._visible=trueeval("p"+(page+1))._x=x6eval("p"+(page+1))._y=y6eval("p"+(page+1))._rotation=0eval("p"+(page+1)).setMask(mask1)eval("p"+(page+2))._visible=trueeval("p"+(page+2))._x=x5eval("p"+(page+2))._y=y5eval("p"+(page+2))._rotation=0eval("p"+(page+2)).setMask(mask2)}//这也要改for(i=0;i<=20;i++){if(i<page-1||i>page+2){eval("p"+i)._visible=false}}第三帧代码：xx=_xmouseyy=_ymouseif(Key.isDown(1)){mouse1=1}else{mouse1=0}if(mouse2==1&&mouse1==1&&((xx-x5)*(xx-x5)+(yy-y5)*(yy-y5)<=(x6-x5)*(x6-x5))&&((xx-x2)*(xx-x2)+(yy-y2)*(yy-y2)<=(x6-x5)*(x6-x5)+(y5-y2)*(y5-y2))){ xmouse=xxymouse=yy}if(mouse2==0&&mouse1==1){//150是我主场景宽的⼀半左右，它的值决定你的⿏标的灵敏度，你可以根据你的场景来调整if(flag==1&&xx<150&&page>0){page-=2x=x4y=y4xmouse=x4ymouse=x4gotoAndPlay(2)}}if(mouse1==1){flag=0x=xmouse/5+x*4/5y=ymouse/5+y*4/5}if(mouse1==0){//这个150也要改，和上⾯⼀样if(xmouse>150){x=x6/6+x*5/6y=y6/4+y*3/4}else{x=x4/6+x*5/6y=y4/6+y*5/6}}eval("p"+(page+1))._x=xeval("p"+(page+1))._y=yif(flag==0&&page<20&&Math.abs(x-x4)+Math.abs(y-y4)<1){page+=2x=x6y=y6xmouse=x6ymouse=y6flag=1gotoAndPlay(2)}if(Math.abs(x-x6)+Math.abs(y-y6)<0.5){a=0flag=1}else{a=Math.atan2(y6-y,x6-x)}eval("p"+(page+1))._rotation=2*a*180/Math.PImask1._x=(x+x6)/2mask1._y=(y+y6)/2mask1._rotation=a*180/Math.PImask2._x=(x+x6)/2mask2._y=(y+y6)/2mask2._rotation=a*180/Math.PImouse2=mouse1第四帧代码：gotoAndPlay(3)；下载::。

Flash电子书鼠标拖拽翻页效果原理分析(杂志部落)设置遮罩和阴影之后的最终成品Flash演示大家用鼠标拖拽画面四个角即可看见效果主要原理：[attach]591[/attach]将电子书分为3个内容层，叠放顺序如图。

第一层为当前页面层，是现在正在显示的页面；第二层是随鼠标拖拽时卷起的页角，第三层是当页角卷起时，露出下一页的层。

设置遮罩：当页边卷起时，层1仅显示四边形FBDE内部分，层2仅显示ABCD部分，层3仅显示BGHD部分。

旋转：层2内的内容要随着鼠标运动而不停变换倾斜角度，其角度始终与AC边斜度一致。

翻页：当页面完全翻过时，层1的当前页数=当前页数+1[attach]592[/attach]程序的核心在于如何获得四个点ABCD的坐标，我使用的是求垂直平分线的方法，既：点C是鼠标位置，点H是页角位置，BD既为此两点间的垂直平分线。

由已知的C，H坐标求出直线BD的一次函数y=kx+b以后再求出其与FG，EH的切点，既得点B，D坐标，点A是点G于直线BD的对称点，通过求点G对BD的对称点既可得点A 坐标。

demo1： 4个顶点的计算[attach]593[/attach]其他几个要点：限制C点范围：当鼠标在下图灰色区域内时，点C的坐标既等于鼠标坐标，当鼠标离开灰色区域时，点C必须停留在区域内。

弧KML是以点J为圆心，KJ为半径的圆，弧KNL是以点I为圆心，IK为半径的圆(demo1既未限制C点范围，若鼠标超过弧形区域就会出错。

[flash=314,256]/updown/2.swf[/flash]响应事件：设置4个热区，分别位于书的4个顶点，分别设置rollOver，rollOut，releaseOutside，release事件函数。

事实上这一部分函数编写极费时间，需要考虑各种各样的可能性和针对性的处理方法。

鼠标吸附及黏滞：当鼠标进入热区和快速移动时，页角是逐渐黏附向鼠标的，这样可以使动画看上去更流畅。

Flash CS3 入门翻页动画本练习为翻页动画，主要运用逐帧动画形式实现翻页动画效果。

使用【矩形工具】结合【选择工具】绘制书页，然后，经过【变形】面板对其进行变形，调整每一个关键帧内容，并通过按钮控制，最终完成动画。

本练习重点在于，如何创建逐帧动画以及逐帧动画的作用。

通过学习本练习，希望用户能够熟练掌握创逐帧动画的方法。

练习要点●矩形工具●选择工具●变形面板●创建按钮●添加滤镜练习过程（1）在Flash中创建一个新文档，在【属性】面板中设置文档大小为800×600像素。

然后，按下Ctrl＋F8快捷键，打开【创建新元件】对话框，单击【影片剪辑】单选按钮，并在【名称】文本框中输入新元件名称，如图27-1所示。

图27-1 创建新元件（2）完成操作后，进入编辑模式，在工具箱中单击【对象绘制】按钮启用该项功能，并使用【矩形工具】结合【选择工具】绘制出图27-2所示的图形。

然后，按下F8快捷键，打开【转换为元件】对话框，单击【影片剪辑】单选按钮，并在【名称】文本框中输入新元件名称，如图27-2所示。

图27-2 绘制图形（3）双击绘制的图形进入编辑模式将轮廓线删除。

然后，执行【窗口】｜【属性】｜【滤镜】命令，打开【滤镜】面板，单击【添加滤镜】按钮，在弹出的下拉列表中选择【投影】选项，如图27-3所示。

图27-3 添加滤镜（4）在【时间轴】创建一个新图层，在第13帧处，按下F6快捷键，插入关键帧。

然后使用【矩形工具】绘制一个矩形图形，填充颜色为蓝色，并使用【选择工具】对矩形图形进行调整使其成为书籍内页，如图27-4所示。

图27-4 创建新图层（5）继续在【时间轴】上创建新图层，在第12帧插入关键帧。

然后选择“图层2”第13帧，按下Ctrl＋C快捷键，执行【复制】命令。

再选择“图层3”第12帧，插入关键帧，按下Ctrl＋Shift＋V快捷键，执行【粘贴到当前位置】命令。

并再【颜色】面板中更改色相。

最后，选择第13帧，插入关键帧，按下Ctrl＋T快捷键，打开【变形】面板，设置如图27-5所示。

8.5 综合实例——翻书效果随着电脑与互联网的普及，在电脑上看书已经成为人们获取知识的另一种途径，但是，在电脑上看书始终找不到翻书的感觉。

下面我们就通过一个实例向用户介绍翻书效果的模拟，在整个练习中用户将逐步了解关键帧和普通帧的区别，掌握声音添加方法，Scene的插入方法，网格设置方法和按钮的制作方法等，希望这个实例能够给读者带来一点收获。

具体操作步骤如下：(1) 进入Flash操作界面，选择File→New命令，新建一个文件。

(2) 按下Ctrl+Alt+G组合键打开Grid对话框，选中Show Grid以及Snap to Grid复选框，使所有操作捕捉到网格上，然后在下面的网格高度、宽度文本框中分别输入15PX，如图8-24所示。

图8-24 设置网格(3) 首先制作书的封底，将图层1命名为“封底”，选择矩形工具在舞台中绘制一个合适大小的矩形作为封底，注意网格的锁定，并根据需要设置颜色，如图8-25所示。

(4) 为了使封底产生厚度，可以选择矩形工具在其左侧、右侧和下方绘制细长的矩形以模拟其厚度，如图8-26所示。

图8-25 绘制封底图8-26 使封底产生厚度(5) 选择矩形工具在封底上绘制一个合适大小的矩形，将其填充为灰色，然后选择箭头工具双击该矩形的轮廓线将其删除，如图8-27所示。

(6) 选择矩形工具在灰色矩形上绘制一个相同大小的矩形，将其填充为白色，同样将其轮廓线删除。

注意，白色矩形要高出一些，因为书是有厚度的，如图8-28所示。

图8-27 绘制灰色矩形图8-28 绘制白色矩形(7) 按下Ctrl+R组合键打开Import对话框，在其中选择“头像”位图文件，单击“打开”按钮将此图片导入到当前文件中，然后按下Q键选择变换工具对图片大小进行调整。

选择文本工具在图片的下方输入文字“你还记得我吗？”如图8-29所示。

(8) 按下Ctrl+A组合键将前面绘制的图形全选，再按下F8键打开Convert to Symbol 对话框，如图8-30所示，在其中Name文本框中输入“封底”，选择Graphic单选按钮，单击OK按钮将所选图形转换为图形符号。

思路：使用补间动画制作封面的翻动效果。

使用补间形状制作书页的翻动效果。

主要练习精巧的动画过程的制作。

1.新建文件，首先制作封面的翻页效果，将“图层1”命名为“封面上”，因为封面的翻页效果需要两层完成，即没翻过中线时是一层，翻过中线后是一层，所以这里取名为“封面上”，下面将有“封面下”。

在舞台中绘制封面图案，如图所示：注意矩形边线的粗细，左边的线条较粗，表示书脊，其他线条较细。

将其转换成元件，取名为“封面”。

2.使用任意变形工具，将图形中心点移动到封面的左边线的中点，要以该点作为以后形变的基准。

如图所示：在第5帧插入关键帧，使用任意变形工具将封面通过缩放、倾斜调整如图所示，设置从第1帧到第5帧的补间动画。

在第9帧插入关键帧，使用任意变形工具将封面通过缩放、倾斜调整如图所示，设置从第5帧到第9帧的补间动画。

在第13帧插入关键帧，使用任意变形工具将封面通过缩放、倾斜调整如图所示，设置从第9帧到第13帧的补间动画。

到此，封面没翻过中线的动画就制作完了，可以测试一下看看效果。

3.在图层“封面上”的下方新建一个图层，取名为“封面下”，在这一层中设置封面翻过中线后的动画，书页翻过中线后所展示的就是封面的内面。

在第14帧插入关键帧，先创建封面内面的图案，如图所示：将其转换为元件，使用任意变形工具选择封面内面，将图形的中心点移动到封面内面的右边线中点，要以该点作为以后形变的基准。

为了便于对齐，将图层“封面上”的第13帧复制，然后粘贴到第14帧上。

再回到图层“封面下”的第14帧，使用任意变形工具将封面内面通过缩放、倾斜调整到与图层“封面上“的第14帧相对的位置上，如下图所示：设置好后将图层“封面上”的第14帧删除，因为它只是为对齐起一个基准的作用。

4.在图层“封面下”的第18帧插入关键帧，同时将图层“封面上”的第9帧复制粘贴到第18帧上起基准作用。

回到图层“封面下”的第18帧，使用任意变形工具将封面内面通过缩放、倾斜调整到与图层“封面上”的第18帧相对的位置上，如下图所示：完成后，在图层“封面下”设置从第14帧到第18帧的补间动画，同时将图层“封面上”的从第14帧到第18帧一起删除。