网页设计与制作第九章.ppt

1、网页设计与制作学时：学时：60学时学时第九章 网页动画制作工具Flash CS4 了解：了解熟悉Flash CS4软件的特点;了解Flash CS4中各种动画的区别。熟练掌握：掌握Flash CS4的基本操作；掌握Flash CS4基本动画的制作。掌握：掌握Flash CS4动画的优化和输出，掌握Flash CS4中脚本的编写方式。第一节第一节 Flash CS4的工作界面的工作界面工具箱舞台工具面板菜单栏时间轴面板属性面板场景一、舞台一、舞台一、舞台一、舞台Flash中所有的动画对象，都需要在舞台上表现出来。用户可以在其中绘制和放置动画内容。只有在该区域中的内容才会被导出。任何时候，用户在舞

2、台上看到的内容都代表当前帧的内容。二、工具箱二、工具箱二、工具箱二、工具箱使用工具箱中的工具可以进行绘图、填充、选择和修改插图等操作，并可以更改舞台的视图。工具区域视图区域颜色区域选项区域三、时间轴三、时间轴三、时间轴三、时间轴时间轴是处理层和帧的地方。层帧四、场景四、场景四、场景四、场景场景主要用于组织动画内容，即用户可以根据动画的内容进行场景的编排，Flash可以根据场景的前后顺序播放动画，这类似于电影拍摄中所使用到的场景概念。五、属性面板五、属性面板五、属性面板五、属性面板属性面板是Flash软件中重要且使用率很高的面板之一，它在默认状态下显示当前文档属性，如大小、背景颜色、帧频等。在编

3、辑过程中，如果选择了某个对象，属性面板中会显示该对象属性。六、常用面板六、常用面板六、常用面板六、常用面板（一）“对齐”面板（二）“颜色”面板和“样本”面板（三）“动作”面板第二节第二节 FlashCS4的基础操作的基础操作一、新建文档和设置文档属性一、新建文档和设置文档属性一、新建文档和设置文档属性（一）新建文档新建文档的方法有以下两种：l执行“文档”“新建”命令，打开“新建文档”对话框，从中选择“Flash文件”选项，单击“确定”按钮即可。l在启动FlashCS4后，出现的欢迎屏幕界面中选择“创建新项目”“Flash文件”。一、新建文档和设置文档属性一、新建文档和设置文档属性（二）保存文档

4、保存文档执行“文档”“保存”命令，打开弹出的“保存”对话框中，设置保存的名称，单击“保存”按钮即可。此时保存的文件扩展名为“fla”，即Flash的源文件格式。（或按Ctrl+S组合键）一、新建文档和设置文档属性一、新建文档和设置文档属性（三）设置文档属性设置文档属性要设置文档属性，可以在新建文档并进入编辑窗口后，执行“修改”“文档”命令（或按Ctrl+J组合键），或在属性面板中单击“编辑”按钮，打开“文档属性”对话框,在“文档属性”对话框中，可以设置动画的尺寸、背景色及帧速。二、外部对象的导入二、外部对象的导入（一）导入图像在FlashCS4中可以导入多种格式的图像。这里的图像主要是指外部的

5、位图图像。执行“文档”“导入”命令，打开“导入”对话框，选择需要导入的位图后，单击“导入”按钮，即可导入。FlashCS4可以导入的位图图像格式有.jpg、.gif、.bmp、.png等。从图9-13中的红色标二、外部对象的导入（二）导入声音FlashCS4中可以导入的声音格式主要有.wav和.mp3。其中.mp3是动画中最常使用的声音格式。执行“文档”“导入”命令，打开“导入”对话框，选择需要导入的声音文件后，单击“导入”按钮，即可导入。二、外部对象的导入（三）导入视频文件如果系统安装了适用于AppleMacintosh的QuickTime 7、Windows的QuickTime 6.5或安

6、装了DirectX 9或更高版本（仅限Windows），则可以导入多种格式的视频剪辑，包括mov、avi、wmv和mpg/mpeg等格式。执行“文档”“导入”命令，打开“导入视频”对话框，选择需要导入的视频，单击“导入”按钮，即可导入。三、动画的预览测试与发布三、动画的预览测试与发布（一）预览动画执行“控制”“测试影片”命令或按Ctrl+Enter组合键，可以打开Flash Player播放器对动画进行即时浏览与测试。（二）动画发布执行“文档”“发布设置”命令，在打开的“发布设置”对话框中，对动画进行发布格式的设置。设置完毕后，可以直接在“发布设置”对话框中单击“发布”按钮来发布动画。第三节第

