第11章动画的制作

1、第第11章章 动画的制作动画的制作 11.1 ImageReady的工作界面的工作界面 11.2 切片与图像映射切片与图像映射 11.3 动画的创建动画的创建 11.4 应用举例应用举例闪烁文字动画闪烁文字动画 本章小结本章小结 习题十一习题十一在使用Photoshop和ImageReady制作网页时，一定要记住各软件的功能和特性。Photoshop提供的工具用于创建Web上使用的静态图像，可以在Photoshop中对图像进行切片、增加链接和HTML文字，优化切片并将图像存储为Web页面；ImageReady提供了许多和Photoshop相同的图像编辑工具，主要用来进行高速的Web处理和创建动

2、态Web图像，如动画和翻转等。11.1 ImageReady的工作界面用户可使用下面两种方法启动ImageReady CS2。（1）选择“开始”“程序”“Adobe ImageReady CS2”命令，即可启动ImageReady CS2。（2）在Photoshop CS2工具箱底部单击“跳转到”按钮，即可打开如图11.1.1所示的 ImageReady CS2窗口，它是由标题栏、菜单栏、工具箱、图像窗口、调板、状态栏等组成的，这与Photoshop CS2类似。图11.1.1 ImageReady CS2窗口ImageReady CS2的操作方法与Photoshop CS2基本相同，只是添加

3、了一些用于制作网页与动画的常见功能，如动画面板、切片面板、图像映射面板、Web内容面板、优化面板等。下面将对动画、图层、切片、优化等面板进行介绍，其他面板的使用请参照Photoshop CS2中对相应面板的介绍。11.1.1 动画面板动画面板使用动画面板可以创建、查看和设置动画帧中元素的位置和外观。在动画面板中，还可以更改帧的缩略图使用较小的缩略图可以减小面板所需的空间，并在指定的面板宽度上显示更多的帧。选择“窗口”“动画”命令，或单击动画标签显示动画面板，如图11.1.2所示。图11.1.2 动画面板动画面板中的各项含义说明如下：单击此按钮，可选择第一帧动画，若当前为第一帧，则该按钮为灰色未

4、被激活状态。：单击此按钮，可选择前一帧动画。：单击此按钮，可从当前帧开始播放动画。开始播放动画后，“播放”按钮将变成“停止”按钮，单击此按钮，即可停止播放。：单击此按钮，可选择下一帧。：单击此按钮，可打开“过渡”对话框进行帧过渡的动画设置。：单击此按钮，可复制当前帧。：单击此按钮，可删除当前选择的帧。单击动画面板右上角的按钮，可弹出动画面板菜单，如图11.1.3所示。在其中选择“调板选项”命令，可在弹出的“动画调板选项”对话框中选择更改动画帧的缩略图，如图11.1.4所示。将动画面板和图层面板结合使用，就可以创建动画。一段动画就是一系列的图像或帧，通过一个时间段进行显示，每个帧都和前一帧不同，

5、进行快放时就产生了动画。 图11.1.3 动画面板菜单 图11.1.4 “动画调板选项”对话框 11.1.2 图层选项面板图层选项面板利用图层选项面板，可以设置选中图层或图层组的名称、图层填充不透明度和图层混合模式等。选择“窗口”“图层”命令，或单击图层标签显示图层面板，如图11.1.5所示。将动画面板和图层面板结合使用，就可以创建动画。一段动画就是一系列的图像或帧，通过一个时间段进行显示，每个帧都和前一帧不同，进行快放时就产生了动画。图11.1.5 图层面板11.1.3 切片面板切片面板切片是组成图像的矩形区域，在该区域上可创建链接、翻转和动画，从而在最终的Web页面上看到这些效果。使用切片

