第19章网页设计与制作应用教程

网页设计与制作应用教程（第2版）机械工业出版社同名教材配套电子课件主要内容第一部分网页设计与制作基础第二部分AdobeDreamweaverCS5网页制作第三部分AdobeFireworksCS5网页图片处理第四部分AdobeFlashCS5网页动画制作2第19章Flash根本动画的制作19.1元件和实例19.2使用“库”19.3动画基础19.4使用反向运动19.5边学边做（制作“开卷有益”动画）319.1元件和实例元件又称符号，元件是指创建一次即可多次重复使用的图形、按钮、影片剪辑或文本。根据元件所属的不同类型，任何一个创建的元件都将自动成为“库”的一部分。合理使用元件可以缩短动画制作的时间，减少文件的数据量，使制作出来的动画能够在网络上传输更加迅速，从而大大提高工作效率。419.1.1创立和编辑元件1.元件类型图形元件

：可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。按钮元件

：可以创建响应鼠标点击、滑过或其他动作的交互式按钮。影片剪辑元件

：可以创建可重用的动画片段。影片剪辑拥有它们自己的独立于主时间轴的多帧时间轴。519.1.1创立和编辑元件2.创建新元件619.1.1创立和编辑元件3.将选定元素转换为元件在舞台上选择一个或多个元素。然后选择主菜单【修改】/【转换为元件】命令（或者将选中元素拖到“库”面板上，还可以通过单击右键，从菜单中选择“转换为元件”命令）。719.1.1创立和编辑元件4.创建按钮元件按钮实际上是四帧的交互影片剪辑。当为元件选择按钮行为时，Flash会切换到元件编辑模式。窗口内显示一个四帧的时间，轴时间轴的标题为四个标签：“弹起”、“指针经过”、“按下”和“点击”的连续帧. 819.1.2创立和编辑实例实例是指位于舞台上或嵌套在另一个元件内的元件副本。实例可以与它的元件在颜色、大小和功能上有差别，编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。919.1.2创立和编辑实例实例是指位于舞台上或嵌套在另一个元件内的元件副本。实例可以与它的元件在颜色、大小和功能上有差别，编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。1019.2使用“库〞Flash文档中的“库”可存储为在Flash文档中使用而创建或导入的媒体资源。“库”可存储导入的文件（如视频剪辑、声音剪辑、位图）、导入的矢量插图和元件。1119.2使用“库〞“库”面板1219.2使用“库〞“公用库”面板1319.3动画根底19.3.1基本知识19.3.2逐帧动画19.3.3补间动画19.3.4传统补间动画19.3.5补间形状动画19.3.6遮罩动画1419.3.1根本知识1.动画类型逐帧动画逐帧动画可以为时间轴中的每个帧指定不同的艺术作品，创建与快速连续播放的影片帧类似的效果。补间动画对于由对象的连续运动或变形构成的动画，补间动画很有用。补间动画功能强大，易于创建。传统补间传统补间允许一些特定的动画效果，使用基于范围的补间不能实现这些效果。补间形状Flash将内插中间的帧的中间形状，创建一个形状变形为另一个形状的动画。反向运动姿势反向运动姿势用于伸展和弯曲形状对象以及链接元件实例组，使它们以自然方式一起移动。1519.3.1根本知识2.帧频帧频是动画播放的速度，以每秒播放的帧数(fps)为度量单位。帧频太慢会使动画看起来一顿一顿的，帧频太快会使动画的细节变得模糊。24fps的帧速率是新Flash文档的默认设置，通常在Web上提供最佳效果。标准的动画速率也是24fps。1619.3.1根本知识3.在时间轴中标识动画Flash通过在包含内容的每个帧中显示不同的指示符来区分时间轴中的逐帧动画和补间动画。1719.3.2逐帧动画例19_11)新建一个Flash文档并保存为“例1-计时.fla”，在“属性”面板中将舞台大小设置为200×200像素，背景颜色设置为淡蓝色（#66CCCC），设置帧频率为1.0fps，如图19-14所示。182)当前“时间轴”窗口中，播放头位于“图层1”的第1帧上，选中工具箱中“椭圆”工具，在舞台中间绘制一个白色环形作为动画背景。3)单击时间轴底部的“插入图层”按钮，新建“图层2”，单击“图层2”的第1帧使之成为当前的关键帧。4)使用“文本”工具在当前帧上创建文本。在舞台中的圆圈内单击鼠标，输入数字“9”，并确认。5)单击下一帧，然后单击右键，从弹出的快捷菜单中选择“插入关键帧”，添加一个新的关键帧，并且内容和第一个关键帧内容一样。6)使用“文本”工具在舞台中改变该帧的内容为数字“8”。7)按照步骤5)~6)，继续完成第3到第10帧的动画序列，分别对应数字“7”到“0”。8)按“Enter”键测试动画序列，会看到窗口中显示出按照读秒的速度变化着的倒计时数字效果。1919.3.2逐帧动画19.3.3补间动画利用动画预设创建补间动画例19_2描述：在舞台上，先后分别出现三个小球，其中一个从左到右在舞台上进行波形往返运动，第二个稍后会由虚渐实出现在舞台的右下角，第三个再从右向左移入舞台上方位置，最终三个小球在舞台左侧垂直对齐。2019.3.3补间动画1）创建一个新的Flash文档，并保存文件为“例2-小球.fla”。2）按下“Ctrl+F8”键，弹出“创建新元件”对话框，将影片剪辑命名为“ball”，单击“确定”按钮。3）在元件“ball”的舞台上中心点创建一个具有绿色渐变填充的小球，小球外观及属性如图19-15所示。2119.3.3补间动画4) 切换回“场景1”，打开“库”面板，将元件“ball”拖拽到舞台中左侧位置。此时，时间轴第1帧产生一个关键帧。5）执行主菜单【窗口】/【动画预设】命令，打开“动画预设”面板，展开“默认预设”文件夹，共有32个项目，选择其中的“波形”，在“预览”窗格中可以看到动画预览效果。“动画预设”面板如图19-16所示。6)单击“动画预设”面板底部的“应用”按钮。则舞台上影片剪辑实例上出现一个绿色的运动轨迹标识，时间轴上也对应自动产生一个70帧的补间状态，第1帧是一个黑色圆形关键帧，第35帧和第70帧处分别有一个黑色菱形的属性关键帧。第一个小球的补间动画创建完成。2219.3.3补间动画7) 创建一个新图层，在第10帧处插入一个空白关键帧，然后将“库”面板中的元件拖拽到舞台的右下角位置，再应用“动画预设”功能，动画预设为“2D放大”设置。8) 创建一个新图层，在第20帧处插入一个空白关键帧，然后将“库”面板中的元件拖拽到舞台的上方偏左的位置，再应用“动画预设”功能，动画预设为“从右边飞入”设置。9) 在第70帧处，补齐三个图层的普通帧，时间轴如图19-17所示。按“Ctrl+Enter”键，导出并观看动画效果。232419.3.3补间动画例19_3描述：创建一个文本动画，文本从舞台顶部移入到中央位置，稍作停滞，然后再向左侧移出舞台。1）创建一个新的Flash文档，文档大小为500×200像素，舞台颜色为黑色，并保存文件为“例3-文字.fla”。2）在工具箱中选择“文本”工具，输入一行文本信息，文本颜色为浅黄色，华文行楷，字号40点，并将文本移至舞台上方的外部，如图19-18所示。253）在舞台上选择要补间的“文本”对象。右键单击文本区（或当前帧），在弹出的快捷菜单中选择“创建补间动画”。即可看到时间轴窗口发生的变化，“图层1”的图标由常规图层类型变为补间图层类型，如图19-19所示。而且，时间轴一侧自动插入到第24帧，补间范围的长度等于一秒的持续时间（帧速率是24帧/秒）。2619.3.3补间动画4）在时间轴中拖动补间范围的右端，延长补间范围到第60帧，如图19-20所示。5）将动画添加到补间。将播放头放在补间范围内的第25帧上，然后将舞台上的“文本”对象垂直向下拖到舞台正中位置。此时，舞台上显示的运动路径显示从补间范围的第一帧中的位置到新位置的路径。时间轴显示添加了属性关键帧，属性关键帧在补间范围中显示为小菱形。舞台及时间轴内容如图19-21所示。2719.3.3补间动画6) 将播放头放在补间范围内的第35帧上，并单击右键，在弹出的快捷菜单中选择【插入关键帧】/【位置】命令，则添加一个新的属性关键帧。第25帧到第35帧中的文本位置保持不动，为了在舞台中清晰显示文本。7) 按照步骤6）在第60帧处添加新的属性关键帧，并将文本水平向左移出舞台，如图19-22所示。2819.3.3补间动画创立缓动补间动画