7、三节 图形的创建与编辑图形的创建与编辑一、绘图工具一、绘图工具一、绘图工具（一）线条工具线条工具 用于绘制直线。选择线条工具后，将鼠标指针移到舞台上，拖动鼠标即可。（二）铅笔工具铅笔工具 用于绘制随意形状的线条。（三）钢笔工具使用钢笔工具 可绘制任意形状的图形。（四）矩形工具和椭圆工具选择矩形工具或椭圆工具，然后在舞台中拖动鼠标进行绘制即可。（五）多角星形工具使用多角星形工具，可以绘制多边形和星形。二、笔触和填充设置二、笔触和填充设置二、笔触和填充设置1、使用渐变色填充使用渐变色填充，就是使用两种以上的颜色，实现颜色过渡，对对象进行填色。2、使用位图填充使用位图为图形进行填充的操作为：执行“文

8、件”“导入”命令，选择外部一幅位图，然后执行“窗口”“颜色”命令，在“颜色”面板的“类型”下拉列表框中选择“位图”选项，即可为对象进行位图填充（一）渐变色和位图填充在Flash中可以使用纯色、渐变色和位图对图形进行填充。使用纯色填充，就是使用单独的一种颜色为图形进行填充，如红色、黑色等。二、笔触和填充设置二、笔触和填充设置（二）填充效果的修改按住任意变形工具右下角的下拉按钮，可选择“填充变形”工具 来调整填充的大小、方向和中心，使渐变填充或位图填充变形。选择填充变形工具后，填充图形上便会显示一个带有控制手柄的边框。当将鼠标指针移到某个手柄上，会显示该手柄的功能。各控制手柄的功能如图。中心点宽度

9、大小旋转二、笔触和填充设置二、笔触和填充设置（三）修改笔触颜色为矩形、圆形等矢量图形的进行描边，可以选择墨水瓶工具，然后在图形边缘单击即可。使用墨水瓶工具可以更改线条颜色或为对象添加描边。对直线和形状只能应用纯色，而不能应用渐变或位图。二、笔触和填充设置二、笔触和填充设置（四）填充图形使用颜料桶工具 可以用颜色填充空白区域或者更改已填充区域的颜色。在工具箱中选择颜料桶工具后，可以在工具箱下方的选项区中选择空隙大小，单击“空隙大小”选项，然后选择一个空隙大小选项，该选项的主要作用是当填充颜色时，Flash将忽略所绘制对象的空隙，如图。二、笔触和填充设置二、笔触和填充设置（五）复制填充和笔触使用滴

10、管工具 可以从一个对象复制笔触和填充属性，然后将它们应用到其他对象。滴管工具还允许用户将位图图像取样作为填充。1、复制和应用笔触选择滴管工具，然后单击要复制的笔触，此时鼠标指针自动变成墨水瓶工具的指针形状，然后单击其他笔触或已填充区域应用复制的笔触或填充。2、锁定渐变色或位图填充选择刷子工具或者颜料桶工具，然后选择作为填充的渐变或位图，对图形进行填充。再选择滴管工具，在填充区域单击，此时鼠标变成一个带锁的油漆桶形状。然后移到其他区域进行单击，将其他对象填充成相同的效果。三、图形的编辑三、图形的编辑三、图形的编辑（一）Flash中矢量对象的组成特点Flash中的矢量对象的组成与一般的矢量绘图或动

11、画制作软件不同。在Flash中，矢量对象的笔触和填充是分离的，如图。三、图形的编辑三、图形的编辑（二）选取舞台上的全部对象选取舞台上的全部图形可以使用以下两种操作步骤：执行“编辑”“全选”命令或按Ctrl+A组合键。使用工具箱中的指针工具，对所有对象进行框选。在框选时要注意，指针工具所拉出的选框必须完全框住所有对象。三、图形的编辑三、图形的编辑（三）选取对象的局部在Flash中对图形的局部进行选取，有以下几种方法：选择指针工具，然后拖动鼠标，绘制出一个选框，选框中包含要选取图形的一部分。释放鼠标左键，即可选中框住的部分。使用套索工具 和多边形套索工具，可以选择图形的不规则区域。使用魔棒工具，可