6、可提高网页的上传或下载速度。选择“窗口”“切片”命令，或单击“切片”标签，可打开如图11.1.6所示的切片面板。图11.1.6 切片面板11.1.4 Web内容面板内容面板Web内容面板相当于以前版本中的翻转面板，可用来创建翻转并设置翻转状态。默认情况下，每个图像都具有一个状态，即“正常”状态。“正常”状态对应于图像第一次载入Web浏览器并且未发生任何翻转效果时的外观。可以向图像中添加各种状态，这些状态在查看者对Web页的某个区域执行鼠标动作时会发生。在翻转面板中，还可以显示切片、图像映射和动画帧。显示切片和图像映射可帮助用户跟踪图像中包含翻转效果的各个图像。显示动画帧可以很方便地查看图像的哪

7、些状态含有动画。选择“窗口”“Web内容”命令，或单击“Web内容”标签显示Web内容面板，如图11.1.7所示。图11.1.7 Web内容面板网页图像设计与一般的平面设计最大的区别是要注意图像大小和网络速度对网页图像下载时间的影响，如果把图像分割成若干个部分，分别进行压缩和优化，不仅能缩小图像的体积，减少下载时间，而且还可以对它们分别设置不同的参数和制作不同的效果。11.2 切片与图像映射11.2.1 切片种类切片种类根据创建方式的不同，切片基本上可分为4类：用户切片、自动切片、子切片和图层切片。用户切片：使用切片工具对图像分割后创建的切片，称为用户切片，其边框为实线。自动切片：当创建用户切

8、片时，系统自动将用户切片以外的图像区域分割为若干个矩形切片，这些切片就称为自动切片。当用户添加或编辑用户切片时重新生成自动切片，自动切片会随着用户切片的改变而改变，其边框为虚线。用户可以通过选择“切片”“提升到用户切片”命令，将自动切片转换为用户切片。子切片：是自动切片的一种，当用户创建的切片发生重叠时，重叠的部分就生成新的切片，称为子切片。尽管子切片有编号，并显示切片标记，但不能在脱离切片存在的情况下独立选择或编辑，每次排列切片的堆叠顺序时都重新生成子切片。图层切片：通过图层来创建的切片，在后面将会详细讲到。如图11.2.1所示，编号为01，02，04，05，08和10的切片是自动切片，编号

9、为03和06的切片是用户切片，编号为07的切片是子切片，编号为09的切片是图层切片。图11.2.1 切片的种类11.2.2 创建切片创建切片大多数网页中的图像都是经过分割后，再进行上传的，ImageReady CS2提供了多种分割图像的方法（即创建切片），下面将具体进行介绍。1用切片工具创建切片使用切片工具创建切片的具体方法为：选择切片工具后，在图像上拖出一个矩形，这个矩形就是创建的用户切片。同时，在图像上的其他区域将自动生成多个自动切片。在“切片工具”属性栏中，可以选择不同的切割方式，如图11.2.2所示。在“样式”选项的下拉列表中有以下3个选项。图11.2.2 “切片工具”属性栏（1）选择

10、“正常”样式，表示可直接在图像上拖出任意比例和大小的切割区域。（2）选择“固定长宽比”样式，表示按照固定宽度和高度比例来创建切片，可在“宽度”和“高度”数值框中设置宽度和高度的比例。（3）选择“固定大小”样式，表示创建固定尺寸的切片，可以在“宽度”和“高度”数值框中设置切片宽度和高度的尺寸。2用图层创建切片使用图层创建切片的具体方法为：选中用于创建切片的图层，选择“图层”“新建基于图层的切片”命令，系统会自动根据图层来创建切片，而切片的区域将包含图层中的所有像素。在图层切片区域以外，系统将自动创建多个自动切片，如图11.2.3所示。图11.2.3 创建图层切片图层切片是根据图层的尺寸和位置进行