例19_4描述：在制作汽车经过舞台的动画时，如果让汽车从停止开始缓慢加速，然后在舞台的另一端缓慢停止，则动画会显得更逼真。291．传统补间动画的概念在Flash的“时间轴〞面板上，在一个时间点〔关键帧〕放置一个元件，然后在另一个时间点〔关键帧〕改变这个元件的大小、颜色、位置、透明度等，Flash根据二者之间的帧值创立的动画称为动作渐变动画。2．构成传统补间动画的元素构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等除了元件，其他元素包括文本都不能创立补间动画其他的位图、文本等都必须要转换成元件才行，只有把形状“组合〞或者转换成“元件〞后才可以做“动作补间动画〞。19.3.4传统补间动画3．传统补间动画在时间轴面板上的表现动作补间动画建立后，“时间帧〞面板的背景色变为淡蓝色，在起始帧和结束帧之间有一个长长的箭头。4．正确运用运动渐变需要满足的条件运动渐变只能用于元件实例。假设要对形状、组合、位图或文本对象应用运动渐变，必须先将这些对象转换成元件。运动渐变中的元件只能是一对一的渐变，对多一或一对多均会导致渐变失败。运动渐变中的对象只能在同一图层19.3.4传统补间动画4．正确运用运动渐变需要满足的条件运动渐变只能用于元件实例。假设要对形状、组合、位图或文本对象应用运动渐变，必须先将这些对象转换成元件。运动渐变中的元件只能是一对一的渐变，对多一或一对多均会导致渐变失败。运动渐变中的对象只能在同一图层19.3.4传统补间动画19.3.4传统补间动画例19_5描述：制作“弹跳娃娃”的实例操作介绍运动补间动画效果的制作方法33引导层动画是在制作Flash动画影片时经常应用的一种动画方式。使用引导层，可以使指定的元件沿引导层中的路径运动。一条引导路径可以对多个对象同时作用，一个影片中也可以存在多个引导图层，引导图层中的内容在最后输出的影片文件中不可见。将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径动画〞。这种动画可以使一个或多个元件完成曲线或不规那么运动19.3.4传统补间动画19.3.4传统补间动画例19_6描述：一个小球环绕不倒翁旋转的实例，介绍引导层动画的创作方法。35形状渐变动画的概念在Flash的“时间轴〞面板上，在一个时间点〔关键帧〕绘制一个形状，然后在另一个时间点〔关键帧〕更改该形状或绘制另一个形状，Flash根据二者之间的帧的值或形状来创立的动画被称为“形状渐变动画〞。19.3.4补间形状动画19.3.4补间形状动画例19_7描述：一个“昼夜转换”的实例来介绍补间形状动画的制作过程。371．遮罩动画的概念〔1〕什么是遮罩“遮罩〞，顾名思义就是遮挡住下面的对象。遮罩动画〞是通过“遮罩层〞实现有“选择地显示位于其下方的“被遮罩层〞中的内容，在一个遮罩动画中，“遮罩层〞只有一个，“被遮罩层〞可以有任意多个。〔2〕遮罩的用途一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见另一个作用是用来遮罩住某一元件的一局部，从而实现一些特殊的效果。19.3.6遮罩动画19.3.6遮罩动画例19_8描述：制作一个“滚动字幕”的实例介绍遮罩动画的创作方法。3919.4使用反向运动反向运动(IK)是一种使用骨骼的有关节结构对一个对象或彼此相关的一组对象