12、以选取图形中相同颜色的不连续区域。三、图形的编辑三、图形的编辑（四）群组及解散群组对象组成群组的方法是，将舞台需要组合在一起的对象全都选中，然后执行“修改”“组合”命令或按Ctrl+G组合键即可。对于已群组后的对象，可以使用部分选取工具 对群组中的某个对象进行选取，然后将其从群组中分离出来，单独进行编辑。如果要将群组对象解散，只需先使用指针工具将目标群组对象选中，然后执行“修改”“解散组合”命令或CtrlShiftG组合键即可。三、图形的编辑三、图形的编辑（五）图形的缩放在Flash CS4中可以使用任意变形工具 对选择的对象进行缩放、旋转、压缩、伸展或倾斜线条和改变形状等操作。选择“任意变形

13、”工具，单击对象，对象周围出现一个黑色的控制框，如图。三、图形的编辑三、图形的编辑（六）调整图形的外观选择指针工具，将鼠标指针移动到图形的边缘时，鼠标指针变成 形状，此时拖动鼠标就可以将直线变形曲线；如果将鼠标指针移动到图形的边角时，会变成 形状，拖动鼠标可以拖放图形的边角，改变图形的形状；当鼠标指针变成 形状时，按下Ctrl键，可以添加一个角。使用任意变形工具选项区内的扭曲工具 对选择的对象进行任意的扭曲操作，；使用封套工具 对选择的对象进行复杂的扭曲操作。第四节第四节 创建文本创建文本一、Flash CS4中的文本类型一、Flash CS4中的文本类型Flash CS4为用户提供了静态文本

14、、动态文本和输入文本3种文本类型。l静态文本用于一般的文本，如文档中的标题、标签或其他普通文本内容。l动态文本用于显示根据用户指定的条件而变化的文本。例如，可以使用动态文本来添加存储在其他文本中的值（如两个数字的和）。l输入文本允许用户与Flash应用程序进行交互，例如，在表单中输入其姓名或其他信息。二、创建文本二、创建文本选择文本工具 后，在舞台中单击，在出现的文本框直接输入文本即可。输入的文本没有宽度限制，也就是说，文本有多长文本框就会延伸多长，不能自动换行，因此不适合输入大段文本。要输入大段文本，在选择文本工具后，鼠标指针变为 形状时，在舞台上拖出一个文本框，然后再将鼠标指针移入该框内单

15、击，输入大段文本，此时文本有了宽度限制，就可以实现自动换行。三、设置文字属性三、设置文字属性创建了文本后，可以通过属性面板对舞台上选中的文本的属性，如字体、颜色、样式等进行设置。第五节第五节 Flash Flash动画基础动画基础一、图层与帧一、图层与帧一、图层与帧（一）图层Flash中的图层主要有3种类型，即普通图层、引导图层和遮罩图层。l普通图层主要用于放置动画对象，如图形、元件、文字、视频等，Flash中使用图层来管理动画中的对象，因此，在动画制作过程中，要将各个对象分别放到各个图层，让这些对象不会相互影响，便于动画的创作效率与日后的修改。l在时间轴的图层区中，它引导下方图层中的对象按照

16、本图层绘制的路径运动，但路径并不会出现在最终效果中。l在遮罩图层中创建的对象具有透明效果，被遮罩图层中相同位置的内容将显示出来，其他部分则被遮盖。一、图层与帧一、图层与帧（二）帧帧是动画中的基本元素，Flash动画是由帧构成的。帧有普通帧、关键帧和空白关键帧3种类型。关键帧普通帧空白关键帧二、元件与实例二、元件与实例元件有三种类型分别为“影片剪辑”、“图形”和按钮，作用如下：l“影片剪辑”：可以在“影片剪辑”元件中制作一段动画。将该元件放在主场景中应用后，主场景动画在播放的同时，“影片剪辑”元件内的动画也将播放，除此之外，“影片剪辑”元件也是制作ActionScript动画主要的对象。l“按钮