11、创建的，所以当图层的位置和尺寸变化时，图层切片也会随之改变，如图11.2.4所示。图11.2.4 图层切片随图层位置、尺寸的变化而改变3用选区创建切片使用选区创建切片的具体方法为：首先用选取工具在图像上创建一个选区，然后选择“选择”“从选区中创建切片”命令，系统会根据选区范围来创建切片，即选区切片。同时，其他区域成为自动切片，如图11.2.5所示。 图11.2.5 从选区中创建切片4用参考线创建切片要精确定位切片，可以使用参考线创建切片，方法为选择“视图”“标尺”命令，使“标尺”命令前显示黑色对勾，这样就在图像上显示出标尺。然后用鼠标从标尺向图像内拖动，在图像中建立参考线，以定位切片的区域，再

12、选择“切片”“从参考线创建切片”命令，即可创建出切片，这些切片全部为用户切片，如图11.2.6所示。图11.2.6 用参考线创建切片11.2.3 创建图像映射创建图像映射图像映射可以看成是图形和超链接的结合，其功能是使图像的某一区域和某一URL地址相链接，当单击该图像区域时，系统会自动进入超链接定义的地址。只要能以网页形式存在的对象都可作为链接对象。与切片所设置的链接点不同的是，切片的区域只能是矩形，而图像映射还可以是多边形和圆形，在图像映射区域还可以创建翻转效果。1使用图像映射工具创建图像映射单击工具箱中的“矩形图像映射工具”按钮，然后在图像上要建立图像映射的位置单击并拖动鼠标，即可创建矩形

13、图像映射，如图11.2.7所示。单击工具箱中的“圆形图像映射工具”按钮，然后在图像上要建立图像映射的位置单击并拖动鼠标，即可创建圆形图像映射，如图11.2.8所示。图11.2.7 创建矩形图像映射 图11.2.8 创建圆形图像映射 单击工具箱中的“多边形图像映射工具”按钮，在图像上要建立图像映射的位置单击并拖动鼠标，即可创建多边形图像映射，如图11.2.9所示。图11.2.9 创建多边形图像映射选择“窗口”“图像映射”命令，弹出“图像映射”面板，如图11.2.10所示，可在其中设置图像映射区域的名称、URL、目标、Alt（提示文字信息）及映射区域的尺寸等参数和选项。这几个设置选项与切片面板的设

14、置选项基本相同，这里就不再重复。在使用矩形或圆形图像映射工具时，可以在其工具属性栏中选中“固定大小”复选框，在其数值框中输入宽度和高度的数值，建立固定大小的映射区域。图11.2.10 图像映射面板2使用图层创建图像映射区域在图层面板中，选择要创建映射的图层，然后选择“图层”“新建基于图层的图像映射区域”命令，即可从图层创建图像映射区域。图像映射为图层的名称，映射区域为图层中有像素的地方，如果像素不相连，则分别建立映射，如对图层内容进行调整，则映射区域也随之调整，如图11.2.11所示。图11.2.11 用图层创建图像映射区域本节介绍如何使用图层面板和动画调板从原来的多层图像创建动画的帧，以及如

15、何重新排列、删除、添加和选择帧，过渡帧的使用使动画的生成更为方便快捷。在介绍循环帧和延迟帧时，还将介绍如何指定循环播放帧和延迟每一帧的时间。11.3 动画的创建11.3.1 添加帧添加帧在创建动画时，添加帧是第一步操作。在ImageReady中打开一个图像，动画调板会将该图像显示为新动画中的第一帧。每个新添加的帧都是上一个帧的复制，用户可使用图层调板进一步对帧进行更改。添加帧的具体操作方法有以下两种。（1）单击动画面板上的“复制帧”按钮添加帧。（2）单击动画面板右上角的三角形按钮，在弹出的动画面板菜单中选择“新建帧”命令添加帧，如图11.3.1所示。图11.3.1 添加帧在图层调板中复制该帧的

16、图像，然后在原稿视图中移动其位置，使该图像与上帧相比有所变化，效果如图11.3.2所示，动画面板如图11.3.3所示。图11.3.2 在原稿视图中移动图像位置 图11.3.3 动画面板11.3.2 选择帧选择帧对帧进行编辑修改之前，首先需要选择该帧为当前帧，将当前帧的内容显示在图像窗口中。当选择多个动画帧时，图像窗口中只显示当前帧的内容。选择帧的具体操作方法有以下几种。（1）在动画调板中，直接用鼠标单击需要选择为当前帧的帧缩览图。（2）在动画调板中，单击“前一帧”按钮，可选择动画面板序列中的前一帧作为当前帧。（3）在动画调板中，单击“下一帧”按钮，可选择动画面板序列中的后一帧作为当前帧。（4）

17、在动画调板中，单击“第一帧”按钮，可将序列中的第一帧选择为当前帧。提示：如果要选择连续的多个帧，可在按住“Shift”键的同时用鼠标单击其中的第一帧，然后再单击最后一帧，则可把这两个帧之间的所有帧全部选择。如果要选择不连续的多个帧，可在按住“Ctrl”键的同时依次单击需要选择的多个帧。如图11.3.4所示为选择多个不连续的帧。图11.3.4 选择多个不连续的帧11.3.3 过渡帧过渡帧过渡帧的设置使用户在创建动画时，大大减少了创建渐现、渐隐等动画效果所需的时间。过渡帧还可以自动添加两帧之间的一系列帧，并均匀地改变新帧之间的图像，以创建动画。创建过渡帧之后，可以分别对它们进行编辑。下面通过制作一

18、个图像逐渐变淡的动画效果，以举例说明过渡帧的使用。（1）选择“文件”“打开”命令，打开图像，显示图像窗口。（2）选择两个连续的图像，先在图层调板中选择“图层1”，如图11.3.5所示。图11.3.5 第一帧和当前图层 （3）在动画面板中，“图层1”会显示为第一帧，单击“复制当前帧”按钮，可添加新帧。如图11.3.6所示。图11.3.6 显示第一帧（4）然后在图层面板中，单击“指示图层可视性”按钮，关闭“图层1”，单击按钮打开“图层2”，如图11.3.7所示。（5）在动画面板中，单击选择第二帧，如图11.3.8所示。图11.3.7 图层面板 图11.3.8 选择第二帧 （6）在动画面板中，单击“

19、过渡帧”按钮，即可弹出“过渡”对话框，设置参数如图11.3.9所示。图11.3.9 “过渡”对话框（7）在“过渡”对话框的“过渡”下拉列表中可以选择当前帧与其他帧之间的动画；在“要添加的帧”文本框中可设置要添加帧的数量；在“图层”选项区中可设置用于所有图层还是所选中的图层；在“参数”选项区中可设置过渡帧的位置、不透明度和最终效果。（8）在动画面板中，第2帧第4帧是过渡帧，如图11.3.10所示。图11.3.10 显示过渡帧11.3.4 重新排列和删除帧重新排列和删除帧在创建动画的过程中，用户可以更改动画中帧的位置，并反转所选连续帧的顺序，也可以删除所选的帧或整个动画。具体的操作方法如下：（1）

20、重新排列帧的位置：单击选择要移动的帧，按住“Ctrl”键的同时移动当前帧到新的位置。（2）反转连续的帧：选择要反向的连续的帧，在调板菜单中选择“反向帧”命令。（3）删除当前帧：选择要删除的帧，单击动画面板底部的“删除当前帧”按钮，即可删除帧，也可在调板菜单中选择“删除帧”命令删除，还可以用鼠标将要删除的帧直接拖到“删除当前帧”按钮上进行删除。（4）删除动画：如果要删除整个动画，在动画面板菜单中选择“删除动画”命令即可。11.3.5 指定循环指定循环指定循环是设定动画播放时重复的次数，设置的时间长短不同，动画的效果也不相同。单击动画面板左下角的按钮，在弹出的下拉列表中可选择需要循环的方式，如图1