17、”，该类型是将对象转成按钮，用于响应鼠标。l“图形”，该类型的元件，一般用于制作反复使用的静态对象。将元件从库中取出，拖放到舞台上，就生成了该元件的一个实例，作为元件的引用。第六节第六节 动画制作动画制作一、逐帧动画一、逐帧动画一、逐帧动画逐帧动画是指将动画的所有内容一帧一帧地逐步制作出来，这也是最原始的动画表现形式和制作方法。通过对每一帧上对象的颜色、形状、大小、数量等进行编辑，来完成动画。缺点是生成的文件体积大。逐帧动画实例挥动翅膀的蜻蜓二、补间动画二、补间动画（一）形状补间动画形状补间动画是指形状逐渐发生变化的动画。主要是通过改变首尾两帧上对象的外部形状，也可改变对象的位置、尺寸、颜色等

18、来产生动画。形状补间动画的制作要点是，首尾帧上的对象必须是分离的矢量图形，如果是文字或位图，必须先执行“修改”“分离”命令或按Ctrl+B组合键进行分离后，才能制作形状补间动画。形状补间动画实例旋转立方体动画二、补间动画（二）动作补间动画动作补间动画也称为运动动画，可以制作出位置移动、缩放和旋转等动画效果。它适用于文字、位图和实例，对于被打散的对象不能直接设置动画补间，需要将其转换为元件或组合后才能产生动画效果。通过确认首尾两帧上的对象状态，中间的运动过程不需要手动设置，Flash自动完成。动作补间动画实例跑马灯动画三、路径引导动画三、路径引导动画对象的运动过程不仅可以按直线方向运动，还按照指

19、定的路径运动，可以使对象沿不规则路径运动的动画，就是路径引导动画。路径引导动画实例气泡效果四、制作遮罩动画四、制作遮罩动画遮罩动画的制作就是建立遮罩图层，在该图层上绘制图形，以确定显示的形状，显示的内容则由它下面的图层提供，即被遮罩层，只有被遮罩图层的对象上被遮罩层上图形遮蔽的部分才能显示出来。遮罩动画实例流边汽车第七节第七节 声音的应用声音的应用一、为动画添加声音一、为动画添加声音一、为动画添加声音为动画添加声音的操作步骤如下：（1）用鼠标拖动声音文件到场景中。需要注意的是，添加声音后，场景中并无任何变化，此时在时间轴中只能看到一点声音波形图，当在时间轴中插入帧后，时间轴中才可以看到声音的波

20、形曲线。图9-73 为动画添加声音（2）继续在时间轴中插入帧，直到声音结束为止。按Ctrl+Enter组合键测试声音的效果。二、编辑声音二、编辑声音二、编辑声音编辑声音主要是指对声音的效果进行设置或编辑，如声音的淡入淡出、声音从左声道到右声道的移动等声音特效。三、为按钮添加声音三、为按钮添加声音三、为按钮添加声音（1）执行“文件”“导入”“导入库”命令，将需要的声音导入库中。（2）选择按钮中需要添加声音的帧，如“指针经过”帧。（3）在打开的“库”面板中选择声音文件，将其拖动到场景中，这时“指针经过”帧中将出现声音波形图，按Ctrl+Enter组合键测试，当鼠标指针经过按钮时就会发出声音。二、动

21、画的发布二、动画的发布二、动画的发布执行“文件”“发布设置”命令，打开“发布设置”对话框。在该对话框中可以对要导出的swf文件进行各种属性设置。l选中“生成大小报告”复选框将在导出动画的同时生成文件大小报告，文件大小报告的保存形式为：文件名+Report.txt，可用记事本打开。l选中“防止导入”复选框后，“密码”文本框变成可用状态，此时可以输入密码以便为动画文件加密。l选中“省略trace动作”复选框将省略跟踪动作，选中“允许调试”复选框可以允许对动画进行调试，选中“压缩影片”复选框将对影片进行压缩。l此外，在该对话框中还可以对动画中的JPG图片和声音的品质进行设置，设置完后单击“确定”按钮即可。l设置完成后执行“文件”“导出”“导出影片”命令，弹出“导出影片”对话框。系统默认的动画格式是swf，输入文件名，单击“保存”按钮即可。THE END