21、1.3.11所示，分别有“一次”、“永远”和“其它” 3个选项可供选择。“一次”：选择该选项，只播放一次就停止。 “永远”：选择该选项，表示动画可以一直播放下去。“其它”：选择该选项，可弹出“设置循环计数”对话框，在其中可进行播放次数的设置，如图11.3.12所示。图11.3.11 指定循环下拉菜单 图11.3.12 “设置循环计数”对话框 11.3.6 延迟帧延迟帧延迟帧是指设置每一帧需要延迟的时间，它决定动画播放的流畅性，延迟时间以秒为单位显示。在ImageReady中预览动画时，延迟时间可能不准确。若要预览准确的延迟时间，可在浏览器中预览动画。延迟帧的具体操作方法如下：（1）在动画面板中

22、，选择要延迟的帧，然后单击其底部的按钮，可弹出选择延迟帧下拉列表，如图11.3.13所示。（2）如果要同时为多个帧指定相同的延迟时间，则可将需要延迟的多个帧选中，然后指定一个时间即可。图11.3.13 选择延迟帧下拉列表11.3.7 预览动画预览动画单击动画面板中的“播放”按钮，可以直接在文档中预览动画。也可以单击工具箱中的“在iexplore”按钮，在默认的浏览器中进行预览，效果如图11.3.14所示。图11.3.14 在浏览器中预览动画11.3.8 存储动画存储动画我们在Web浏览器中所看到的一些动画就是GIF格式的动画，当然现在也有一些是Flash动画。在存储包含动画的优化文件时，可选取

23、生成一个HTML文件，该文件包含用于在Web页中显示动画GIF的代码，但是得到的Web页只包含动画GIF或包含附加功能，具体取决于源文档。选择“文件”“存储优化结果”命令，可打开“存储优化结果”对话框，如图11.3.15所示。图11.3.15 “存储优化结果”对话框在该对话框中，可设置需要保存文件的路径位置、文件名、文件类型等，完成后，单击“保存”按钮即可。若选择的格式为*.GIF，则可将文件存储为GIF动画。在Photoshop CS2中，还可以将动画存储为*.SWF格式，这样就可以使用Flash播放软件进行播放了。本例将制作闪烁文字动画效果，如图11.4.1所示。11.4 应用举例闪烁文字

24、动画图11.4.1 效果图掌握ImageReady CS2中滤镜命令的使用方法和技巧，并学会为图像添加各种滤镜效果及动画 效果。（1）在ImageReady CS2中打开一幅小猫图像，如图11.4.2所示。图11.4.2 打开图像（2）单击工具箱中的“文字工具”按钮，其属性栏设置如图11.4.3所示。在其中将字体的颜色设为红色。图11.4.3 “文字工具”属性栏（3）设置完成后，在图像中单击鼠标并输入红色文字“都说我可爱”，效果如图11.4.4所示。此时在图层面板中自动生成文字图层，再将该文字图层复制一层，此时图层面板如图11.4.5所示。 图11.4.4 输入文字效果 图11.4.5 图层面

25、板（4）在图层面板中将文字图层副本作为当前图层，单击图层面板底部的“添加图层样式”按钮，在弹出的下拉菜单中选择“外发光”命令，弹出“图层样式”对话框，设置参数如图11.4.6所示。（5）设置完成后，单击“确定”按钮，效果如图11.4.7所示。 图11.4.6 “图层样式”对话框 图11.4.7 添加外发光效果（6）单击文字工具属性栏中的“创建文字变形”按钮，弹出“文字变形”对话框，设置参数如图11.4.8所示。（7）设置完成后，单击“确定”按钮，效果如图11.4.9所示。 图11.4.8 “文字变形”对话框 图11.4.9 变形文字效果（8）在图层面板中，隐藏两个文字副本图层，如图11.4.10所示。选择“窗口”“动画”命令，打开动画面板，如图11.4.11所示。图11.4.10 图层面板 图11.4.11 动画面板 （9）在动画面板中单击“复制当前帧”按钮，创建第二帧动画，然后在图层面板中隐藏文字图层，显示文字图层副本，此时动画面板如图11.4.12所示。（10）在动