第5章 数字媒体产品设计与制作
【学习导入】
数字媒体产品种类较多，每类数字产品都具有一定的特点，数字媒体产品的开发一般都需要综合利用多种工具软件
和多种技术，涉及图形图像设计、创作脚本编写、程序编码设计，甚至是数据库等多方面知识。
【内容结构】
【学习目标】
(1) 知识目标： 了解数字媒体产品的主要分类，熟悉各种数字产品的开发工具，掌握各类数字媒体产品的开发过程。
(2) 能力目标： 具备初步的产品设计能力，通过本章的引导能进一步深入了解相关产品的开发知识。
(3) 素质目标： 了解程序设计相关知识，引导学生具备一定的程序设计能力。
5.1数字图像设计与制作
图像数字化处理是目前较为流行的处理方法，以其简洁高效的制作方式、缤纷多彩的视觉效果成为图像设计与制作的主旋律。
5.1.1基础知识介绍
1. 数字图像相关概念
进行数字图像的设计与制作之前，首先必须要理解、掌握与数字图像设计相关的一些基本概念,如色相、饱和度、三基色、三原色、分辨率等，为以后的学习奠定良好的基础。
1) 色相
色相是指色彩的相貌和种类，是各种色彩之间的主要区别。色彩来源于光线，光线的波长决定了色相，波长不同，色相不同。例如，波长在780nm左右的光线是红色光，波长在590nm左右的光线是黄色光。
2) 饱和度
饱和度是指色彩的纯净程度，也称为纯度、彩度或浓度等。色谱中的红、橙、黄、绿、青、蓝、紫具有最高的饱和度，也是该色彩的固有色。当色彩的饱和度降低为0时，就形成无彩色——黑、白、灰，无彩色没有饱和度和色相的性质，它们之间只有亮度的区别。具有饱和度的颜色一般称为有彩色，而无饱和度的颜色称为无彩色。
3) 亮度
亮度是指色彩的明暗程度，又称为光度、明度、深浅程度等。无论是有彩色还是无彩色，都有亮度的性质。亮度在色彩运用中有着重要的作用，合理使用亮度的对比，可以充分体现画面的立体感和空间感。例如，黑色的阴影可使物体产生空间感。
4) 三基色
当日光透过三棱镜时，可以呈现出不同颜色的彩色光。三棱镜透射出来的彩色光，是一组按红、橙、黄、绿、青、蓝、紫顺序排列的不能再分解的谱色光，它们的波长依次减小，范围在780~380nm之间。经实验验证，将红、绿、蓝3种不同颜色的谱色光按不同的比例混合就可以仿造出大自然中绝大多数的色彩，因此这3种谱色光就称为三基色，其色相环如图51所示。其中，等量的红色光和绿色光混合，可以产生黄色光； 等量的绿色光和蓝色光混合可以产生青色光； 等量的蓝色光和红色光混合可以产生洋红色光； 等量的红、绿、蓝3种色光混合，可以产生白色光。
图51三基色色相环
5) 三原色
不发光物体之所以能够呈现一定的颜色，是因为当白色光照射到物体表面上时，一些色光将不被反射回来，而是被物体“吸收”了，因此，反射到人眼中的白色光由于缺少了被“吸收”色光的颜色，而显示出其互补色光的颜色，从而使得不发光物体也能呈现出一定的色彩。例如，黄色物体能够吸收白色光中的蓝色光，剩下红色光和绿色光被反射回来，而呈现出黄色。又例如，等量的黄色颜料和青色颜料混合在一起，因为黄色颜料吸收了白色光中的蓝色光，青色颜料吸收了白色光中的红色光，那么只剩下绿色光被反射回来，所以呈现出绿色。同理，等量的黄色颜料和洋红颜料混合可以形成红色； 等量的青色颜料和洋红颜料混合可以形成蓝色。由于黄、青、洋红3种颜色的颜料相互混合可以产生红、绿、蓝3种颜色，因此称这3种颜色为三原色。
等量的黄、青、洋红颜料混合，由于红、绿、蓝3种色光都被吸收，因此呈现出黑色，若想得到白色只能“减去”所有的颜料，因此三原色的混色属于相减混色法。三原色相减混色原理一般指的是颜料的混合，而非色光的混合，通常应用在打印、印刷等领域中，因此这3种颜色也被称为印刷三原色。
6) 分辨率
分辨率是衡量输入输出设备图像处理效果好坏的重要指标，通常以每英寸的像素数（dpi）为单位。分辨率是一个与设备相关的概念，当图像应用在某一设备上时，图像的质量往往取决于该设备的分辨率，分辨率越高，图像质量越好。
7) 位图与矢量图
位图图像使用彩色网格即像素(pixel)来表现图像，每个像素都具有特定的位置和颜色值，因此在技术上又称为栅格图像。图52是一幅被放大16倍的位图图像。
图52放大16倍的位图图像
位图善于重现颜色的细微层次，如照片的颜色层次。由于具有一定分辨率的位图的像素总量是固定的，因此如果在屏幕上对它们进行缩放或以低于创建时的分辨率打印，将丢失其中的细节，并会出现锯齿状。
矢量图形由称为矢量的数学对象定义的线条和色块组成。矢量根据图像的几何特性，使用数学公式和算法描绘图像，从而完成图像的数字化任务。例如，如图53所示，矢量图形中的形状由数学定义的椭圆组成，椭圆以某一半径画出，放在特定位置并填充特定颜色。移动形状、调整其大小或更改其颜色均不会降低图形的品质。
图53放大16倍的矢量图形
矢量图形与分辨率无关。也就是说，可以将它们缩放到任意尺寸，也可以按任意分辨率打印，而不会遗漏细节或降低清晰度。矢量图形适用于重现清晰的轮廓，如徽标或插图中的线条，是表现标志图形的最佳选择。许多软件都支持矢量图形，如Corel
DRAW、Flash、Illustrator等。
2. 常用图像文件格式
在进行数字图像处理时，经常会遇到不同的文件格式之间的转换，因此非常有必要了解各种图像格式的特性和适用范围。
1) BMP格式
BMP(Bit Mapped)格式是Microsoft公司为Windows操作系统自行开发的一种图像文件格式，因为在Windows操作系统中，画面的滚动、窗口的打开或恢复均是在绘图模式下进行的，所选择的图像文件必须能应付高速度的操作要求，不能有太多的计算过程，能够快速地将屏幕内容完整地存储在文件内，避免解压缩时浪费时间，因此设计了BMP文件格式。
BMP格式是与设备无关的文件格式，故又称为DIB(DeviceIndependent Bitmap)格式。这种格式的图像文件可以是2色、16色、256色或16777216色，每个图像文件都有两部分，第一部分是记录图像相关数据的文件头，第二部分才是图像数据。
2) TIFF格式
TIFF(Tagged Image File Format)格式是一种包容性十分强大的图像文件格式，简称TIF。它可以包含许多图像内容和信息，甚至可以在一个图像文件内放置一个以上的图像，其文件头比较有“弹性”，由不同的标记(tag)组成，而且包含了固定及可变动的部分，支持24位(1677万色)真彩色图像。
TIFF格式可以支持Photoshop中除双色调模式之外的所有颜色模式，而且在灰度、RGB和CMYK模式下，还支持Alpha通道。由于TIFF格式独立于操作平台和软件，因此在PC和苹果机之间交换图像通常都采用这种格式。
3) GIF格式
GIF(Graphics Interchange Format)格式是由CampuServe机构设计出来的点阵式(Bitmapped)图像文件格式，采用LZW压缩算法，在保持图像色彩信息的前提下有效降低了图像文件的大小。许多图像处理软件都具备处理GIF文件的能力，这种文件格式最大支持65535×65535的分辨率和256种颜色，采用索引色模式，由于支持动画和透明而被广泛应用在网页中。目前常见的有1987年5月制定的87a和1989年7月制定的89a两种版本。
4) JPEG格式
JPEG(Joint Photographic Experts Group，联合图像专家组)格式利用离散余弦转换(Discrete Cosine Transform，DCT)压缩技术存储静态图像的文件格式。该格式将图像分割为许多8×8像素大小的方块，再针对每个小方块做压缩的操作，经过复杂的DCT压缩过程，生成的图像文件可以达到30∶1的压缩比例，但是所花费的代价却是某种程度的失真，但这种失真是人们肉眼无法察觉的，属于有损压缩格式。JPEG格式是目前所有格式中压缩比最高的一种，在网络上得到广泛应用。
5) PSD格式
PSD格式是Photoshop软件生成和使用的主要格式，可包含层、通道、路径及色彩模式等信息。当图像以PSD格式保存时，会自动对文件进行压缩，以缩小文件的长度，但由于保存了较多的层和通道等信息，因此通常还是比其他格式的文件大些。
5.1.2图像处理工具Photoshop
在数字图像处理领域中，Photoshop、CorelDraw等多种专业图形图像处理软件，凭借自身的优势拥有各自的适用范围和用户群。
Photoshop被誉为目前世界公认的权威的点阵图像处理软件，该软件是一款集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件，在广告平面设计、数码照片处理、室内装潢等领域中得到了广泛的应用，深受广大平面设计人员的喜爱。
1. Photoshop CC 2021的界面
Photoshop CC 2021的工作界面由标题栏、菜单栏、工具箱、工具选项栏、功能面板组、图像窗口和
状态栏组成，如图54所示。
图54Photoshop CC 2021工作界面
1) 标题栏
当只有一个图像文件时，标题栏显示图像名称、格式、缩放比例、颜色模式等信息； 当有多个图像文件时，只在窗口显示一个图像文件，其余图像最小化到后方选项卡中。
2) 菜单栏
菜单栏由“文件”“编辑”“图像”“3D”等11大类组成，提供了图像处理过程中使用的绝大部分操作命令。
3) 工具箱
工具箱是Photoshop的重要组成部分，图像处理过程中的许多操作都需要利用工具箱中的工具完成。Photoshop CC 2021提供了70余种工具，可以使用鼠标或者键盘选择所需工具完成图像的处理与编辑。
4) 工具选项栏
工具选项栏用于显示当前所选工具的参数设置项，在选择工具箱的某个工具后，可以在工具选项栏中调整工具的相关设置。
5) 功能面板组
功能面板组主要包括图层、通道、路径、历史记录、导航器、动作、字符等30多种面板。默认情况下，功能面板以组的方式排列在工作区的右侧，如图55所示。在图像制作过程中，如果需要使用某个面板，可以直接选择面板中的选项卡，还可以通过“窗口”菜单中的相应的命令显示或隐藏面板。面板组的排列方式并不是固定不变的，用户可以对面板进行编组、堆叠或停放等。
6) 图像窗口
图像窗口用于显示当前正在使用的图像文件及相关信息，该窗口是进行图像编辑和处理的主要区域。在进行图像处理时，可以同时打开多个图像窗口，并且可以通过执行“窗口”→“排列”命令改变多个图像窗口的排列显示方式。
7) 状态栏
状态栏主要用于呈现当前图像的显示比例、文档大小等基本信息。
2. 常用工具
Photoshop CC 2021包含了70余种不同功能的工具，如图56所示。工具箱中工具按钮图标右下角有一个三角形，表示该工具含有隐藏工具，右击鼠标即可显示出隐藏工具。下面简要介绍一些Photoshop图像处理的常用工具。
图55功能面板组
图56Photoshop CC 2021工具栏
1) 选择工具
(1) 矩形选框工具： 在图像上拖动鼠标可以确定一个矩形的选择区域，如果在拖动鼠标的同时，按Shift键可创建正方形选区。
(2) 椭圆选框工具： 用于创建椭圆形的选择区域，如果在拖动鼠标的同时按Shift键可以创建圆形选区。
(3) 套索工具： 用于手动创建自由形状的选择区域。
(4) 磁性套索工具： 能够自动寻找图像的边缘，用于沿图像边缘选择图像的部分区域。
(5) 魔棒工具： 用于选择图像中与选定颜色相近的区域。
(6) 快速选择工具： 使用圆形画笔笔尖快速“绘制”选区。
(7) 移动工具： 用于移动选区图像、图层和参考线等。
2) 修饰工具
(1) 污点修复画笔工具： 用于修复画面中面积较小的污点，调整好笔尖的半径，直接单击污点即可修复。
(2) 修复画笔工具： 善于修复线状瑕疵，首先按Alt键的同时单击鼠标选择样本，然后拖动鼠标利用样本图像修复瑕疵图像。
(3) 修补工具： 善于修复较大面积的瑕疵，首先使用该工具创建选区，然后拖动选区以修复瑕疵区域。
(4) 红眼工具： 用于修复闪光灯拍照时人眼出现的红眼现象，调整好“瞳孔大小”和“变暗量”参数后，直接单击红眼即可修复。
(5) 仿制图章工具： 用于复制图像的指定源区域，首先按Alt键的同时单击鼠标确定源区域，然后在目标区域拖动鼠标复制源区域。
(6) 橡皮擦工具： 用于删除图像的指定区域。
3) 绘画工具
(1) 画笔工具： 用于绘制柔和边缘的线条或图案。
(2) 铅笔工具： 用于绘制坚硬边缘的线条或图案。
(3) 油漆桶工具： 用前景色填充颜色相近的图像区域。
(4) 渐变工具： 用于创建线性、径向、角度、对称或菱形的颜色过渡效果。
4) 文字工具
(1) 横排文字工具： 用于单击或拖动鼠标创建横排文字图层。
(2) 直排文字工具： 用于单击或拖动鼠标创建竖排文字图层。
5) 绘图工具
(1) 钢笔工具： 通过单击或拖动鼠标绘制直线或平滑曲线的路径。
(2) 矩形工具： 用于绘制矩形的路径。
6) 裁剪和导航工具
(1) 裁剪工具： 用于裁剪图像，将不需要的部分删除。
(2) 抓手工具： 用于在图像窗口内移动图像。
(3) 缩放工具： 用于放大或缩小图像，按Alt键的同时单击鼠标则缩小图像。
7) 屏幕模式工具
(1) 标准屏幕模式工具： 通过单击鼠标进入标准屏幕模式。
(2) 全屏模式工具： 在全屏模式下只显示背景和图像，面板是隐藏的，可在屏幕两侧访问面板，
或按Esc键返回标准模式。
3. 常用功能面板
功能面板是Photoshop的重要组成部分，可以通过“窗口”菜单打开或关闭这些面板，下面简要介绍常用功能面板的功能。
1) “导航器”面板
在进行图像编辑处理的过程中，经常需要对图像进行放大与缩小操作，以便更好地观察图像整体效果或具体细节。在实际操作过程中，通常使用图像“导航器”面板对图像进行成比例的放大或缩小，
其中框住的部分就是画布展现的部分，
如图57所示。
提示： 图像的放大或缩小只是一种显示效果，并不是真正改变图像的实际大小。使用
“缩放工具”也可以完成图像的放大或缩小显示。将鼠标移动到图像窗口中显示为“放大”状态
，单击鼠标放大图像； 按Alt键光标显示为“缩小”状态，单击鼠标缩小图像画面。
2) “历史记录”面板
“历史记录”面板主要用于记录用户的操作过程，它可以方便地撤销多次执行的命令，回到任何一个历史状态，如图58所示。如果“历史记录”面板没有显示在功能面板组中，执行“窗口”→“历史记录”命令即可打开“历史记录”面板，单击相应的历史状态就可以完成还原与重做。
图57“导航器”面板
图58“历史记录”面板
小技巧： 按Ctrl+Alt+Z组合键可以依次撤销操作步骤。
3) “图层”面板
图层是指能够存放图像信息的“透明胶片”，将图像的内容绘制在不同图层上，然后再将每个图层的内容叠加起来形成一幅完整图像。使用图层是学习Photoshop图像处理的基础和核心技能，在如图59所示的“图层”面板中可以完成对图层的绝大多数操作。
4) “通道”面板
通道分为颜色通道和Alpha通道，每个通道以256级灰度图的方式进行存储。不同色彩模式的图像具有不同的颜色通道。例如，RGB模式图
图59“图层”面板
像具有红、绿、蓝3个颜色通道，CMYK模式图像具有黄、品、青、黑4个颜色
通道； 而Alpha通道的作用是存储选区信息。
图510，是Photoshop的“通道”面板，在这里可以完成对通道的相关操作。
5) “路径”面板
路径是由节点、直线或曲线构成的矢量对象，通过调整节点的状态和位置精确绘制复杂的形状。该形状属于矢量图的范畴，因
此不能直接渲染成位图图像，必须经过描边、填充或转换为选区等操作才能成为位图图像的组成部分。使用工具箱中的绘图工具(如钢笔工具)可以绘制矢量路径。如图511所示，在“路径”面板中可以完成路径的相关操作。
4. 图像窗口的基本操作
1) 显示标尺
执行“视图”→“标尺”或利用标题栏中的“查看额外内容”→“显示标尺”菜单命令，即可在图像窗口中显示出标尺，如图512所示。再次执行该命令即可关闭标尺。
图510“通道”面板
图511“路径”面板
2) 设置参考线
参考线是一种辅助定位的工具，将鼠标放在标尺上，然后拖动鼠标即可从标尺中拖出参考线，如图512所示。使用“移动工具”将参考线拖回标尺即可删除该参考线。
3) 显示网格
网格也是一种辅助定位工具，执行“视图”→“显示”→“网格”或利用标题栏中的“查看额外内容”→“显示网格”菜单命令，即可在图像窗口中显示出网格，如图513所示。再次执行该命令即可关闭网格。
图512标尺与参考线
图513网格
提示： 在进行图像处理时，可以通过执行“编辑”→“首选项”中的子菜单命令完成标尺、参考线、网格等相应属性的设置。
4) 更改图像大小
工具箱中的 “缩放工具”和“导航器”面板只能改变图像的浏览尺寸，而不能改变图像的实际像素尺寸。执行“图像”→“图像大小”命令，打开如图514所示的“图像大小”对话框，在这里可以
调整图像的宽度、高度、分辨率等。
图514“图像大小”对话框
5) 更改画布大小
更改图像大小和画布大小是有区别的，如图515所示。执行“图像”→“画布大小”菜单命令，在如图516所示的“画布大小”对话框中完成画布大小的设置。
图515更改图像大小和画布大小的区别
图516“画布大小”对话框
6) 旋转画布
旋转画布是指对整个图像(包含所有图层)内容旋转一定角度，还可进行水平或垂直方向的翻转，通过执行“图像”→“图像旋转”菜单命令实现旋转画布的操作。
提示： 图像大小是指图像尺寸和分辨率的大小，如果改变了分辨率，那么图像尺寸也会随之改变； 画布大小仅仅是指图像尺寸的大小，与分辨率没有关系，无论怎么修改画布尺寸，分辨率也不会发生改变。
5. 图像选取的编辑
如何将所需的图像内容精确地选择出来是进行其他操作的前提，Photoshop提供了较为丰富的编辑选区功能，除了工具箱中的选择类工具外，钢笔工具、画笔工具、快速蒙版、通道、路径、特殊滤镜等都可以用来创建和编辑选区，下面简单介绍选区的操作方法。
1) 选框工具
使用工具箱中的“矩形选框工具”和“椭圆选框工具”在图像中拖动鼠标可以创建规则的选区，按
Ctrl+D快捷键即可取消选区。在Photoshop中，通过更改工具属性栏中的选项，实现选区的交、并、差运算，从而创建不规则的选区，如图517所示。该选项组中，表示每次都创建一个新选区，用于实现选区的并集，用于实现选区的差集，用于实现选区的交集。
图517选区的运算
2) 使用套索工具
“选框工具”适合创建图像中的规则选区，“套索工具”则适合创建图像中的不规则选区。
套索工具包括三种类型： 套索工具、多边形套索工具和磁性套索工
具。
其中：
“套索工具”主要用于生成比较随意边缘的选区，使用方法为按住鼠标左键拖动鼠标，将其移动轨迹记录为选区；
“多边形套索工具”可以
图518用“磁性套索工具”创建选区
生成由若干个选择点组成的多边形选区，使用方法为单击鼠标添加选择点，按Delete键删除选择点，使选区首尾相连或双击鼠标即可结束创建操作；
“磁性套索工具”能
够自动查找图像的边缘，使用方法为将鼠标沿着需要选择的图像边缘移动，计算机将自动添加选择点来创建选区(也可以单击鼠标人为添加选择点)，如图518所示。按Delete键删除选择点，使选区首尾相连或双击鼠标即可结束创建操作。
“磁性套索工具”有以下3个重要的属性。
(1) 宽度： 鼠标指针到图像边缘的检测距离，该距离以内的边缘能被检测到。
(2) 对比度： 对图像边缘的灵敏度，其值为1%~100%。较高的数值将只检测鲜明清晰的边缘，较低的数值能够检测含混不清的边缘。
(3) 频率： 添加选择点的频度，其值介于1~100Hz。较高的值添加较多的选择点。
小技巧： 用户可以在工具选项栏设置“磁性套索工具”的宽度、对比度和频率属性。当选取边缘清晰的图像时，首先使用较大的宽度和对比度，然后粗略地跟踪边缘即可； 当选取边缘较含混不清的图像时，首先应该使用较小的宽度和对比度，然后精确地跟踪边缘； 当选取曲折多变的边缘时应该使用较高的频率，选取舒缓平滑的边缘时使用较低的频率。
3) 使用魔棒工具
“魔棒工具”用于选择与鼠标单击处像素颜色相近的连续或不连续区域。该工具有一个重要的属性——容差，该值用于确定所选区域内颜色之间的差异程度，其值介于0~255。如果数值较小，则会选择与所单击处像素颜色非常相似的少数几种颜色； 如果数值较大，则选择的颜色范围将扩大，图519是在同一位置上采用不同容差值创建的选区。
图519同一位置上采用不同容差值创建的选区
提示： 魔棒工具适合于色彩比较单一、形象区分明确的图像，选择起来十分快捷。
4) 选区的移动和变换
首先确认工具属性栏选择了“新选区”选项，然后使用任何选择工具创建选区后，将鼠标移动到选区内部，拖动鼠标即可移动选区的位置。
图520“调整边缘”面板
创建选区后，执行“选择”→“变换选区”菜单命令，可以调整选区的大小和旋转角度，在选区内部双击鼠标左键结束变换操作； 执行“选择”→“反选”命令，可以选择该选区之外的其余部分。
5) 调整选区边缘
创建选区后，执行“选择”→“选择并遮住”命令，打开如图520所示的“调整边缘”对话框。
每个选择工具都有“选择并遮住”命令，可
用于对选区边缘进行一定的修饰，具有较强的实用价值，其中各参数的作用如下。
(1) 半径： 用于指定Photoshop在多大的范围内调整边缘，增加半径可以扩大调整范围。例如，在选择较短的头发时可以增加半径值。
(2) 对比度： 锐化选区边缘并去除模糊的不自然感。增加对比度可以减少由于“半径”值过高而在选区边缘附近产生的杂色。
(3) 平滑： 减少选区边缘的“毛刺”，创建较为平滑的边缘轮廓。
(4) 羽化： 在选区与周围像素之间创建柔化的过渡效果。
(5) 移动边缘： 收缩或扩展选区边界。收缩选区有助于从选区边缘去除额外的背景色。
6) 选区的存储和载入
创建选区以后，执行“选择”→“存储选区”菜单命令，可以将选区用指定名称存储到通道中； 通过执行“选择”→“载入选区”菜单命令，可以将指定通道转换为选区。
提示： 选区中的图像内容可以进行复制和移动操作，
按Ctrl+C快捷键复制选区内容，按Ctrl+X快捷键剪切选区内容，
按Ctrl+V快捷键粘贴选区内容。此外，还可以执行“编辑”→“描边”命令，将选区描绘成实际的像素线条。
6. 绘制图像
1) 选择颜色
单击工具箱中的“设置前景色”工具，打开如图521所示的“拾色器”对话框。选择相应的颜色后，单击“确定”按钮即可完成颜色设置。
工具箱中的“吸管工具”用于从图像中吸取颜色。当鼠标在图像窗口中的某个位置上时，“信息”面板会显示鼠标所在位置的颜色和坐标信息，如图522所示。当鼠标在图像窗口中的某个位置上单击时，填充的前景色将会替换成图像中所选取的颜色。
2) 绘制基本线条
选择工具箱中的“画笔工具”，在工具属性栏中
“画笔”
区域单击向下的小箭头，打开如图523所示的设置面板，其中，“大小”用于设置画笔的粗细，“硬度”用于调节画笔的软硬程度，值越大画笔越硬，值越小画笔越柔软。设置好后，便可以按住鼠标左键在图像窗口中进行绘画操作。
提示： 按F5键，可以快速打开如图524所示的“画笔”面板，进行更多的画笔属性设置。
3) 填充图像
通常情况下，通过使用工具箱中的“油漆桶工具”对选区填充颜色或图案，也可以执行“编辑”→“填充”命令，打开如图525(a)所示的“填充”对话框，在该对话框中设置参数后
图521“拾色器（前景色）”对话框
图522使用“吸管”工具吸取图像颜色后的“信息”面板
图523画笔属性设置
图524“画笔”面板
再对选区填充颜色或图案。两者的区别在于“油漆桶工具”是填充颜色相近的连续区域，而使用“填充”对话框则直接覆盖所选区域，效果对比如图525(b)和图525(c)所示。
图525“填充”对话框和填充效果对比
提示： 使用前景色填充的快捷键是Alt+Delete，使用背景色填充的快捷键是Ctrl+Delete。
4) 渐变效果
“油漆桶工具”在填充图像时，只能使用纯色填充，有时无法满足图像颜色处理的要求。此时，可以使用工具箱中的“渐变工具”完成多个渐变颜色的填充效果，如图526所示。
图526渐变效果
单击工具属性栏处的小三角可以打开如图527所示的“渐变拾色器”，用于快速选择渐变效果，若单击小三角左侧的大色块则打开如图528所示的“渐变编辑器”窗口，用于设定渐变的颜色和透明效果。
图527渐变拾色器
图528“渐变编辑器”窗口
7. 调整图像
1) 调整亮度和对比度
执行“图像”→“调整”→“亮度/对比度”命令，打开“亮度/对比度”对话框，调节图像的整体亮度和对比度，效果如图529所示。
图529调整亮度和对比度的效果
2) 调整颜色
执行“图像”→“调整”→“色彩平衡”命令，打开如图530(a)所示的“色彩平衡”对话框，可以调整图像在红和青、绿和洋红、蓝和黄之间的颜色偏移。执行“图像”→“调整”→“色相/饱和度”命令，打开如图530(b)所示的“色相/饱和度”对话框，在这里可以调整图像的色相、饱和度和明度。如果选中“着色”复选框，则将会放弃图像原有色彩，使用设定的颜色覆盖整个图像。
图530两个调整颜色的对话框
3) 调整阴影和高光
如果图像的阴影区太暗或者高光区太亮，将会导致看不清图像的细节，如图531(a)就是一幅阴影区太暗的图像，执行“图像”→“调整”→“阴影/高光”命令，打开如图532所示的“阴影/高光”对话框，将阴影的“数量”参数设置为40%，得到如图531(b)所示的效果，阴影区的细节内容得到了明显的改善。
图531调整阴影效果
图532“阴影/高光”对话框
8. 图层
在图像制作过程中，图层主要用来执行多种任务，如复合多个图像、向图像添加文本或添加矢量图形形状等，此外也可以通过应用图层样式来添加投影、发光等特殊效果。图层是一组可以绘制、存放图像的透明电子画布，可以透过图层的透明区域看到下面的图层，如图533所示。
图533图层效果
1) 图层功能面板
图层功能面板是进行图像图层操作的主要对象，主要用来显示当前图像的图层信息，进行图层叠放顺序、透明度、图层混合模式参数的调整与设置。图层功能面板组成部分及其相应功能，如图534所示。
图534图层功能面板
(1) 图层混合模式： 用于设置图层间的混合模式。
(2) 图层不透明度： 用于设置图层中所有对象及其样式的不透明度。
(3) 填充不透明度： 用于设置图层中所有对象的不透明度，但不影响其样式的透明度。
(4) 眼睛图标： 用于设置当前图层是否可见的属性。
(5) 当前图层： 当前正在编辑的图层以浅灰色显示。
(6) 链接图层： 单击该按钮，可以将所选定的多个图层或图层组进行链接，链接后的图层保持关联，可以同时对其进行移动、变换等操作。
(7) 添加图层样式： 单击该按钮，可以为所选定的图层添加投影、描边等效果样式。
(8) 添加图层蒙版： 单击该按钮给当前图层创建一个图层蒙版。
(9) 创建新的填充或调整图层： 单击该按钮，在弹出的快捷菜单中选择色阶、色彩平衡等命令，来对当前图层进行填充或调整。
(10) 删除图层： 单击该按钮可以将当前选取的图层删除。
(11) 创建新组： 单击该按钮可以创建一个图层组。
(12) 创建新图层： 单击该按钮可以创建一个新图层。
2) 图层的类型
Photoshop CC 2021中有多种图层类型，如普通图层、背景图层、文字图层、调整图层等。不同的图层类型具有不同的功能、特点，其使用方法也不尽相同。
(1) 普通图层。
普通图层是最为常用的一种图层，支持Photoshop CC 2021大多数的功能效果设置。建立普通图层的方法极为简单，
单击图层面板下方的“创建新图层”按钮即可建立一个普通图层。此外，还可以执行“图层”→“新建”→“图层”命令，在弹出的如图535所示的“新建图层”对话框中，设置新建图层的名称、颜色、模式等属性后，单击“确定”按钮。
图535“新建图层”对话框
(2) 背景图层。
背景图层是一种不透明的图层，一幅图像只能有一个背景图层。背景图层默认为锁定状态，不能够直接对其进行透明度、混合模式等图层样式的应用，如果需要更改背景图层的图层填充颜色等属性，应先将其转换为普通图层再进行相应设置。将背景图层转换为普通图层的方法十分简单，在图层面板中背景图层的位置上双击鼠标，弹出“新建图层”对话框，在该对话框中设置图层的名称等属性即可。
提示： 在选定背景图层后，可以通过执行“图层”→“新建”→“背景图层”命令完成图层的转换。
(3) 文字图层。
文字图层是使用“横排文字工具”和“直排文字工具”创建的图层。在文字图层上可以完成文字编辑和图层样式等常规设置，但是部分效果(滤镜效果、变形等)却不能直接应用于该图层，需要将该图层栅格化后进行设置。栅格化文字图层即将文字图层转换为普通图层，栅格化后则不能够再进行文字的编辑。
(4) 调整图层。
调整图层可以将颜色和色调调整应用于图像。颜色和色调调整存储在调整图层中，并应用于它下面的所有图层，并且可以随时扔掉更改并恢复原始图像。建立调整图层的操作比较简单，执行“图层”→“新建调整图层”命令，在其子菜单中选择相应的命令后进行设置即可。
(5) 填充图层。
填充图层是指在当前图层中完成纯色、渐变和图案3种类型填充图层。建立填充图层的方法与调整图层类似，执行“图层”→“新建填充图层”命令，在其子菜单中选择相应的命令后进行设置即可。
9. 滤镜
滤镜是Photoshop最重要的功能之一，使用不同的滤镜可以轻而易举地实现图像的扭曲、交错、变形或马赛克等专业效果。滤镜的使用十分简单，在选择某个图层或创建选区后，执行“滤镜”菜单命令，然后选择某个滤镜进行相应设置即可。
5.1.3制作实例： 炫彩背景
制作如图536所示的炫彩背景。
图536炫彩背景
操作步骤如下。
(1) 启动Photoshop CC 2021，执行“文件”→“新建”命令，新建如图537所示的文档。
图537“新建文件”对话框
(2) 执行“滤镜”→“渲染”→“镜头光晕”命令，在“镜头光晕”对话框中保持默认设置，单击“光晕中心”方框中的中心点，将光晕设置在画布中心，如图538所示。
(3) 重复执行“滤镜”→“渲染”→“镜头光晕”命令，保持默认设置，只是将光晕中心设置在如图539所示的位置上。
图538“镜头光晕”对话框
图539再次设置“镜头光晕”效果
(4) 重复步骤(2)，直到得到如图540所示的多个光晕中心。
图540“镜头光晕”的最终效果
(5) 执行“图像”→“调整”→“色相/饱和度”命令，设置“色相/饱和度”对话框如图541所示，对图像进行去色处理。
(6) 执行“滤镜”→“像素化”→“铜版雕刻”命令，设置其属性如图542所示。
(7) 执行“滤镜”→“模糊”→“径向模糊”命令，设置其属性如图543所示。
(8) 按Ctrl+F快捷键3次，重复径向模糊滤镜，将粗糙的画面变平滑。
(9) 按Ctrl+U快捷键，打开“色相/饱和度”对话框，设置其属性如图544所示。
图541“色相/饱和度”对话框
图542“铜版雕刻”对话框
图543“径向模糊”对话框
图544“色相/饱和度”对话框
(10) 选择“背景幅本”图层，执行“滤镜”→“扭曲”→“旋转扭曲”命令，设置该滤镜属性如图545所示。
图545背景图层的“旋转扭曲”滤镜设置
(11) 按Ctrl+J快捷键再复制一个新图层，执行“滤镜”→“扭曲”→“旋转扭曲”命令，设置该滤镜属性如图546所示。
(12) 选择图层，并在图层面板中将图层的混合模式改为“变亮”，如图547所示。
图546图层1的“旋转扭曲”设置
图547图层面板
(13) 制作完成后的炫彩背景如图536所示。
5.2数字动画设计与制作
计算机动画在近几年被广泛使用在计算机教学、建筑效果图、电影、电视等领域，并逐渐被广大用户所接受和使用，其技术的发展也是日新月异。
5.2.1三维动画工具3ds Max
3ds Max是由Autodesk公司开发的三维动画制作软件，当前最新版本为3ds Max 2022。3ds Max 2022以其灵活的操作方式、强大的动画功能和超强的外挂插件能力在众多软件中脱颖而出，易学易用，受到广大用户的好评。在应用范围方面，3ds Max广泛应用于计算机动画、广告、影视、工业设计、建筑设计、多媒体制作、游戏、辅助教学以及工程可视化等领域，并与虚拟现实软件全面兼容。
1. 3ds Max操作界面
3ds Max的界面组成比较复杂，主要由11个部分组成： 项目工作区、菜单栏、主工具栏、功能区、工作视图区、命令面板、视图控制区、轨迹栏、动画控制区、状态栏、3ds Max命令输入区，如图548所示。其各部分的功能如下。
图5483ds Max 2022用户界面
1) 项目工作区
项目工作区如图549所示，可自行设置项目工作区指令。
图5493ds Max的项目工作区
2) 菜单栏
3ds Max共有“文件”“编辑”等17个菜单项，提供了进行3ds Max操作的绝大多数的命令菜单。
3) 主工具栏
主工具栏主要包括物体链接、选择控制、变换修改、操作控制、捕捉开关、常用工具、常用编辑器和渲染等，如图550所示。
图5503ds Max的主工具栏
4) 功能区
功能区有建模工具、自由形式、选择、对象控制、填充5个选项卡。可以从选项卡、面板标题、面板按钮等形式组织起来，通过单击这些选项卡可以进入相应的命令面板。
5) 工作视图区
工作视图区由4个视图组成，依次为“顶”视图、“左”视图、“前”视图和“透视”视图。
6) 命令面板
命令面板是3ds Max中重要组成部分，主要用于完成物体的创建、修改，层级动画的编辑等操作。命令面板一共由6个子面板组成，依次是“创建”面板、“修改”面板、“层次”面板、“运动”面板、“显示”面板和“实用程序”面板，并且以选项卡的形式组织起来，通过单击这些选项卡可以进入相应的命令面板。
7) 视图控制区
视图控制区共由8个按钮组成，用来调整观察角度和观察位置，以利于从最佳的角度观察物体。
8) 轨迹栏
轨迹栏位于工作视图区的下方，共有上下两个部分。上面的部分称为时间滑块，拖动时间滑块指示出当前的帧数，单击时间滑块两边的按钮可以一帧一帧地移动滑块； 下面的部分称为关键帧指示条，可以清楚地看到关键帧的总数和每一个关键帧的位置，最右边的数字代表当前动画的总帧数。
9) 动画控制区
动画控制区在视图控制区的左边，主要提供了动画记录开关按钮及播放动画的一些控制工具，并可以完成对动画时间、播放特性的一些设定工作。
10) 状态栏
状态栏位于界面的下方，X、Y、Z三个显示框可以提供当前物体的位置信息，当进行物体编辑时，提供相应的编辑参数。此外，在下面的状态栏中还可以实时地提供下一步可进行的操作。
11) 3ds Max命令输入区
该区位于界面的左下角，在这里可以输入简单的MaxScript脚本语句，并编译执行，而复杂的语句要通过脚本编辑器来完成。
提示： 由于工具栏的按钮较多，屏幕显示不下，可以将鼠标指针悬停在主工具栏的空白处，此时鼠标指针变为小手形状，拖动鼠标就可以移动工具栏。
2. 标准三维几何体的创建
3ds Max提供的标准基本几何体有长方体、圆锥体、球体、几何球体、圆柱体、管状体、圆环、四棱锥、茶壶、平面和加强型11种，如图551所示。
图551标准三维几何体
图552标准基本几何体
创建面板
创建标准三维模型是3ds Max中最简单的建模方法，但也是高级建模的基础。依次执行命令面板中“创建”→“几何体”命令，在列表中选择“标准基本体”，在“对象类型”卷展栏中列出了11个标准基本几何体的创建按钮，如图552所示。
标准几何体的创建方法较为简单，首先在“对象类型”卷展栏中单击需要创建的几何体按钮，其背景色将变为蓝色，然后在工作视图中通过拖动、单击、移动等操作便可创建相应物体，右击鼠标结束创建过程。各种标准几何体的创建方法基本相同，用户可以自行通过拖曳鼠标完成创建。为了帮助用户更好地掌握标准几何体的基本参数设置，现将相关的重要参数进行简要介绍。
(1) “分段数”： 可以理解为物体的关节，如图553所示。“分段数”越大，物体的弯曲就越平滑，但如果太大的话，物体的复杂程度将大大增加，会增加系统的运算负荷，降低刷新速度，所以应该谨慎设定“分段数”的大小。所有的标准几何体都具有“分段数”的属性。
图553不同“分段数”物体的弯曲效果
(2) “边数”和“平滑”选项均用于平滑标准几何体的弯曲面。“边数”是指弯形曲面的边数，边数越多，侧面越接近圆形，如图554所示； 选中“平滑”时，较小的边数即可创建圆形侧面，如图555所示。圆锥体、圆柱体、球体、管状体、圆环和茶壶都有“边数”或“平滑”参数。
图554分段数分别为10、30的圆锥体效果
图555“平滑”选项启用前后的球体效果
提示： 如果用户在更改物体参数的时候，不小心右击鼠标或因其他操作而结束了物体的创建过程，则右边的“参数”卷展栏就消失了，此时若需要继续更改物体的参数，请单击“命令面板”中的按钮，进入“修改”面板，在这里可以继续修改物体的参数。
3. 操作视图
3ds Max的工作视图区由4个视图组成，依次为“顶”视图、“左”视图、“前”视图和“透视”视图。4个视图中的内容是从不同的角度看到物体的结果，因此这4个视图是同步变化的，即如果任何一个视图中的物体发生了变化，那么其他3个视图中的相应物体也会发生变化。在工作视图区中进行操作时，只能有一个视图是活动视图。当视图的周围有一个黄色的边框时，表示其处于活动状态，通过使用鼠标在视图上单击来完成活动视图的转换。
1) 切换工作视图
默认情况下，工作视图区由“顶”视图、“左”视图、“前”视图和“透视”视图组成，但根据用户的不同操作习惯和实际需要，往往要切换到其他的视图或更换视图的布局方式。3ds Max提供了丰富的视图类型，除了上述4个视图之外，还有“正交”视图、“后”视图、“右”视图、“底”视图、“灯光”视图、“摄影机”视图等。
工作视图的切换操作非常简单，依次执行“视图”→“视口配置”命令，在打开的“视图配置”对话框中完成视图的切换。此外，视图的大小也是可以变化的，只需将鼠标移动到两个视图的交界处，当鼠标变为双向箭头状时，按下鼠标左键上下、左右拖动便可以改变视图的大小。
2) 变换工作视图
在3ds Max中，经常需要在保证物体属性不变的前提下，从各个角度观察物体的细节，这种变换主要是通过变换工作视图完成的。在3ds Max中常用的变换类型有缩放视图、平移视图和旋转视图，可以通过“视图控制区”中的按钮完成工作视图的变换操作。
缩放视图主要是指对工作视图进行放大或缩小，是变换工作视图的主要操作。现将各按钮的功能介绍如下。
(1) 缩放： 单击该按钮，按住鼠标左键在视图中上下拖动，可将当前活动视图放大或缩小。
(2) 缩放所有视图： 单击该按钮，按住鼠标左键在视图中上下拖动，可将所有视图同时放大或缩小。
(3) 视野： 该功能只作用于“透视”视图中，使用该功能缩放“透视”视图时将产生透视变焦效果，类似于更改摄影机镜头焦距的效果。
(4) 缩放区域： 该功能只作用于平面视图中，用鼠标选择某一区域，可将选定的区域放大。
(5) 最大化显示： 该功能使当前活动视图中的所有物体最大化显示。
(6) 最大化显示选定对象： 该功能使当前活动视图中的选定物体最大化显示。
(7) 所有视图最大化显示： 该功能可以将所有视图中的所有物体最大化显示。
(8) 所有视图最大化显示选定对象： 该功能可以将所有视图中选定物体最大化显示。
平移视图是指将视图向任意方向平行移动，该操作主要通过“视图控制区”中的“平移”工具完成。平移视图操作只改变视图窗口呈现三维场景的位置，并不改变物体在场景中的位置。
旋转视图是指将视图向任意方向旋转，该操作只是改变视图窗口呈现三维场景的角度，并不改变物体自身的旋转角度。旋转视图的工具有“环绕”工具、“环绕子对象”工具和“选定的环绕”工具。
3) 主栅格和系统单位
在每个工作视图中都有一些灰色的网格，这些网格称为主栅格，起到一种构造平面的作用，当在视图中创建物体时，会将新物体放置在该视图的主栅格平面上。主栅格是一个单独的系统，提供了创建物体时使用的可视参数。用户可以通过执行菜单“工具”→“栅格和捕捉设置”命令，打开“栅格和捕捉设置”对话框，在该对话框中的“主栅格”选项卡中进行栅格设置。
单位是连接三维虚拟世界与物理真实世界的关键。3ds Max以自己内在的系统单位记录所有的测量和数值参数，无论使用哪种显示单位，最关键的是确定物体与整个场景的正确比例。默认的系统单位为 1.000 英寸。通过依次执行菜单“自定义”→“单位设置”命令，在“单位设置”对话框中完成系统单位的更改与设置。
4. 三维坐标系统的概念
在3ds Max虚拟的三维世界中，有一个始终固定的用来定位场景的坐标系统——世界坐标系。在每个视图的左下角都可以看到世界坐标轴，该轴指示了视图中与世界坐标系相对应的当前方向。世界坐标轴的X轴为红色，正向朝右；Y轴为绿色，正向指向背离用户的方向；Z 轴为蓝色，正向朝上，如图556所示。
在3ds Max中创建的所有物体也都含有一个由X、Y、Z三个方向组成的坐标轴，其初始方向与世界坐标轴相同，如图557所示。3个坐标轴的交点称为轴点或轴心，用于标识物体的位置和状态，也可作为旋转和缩放变换的中心点。
图556世界坐标系的图示
图557物体的轴和轴点
在3ds Max中，除了“世界坐标系”以外，为了便于用户的移动、旋转、缩放等操作还提供了许多其他的参考坐标系，如“屏幕”坐标系、“视图”坐标系、“父对象”坐标系、“局部”坐标系等。可以通过“主工具栏”中的“参考坐标系”列表选择不同的参考坐标系。
5. 选择物体的方法
3ds Max为用户提供了多种选择物体的方法，主要包括基本选择法、区域选择法等。还可以通过物体变换工具，如“选择并移动”、“选择并旋转”、“选择并均匀缩放”等进行操作。
1) 基本选择法
基本选择法是指使用“主工具栏”中的“选择对象”
工具
通过单击相应物体进行选择的方法。该选择法的操作十分简单，只需要将鼠标移动到所选物体上，单击鼠标即可。此外，再配合一些快捷键的使用，就可以实现更多的选择技巧。
2) 区域选择法
区域选择法是指使用选择工具通过拖动鼠标画出一个选择区域来同时选择多个物体的方法。单击“主工具栏”中的“矩形选择区域”工具
的右下角，弹出其他5种区域类型，分别是矩形区域、圆形区域、围栏区域、套索区域和绘制区域，用户可以根据实际情况进行相应的选择。
提示： 在进行区域选择时，也可以配合使用Ctrl键(增加选区)和Alt键(减少选区)。
3) 克隆物体
3ds Max中几乎所有的物体都可以制作副本，这种操作称为克隆。克隆出来的物体有3种类型，分别是复制、实例、参考。进行物体克隆，最为快捷的方法就是使用Shift+变换工具，进行克隆操作之后，出现如图558所示的“克隆选项”对话框，在该对话框中设置克隆物体的类型、个数和名称。
(1) 复制： 克隆出来的物体与源物体之间不再有任何关系，相互之间是独立的。
(2) 实例： 克隆出来的物体可以说是源物体在其他地方的一个“分身”—“实例”，即对源物体进行的修改操作也会施加到“实例”体上，对“实例”体进行的修改操作也会施加到源物体上。
(3) 参考： 克隆出来的物体与源物体之间存在单向关系，即对源物体的修改会施加到“参考”物体上，而对“参考”物体的修改却不会影响到源物体。
6. 常用工具
1) 对齐工具
3ds Max中物体的位置比较重要，有时还需要参考其他物体的位置进行物体的放置。3ds Max提供了多种对齐工具，比较常用的是“对齐”工具。在选择源物体后单击“对齐”
工具按钮，在视图中单击目标物体后，出现如图559所示的“对齐”对话框。
图558“克隆选项”对话框
图559“对齐当前选择（Sphere001）”对话框
该对话框中各参数功能说明如下。
(1) 对齐位置： 用于设定物体在空间位置的对齐。
(2) 最小： 是指物体边界盒上沿某一坐标轴或某几个坐标轴上最小值的点。
(3) 中心： 是指物体的几何中心。
(4) 轴点： 是指物体坐标轴的轴点。
(5) 最大： 是指物体边界盒上沿某一坐标轴或某几个坐标轴上最大值的点。
(6) 对齐方向： 用于设定物体旋转角度对齐。
(7) 匹配比例： 用于设定物体的缩放大小对齐。
2) 阵列工具
使用“阵列”工具可以一次克隆多个物体，并且可以创建一维、二维或三维阵列。执行“工具”→“阵列”命令，在如图560所示的“阵列”对话框中进行设置。
图560“阵列”对话框
3) 镜像工具
单击“主工具栏”中的“镜像”工具，弹出如图561所示的“镜像”对话框，其主要功能是可以使物体沿一个或两个轴向进行镜像操作，并可以同时创建镜像克隆体。现将主要参数介绍如下。
(1) “镜像轴”组合框中的选项用来设定在哪个轴向上进行物体镜像。
(2) “偏移”参数用来设定镜像物体的偏移量。
(3) “克隆当前选择”组合框中的4个选项用来设定镜像物体的克隆方式。
提示： 在使用中应该注意尽量避免大批量的“阵列”分段数较多的物体，否则系统运算量急剧增加，会降低处理速度。
7. 修改三维几何体
在创建完物体后，通常需要对物体进行进一步的设置与修改，常用的修改方法就是使用修改器。修改器的作用主要是用于更改物体的几何形状、内部结构及其属性。结束创建几何体后，保持物体的选中状态，单击命令面板中的
按钮，进入“修改”面板，如图562所示。
根据物体的类别不同，“修改器列表”的修改器会有所不同，通常将其分为三大类。
(1) 选择修改器。这类修改器的主要作用是对物体的子对象层级进行选择，并将选择的结果向后面应用的修改器进行传递，使后面修改器的效果只作用于选择的子对象。它包括网格选择、面片选择、多边形选择和体积选择。
图561“镜像： 世界 坐标”对话框
图562“修改”面板
(2) 世界空间修改器。这类修改器的主要作用是通过一定的方法使空间产生变形、扭曲，而被应用该类修改器的物体在这样的一个扭曲空间中，也会跟随着产生相应的变形。它包括点缓存、路径变形、面片变形、曲面变形等11个修改器。
(3) 对象空间修改器。这类修改器的主要作用是将变形、修改效果直接作用于选定物体，并可以通过调节Gizmo、中心和子对象对物体进行进一步的修改。它包括弯曲、锥化、扭曲、噪波、球形化、蒙皮、编辑网格、编辑面片、编辑样条线、网格平滑、FFD、优化等80多个修改器。
提示： 修改器的子对象有很多类型，并且各个修改器包含的子对象也不完全一样，有些修改器含有Gizmo和中心子对象，有些则没有。此外，并不是所有的修改器都有子对象。
“锥化”“噪波”“扭曲”等常用对象空间修改器在三维几何物体网格建模中起到了非常重要的作用。
1) “锥化”修改器
“锥化”修改器主要用于缩放几何体的两端，产生锥化的轮廓，即一端放大而另一端缩小。它既可以在两组轴向上控制锥化的量和曲线，也可以对几何体的某一部分进行锥化。“锥化”修改器的参数面板如图563所示。
(1) 当“数量”选项的值为正时，物体的上表面向外扩展，值为负时，上表面向内收缩，收缩的程度与参数的绝对值成正比。
(2) “曲线”选项用于确定物体与作用轴方向平行部分的弯曲程度，正值向外凸起，负值则向内凹陷，凸起或凹陷的程度由参数的绝对值确定。
(3) “主轴”选项用于选择以哪个轴为基准进行锥变修改。
(4) “效果”选项用于选择修改在哪个轴向起作用。
(5) “对称”复选框用于确定是否以对称的方式进行修改。
(6) “限制”选项可以限制锥化的范围，上限取值必须为正值，下限取值必须为负值。
2) “噪波”修改器
“噪波”修改器能够沿着3个坐标轴的任意组合调整物体顶点的位置，以产生随机变形的效果，对面数较多的物体其效果最为明显。“噪波”修改器的参数面板如图564所示。
图563“锥化”修改器参数面板
图564“噪波”修改器的参数面板
(1) “种子”选项用于确定产生干扰的随机函数种子，干扰是以随机函数产生的，修改随机函数的种子就可以改变产生的噪波效果。
(2) “比例”选项用于将噪波进行缩放，较大的值产生更为平滑的噪波，较小的值产生锯齿现象更严重的噪波。
(3) “分形”复选框用于采用碎片数学运算方法得到噪波效果。
(4) “粗糙度”选项用于设定噪波的粗糙程度。
(5) “迭代次数”选项用于设定碎片运算次数。
(6) “强度”选项用来设定物体在X、Y、Z三个轴向上的起伏强度。
(7) “动画噪波”复选框用来启用动画效果。
(8) “频率”选项用来设定在动画过程中噪波变化的快慢。
(9) “相位”选项用来设定当前帧的波形位置。
3) “扭曲”修改器
图565“扭曲”修改器
参数面板
“扭曲”修改器的作用是使物体沿着某一轴向产生旋转的效果，类似于拧湿抹布，并可以通过设置偏移量来压缩扭曲相对于“中心”的效果。“扭曲”修改器的参数面板如图565所示。
(1) “角度”选项用于确定扭曲的角度，360°为一周。
(2) “偏移”选项用于使物体的扭曲效果沿扭曲轴产生偏移，该值为负时，扭曲效果将向修改器中心偏移； 该值为正时，扭曲效果将向远离修改器中心的方向偏移。
(3) “扭曲轴”选项用于确定物体在哪个轴向上产生扭曲。
(4) “限制”选项用于限制扭曲的范围，以产生局部扭曲效果。
4) “编辑网格”修改器
“编辑网格”修改器提供了5个子对象，分别是顶点、边、面、多边形和元素，通过子对象层级的编辑，可以制作生成非常复杂的模型。该修改器的大部分功能和参数都工作于子对象编辑状态，只有“编辑几何体”卷展栏中极少数个别功能工作于整个物体状态，如附加、炸开等。
“编辑网格”修改器含有3个卷展栏，分别是“选择”“软选择”和“编辑几何体”，当进入子对象编辑模式后，会增加一个“曲面属性”卷展栏。
(1) “选择”卷展栏： 用于提供启用或者禁用不同子对象的按钮，以及一些选择设置、显示设置和关于选定条目的信息，如图566(a)所示。
(2) “软选择”卷展栏： 如图566(b)所示，该卷展栏能够使选择的子对象就像被磁场包围了一样，在移动、旋转和缩放变换时，带动周围邻近的子对象产生平滑渐变的柔化效果。
(3) “编辑几何体”卷展栏： 如图566(c)所示，该卷展栏提供了各种编辑子对象的功能，网格建模大部分的操作都在这里完成。
(4) “曲面属性”卷展栏： 只有进入子对象编辑状态时才会出现，针对不同的子对象，该卷展栏的内容也不一样，如图566(d)所示。该卷展栏提供了修改子对象法线、材质ID、平滑组、顶点颜色和可见性等功能。
图566“编辑网格”修改器的卷展栏
“编辑网格”修改器含有5个子对象，对这5个子对象说明如下。
(1) 顶点： 是空间中的点，两点构成一条直线，三点构成一个平面，所以顶点是定义边和面的基础。当移动或编辑顶点时，它们形成的边和面也会受到影响。顶点也可以独立存在，这些孤立的顶点可以用来创建面，而不能用来创建边，但在渲染时，它们是不可见的。
(2) 边： 就是一条线，可以用来连接两个顶点，三条边就可以组成一个面，并且两个面可以共享一条边。
(3) 面： 是由3个顶点组成的三角形面。
(4) 多边形： 多边形的作用类似于面，只不过它是由4个或4个以上顶点组成的多边形面。
(5) 元素： 当处于元素子对象编辑状态时，就可以同时处理物体所有的相邻面。
8. 样条曲线建模方法
1) 创建样条曲线
3ds Max提供了绘制二维或三维样条曲线的功能，可以创建13种样条曲线(矩形、圆
形、线、椭圆形、弧形、圆环、多边形、星形、文本、螺旋线、
卵形、徒手和截面)如图567所示。这些样条曲线经过放样、车削、拉伸等操作，便可以形成许多复杂的几何体，也可以作为路径控制物体的运动。
样条曲线的创建方法与标准几何体的创建方法类似，依次执行命令面板中的“创建”→“图形”命令，在如图568所示的“对象类型”卷展栏中选择需要的对象类型后，单击或拖曳鼠标进行创建即可。
图567样条曲线创建图
图568“对象类型”卷展栏
3ds Max中的样条曲线是由节点控制形成的，共有4种类型的节点，分别是角点、光滑点、Bezier点和Bezier角点，如图569所示。
图5694种节点类型
(1) 角点： 能生成尖锐转角的不可调整的节点，并且角点的两侧产生直线。
(2) 平滑点： 能生成平滑连续曲线的不可调整的节点，平滑点处的曲率是由相邻节点的间距决定的。
(3) Bezier点： 带有连续切线控制柄的可调整的顶点，用于创建平滑曲线，节点处的曲率由切线控制柄的方向和长短确定。
(4) Bezier 角点： 带有不连续切线控制柄的可调整的顶点，用于创建带有尖锐转角的曲线，节点两侧的曲率可以不同，分别由两侧切线控制柄的方向和长短确定。
图570样条曲线的“渲染”
卷展栏
2) 样条曲线的可视化
样条曲线是只有形状而没有体积的特殊物体，由此在渲染输出时并不可见。通常需要对如图570所示的样条曲线的“渲染”卷展栏进行相应的设置，进而才能够观看到其渲染效果。
(1) 在渲染中启用： 启用此项后，渲染引擎将使用指定的参数对样条曲线进行渲染。
(2) 在视口中启用： 启用此项后，将直接在视图窗口中显示样条曲线的渲染效果。
(3) 视口或渲染： 用于选择不同的渲染引擎。
(4) 径向： 用于将3D网格显示为圆柱形对象。
(5) 厚度： 用于决定渲染后曲线的厚度。
(6) 边数： 用于设定渲染后曲线截面的边数。
(7) 角度： 用于设定渲染后曲线截面的旋转角度。
(8) 矩形： 用于将样条曲线网格图形显示为矩形。
(9) 长度： 用于指定沿着局部Y轴的横截面大小。
(10) 宽度： 用于指定沿着局部X轴的横截面大小。
(11) 纵横比： 用于设置矩形横截面的纵横比。
(12) 扭曲校正： 用于渲染后的样条线的扭曲校正。
(13) 封口： 用于指定渲染后的样条线的末端是否形成封闭，可选择封口形状。
3) 样条曲线的插值
在创建基本三维几何体时，通过提高“分段数”使几何体达到平滑的弯曲变形效果。而对于样条曲线来说，如果想要得到平滑的弯曲曲线，则需要提高样条曲线的步数。样条曲线是由节点构成的，节点与节点之间的连接线称为线段，为了使曲线达到平滑的效果，而将线段分割成小段的折点数目即为步数。样条曲线经过编辑和修改，可以生成复杂的几何物体，所生成的几何物体的边数和面数均由样条曲线的步数决定。图571是一个不同步数值的圆形样条曲线。
图571不同步数值的圆形样条曲线
每种样条曲线都有一个“插值”卷展栏，如图572所示。其中各参数的功能说明如下。
(1) “步数”值用于设置线段产生的折点数。
(2) “优化”复选框决定是否允许系统对样条曲线进行优化，以最少的折点数达到最平滑的效果，如直线的步数将减少为0。
(3) “自适应”复选框决定是否让系统自动计算每个样条曲线的步数，选择该项后，上面的“步数”参数将不可用。
4) 样条曲线的基本修改方法
样条曲线是3ds Max的重要组成部分，其形式灵活、多变，功能也十分强大，在建筑效果图、机械器件、角色建模等方面有重要的作用。通常使用“编辑样条线”修改器对样条曲线进行修改与设置。
(1) “编辑样条线”修改器简介。
“编辑样条线”修改器是对样条曲线进行编辑修改的基本方法，它提供了3个子对象，通过子对象层级的编辑，可以产生复杂的曲线。在对样条曲线施加“编辑样条线”修改器后，“修改”面板如图573所示，其中各卷展栏的功能如下。
图572“插值”卷展栏
图573“编辑样条线”修改器的“修改”面板
① “选择”卷展栏： 如图574所示，主要提供了选择不同的子对象模式、使用命名的选择集、控制柄、显示设置和选择信息等功能。
② “软选择”卷展栏： 如图575所示，该卷展栏能够使选择的子对象就像被磁场包围了一样，在移动、旋转和缩放变换时，带动周围邻近的子对象产生平滑渐变的柔化效果。
图574“选择”卷展栏
图575“软选择”卷展栏
③ “几何体”卷展栏： 如图576所示，提供了编辑样条线修改器的大部分功能，是最重要的卷展栏。当处于不同的子对象编辑状态时，该卷展栏的功能也有所不同。
④ “曲面属性”卷展栏： 如图577所示，只有处于“线段”和“样条线”子对象编辑状态时，该卷展栏才会出现，它主要提供了在样条线可渲染的情况下，通过材质ID号为曲线分配不同材质的功能。
图576“几何体”卷展栏
图577“曲面属性”卷展栏
(2) “编辑样条线”修改器的子对象。
“编辑样条线”修改器有3个子对象，分别是“顶点”“分段”和“样条线”，如图578所示。
图578“编辑样条线”修改器的子对象
① “顶点”是构成样条曲线的基本单位。
② “分段”是顶点与顶点之间的连线。
③ “样条线”是整个曲线的若干子集，即一个完整的局部。
在利用子对象进行编辑的时候，往往是综合使用3种不同的子对象。
提示： 在3ds Max的样条曲线中，除了“线”和“截面”创建的横截面以外，在进行“顶点”“分段”和“样条线”的子对象编辑时，必须对其施加“编辑样条线”修改器。
5) 样条曲线的放样
(1) 样条曲线的放样。
“放样”操作是将一个或多个样条曲线(称为截面图形)沿着第三个轴(称为放样路径)挤出的三维物体，如图579所示。放样一般应用于二维平面曲线，至少两个以上的曲线才能生成一个放样物体，在进行放样过程中，需要确定两个重要的曲线，一个是放样路径，一个是截面。当使用多个截面图形时，3ds Max会在这些截面图形之间自动生成曲面。
“放样”操作的一般步骤为： 选择放样路径后依次执行命令面板“创建”→“几何体”命令，在其下拉列表中选择“复合对象”选项，然后在“对象类型”卷展栏中单击“放样”按钮，开始放样操作； 最后在“创建方法”卷展栏中单击“获取图形”按钮，在视图中选择放样截面图形
，如图580所示
； 如果使用多个截面图形，则在“路径参数”卷展栏中设置好截面图形在路径中的百分比位置值，继续选择放样截面图形即可。
图579放样效果
图580“创建方法”卷展栏
(2) 放样物体的编辑。
放样物体被创建以后，便可以进入“修改”面板修改其子对象，此时“修改器”堆栈如图581所示； 也可以进入新增加的“变形”卷展栏进行变形操作，如图582所示； 还可以继续修改放样物体的各种参数，甚至施加其他的修改器。
图581放样物体的“修改器”堆栈
图582“变形”卷展栏
9. 材质与贴图
1) 材质与贴图的概念
在三维设计软件中，材质和贴图是经常会碰到的两个概念，三维模型只有被赋予了一定的材质和贴图后，才能变得更加逼真和生动。
材质是指物体表面的特性信息，换句话说就是指物体表面由什么样的物质构造而成的，其中不仅包含表面的纹理，还包括了物体对光的属性，如反光强度、反光方式、反光区域、透明度、折射率以及表面的凹凸起伏等一系列属性。在自然界中，之所以能够看到物体的不同之处，除了物体的形状和空间状态不同之外，还有很重要的一点就是不同物体的材质不同。利用材质，可以使苹果显示为红色，使橘子显示为橙色，还可以为金属添加光泽，为玻璃添加抛光等。在制作过程中，如果想要在3ds Max中创造出接近真实的物体，除了在物体的形状上力求真实以外，还需要给物体指定一个准确的材质。
贴图是一种将图片信息投影到曲面上的方法，这种方法很像使用包装纸包裹礼品，所不同的是它将图像、图案，甚至表面纹理以数学方法投影到曲面上，而不是简单地“贴”在曲面上。从某种意义上讲，贴图是材质属性的一种体现方式，只有一系列的贴图和相应的参数才能构成一种完整的材质，从而改善材质的外观，并产生生动的效果。
在3ds Max中，一种材质可以包含多种子材质，而子材质还可以继续包含子材质； 有的材质含有多个贴图通道，在贴图通道中可以使用各种贴图，而在贴图中仍然含有多个贴图通道，在贴图通道中继续可以使用各种贴图。如此一来，通过有限的材质和贴图类型，可以生成无数变幻莫测的效果。
2) 材质和贴图的类型
在3ds Max中，共有19种材质，48种贴图，它们各自都有不同的用处。
材质的类型主要有
物理材料、PBR材质（金属/粗糙）、PBR材质（高光反射/光泽）、
DirectX Shader材质、Inkn Paint材质、“变形器”材质、“标准”材质、“虫漆”材质、“顶/底”材质、“多维/子对象”材质、“高级照明覆盖”材质、“光线跟踪”材质、“合成”材质、“混合”材质、“建筑”材质、“壳”材质、“双面”材质、外部参照材质和“无光/投影”材质。用户在操作时，应该根据实际需要选择合适的材质类型，使三维建模更加形象逼真。
3) “材质编辑器”的使用
3ds Max的“材质编辑器”有精简材质编辑器(以下简称“材质编辑器”)和Slate材质编辑器两种模式。
单击主工具栏中的
按钮就可以打开“材质编辑器”窗口，如图583所示。材质编辑器包含各种材质的快速预览。如果用户要指定已经设计好的材质，那么材质编辑器是一个实用的界面。
图583材质编辑器
“材质编辑器”上方的6个大方格称为“示例窗”，每一个“示例窗”代表一种材质。“示例窗”中的球体是材质的示范物体，它用于显示当前设定材质的预览效果。有白色边框的“示例窗”表示处于激活状态，可以对其所代表的材质进行编辑。默认情况下，一次可显示6个“示例窗”，但实际上“材质编辑器”一次可存储24种材质。
3ds Max自带了一些“材质库”，里面是一些已经设置好了的材质和贴图，可以方便用户使用。但是需要注意的是，只有材质能够直接赋予场景中的物体，而贴图不能直接赋予场景中的物体，只能在材质的贴图通道中使用贴图。在“材质/贴图浏览器”中，可以看到材质库预置的材质和贴图列表。
10. 灯光与摄影机
1) 灯光简介
在3ds Max中灯光是一种特殊的物体，它本身不能被渲染，只能在视图操作时看到，但它却可以影响周围物体的表面光泽、色彩和亮度。通常灯光是和材质共同作用的，它们的结合可以产生强烈的色彩和明暗对比，从而使三维作品更具有真实感。
(1) 灯光的类型。
在3ds Max中，主要有三种类型的灯光： 标准灯光、光度学灯光和Arnold。标准灯光简单、易用，用于模拟家用灯光、办公室灯、舞台灯光、电影中的灯光和太阳光等。不同种类的灯光对象可用不同的方法投影灯光，模拟不同种类的光源。与光度学灯光不同，标准灯光不具有基于物理的强度值。
光度学灯光较为复杂，当与光能传递渲染一起使用时，可提供一种更精确的照明效果。它使用光度学(光能)值，通过这些值可以更精确地定义灯光，就像在真实世界一样。用户可以创建具有各种分布和颜色特性灯光，或导入照明制造商提供的特定光度学文件。但光度学灯光也有不足之处，它要求模型具有更高的精确度及完整性，如房间模型必须有四面墙和天花板，否则就不会为房间提供正确照明。而且使用光度学灯光和光能传递的场景，其渲染时间比使用标准灯光的场景要长得多。
Arnold 是一种基于物理算法的跨平台的光线追踪渲染引擎，它能提供多种类别的照明效果和实现更复杂的灯光渲染。其原理是基于物理规则的渲染器创建材质和灯光，允许用户创建多个物理维度的灯光照明效果，实现更复杂的灯光效果。可以根据需求结合标准灯光和光度学灯光进行全局创建。目前Arnold Light灯光要求更高的渲染精确度和软件需求能力，渲染时间比标准灯光和光度学灯光都更长。
在3ds Max中标准灯光主要包括聚光灯、泛光灯、平行光灯和天光灯4种类型。下面简要介绍各种灯光的作用效果。
① 聚光灯像闪光灯一样投影聚焦的光束，根据控制点不同可分为自由聚光灯和目标聚光灯。
它的光线有明确的投射方向，通过调节聚光灯的亮度可以将观看者的注意力吸引到三维场景中的某一特定区域，如图584所示。
② 泛光灯是一个点光源，比较类似于太阳系中的星星。由于泛光灯没有明确的投射方向，因此它可以照亮周围所有的物体，如图585所示。创建泛光灯光源时应该注意，由于泛光灯是360°发光，是针对整个场景的光源。因此不要使用太多的泛光灯，否则将会使整个场景失掉层次感。
图584聚光灯照射物体“顶”视图效果
图585泛光灯照射物体“顶”视图效果
③ 平行光灯主要用于模拟太阳光，根据控制点不同可分为自由平行光和目标平行光
。当太阳在地球表面上投射时，所有平行光以一个方向投射平行光线。此外，由于平行光线是平行的，因此平行光线呈圆形或矩形棱柱而不是“圆锥体”，其效果如图586所示。
④ 天光灯可以作为场景中唯一的光源。它是一种圆顶的光源，提供了一种柔和的背景阴影，也可以和其他光源一起使用获得高亮度和整齐的投影，其效果如图587所示。
图586平行光灯照射物体“顶”视图效果
图587使用天光灯的效果
(2) 自由灯光和目标灯光的区别。
在3ds Max中，聚光灯和平行光灯可分为目标聚光灯、自由聚光灯、目标平行光和自由平行光4种。其中，目标灯光和自由灯光的主要区别在于目标灯光有固定的照射点，而自由灯光没有固定的照射点。
在对灯光进行定位和调节操作时，如果使用的是目标灯光，那么用户便可以对其照射点和灯光的位置分别进行调节，并且在调节时两者互不干扰，这样比较便于对场景中的灯光进行调节。通常情况下，当使用目标灯光来给固定物体布光时，便可以将物体的照射点固定，而仅仅调节灯光位置。
自由灯光是一种没有明确投射目标的灯光，其光束的大小、范围都可以调节，但是不能对目标点进行调整，在生成动画时能够维持其投射范围不变。在实际使用中，自由灯光不利于对固定物体进行照射，而它比较适合于对运动物体进行跟踪照射。
2) 灯光的基本参数
在3ds Max中灯光的类型有很多种，但是其参数的设置大同小异，这里主要介绍基本参数的设置方法。灯光的参数主要有“常规参数”“强度/颜色/衰减”参数、“阴影参数”参数、“大气和效果”参数等。
(1) “常规参数”卷展栏如图588所示，主要用于启用或禁用灯光、是否投射阴影，并且选择灯光使用的阴影类型。
(2) “强度/颜色/衰减”卷展栏如图589所示，主要用于设置灯光的颜色、强度以及灯光的衰减程度。
图588“常规参数”卷展栏
(3) “阴影参数”卷展栏如图590所示，主要用于设置物体在环境中的投影效果，以此来增强物体的立体效果和真实感，可以设置阴影颜色和其他常规阴影属性，此外也可以让灯光在大气中投射阴影。所有灯光类型(除了“天光”和“IES 天光”)都具有“阴影参数”卷展栏。
(4) “大气和效果”卷展栏的主要功能是制作特殊效果，如设置大气效果和镜头光晕等。另外，该卷展栏仅出现在“修改”面板上，它并不在创建时出现。“大气和效果”卷展栏如图591所示，在该卷展栏中单击“添加”按钮，弹出如图592所示的“添加大气或效果”对话框，选择所需添加的“体积光”或“镜头效果”选项后，单击“确定”按钮完成添加。
图589“强度/颜色/衰减”卷展栏
图590“阴影参数”卷展栏
图591“大气和效果”卷展栏
图592“添加大气或效果”对话框
3) 摄影机简介
在3ds Max中，经常需要借助摄影机从各个角度、方向、远近、高低观看同一个场景，使观看到的场景发生一定变化，并且可以产生现实世界中无法实现的效果。
摄影机对象模拟现实世界中的静止图像、运动图片或视频摄影机。此外，可以将视图切换为摄影机视图，以产生好像正在通过摄影机的镜头观看场景的效果。在摄影机的实际使用过程中，通过调节摄影机的角度、视点、镜头、景深等设置，便可以得到同一场景的不同效果，如高低摄影角度、近远景等，如图593所示。
图593从不同的角度观看同一场景效果
在3ds Max中有两种类型的摄影机： 目标摄影机和自由摄影机。
目标摄影机可将目标点锁定在场景中的一个对象，不论该对象在动画中运动到什么位置，
它始终都对准该对象，因而适合拍摄视线跟踪动画。自由摄影机与目标摄影机的主要区别在于它没有目标点，其他的参数是相同的，它适合制作通过路径运动的漫游式动画，以及一些简单的位置记录动画。由于自由摄影机没有目标点，因此镜头的运动需要通过摄影机自身的移动或旋转等工具来实现，不适合某些要求精确目标跟踪的动画。
4) 摄影机的基本参数
摄影机的“参数”卷展栏如图594(a)所示，这里简要介绍一下摄影机的常用参数。一般情况下，其他参数均采用默认设置，如图594(b)所示。
图594摄影机的基本参数
(1) 镜头： 以毫米为单位设置摄影机的焦距值。
(2) 视野： 设定摄影机查看区域的宽度。宽度可以是水平方向、垂直方向或对角线方向，以度为单位进行设置。
(3) 备用镜头： 系统预设的摄影机焦距，用户可以单击“焦距”按钮，完成对摄影机焦距的改变。
11. 动画和渲染
1) 生成动画
3ds Max的动画功能非常强大，几乎所有的参数变化都可以记录为动画，可以使用自动关键点和手动关键点简单地创建动画，也可以使用动画控制器生成动画，还可以使用轨迹视图、动力学系统、反向动力学系统、Reactor、Character Studio及第三方动画插件等许多工具来制作动画。
在3ds Max中生成动画主要包含如下5个流程。
(1) 确定动画时间和帧率。
单击动画控制区中的按钮，打开“时间配置”对话框，在具体制作动画前必须要对动画的时间长度、帧数和制式等参数进行恰当的设置。
(2) 制作运动物体。
设定完动画时间属性后就可以在视图中开始建模了，并且根据实际需求对物体的参数属性进行相应的设置。
(3) 开始记录动画。
制作好运动物体后便可以开始记录动画，首先将时间滑块拖动到第0帧，单击“关键帧”按钮，然后将时间滑块拖动到其他时间帧上，此时对物体的任何修改(如移动一段距离、旋转一个角度、缩放大小、修改编辑器等)都将被记录为动画，并在此帧添加一个关键帧。
(4) 记录结束。
修改完物体后再次单击“关键帧”按钮，关闭动画记录开关。
(5) 播放动画。
动画创建过程已经结束，单击动画控制区中的按钮，播放动画观看效果。
2) 动画渲染输出
制作完成的动画必须经过渲染才能使一些特殊效果生效，并生成可以脱离3ds Max而独立播放的动画文件。在动画制作完毕后，单击主工具栏中的
按钮，在如图595所示的“渲染设置： 扫描线渲染器”窗口中进行相关参数与属性的设置即可。
图595“渲染设置： 扫描线渲染器”窗口
5.2.2制作实例： 椅子
制作如图596所示的椅子。
图596椅子实例效果图
操作步骤如下。
(1) 依次执行命令面板“创建”→“几何体”→“标准基本体”→“圆柱体”命令，在“透视”视图中创建一个“半径”
为1、“高度”为150、“高度分段”为75、颜色为白色的圆柱体，并在“透视”视图中右击鼠标结束创建操作。
(2) 在工具栏中单击“选择并旋转”工具，然后在状态栏中的区域输入180，并按Enter键，使圆柱体围绕X轴旋转180°。
(3) 在工具栏中单击“选择并移动”工具，在工具栏“参考坐标系”下拉列表框中选择“局部”坐标系统。
(4) 单击命令面板中的按钮，进入“修改”面板，单击“修改器列表”，在弹出的下拉菜单中选择“弯曲”修改器。
(5) 单击“修改器堆栈”中的“Bend”左侧的小“+”号，展开其子对象，单击“中心”子对象，进入子对象编辑状态。
(6) 在“前”视图中，将圆柱体的弯曲中心沿Z轴向下移动两格半位置，如图597所示。
(7) 再次单击“修改器堆栈”中的“中心”子对象，关闭子对象编辑状态。
(8) 在“弯曲”修改器的“参数”卷展栏中选中“限制效果”复选框，并将“上限”值设为6。
(9) 将“角度”值设为90°，完成第一个弯曲操作。
(10) 单击“修改器列表”，选择“弯曲”修改器，对圆柱体施加第二个弯曲操作。
(11) 将第二个弯曲操作的“中心”移至如图598所示的位置，水平方向右移3个格，最后关闭子对象编辑状态。
图597第一个弯曲操作的中心位置
图598第二个弯曲操作的中心位置
(12) 在“参数”卷展栏中，选中“X”弯曲轴，选中“限制效果”复选框，将“上限”值设为6，并将弯曲“角度”设为-90°，完成第二次弯曲操作。
(13) 单击“修改器列表”，选择“弯曲”修改器，对圆柱体施加第三个弯曲操作。
(14) 将第三个弯曲操作的“中心”移至如图599所示的位置，垂直方向下移6个格，最后关闭子对象编辑状态。
(15) 在“参数”卷展栏中，选中“限制效果”复选框，将“上限”值设为6，并将弯曲“角度”设为-90°，完成第三次弯曲操作。
(16) 单击“修改器列表”，选择“弯曲”修改器，对圆柱体施加第四个弯曲操作。
(17) 将第四个弯曲操作的“中心”移至如图5100所示的位置，最后关闭子对象编辑状态。注意，该中心的位置一定要使下面的水平距离超出上面的水平距离。
图599第三个弯曲操作的中心位置
图5100第四个弯曲操作的中心位置
(18) 在“参数”卷展栏中，选中“X”弯曲轴，选中“限制效果”复选框，将“下限”值设为-6，并将弯曲“角度”设为90°，弯曲“方向”设为90，完成第四次弯曲操作，结果如图5101所示。
(19) 单击工具栏中的“镜像”工具，其参数设置如图5102所示。
图5101弯曲后的椅子腿
图5102“镜像： 世界坐标”对话框
(20) 同时选择两个圆柱体，依次执行菜单“组”→“成组”命令，将两个物体组合起来。
(21) 在工具栏“参考坐标系”下拉列表框中选择“视图”坐标系统。
(22) 依次执行命令面板“创建”→“几何体”→“扩展基本体”→“切角圆柱体”命令，在“透视”视图中创建一个切角圆柱体，“半径”为20，“高度”为2，“圆角”为1，“高度分段”为1，“圆角分段”为5，“边数”为30，“端面分段”为5，颜色为蓝色，最后在“透视”视图中右击鼠标结束创建操作。
(23) 单击命令面板中的按钮，进入“修改”面板，单击“修改器列表”，在弹出的下拉菜单中选择“FFD4×4×4”修改器。
图5103控制点的位置
(24) 进入“FFD4×4×4”修改器的“控制点”子对象编辑状态。
(25) 按照如图5103所示的方向，在“顶”视图中调节控制点的位置。在操作时应该使用区域选择法，用鼠标指针画出一个选择区域，框选控制点，而不应该通过单击选择控制点，因为多个控制点在垂直位置上是重叠的。
(26) 关闭“控制点”子对象编辑状态，单击“修改器列表”，选择“弯曲”修改器，对“椅子面”施加弯曲操作。
(27) 弯曲“角度”设为30°，“方向”设为90，弯曲轴选择“Y”轴。
(28) 将“椅子面”移动到如图5104所示的位置。
(29) 单击工具栏中的“选择并旋转”工具，按住Shift键的同时将“椅子面”以绿色的Y轴为中心顺时针旋转90°，在弹出的“克隆选项”对话框中单击“确定”按钮。
(30) 单击工具栏中的“选择并均匀缩放”工具，将复制出来的“椅子背”沿Z轴压缩至原来的80%左右，并移动到如图5105所示的位置。
图5104“椅子面”的位置
图5105“椅子背”的位置
5.2.3HTML5动画设计
HTML(HyperText Markup Language,超文本标记语言)主要用于网页的开发制作。值得注意的是，HTML并不是一种编程语言，它没有编程语言所具有的特性，只用于向浏览器提供显示数据的说明。HTML通过使用特定的标签控制网页中内容的展示，包括文字、图片、音视频、动画、文本控件等。
1. HTML5简介
HTML是一种不断更新发展的语言，现如今已经发展到了HTML 5.0,HTML 5.0和HTML 5两者等同。HTML5是HTML的第五代版本，也可将其理解为HTML的最新版本。相比于旧版本，HTML5更有益于开发者进行编写，对移动端适配性强。在当前Web相关技术迅猛发展及业务场景逐渐增多的情况下，HTML5得到了广泛的应用。本书中的HTML特指HTML 5.0。HTML文件是以“.html”为扩展名的文件，在其中可进行HTML、CSS、JavaScript等语句的编写。
2. HTML5 语法规则
1) 语法形式固定
HTML5提供了双标签和单标签两种语法形式，每种标签都有自己的作用和使用规则，使用尖括号连接，通过指定不同的标签、内容和属性进行内容的呈现。双标签有开始标签和结束标签，其语法格式为<标签名称>内容</标签名称>，如<p>这是双标签</p>。单标签只有开始标签，其语法格式为 <标签名称>，如<br>。
还有一些标签可以通过设置不同的属性控制展示方式，语法格式及示例如下。
(1) 双标签的语法格式为<标签名称 属性名A="属性值1" 属性名B="属性值2"
></标签名称>，如<input type="radio">。
(2) 单标签的语法格式为<标签名称 属性名A="属性值1" 属性名B="属性值2"/>，如<input type="checkbox">。
这两个示例中都是input标签，但由于type属性值的不同，在浏览器中呈现的元素也不同，示例(1)是单选按钮，示例(2)是复选框。
2) 不区分大小写
例如，<p>这是小写</p>和<P>这是大写</P>两种写法均可被浏览器解析，小写标签是HTML 4.0.1中的写法，建议开发者使用小写字母的形式，以方便其他开发者浏览。
3) 不区分单引号及双引号
例如，<input type="radio">和<input type='radio'>是等同的。
3. HTML5的基本结构
1) 文档声明语句
HTML5仅有一种文档声明，即<!DOCTYPE html>。通过添加声明告知浏览器这是一个基于HTML5开发的网页，供浏览器解析文档。
2) 文档编码格式
如<meta charset="UTF8">，charset属性用来指定HTML5文件的字符编码格式，常见的字符编码格式有GBK和UTF8,默认情况下推荐使用UTF8。UTF8是一种针对Unicode的可变长度字符编码，又称万国码，在网页上支持简体中文、繁体中文、英文、日文等文字的显示。
图5106HTML5结构代码示例
3) html标签
html标签用于标记HTML文档的开始和结束。
4) head标签
head标签用来标记HTML文档的头部。
5) title标签
title标签设置网页的标题。
6) body标签
body标签是开发者书写HTML5语句的主要区域。
HTML5结构代码示例如图5106所示。
4. HTML5代码编写工具
1) HbuilderX
HbuilderX简称HX，开发人员可以使用HbuilderX进行HTML5的编辑与开发。HbuilderX依赖C++架构，具有轻巧快速的特点。它的主题界面简洁，具有语法提示、多光标、智能双击、选取管理、选择自己习惯的快捷键方案等功能，其界面如图5107所示。
图5107HbuilderX界面
2) Visual Studio Code
Visual Studio Code，简称 VS Code，是同时支持Windows、Linux和macOS等操作系统的代码编辑器。编辑器中内置了扩展程序管理的功能，为用户提供了全功能代码编辑，强大的调试器可以帮助开发人员提高代码的编辑速度，并对代码进行循环调试。它还具有运行程序的功能，可以直接在软件中模拟代码程序的运行情况，通过快捷键的操作快速掌握程序运行细节，其界面如图5108所示。
图5108Visual Studio Code界面
5. HTML5元素
1) HTML5主要元素
HTML5元素是通过标签创建和表现的,标签由一对尖括号和标签名称构成。HTML5元素根据是否有内容划分为有内容的元素和空元素，根据元素在页面中是否独占一行及能否设置宽高等属性，划分为block(块级元素)和inline(行内元素)。块级元素可以设置width属性和height属性，而行内元素无法设置width属性和height属性。块级元素在网页中会独占一行的空间，默认从上到下排列，而行内元素之间会共享一行的空间，默认从左到右排列直至一行空间排满进入下一行。HTML5常见元素如表51所示。HTML5新增的部分元素如表52所示。
表51HTML5常见元素
开 始 标 签结束标签行内元素/块级元素
<p>、<div>、<dl>、<dt>、<dd>、<li>、
<form>、<h1>、<h2>、<h3>、<h4>、<h5>、
<h6>、<table>、<tbody>、<tfoot>、<thead>、
<td>、<th>、<tr>、<address>、<caption></标签名>块级元素
<a>、<b>、<em>、<select>、<span>、<strong>、<sub>、<sup>、<textarea></标签名>行内元素
<img>、<input>无行内元素
表52HTML5新增的部分元素
开 始 标 签结束标签行内元素/块级元素
<header>、<footer>、<article>、<section>、<aside>、<nav>、<main>、<figure>、<video>、
<audio></标签名>块级元素
<canvas>、<mark>、<time>、<meter>、<progress></标签名>行内元素
注意，对于有结束标签的元素，可以在开始标签和结束标签中间设置内容。对于没有结束标签的元素，可以在开始标签中设置属性来控制标签的展示。此外，元素之间可以嵌套使用，块级元素可以嵌套行内元素和部分块级元素，而行内元素无法嵌套块级元素。
2) HTML5的音视频元素
HTML5提供了audio元素和video元素，可以通过audio标签和video标签创建音频元素和视频元素，从而控制音频和视频文件的播放。HTML5中的音频元素还支持音频文件在浏览器中的本地播放，从而减少对插件和播放器的依赖。audio元素和video元素的属性如表53所示。
表53audio元素和video元素的属性
属 性 名 称属 性 声 明audio/video
controls网页中播放控件的显示audio、video
autoplay实现音视频文件自动播放audio、video
loop实现音视频文件循环播放audio、video
muted静音开关audio、video
preload规定当网页加载时，音视频频是否默认被加载及如何被加载audio、video
src音视频文件的路径audio、video
height视频播放器的高度video
width视频播放器的宽度video
由于不同浏览器对HTML5的支持程度不一样，因此无法保证每个用户使用的浏览器版本都支持HTML5。这就要求在书写音频、视频标签时采取兼容写法，确保用户可以正常播放音频、视频文件。音频代码示例如下：
<audio controls>
<source src="音频文件路径1" type="audio/音频类型1">
<source src="音频文件路径2" type="audio/音频类型2">
您的浏览器不支持 audio元素
</audio>
在上述代码中，如果浏览器不支持audio元素，会在网页中显示“您的浏览器不支持audio元素”,可以在audio标签中插入文字，当用户使用旧版本浏览器浏览网页时会显示这些文字。
controls属性可以在网页中创建一个音频播放组件，该音频播放组件具有播放、暂停、控制音量大小、设置播放速度和播放进度显示的功能，便于用户对音频进行相关操作。
audio标签中可以嵌套多个source标签，浏览器会自动解析首个支持的音频格式。
在source标签中主要有src和type两个属性。src属性用来设置音频文件的路径，路径又分为相对路径和绝对路径： 相对路径是相对于当前文档来说的，以“./”表示当前文档所在的目录，“../”表示当前文档的上一级目录； 绝对路径是以当前计算机中的盘符名称开头的，例如C:/file/hello.mp3表示的是C盘里file文件夹中名称为hello的MP3音频。在开发中推荐使用相对路径，因为项目开发完成后要上传到服务器，文件路径会发生改变，使用相对路径可以有效避免找不到文件的情况出现。type属性用来指明当前音频文件的格式，常见的音频格式有mp3、ogg、mpeg等。
在HTML5中实现音频插入的代码如图5109所示，运行效果如图5110所示。
图5109HTML5音频插入代码
图5110浏览器运行效果
HTML5中的video元素与audio元素类似，它以<video>标签开始，以</video>标签结束。video元素示例代码如下。
<video width="320" height="240" controls>
<source src="movie1.mp4" type="video/mp4">
<source src="movie2.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
在上述代码中，如果浏览器不支持video元素，会在网页中显示“您的浏览器不支持video元素”。video元素提供了播放、暂停和音量控件来控制视频文件的播放，同时提供了width和height等属性控制视频的尺寸。如果设置了width和height属性，那么所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道视频的大小，就不能在加载时保留特定的空间，页面会根据原始视频的尺寸进行改变。
在HTML5中实现视频插入的代码如图5111所示，播放效果如图5112所示。
图5111HTML5视频插入代码
图5112浏览器运行效果
6. HTML5画布
HTML5提供了强大的图形绘制能力。canvas是HTML5中的新增元素，它又名画布,可以在网页中实时绘制简单的形状，如直线、圆等，也可以绘制复杂的二维图像。canvas经常被用于PC端和移动端游戏及各种动画特效的制作。它是一块透明的区域，本身并没有绘制能力，需要JavaScript脚本操作对应的API才能实现相应效果。本节只介绍canvas创建的基本操作。
在页面中创建canvas，示例代码如下：
<canvas id="myCanvas" width="320" height="240"></canvas>
canvas效果图如图5113所示。因为canvas初始化是透明、无颜色的，所以在页面中看不到canvas。
图5113canvas的效果
7. CSS
层叠样式表(Cascading Style Sheet， CSS)的“层叠”指能对元素设置多个样式或同一样式，优先级最高的样式会自动应用。样式可以控制元素的大小、形状、颜色、外观，对元素进行美化。CSS能够通过为元素定义各种样式来设置网页的排版及元素的外观。如果具有相同的元素，而CSS不同，那么最后网页的展现也是不同的。如果一个网页没有CSS，网页的布局会是混乱且没有艺术美感的。CSS文件是以“.css”为扩展名的，在其中可进行CSS语句的编写。有CSS的网页如图5114所示。没有CSS的网页如图5115所示。
图5114有CSS的网页
图5115没有CSS的网页
1) CSS的三种常见引入方式
(1) 行内式。
在开始标签中，通过style=”属性名1： 属性值;属性名2:属性值;”的方式编写，属性之间用英文分号进行分隔。示例代码如下。
<div style="color:red;text-align:center;">层叠样式表,简称CSS。</div>
(2) 内部式。
在head标签中，创建style标签并在style标签中进行编写。
示例代码如下：
<style>选择器
div{
color:red;属性名1： 属性值;
text-align:center;属性名2： 属性值;
}
</style>
(3) 外链式。
步骤1： 创建单独的CSS文件，在其中进行CSS语法的编写图5116为创建的CSS文件，图5117为CSS文件中的代码。
图5116创建的CSS文件
步骤2： 在html格式的文件中，通过link标签引入CSS。示例代码如下。
<link rel="stylesheet" type="text/css" herf="1.css">
引入CSS如图5118所示。
图5117CSS文件中的代码
图5118引入CSS
2) 选择器
CSS中存在诸多选择器，选择器是选择元素的工具，它具有很高的灵活性和指向性，各类选择器之间可以排列组合以应对复杂的开发场景。本节列出了三种CSS常用的选择器。
(1) 标签选择器： 可以根据元素名称进行元素的选择，标签选择器与元素之间是一对多的关系。例如div{color:red;textalgin:center;}，其含义是选择页面中所有的div元素，设置其文字颜色为红色，对齐方式为居中。
(2) id选择器:，可以选择与元素id属性值相同的元素，元素的id属性值是唯一的，不能重复，所以id选择器与元素之间是一一对应的关系,id选择器的格式为#id属性值。例如#dog{color:red;}，其含义是选择元素的id属性值为dog的元素，设置其文字颜色为红色。
(3) 类选择器(class选择器)： 可以选择与元素class属性值相同的元素，元素的class属性值不唯一，可以重复，所以类选择器与元素之间是一对多的关系，类选择器的格式为 .class属性名。例如.dog{color:red;}，其含义是选择页面中所有class属性值为dog的元素，设置其文字颜色为红色。
8. JavaScript
JavaScript，简称JS，是一种客户端脚本语言，也是一种解释性语言。JS不仅能在浏览器中运行，还可以运行在服务器上，开发者可以用JS进行服务端应用的开发。但目前，JS在开发Web应用客户端方面仍然占据主流。日常生活中的网页都是由HTML、CSS和JS共同构成的，HTML定义了网页的内容，CSS描述了网页的布局，而JS控制了网页的行为。JS由ECMAScript、文档对象模型(DOM)和浏览器对象模型(BOM)三部分组成。其中文档对象模型是需要熟练掌握的，它能够让开发人员通过JS操作元素，创建各种交互特效。JS文件以“.js”为扩展名，在JS文件中可进行JS代码的编写。
1) JS的常见引入方式
(1) 内部引入。
在body标签中，定义script标签，直接在script标签的内部书写JS代码。示例代码如下：
<body>
<script>
var a = 1;
</script>
</body>
在上述代码中，创建了script标签，在标签内部定义了一个变量a，并为其赋值为1。
(2) 外部引入。
步骤1： 创建单独的JS文件，在其中进行JS代码的书写。图5119为目录结构，图5120为JS文件中的代码。
图5119目录结构
步骤2： 在html格式的文件中，通过编写script标签的src属性引入JS文件。示例代码如下。
<script src="1.js"></script>
引入JS如图5121所示。
图5120JS文件中的代码
图5121引入JS
2) 文档对象模型(DOM)
文档对象模型用来表示文档的逻辑结构，网页加载结束后会根据页面中的元素及文本生成一个以document为根节点的树状逻辑结构。通过文档对象模型可以获取到网页中的所有元素及属性，还能通过JS对元素、属性、CSS样式进行修改，以创建各种交互效果及动画。
(1) 获取元素的三种常见方法如下。
① 获取对应id属性值的元素。语法格式为document.getElementById("id属性值")。
② 获取对应class属性值的所有元素，语法格式为document.getElementsByClassName("class属性值")。
③ 获取对应标签名称的所有元素，语法格式为document.getElementsByTagName("标签名称")。
(2) 脚本化编程。获取元素后，通过“.”的方式获取元素相关信息，并通过等号进行赋值操作： 对属性进行修改，有document.getElementById(“id名称”).属性名=“属性值”；
对元素样式进行修改，有document.getElementById(“id名称).style.样式名=“属性值”。
9. HTML5动画
在HTML5问世之前，开发人员主要通过Flash来创建动画。Flash对浏览器要求比较高，现如今很多浏览器已不再兼容Flash，而且使用Flash制作动画具有开发周期长、成本高、无法适配移动端用户等缺点。HTML5动画是指利用HTML5、CSS、JS等技术创建动画。在HTML5动画制作中，可以使用JS调用canvas相关API制作出炫酷的动画效果。
实例： 绘制图形(以直线为例)
步骤1： 创建canvas元素，并设置其id为mycanvas。示例代码如下：
<canvas id="mycanvas"></canvas>
步骤2： 编写JS代码，通过getElementById的方式获取canvas元素。示例代码如下：
var mycanvas = document.getElementById("mycanvas");
步骤3： 调用相关API，完成直线的绘制。示例代码如下：
var context = mycanvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(100,100);
context.stroke();
getContext是HTML5提供的一个对象，它提供了绘制图形的各种方法。开发者可以借助getContext的方法进行图形和动画的制作。moveTo方法用来设置开始绘制的起始坐标，上述代码中的起始坐标为(0,0)。lineTo方法用来设置绘制结束的终点坐标,上述代码中的终点坐标为(100,100)。直线绘制效果如图5122所示。
图5122直线绘制效果
常见图形绘制方法如表54所示。
表54常用图形绘制方法
方法说明
moveTo设置绘制开始的起始坐标
lineTo设置绘制结束的终点坐标,并从起始坐标开始创建线条
stroke开始绘制路径
arc创建曲线，用于绘制各种圆形
strokeRect绘制矩形
5.2.4制作实例： 新年烟花绽放动画设计
本节通过使用HTML5中的canvas、CSS和JS代码，实现新年烟花绽放的动画设计。
1. 实现需求概述
通过canvas创建画布，实现烟花自下而上发射，到达画布顶部位置时爆炸的效果。在画布上设置文字并居中显示。烟花动画分为两个阶段： 从随机的位置出现然后向上发射； 上升到一定距离后，烟花炸裂成碎片，然后碎片很快就会消散。
2. 新年烟花绽放动画的目录结构
css文件夹用于存放烟花绽放动画实例的CSS文件，js文件夹存放JS脚本文件。通过双击index.html文件即可浏览烟花绽放动画效果。新年烟花绽放目录结构如图5123所示。
图5123目录结构
3. 新建场景画布
网页标题为“新年烟花动画实例”，通过外链式引入CSS，创建一个宽度为800像素、高度为800像素的canvas画布，并让画布居中显示。HTML代码如下所示：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>新年烟花动画实例</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="myCanvas"width="800"height="800"></canvas>
</body>
</html>html,
body {
height: 100%;
}
body {
margin: 10px;
font-size: 2vw;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
background-color: #000000;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
resize: both;
}
center {
z-index: 100;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
场景画布效果如图5124所示。
图5124场景画布
4. 新建烟花对象类
新建JS文件，根据需求对设计动画的物体进行抽象。创建一个烟花类和一个烟花碎片类，分别使用resetFirework函数explode函数表示抽象出来的这两个对象类。
resetFirework中定义的属性包括： 烟花上升轨迹中的各点的坐标(x,y)、烟花绽放的弧状轨迹的偏转角度age、烟花的phase属性。烟花坐标的x指的是烟花的水平位置，y指的是烟花的纵向位置。通过Math的random方法，将烟花出现的位置限定在画布之中。烟花的phase属性有两种取值，fly表示烟花在上升，explode表示烟花爆炸。通过if条件分支语句来根据不同的属性值执行不同的代码。具体实现代码如下：
function resetFirework(firework) {
firework.x = Math.floor(Math.random() * canvas.width);
firework.y = canvas.height;
firework.age = 0;
firework.phase = 'fly';
}
explode中定义的属性包括： 碎片散开轨迹中的各点的坐标(x,y)、碎片弧状轨迹的偏转角度trailAge、烟花逐渐散开时候的fade、烟花爆炸后的颜色、文字的颜色。具体实现代码如下：
firework.sparks.forEach((spark) => {
for (let i = 0; i < 10; i++) {
let trailAge = firework.age + i;
let x = firework.x + spark.vx * trailAge;
let y = firework.y + spark.vy * trailAge + spark.weight * trailAge * spark.weight * trailAge;
let fade = i * 20 - firework.age * 2;
let r = Math.floor(spark.red * fade);
let g = Math.floor(spark.green * fade);
let b = Math.floor(spark.blue * fade);
context.beginPath();
context.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',1)';
context.rect(x, y, 4, 4);
context.fill();
}
}
新年烟花绽放动画效果如图5125所示。
图5125新年烟花绽放动画效果
5. JS完整代码
JS完整代码如下所示：
const max_fireworks = 5,
max_sparks = 50;
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let fireworks = ［］;
for (let i = 0; i < max_fireworks; i++) {
let firework = {
sparks: ［］
};
for (let n = 0; n < max_sparks; n++) {
let spark = {
vx: Math.random() * 5 + .5,
vy: Math.random() * 5 + .5,
weight: Math.random() * .3 + .03,
red: Math.floor(Math.random() * 2),
green: Math.floor(Math.random() * 2),
blue: Math.floor(Math.random() * 2)
};
if (Math.random() > .5) spark.vx = -spark.vx;
if (Math.random() > .5) spark.vy = -spark.vy;
firework.sparks.push(spark);
}
fireworks.push(firework);
resetFirework(firework);
}
window.requestAnimationFrame(explode);
function resetFirework(firework) {
firework.x = Math.floor(Math.random() * canvas.width);
firework.y = canvas.height;
firework.age = 0;
firework.phase = 'fly';
}
function explode() {
context.clearRect(0, 0, canvas.width, canvas.height);
fireworks.forEach((firework,index) => {
if (firework.phase == 'explode') {
firework.sparks.forEach((spark) => {
for (let i = 0; i < 10; i++) {
let trailAge = firework.age + i;
let x = firework.x + spark.vx * trailAge;
let y = firework.y + spark.vy * trailAge + spark.weight * trailAge * spark.weight * trailAge;
let fade = i * 20 - firework.age * 2;
let r = Math.floor(spark.red * fade);
let g = Math.floor(spark.green * fade);
let b = Math.floor(spark.blue * fade);
context.beginPath();
context.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',1)';
context.rect(x, y, 4, 4);
context.fill();
}
});
firework.age++;
if (firework.age > 100 && Math.random() < .05) {
resetFirework(firework);
}
} else {
firework.y = firework.y - 10;
for (let spark = 0; spark < 15; spark++) {
context.beginPath();
context.fillStyle = 'rgba(' + index * 50 + ',' + spark * 17 + ',0,1)';
context.rect(firework.x + Math.random() * spark - spark / 2, firework.y + spark * 4, 4, 4);
context.fill();
}
if (Math.random() < .001 || firework.y < 200) firework.phase = 'explode';
}
});
context.font = "100px Bebas Neue";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText("新年快乐!", canvas.width/2, canvas.height/3);
context.font = "50px Bebas Neue";
context.fillText("记录烟花绽放", canvas.width/2, canvas.height/1.7);
context.fillText("2021", canvas.width/2, canvas.height/1.5);
window.requestAnimationFrame(explode);
}
5.3数字视频设计与制作
数字视频技术在多媒体应用中占据着非常重要的位置，以其生动直观的特点在诸多领域得到了广泛的应用。
5.3.1Premiere Pro工具
Adobe公司推出的Premiere软件系列，极大地推动了视频后期制作的技术发展。Premiere以其直观的操作界面、简明的操作风格、多彩的画面过渡效果等优势，在影视制作领域取得了巨大的成功，被广泛应用于电视台、广告制作等领域，成为
Windows和macOS平台上应用最为广泛的视频编辑软件之一。
Premiere支持许多文件格式，主要包括以下几种格式。
(1) 视频素材文件格式： AVI、MOV、DV、MPEG等。
(2) 音频素材文件格式： WAV、MP3、AIF等。
(3) 图像序列素材格式： FLC、FLI、GIF等。
(4) 静止图像素材格式： BMP、JPG、PCX、TIF、PSD等。
1. 工作界面介绍
Premiere Pro CC 2021的工作界面主要由菜单栏、“项目”面板、源素材监视器、节目监视器、
“时间线”面板、工具栏等组成，如图5126所示。
图5126Premiere Pro CC 2021工作界面
1) 菜单栏
菜单栏位于工作界面的上方，通过执行菜单中的命令来完成视音频素材的各种编辑与操作。
2) “项目”面板
“项目”面板主要用于导入、存放和管理素材(视频、音频、图片等)，在进行影片编辑时，通常需要将所用素材预先存放在“项目”面板中。在成功导入素材文件后，根据素材的具体情况对其进行分类、重命名等操作。在“项目”面板中双击某素材后，便可以在“源素材监视器”中播放该素材的画面内容，极大地方便了用户查看和调用素材。
“项目”面板组成如图5127所示，按照功能的不同将其分为以下几个区域。
图5127“项目”面板
(1) 查找区。查找区主要用来对项目面板中的素材进行定位。工具条中的“查找”按钮
可用于按照名称、标签或出/入点等在项目面板中查找素材。
(2) 素材列表。
素材列表位于“项目”面板中间部分，主要用于排列当前编辑的项目文件中的所有素材，可以显示包括素材类别图标、素材名称、格式在内的相关信息。
图5128中素材以列表方式显示，如果单击“项目”面板下部的工具条中的“图标视图”按钮，素材将以缩略图方式显示； 再单击工具条中的“列表视图”按钮，可以返回列表方式显示。
(3) 工具条。
工具条位于“项目”面板的最下方，在这里主要提供了一些常用的功能按钮，便于用户进行快捷操作。
(4) 快捷菜单。
单击“项目”面板右上角的
按钮，会弹出快捷菜单，该菜单命令主要用于对“项目”面板素材进行管理。
注意，在默认情况下，“项目”面板不显示素材预览区，可以单击面板右上角的
按钮，在弹出的菜单中选择“预览区域”命令，即可显示素材的缩略图及相关信息。
3) “监视器”面板
“监视器”面板分为左右两个视窗(监视器)，如图5128所示。左边是源素材监视器，主要用来预览“项目”面板中选中的某一原始素材。在“项目”面板中双击某个素材或拖曳某个素材后，则该素材就会显示在源素材监视器中。右边是节目监视器，主要用来预览“时间线”面板中当前时间指针所在位置的图像。
图5128监视器面板
4) “时间线”面板
“时间线”面板是以轨道的方式实施视频音频组接编辑素材的阵地，主要由“时间显示区”“轨道区”以及控制按钮组成，如图5129所示。现简单介绍如下。
图5129“时间线”面板
(1) 时间显示区。
时间显示区是“时间线”面板工作的基准，主要包括时间码、时间标尺和时间线指针。其中，左上方的时间码用于显示时间线指针的当前位置，用户可以自行输入时间码数值指定时间线指针的位置； 时间标尺用于显示序列的时间，其时间单位以项目设置中的时基设置(一般为时间码)为准。
(2) 轨道区。
轨道区主要包括视频轨道和音频轨道，主要用来放置和编辑视频、音频素材。用户可以对现有的轨道进行添加和删除操作，还可以对轨道进行锁定、隐藏、扩展和收缩等操作。用户可以在轨道的空白处右击鼠标，通过弹出的快捷菜单中的“添加轨道”
“删除轨道”等菜单命令实现轨道的增减。
5) “媒体浏览器”面板
“媒体浏览器”面板可以显示所有系统中加载的卷的内容。媒体浏览器为用户显示了剪辑，而屏蔽了其他文件，并且拥有可定制的、用于查看相应元数据的视窗。可以从媒体浏览器直接在源监视器中打开剪辑，如图5130所示。
6) “信息”面板
“信息”面板用于显示在项目窗口中所选中素材的相关信息，主要包括素材名称、类型、大小、开始及结束点等信息，如图5
131所示。
图5130“媒体浏览器”面板
图5131“信息”面板
7) “历史记录”面板
“历史记录”面板用于显示用户进行操作的历史记录，如图5132所示。
8) “效果”面板
“效果”面板中存放了Premiere Pro CC 2021自带的各种音频特效、视频特效和视频切换效果，方便用户为素材片段添加各种特效，如图5133所示。
图5132“历史记录”面板
图5133“效果”面板
9) “效果控件”面板
在为素材文件添加了音频、视频特效之后，还需要在“效果控件”面板中对其进行相应的参数设置，如图5134所示。
图5134“效果控件”面板
10) “音轨混合器”面板
“音轨混合器”面板主要用于完成对音频素材的各种加工和处理工作，如混合音频轨道、调整各声道音量平衡或录音等，如图5135所示。
11) “元数据”面板
通过“元数据”面板查看和编辑选定素材的元数据，使用此面板可将注释、标记添加到素材中，如图5136所示。
图5135“音轨混合器”面板
图5136“元数据”面板
12) 工具栏
工具栏是视频与音频编辑工作的重要编辑工具，可以完成许多特殊编辑操作，如图5137所示。
图5137工具栏
图中某些工具的右下角有一个三角形符号，表示这里存在一个工具组，尚有隐藏工具未显示。单击该工具并按住鼠标不放，就会显示该工具组的所有工具。
各工具的具体功能如下。
(1) “选择”工具： 该工具主要用于选择和移动对象、调节对象关键帧等操作。
(2) “轨道选择”工具
、
： 长按该图标，可选择“向前选择轨道”工具或“向后选择轨道”工具，该工具主要用来选择轨道上从第一个被选择的素材开始到该轨道结尾处的所有素材文件。
(3) “波纹编辑”工具： 该工具主要用来拖动片段的切出点，将片段的长度进行改变，相邻片段长度不变，总的持续时间长度不变。
(4) “滚动编辑”工具： 该工具主要用来调节某素材与其相邻素材的长度，调整后所有素材的长度不改变。
(5) “比率拉伸”工具： 该工具主要用来改变片段的时间长度。当使用该工具对片段的时间长度改变时，将会自动调整素材的播放速率，以适应新的时间长度。
(6) “剃刀”工具： 该工具主要用来将素材分割成两个或多个素材。
(7) “滑动”工具
、
： 长按该图标，可选择“外滑”工具或“内滑”工具，该工具主要用来改变片段的开始帧和结束帧的位置，而不影响相邻的其他片段。
(8) “钢笔”工具： 该工具主要用来在编辑字幕素材时绘制曲线图形。
(9) “矩形”工具
： 该工具主要用来在节目监视器窗口绘制矩形。
(10) “椭圆”工具
： 该工具主要用来在节目监视器窗口绘制椭圆形。
(11) “手形”工具： 该工具主要用来移动“时间线”面板中的片段位置，以显示影片的不同区域。
(12) “缩放”工具： 该工具主要用于缩放“时间线”面板中的片段。在任意位置单击鼠标可以放大该位置的片段； 在任意位置按住Alt键单击鼠标可以缩小该位置的片段。
(13) “文字”工具
： 长按该图标，可以选择“垂直文字”工具
，该工具可以为素材添加字幕文件。
2. 素材的导入及播放
素材是进行影片编辑的原材料，素材的成功导入与整理对于影片的编辑、处理起着至关重要的作用。在素材成功导入到“项目”面板后，通过“源素材监视器”进行播放预览是进行素材内容选择的最佳方式。
1) 导入素材到“项目”面板
在具体进行影片编辑之前，首先需要将素材导入到“项目”面板中，然后再对其进行编辑。通过执行“文件”→“导入”菜单命令，弹出“导入”对话框，在该对话框中选择所需要导入的素材文件即可。用户还可以通过双击“项目”面板的空白区域
打开“导入”对话框。此外，按住Shift键的同时单击素材，可以选择连续多个文件； 按住Ctrl键的同时单击素材，可以选择不连续的多个文件。
提示： 单击“导入”对话框中的“导入文件夹”按钮，可以实现将文件夹中的素材一次性全部导入到“项目”面板中。
在进行影片制作时，经常会用到各种各样的素材(图片、音频、视频、字幕等)，为了便于素材的查找与使用，应该对其进行统一的规划与整理。当素材的文件较多时，需要对其进行分门别类的管理。在“项目”面板中的空白区域右击鼠标，在弹出的快捷菜单中选择“新建素材箱”命令，此时便会出现一个默认名称为“素材箱 01”的素材箱，在对该素材箱进行重命名后，将所需要的素材分类导入到相应的素材箱中即可。
2) 导入素材到“时间线”面板
将素材文件导入到“项目”面板，只是为数字视频编辑准备好了原材料，而视频的编辑主要是在“时间线”面板中来完成。当素材文件从“项目”面板添加到“时间线”面板后，通常将其称为片段，主要包括视频片段、音频片段、动画片段和静止图像等。
在“时间线”面板中导入素材比较简单，最为直接的方法就是将“项目”面板和“源素材监视器”中的素材拖曳到“时间线”面板的音、视频轨道上。在成功导入了素材文件后，可以通过拖动“时间线”面板下方的
滑块来改变轨道中片段的显示尺寸。在默认状态下，“时间线”面板中设有3条视频轨道和3条音频轨道，用户可以根据实际情况自行进行轨道的添加与删除。
此外，在进行影片编辑时，为了避免在进行片段编辑时影响到相邻轨道中的素材文件，可以将其他轨道进行锁定，单击每个轨道前面的“锁定/启用轨道”按钮即可。当轨道被锁定后，单击“锁定”
按钮可以解除锁定。
提示： 在进行素材的放置时，应该将素材的首尾相连，如果素材的首尾之间有间隔，则会出现黑屏。
3) 播放与设置素材
监视器除了用来播放素材或节目外，还可以完成视频片段入点和出点的设置，主要通过监视器下方的功能按钮实现入点、出点等设置，如图5138（a）所示。单击监视器右下角的加号可以打开按钮编辑器，显示全部按钮如图5138（b）所示。
图5138功能按钮
各按钮的具体功能如下。
(1) 标记入点
： 用于设置素材的入点，按住Alt键的同时单击该按钮，设置被取消。
(2) 标记出点
： 用于设置素材的出点，按住Alt键的同时单击该按钮，设置被取消。
(3) 添加标记
： 为源素材添加无编号标记，通常可以设置100个编号标记。
(4) 清除入点
： 用于清除已经设置的入点。
(5) 清除出点
： 用于清除已经设置的出点。
(6) 转到上一标记
： 单击该按钮跳转到前一个编辑点。
(7) 转到上一编辑点
： 单击该按钮将编辑线快速移动到前一个需要编辑的位置。
(8) 后退一帧
： 单击该按钮倒退一帧图像。
(9) 播放/停止切换
： 单击该按钮播放/停止素材或项目。
(10) 前进一帧
： 单击该按钮前进一帧图像。
(11) 转到下一标记
： 单击该按钮跳转到下一个编辑点。
(12) 转到下一编辑点
： 单击该按钮将编辑线快速移动到后一个需要编辑的位置。
(13) 转到入点
： 单击该按钮，可以从当前位置跳转到素材的入点位置。
(14) 转到出点
： 单击该按钮，可以从当前位置跳转到素材的出点位置。
(15) 从入点到出点播放视频
： 单击该按钮后，播放入点到出点位置之间的图像内容。
(16) 循环
： 单击该按钮循环播放素材或项目。
(17) 安全边距
： 单击该按钮，在预览区中显示安全框，在安全框内部的内容为可视部分。
(18) 插入
： 单击该按钮会将设置好入点、出点的素材文件插入到“时间线”面板中所选择轨道的当前位置上，如果轨道的当前位置上有素材，则会将轨道上的素材后移，项目的时间加长。
(19) 提升
： 单击该按钮会将设置好入点、出点的素材文件从“时间线”面板中所选择轨道的当前位置上抽出，与之相邻的片段不会改变位置。
(20) 覆盖
： 单击该按钮会将设置好入点、出点的素材文件插入到“时间线”面板中所选择轨道的当前位置上，如果轨道的当前位置上有素材，则会将轨道上的素材进行覆盖，项目的时间不变。
(21) 提取
： 单击该按钮会将设置好入点、出点的素材文件从“时间线”面板中所选择轨道的当前位置上抽走，其后的片段前移，填补空缺，对于其他未锁定轨道上位于该选择范围内的素材，也同样进行删除。
(22) 导出帧
： 单击该按钮可以获取图像素材的单帧画面。
(23) 播放邻近区域
： 该按钮用于预览当前帧附近的视频。
(24) 多机位录制开关
： 启用该按钮可以录制编辑好的多机位视频。
(25) 切换多机位视图
： 该按钮可同步多机位拍摄的视频，提高剪辑效率。
(26) 还原裁剪会话
： 该按钮可以使剪辑点恢复到原始位置。
(27) 切换代理
： 在计算机配置不高的情况下，如果原素材太大，直接在原素材上编辑会出现卡顿，使用该按钮可以提高工作效率。
(28) 切换VR视频显示
： 该按钮用于VR视频剪辑的场景中。
(29) 全局fx静音
： 该按钮可用于关闭用到的特效，方便查看特效使用前后的对比。
(30) 显示标尺
： 该按钮主要用于在“节目监视器”面板中显示标尺。
(31) 显示参考线
： 该按钮主要用于在“节目监视器”面板中显示参考线。
(32) 在节目监视器中对齐
： 启用该按钮，可将文本、图形等在节目监视器中对齐。
(33) 比较视图
： 该按钮主要用于精确地查看剪辑前后的视频画面。
3. 视频素材编辑
素材开始帧的位置称为入点，素材结束帧的位置称为出点。在实际操作中，可以通过“监视器”面板和“时间线”面板进行素材的编辑。
1) 素材的裁剪编辑
单击工具栏中的“选择”工具
，然后在“时间线”面板中，单击需要进行剪裁的素材入点或出点，然后按住鼠标左键进行拖曳即可，如图5139所示。使用该方法裁剪素材只是影响所操作的素材边缘，并不影响与之相邻的素材，并且不能够改变源素材的长度。
图5139使用“选择”工具设置素材出点
2) 素材的滚动编辑
单击工具栏中的“滚动编辑”工具，进行素材长度的调节。该工具的工作原理是在调整轨道上的素材长度时，素材的总长度不变，而是通过减少或增加相邻素材的长度来实现该素材长度的调整。使用该工具进行素材裁剪时，单击该按钮后将鼠标指针移动到素材边缘位置上拖动鼠标指针便可以改变素材的长度，如图5140所示。
图5140素材的滚动编辑
3) 素材的波纹编辑
波纹编辑是指在轨道上进行素材长度的调整时，只是改变该素材的长度而其他素材则不会受到影响，但该轨道上以及其他所有未被锁定的轨道上的素材位置将会发生相应的改变。如图5141所示，将“视频1”轨道中的第一个片段长度变短后，该轨道上的第二个片段长度及“视频2”轨道上的片段长度不变，但项目的总长度变短。
图5141素材的波纹编辑
图5142“素材速度/持续时间”
对话框
4) 改变素材的长度和播放速度
在进行影片编辑过程中，有时需要设置素材的播放速度来达到特定的效果。在“时间线”面板中选定了需要改变播放速度的素材片段后，右击鼠标，在弹出的快捷菜单中，执行“速度/持续时间”命令，弹出如图5142所示的“素材速度/持续时间”对话框，在“速度”或“持续时间”的位置上输入相应的数值后，单击“确定”按钮即可。对话框中的参数介绍如下。
(1) 速度。
用于设置素材的播放速度，默认情况为100%。当其值大于100时，素材播放速度加快； 当其值小于100时，素材播放速度变慢。
(2) 持续时间。
用于显示素材的播放总长度，当“速度”值发生变化时，该值也将会随之发生变化。同样，也可以通过该选项的值来完成素材播放速度的设置。当设置值大于默认长度时，素材的播放速度将变慢； 当设置值小于默认长度时，素材的播放速度将变快。
(3) 倒放速度。
启用该复选框后将会使素材倒放，即素材的入点变为出点，出点变为入点。
(4) 保持音频音调。
在调整了音频素材的播放速度后，启用该复选框，音频素材只是改变其播放速度而保持原有的音调。
5) 视频切换效果
在进行影片制作中，当一段视频结束后紧接着另一段视频，这就是所谓的镜头切换。在影片编辑过程中，为了增强切换效果的艺术性、渲染性，经常使用各种转换特效对影片进行修饰。转换特效在制作中又叫作转场，切换的方法属于无技巧转场，它只是利用
图5143视频切换效果
镜头的自然过渡将两个场面进行连接。作为一种特殊的艺术表现形式，切换效果在影片制作中得到了越来越多的运用，
Premiere Pro CC 2021提供了许多种视频切换方式，如淡出淡入、划出划入、画中画、三维动画转场效果以及各种翻页效果等。添加视频切换效果的操作比较简单，但是如果想要熟练使用各种过渡效果，必须多练习、多实践、多摸索。
在Premiere Pro CC 2021中，所有的视频切换效果均放置在“效果”面板中，如图5143所示。单击该面板中的“
视频过渡效果”按钮，在其中选择相应的转场效果。然后将所选择的转场效果拖到视频轨道上两段视频素材的交界位置上即可。此时，在素材之间会出现转场标记。
在对素材应用转场效果时，用户还可以在“效果控制”面板中设置转场的持续时间等属性。双击视频轨道上的转场效果，打开“效果控件”面板，然后根据实际需要进行相应的属性设置即可，如图5144所示。
图5144切换效果属性设置
提示： 在将素材分别放到视频1、视频2轨道时，要确保两个素材有一部分的重叠区域，只有这样才能应用切换效果。
4. 添加字幕
字幕是影片制作中重要的视觉元素，主要包括文字、线条及几何图形等。在Premiere Pro CC 2021中，主要通过“字幕设计器”窗口进行字幕制作，该设计器集成了各种排版控制，如文字轮廓、行距、字符间距和基线位移等。
利用字幕设计器可以制作复杂、多样化的字幕，并且可以绘制各种图形并将其作为字幕素材。单击执行“文件”→“新建”→“旧版标题”菜单命令，在弹出的“新建字幕”对话框中输入所建字幕的名称后，打开如图5145所示的字幕设计器。
图5145字幕设计器
字幕设计器中的各区域功能说明如下。
(1) 字幕工具区： 主要放置用于创建字幕的文本、图形等工具。
(2) 字幕工作区： 该区域是字幕设计器的主要工作区域，在该区域内可以利用各种工具创建所需要的字幕或图形，并可以实时进行预览。
(3) 预设模板区： 在该区域内，可以预览到字幕添加的各种效果，如阴影、发光、倾斜等。
(4) 字幕属性区： 在该区域，可以对所选择字幕或图形的基本属性、填充属性进行设置，还可以为图形进行描边或者添加阴影。
(5) 选项设置区： 在该区域内，呈现了字幕工具区所选定的工具的属性设置，用户可以在该区域内对其进行设置与修改。
5. 输出影片
当在“时间线”面板中完成了各种素材的编辑工作后，通过Premiere的输出功能可以将其输出为视频文件。通过执行“文件”→“导出”→“媒体”命令，弹出如图5146所示的“导出设置”对话框，进行输出影片的类型、音频、视频等属性设置。
图5146“导出设置”对话框
提示： 在进行影片输出之前，需要对素材进行渲染，渲染需要的时间取决于作品大小、帧速率
及压缩设置。可以通过执行“序列”→“渲染完整工作区域”命令，进行影片渲染。此外，也可以
按Ctrl+Enter快捷键渲染影片。
5.3.2制作实例： 多画面分屏效果视频
利用现有影音素材通过Premiere制作一个多画面分屏效果视频
，制作好的视频内容截图如图5147所示。
图5147视频内容截图
由于该实例的综合性较强，故将其分为几个部分进行制作。
1. 素材的导入与编辑
(1) 执行“文件”→“新建”→“项目”命令，在弹出的“新建项目”对话框中新建一个预置参数为DVNTSC 标准48kHz，名为“分屏效果”的项目，其他采用默认设置。
(2) 在“项目”面板的空白处双击鼠标，在“导入”对话框中选择所需要的素材文件，并将其导入到“项目”面板中，如图
5148所示。
图5148导入素材
(3) 将视频素材拖入“时间线”面板中的视音频轨道中，如图5149所示。
(4) 选中“海边”素材后右击，在弹出的快捷菜单中，执行“取消链接”命令，将素材对应的音频删除，如图5149所示。同理，将另外两个视频素材对应的音频也删除。
图5149删除素材音频
(5) 选中“叶子”素材后右击，在弹出的快捷菜单中，打开“剪辑速度/持续时间”对话框，将速度减慢，得到15秒的视频片段，如图5150所示。然后单击“确定”按钮结束设置。
图5150修改视频持续时间
同理，将另外两个视频素材的持续时间都设置为15秒，如图5151所示。
图5151修改视频片段
2. 素材编辑
(1) 单击“效果”面板，将如图5152所示的“线性擦除”视频特效添加到时间线上的“海边”素材。
图5152添加视频特效
(2) 然后在 “效果控件”面板中找到 “线性擦除”，调整其“过渡完成”和“擦除角度”的参数如图5153所示。
(3) 为“大海”素材添加“线性擦除”视频特效，并在“效果控件”面板中设置该特效的属性参数，如图5154所示，实现分屏效果。
3. 添加字幕和音乐
(1) 执行“文件”→“新建”→“旧版标题”命令，在弹出的新建字幕对话框中设置字幕的名称为“矩形框”，单击“确定”按钮，如图5155所示。
(2) 在弹出的“字幕设计器”窗口中通过“矩形”工具创建如图5156所示的矩形。
图5153视频特效参数修改
图5154视频特效参数修改
图5155新建字幕
图5156创建矩形
(3) 重复步骤(2)，直到得到如图5157所示的多个矩形。
图5157创建矩形的最终效果
(4) 将“项目”面板中的字幕文件“矩形框”导入“时间线”面板中的“视频4”轨道中，如图5158所示。
图5158字幕导入
(5) 将“项目”面板中的音频文件Good Time导入“时间线”面板中的“音频1”轨道中，如图5159所示。
图5159音频导入
4. 输出视频
执行“文件”→“导出”→“媒体”命令，设置输出影片的名称、格式等属性后，单击“导出”按钮，弹出 “渲染”对话框。等待一段时间，结束输出，如图5160所示。
图5160导出影片
5.4音频媒体设计与制作
5.4.1Cool Edit Pro工具
Cool Edit Pro是美国Adobe Systems公司开发的一款功能强大、效果出色的多轨录音和音频处理软件。它可以用来编辑音调、歌曲的一部分，如声音、弦乐、颤音、噪声或调整静音。而且它还提供有多种特效，如放大、降低噪声、压缩、扩展、回声、失真、延迟等。可以同时处理多个文件，在几个文件中进行剪切、粘贴、合并、重叠声音操作。它可以生成的声音有噪声、低音、静音、电话信号等。该软件还包含有CD播放器，其他功能包括支持可选的插件、崩溃恢复、支持多文件、自动静音检测和删除、自动节拍查找、录制等。另外，它还可以在AIF、AU、MP3、Raw PCM、SAM、VOC、VOX、WAV等文件格式之间进行转换，并且能够保存为RealAudio格式。
1. 工作界面介绍
Cool Edit Pro的工作界面主要由菜单栏、工具栏、资源管理器、时间线、当前时间窗、走带按钮等组成，如图5161所示。
图5161Cool Edit Pro 工作界面
1) 菜单栏
菜单栏位于工作界面的上方，通过执行菜单中的命令来完成音频素材的各种编辑与操作。
2) 工具栏
工具栏提供了音频编辑操作的快捷工具按钮，可实现编辑界面切换、音频块切割、包络线编辑等操作，如图5162所示。
图5162工具栏
3) 资源管理器
“资源管理器”面板主要用来存放音频素材、编辑效果，如图5163所示。在资源管理器中可以直接将素材文件插入音轨中，也可以直接将文件打开编辑。
(1) 文件界面。
文件管理界面中的“打开文件”按钮用于将文件添加到资源管理器； “关闭”
按钮
用于将文件从资源管理器中移除而不是删除物理文件； “插入多轨中”按钮
，可以将所选文件插入到音轨中； “编辑文件”
按钮
可以对选中的文件进行编辑。
(2) 效果界面。效果选择界面如图5164所示。
效果界面可以实现对声效的编辑，选中待编辑的音轨后，双击效果面板的响应效果，就会弹出编辑窗口，如双击“变速器”效果，弹出“变速器”编辑窗口，如图5165所示。
图5163文件管理界面
图5164效果选择界面
图5165“变速器”编辑窗口
4) 时间线面板
时间线面板是对音频编辑的主要区域，在这个区域可以实现对音频文件的各种编辑，如声音的裁剪、混合等。时间线面板主要由“轨道区”“时间显示区”等组成，如图5166所示。
图5166时间线面板
5) 走带按钮
“走带按钮”实现对音轨文件的播放控制，如播放、暂停、录音等，如图5167所示。
图5167走带按钮
6) 选择/查看面板
选择/查看面板可以查看被选择音频的开始和结束的时间点，显示选择音频的时间长度。查看部分可以查看在波形缩放状态下编辑的开始和结束时间点，显示查看编辑视频的时间长度，如图5168所示。
7) 当前时间窗
当前时间窗显示编辑或播放时时间线指针所处的位置，在时间窗中可以以不同单位显示，如采样、小节和拍子，如图5169所示。其中显示效果如图5170所示。
图5168选择/查看面板
图5169计时显示方式选择
图5170显示效果
8) 工程属性面板
工程属性面板用于设置工程的播放速度、声调、节拍等。单击“高级”按钮可以对速度、节拍等进行设置，如图5171所示。
图5171工程属性面板高级设置
2. 基本操作
通过Cool Edit Pro工作界面可以方便地实现对声音的各种编辑，如录音、音频剪切、对声音进行调整、添加特效等，具体介绍如下。
1) 录音
录制声音前需要调整麦克风保持可用，选择需要录音的音轨，将时间线调整到需要插入录音的位置，右击鼠标，在弹出的快捷菜单中选择“激活录音状态”命令选项，然后单击“走带按钮”中的“录音”按钮，即可实现在时间线处开始录制声音。
2) 音频剪切
在音频编辑中常常需要对不需要的音频进行剪切，在Cool Edit Pro工作界面中只需右击所选音频块，在弹出的快捷菜单中选择“分割”选项即可将音频从时间滑块处分割，通过右键可以拖动音频块的位置。
3) 音量/声相调整
右击需要调整的音频块，在弹出的快捷菜单中，选择“调整音频块音量”或“调整音频块声相”选项，即可分别对音频块的音量和声相进行调整，如图5172所示。
图5172调整音量和声相
4) 编辑特效
选择音轨，切换到波形编辑界面，通过资源管理器中的“效果”面板，双击相应的特效，即可弹出效果编辑框，以“回声”为例，双击“回声”即可弹出“回声”效果编辑框，如图5173所示。
图5173“回声”效果编辑框
5) 输出文件
工程文件保存后是以.ses为后缀的文件，若要输出可以播放的MP3等类型的文件，则执行“文件”→“混缩另存为”命令，就可以把制作的原声曲目保存为WAV、MP3、WMA等音频格式。
5.4.2制作实例： 《致青春》歌曲制作
1. 从现有的歌曲中提取伴奏音乐
(1) 导入音乐。启动Cool Edit Pro软件，如图5174所示，确保当前为多轨界面，即单击工具栏左侧第一个按钮，可在波形编辑界面及多轨界面之间切换，在第一音轨空白处右击鼠标，从弹出的快捷菜单中选择“插入”→“音频文件”选项，在显示的对话框中找到从网上下载的“致青春.mp3”文件，该MP3将以波形图显示在音轨1中。
图5174导入声音文件
注意： 一定要把上面那个倒立的黄色三角形游标拖到音轨的最左侧，因为插入的音频文件起点将以该游标的位置为准。后面的录音中，也是以游标的位置为起点的。
(2) 判断声道类型。按Space键播放导入的MP3歌曲。然后在音轨1的波形图上右击鼠标，从弹出的快捷菜单中选择“调整音频块声相”选项，在打开的“声相”对话框中，先把滑块拖到最左侧(即左声道音箱)试听一会儿，再把滑块拖到最右侧(即右声道音箱)试听一会儿，如图5175所示。可以听出是声道混合型的歌曲，即左、右声道的声音一模一样，则需要对波形文件处理一下。
图5175调整音频块声相
(3) 消去人声。单击工具栏上“波形编辑/多轨界面切换”按钮(或按F12键)，切换到波形编辑界面中。在左、右声道交界处双击选中两个声道中的所有内容，再执行菜单“效果”→“波形振幅”→“声道重混缩”命令，在弹出的对话框中的“预置”模板中选择Vocal cut(消去人声)选项，如图5176所示。处理好后，单击“波形编辑”/“多轨界面切换”按钮回到多轨界面中。
图5176消去人声
2. 录制原声歌唱
录音是所有后期制作加工的基础，这个环节出现问题是无法靠后期加工补救的，所以如果是原始的录音有较大问题，就必须重新录制，录制的过程如下。
(1) 打开音量控制窗口，选择“选项”→“属性”选项，并在“属性”对话框中选中“录音”单选按钮，并单击“确定”按钮。
(2) 此时弹出录音控制窗口，在“麦克风”下的“选择”前的方框里打钩。音量滚动条用来控制录音音量大小，如图5177所示。
图5177调整录制麦克风音量
注意： 麦克风的音量在噪声小的前提下尽量开大，伴奏歌曲尽量小，这样可以让用户更清楚地听到自己的声音，可以更好地发觉自己是不是走调。
(3) 录制人声。打开Cool Edit Pro软件进入多音轨界面，右击音轨1空白处，插入所要录制歌曲的MP3/WMA伴奏文件。选择将人声录在音轨2，单击R 按钮。单击左下方的红色录音键，跟随伴奏音乐开始演唱和录制，如图5178所示。
图5178录制人声
(4) 录音完毕后，可单击左下方播音键进行试听，看有无严重的出错，是否要重新录制。
(5) 双击音轨 2 进入波形编辑界面，执行“文件”→“另存为”命令，在弹出的对话框中选择MP3格式将录制的原始人声文件保存为MP3 格式,如图5179所示。
图5179处于波形阶段的人声文件
3. 编辑、优化
(1) 调整音量。
单击第二音轨的R按钮关闭它，然后按Space键试播录音。若感觉音量较小，可以调整音量。右击新录制的声音波形，选择“调整音频块音量”选项，在打开的“音量”对话框中，将滑块向上拖动即可整体调整新录制声音的大小，
如图5180所示。
(2) 添加效果。
单击第二音轨中刚刚录制的波形声音，使其为选中状态(深绿色)，按F12键切换到波形编辑界面中，刚才录制的声音以波形显示。在波形编辑界面中，可以为声音添加多种特殊效果。单击左侧窗格上的“效果”选项卡，其中有一个效果列表，单击“实时效果器”的“房间回声”项，可以调整房间大小获得满意的效果，如图5181所示。
图5180调整音频块音量
图5181增加房间回声
4. 保存歌曲
(1) 制作好伴奏，完成了声音录制、编辑，最后保存文件。按F12键切换到多轨界面中，首先执行“文件”→“另存为”命令保存一个Cool Edit工程文件(后缀为.ses)，这种格式完整保存了各个音轨的信息，方便以后修改。
(2) 接下来执行“文件”→“混缩另存为”命令，就可以把制作的原声曲目保存为WAV、MP3、WMA等流行的音频格式。
5.5网络媒体设计与制作
5.5.1Dreamweaver 2021工具
1. Dreamweaver 2021工具简介
Dreamweaver是著名网站开发工具，由Adobe公司出品。目前有支持Mac、Windows和Linux版本的Dreamweaver。该网页设计软件提供了一套直观的可视界面，供创建和编辑 HTML 网站和移动应用程序。使用专为跨平台兼容性设计的自适应网格版面创建适应性版面。在发布前使用多屏幕预览审阅设计。同时支持网站上传的多线程FTP，是网站开发的重要工具，重点应用于界面设计，同时也具备强大的动态网站开发能力，与其他专业的动态软件开发工具配合能够取得更好的效果。
2. Dreamweaver 2021工具的特点
1) 制作效率高
Dreamweaver可以用最快速的方式将Fireworks、FreeHand或Photoshop等档案移至网页上。对于选单、快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与设计工具，如Flash、Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop进行编辑与设定图档的最佳化，在不需要编写代码的情况下可以完成大部分功能。
2) 网站管理便利
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有链接。使用支持文字、HTML代码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3) 控制能力强
Dreamweaver是唯一提供HTML、可视觉化编辑与源代码编辑同步的设计工具。帧和表格的制作速度快。高级表格编辑功能使用户可以简单地选择单元格、行、栏或作不连续的选取，甚至可以排序或格式化表格群组。Dreamweaver 支持精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供了超强的支持能力给第三方厂商，包含ASP、Apache、BroadVision、Cold Fusion、iCAT、Tango与自行开发的应用软件。
当使用Dreamweaver在设计动态网页时，它的所见即所得的功能让设计者不需要通过浏览器就能预览网页。
建立网页外观的样板，指定可编辑或不可编辑的部分，内容提供者可直接编辑以样式为主的内容却不用担心改变既定的样式。
3. 工作界面简介
Dreamweaver 2021软件安装后，它会自动在 Windows 的菜单中创建程序组。在 Dreamweaver 2021中，它的工具栏是浮动工具栏，可以将工具栏缩小，也可以关闭。在专业术语里面，它们称为“浮动面板”，利用浮动面板控制对页面的编写，而不是利用烦琐的对话框，这是 Dreamweaver 2021编辑网页中最突出的特性。通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程。Dreamweaver 2021网页设计工具，如图5182所示。下面介绍它的3个最重要的浮动面板。
图5182Dreamweaver 2021网页设计工具
1) 启动面板
图5183对象面板
启动面板主要用来快速启动相应的任务，或显示/隐藏相应的浮动面板。如果启动面板是竖向的，那么，可以单击它右
下角的一个小按钮，它就可以变成横向的了，这时可能会发现，它的状态栏上也有这个面板上的所有选项，这也就为网页制作者提供了方便。可以直接从右下角单击相应的栏目进入想要的对话框。
2) 对象面板
对象面板主要功能相当于“插入”菜单，主要是向网页中插入一些对象，如表格、框架、图像、
文件、标签等，它通过一个下拉菜单把要插入的选项都包括在了其中，如图5183所示。
每一个选项中都有若干图标，只要
单击图标，就可以插入想要的对象了。
3) 属性面板
属性面板会随着编辑的内容而变化，图5184是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体、颜色、大小、链接、缩进等，它的右下角还有一个向下的小三角箭头，单击它会展开属性面板，它把一些不常用的属性也列了出来。展开后箭头会变成向上，单击它又会使属性面板复原。属性面板很多，还有图像属性控制面板、层属性控制面板等，用户只要选择要编辑的对象，它就会自动变化，十分方便。所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，还可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住鼠标左键拖动就可以了，同理，把它们组合在一起也是一样的，用鼠标拖动后放到上面即可。
图5184属性面板
利用Dreamweaver工具软件能够开发实现绝大多数HTML、CSS和JavaScript效果，但为了进一步掌握软件的使用，还需要读者进一步学习相关知识，若要开发动态网站需要再掌握一种动态开发技术如JSP、PHP、ASP.NET等，另外数据库知识也是开发动态网站的必备知识。
5.5.2设计流程
1. 需求调研
需求调研是网站设计的第一步，直接决定产品的成败。需求调研主要调研以下4个方面。
1) 功能要求
网站包含的功能模块，如包含信息发布模块、产品展示模块、账号管理模块等。
2) 性能要求
性能要求是指网站运行的效果，主要包括访问量和打开速度。例如，客户要求在100人同时访问网站时，网页的打开速度不能低于5秒，那么就决定了网站设计要少用图片、慎用站外服务。
3) 美观性要求
美观性要求主要是客户对网站的界面设计要求，包括界面风格、色彩等。
4) 行政性技术标准要求
一些单位不仅要求网站在设计和功能上满足要求，还必须要考虑到所在单位的主管部门是否有网站架构、开发技术、编码规格的硬性规定，若有必须提前调研，严格遵守。
2. 规划网站结构
网站功能结构示意图如图5185所示。
图5185网站功能结构示意图
3. 目录规划
一个良好的网站不仅要运行界面美观、功能运行稳定，还必须要结构层次清晰，因此网站规划到技术开发层次时必须要对系统的程序目录进行设计，保证系统有良好的结构，这样会给程序开发和维护带来很大的好处。网站目录规划示例
如图5186所示。
图5186网站目录规划示例
4. 设计网页界面
1) 首页设计
首页设计主要用于展示型的企业，对于首页设计一般要遵循简洁、突出企业特点，因此首页又分为展示型和门户型，其中展示型侧重于企业文化和形象的设计，如图5187所示； 而门户型则侧重于信息的展示，强调导航目录明确、信息分类清晰，如新浪网(www.sina.com.cn)，如图5188所示。
图5187展示型首页设计
图5188门户型首页设计
2) 内容页面设计
内容页面设计一般侧重于详细信息的展示，在设计时注意页面的布局设计，如图5189所示。目前常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型等，在内容页面设计时一般不宜超过3屏，若大于3屏时在设计中可以使用栏目条隔开，使其在视觉具有明显分段感觉。
图5189内容页面设计
5. 设计网页程序
网页程序根据内容不同主要分为以下两种设计方式。
1) 利用Photoshop+Dreamweaver设计
首先利用Photoshop进行页面设计，然后通过Photoshop的切片功能进行切片，切片后生成网页，再通过Dreamweaver设计链接和页面布局和其他脚本功能。
该方式主要针对设计要求比较高，而文字内容相对较少、更新不太频繁的网页。该方式的主要优点在于可以设计艺术效果较高的网站，缺点在于更新比较麻烦。以图5190为例，该网页文字部分均为图片形式的链接，设计效果较好，一般不进行改动，因此适合Photoshop结合Dreamweaver软件进行设计。
图5190首页设计
2) 利用CSS+DIV设计
大型网站如新浪网、网易等信息门户类网站以信息展示为主，栏目、信息更新频繁，这类网站不适合利用Photoshop进行设计，而是利用CSS(样式表)技术与DIV(层)技术配合使用。DIV+CSS是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式，可实现网页页面内容与表现相分离。XHTML基于可扩展标记语言是一种在HTML 基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 如图5189所示的“天津
市河东区人民政府”可以很容易地实现模块添加、样式修改。
6. 准备内容素材
根据需求分析阶段与用户确定的需求准备网站需要的素材，素材的来源包括以下3种。
(1) 用户提供： 主要包括企业标识、宣传用的图片、视频、文字等材料。
(2) 自主开发： 根据网站的设计要求设计文字、图标、声音等。
(3) 拍摄采集： 根据设计要求，用户又无法直接提供的材料，需要进行现场拍摄或根据视频等资料整理加工。
素材收集完成后并不能直接用于网站开发，还需要对素材进行整理、加工成网站可以使用的大小和格式。
7. 内容集成
网站设计阶段一般都设计成首页和内容页面模板，素材和网站页面程序集成后形成各个用户需要的页面，若根据网站需求需要对网站执行速度要求较高，则应将网站设计成静态网页，即不需要服务器执行就可直接展示给用户的网页； 若内容更换频繁
则应设计成动态网页，这时需要设计动态信息发布程序，信息由数据库存储； 事实上大多数网站要兼顾速度、便利性和安全性等方面的因素，将网站设计为伪静态，即以静态的方式展示，以动态的方式管理信息。
8. 网页优化
网站建设完毕后还需要进行优化，优化的目的主要有以下3点。
1) 网站运行更快
网页通常要求5秒内应该打开，不要超过8秒，若太长用户会失去耐心，丧失商业机会，因此需要对网站进行优化来提高速度，优化主要包括： 尽量避免引用站外应用，如天气预报程序、站长统计等程序； 优化图片的大小和格式； 尽可能减少不必要的动画、视频和图像元素。
2) 更容易被检索
网站的建设为了让更多的客户发现、浏览，需要对网站进行优化。例如，在网页程序中添加关键字信息、对网页的标题优化设计、添加爬虫访问定义文件等能起到容易被搜索引擎检索的目的。
3) 网站占用的空间更小
对于大多数企业来讲，网站常采用购买虚拟主机的形式运行，这时网站的大小成为影响成本的重要指标之一，因此在网站发布前应该做到： 清理开发中形成的孤立网页、孤立文件； 对图片、视频等素材采用格式转换的方式减少它的大小； 优化网站结构，多使用模板、CSS、控件等工具来提高网站的程序复用率。
9. 网站测试
网站在发布前需要进行网站测试，测试主要包括： 功能测试，查看网站是否实现设计功能； 性能测试，测试网站性能是否达到设计需求； 兼容性测试，测试网站在不同操作系统、不同浏览器中是否正常显示； 安全性测试，查看网站是否存在安全漏洞。
10. 网站发布
网站发布就是要将开发好的程序放到服务器上运行，使大家可以通过网络访问，目前网站发布主要包括以下两种方式。
1) 本地发布
本地发布即拥有自己的服务器，在自己的服务器上配置IIS服务器发布网站程序。该方式比较灵活，可以进行个性化配置，但成本较高，维护任务较重。
2) 虚拟主机
虚拟主机即租用ISP提供商提供的网站运行空间，只需要将网站上传到空间，进行适当的配置即可提供访问。该方式在访问线程和个性化配置方面受到一定限制，但成本较低，易于维护。
5.5.3制作实例： “浩之航”网站的设计
1. 需求调研
需求调研主要从以下3个方面进行调研。
1) 功能要求
系统实现宣传功能业务范围，方便客户联系到公司，能够发布招聘员工信息，实现在线定舱，客户可以跟踪货物，普及货运知识； 在网站首页集成该公司邮件系统的登录入口集成； 实现自主信息的发布功能。
2) 性能要求
该公司业务客户较多，长期有较多的用户在线跟踪货运，且该公司在百度上做了推广，可能带来较高数量的访问。
3) 美观性要求
需要设计简洁的网站logo，在首页上设计图像轮播效果，体现公司的专业、服务的理念，突出行业特点。
2. 规划网站结构
“浩之航”网站功能结构如图5191所示。
图5191“浩之航”网站功能结构
3. 设计网站目录
“浩之航”网站目录结构如图5192所示。
图5192“浩之航”网站目录结构
4. 设计网页界面
1) 首页设计
根据客户要求设计首页，根据行业特点将网页背景设置为蓝色，网站主体设置Flash图片轮播效果，选用具有行业特点的图片，如图5193所示。
图5193“浩之航”首页设计
2) 内容页面设计
根据调研要求设置内容页面，一般首先设计含有页头、页脚、导航栏和内容布局的页面作为模板页，其他页面的设计在模板页的基础上修改差异化的内容即可，如图5194所示。
图5194“浩之航”内容页面设计
5. 设计网页程序
页面在Photoshop软件设计好后利用切片工具，根据页面显示要求进行切片，如图5195所示。切片完成保存为“Web所用格式”，存储类型为“html和图像”，然后再利用Dreamweaver 软件打开如图5196所示的界面。现在完成了初步设计，还需要利用Dreamweaver对程序进一步设计，如超链接、下拉菜单等程序设计部分。
图5195利用Photoshop切片生成网页
图5196利用Dreamweaver 设计程序
6. 准备内容素材
在首页设计中已经设计了部分图片，但那些图片仅是少部分图片，作用是确定图片风格和规格，而在本阶段的目的则是按照确定的风格和规格设计其他的大量素材,如图5197所示。
图5197首页需要的素材
7. 内容集成
网页媒体包含了大量的图片、链接和脚本程序，在设计阶段结束后，需要将图像素材、脚本素材等集成到页面的相应位置，如本例需要将轮播脚本代码和超链接集成到网页中去。
1) 设计轮播程序集成
轮播程序作为单独的JavaScript脚本程序需要单独集成，只需要在网页的相应位置引入
<script>轮播实现代码略</script>代码，同时调整相应的参数来显示对应图片即可。显示素材中的5张图片，实现方法如下：
<script type="text/javascript">
var pic_width=852; //图片宽度
var pic_height=321; //图片高度
var button_pos=3; //按钮位置，1左，2右，3上，4下
var stop_time=6000; //图片停留时间(1000为1秒钟)
var show_text=0; //是否显示文字标签，1显示，0不显示
var txtcolor="000000"; //文字色
var bgcolor="DDDDDD"; //背景色
var imag=new Array();
var link=new Array();
var text=new Array();
imag［1］="images/01.jpg";
imag［2］="images/02.jpg";
imag［3］="images/03.jpg";
imag［4］="images/04.jpg";
imag［5］="images/05.jpg";
//可编辑内容结束
var swf_height=show_text==1?pic_height+20:pic_height;
var pics=""，links=""，texts="";
for(var i=1; i<imag.length; i++)
{
pics=pics+("|"+imag［i］);
links=links+("|"+link［i］);
texts=texts+("|"+text［i］);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6，0，0，0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="focus.swf">');
document.write('<param name="quality" value="high"><param name="wmode" value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+ '&links='+links+'& texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'& links='+links+'& texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>
2) 设置超链接
在Dreamweaver中将相应的图片设置为超链接，链接到目标网页即可。集成效果如图5198所示。
图5198生成网页效果
8. 网站优化
为提高网站运行速度、提高网站被搜索引擎检索效率，对网站进行了以下3点优化。
(1) 清除程序中的孤立文件，含网页和资源。
(2) 将图片等资源的实际大小调整为显示大小。
(3) 添加标题、关键字信息、网站描述信息。
代码如下所示：
<title>浩之航货运代理有限公司、货运、海运、集装箱，www.tjhzh.com.cn</title>
<meta name="Keywords" content="浩之航货运代理有限公司、货运、海运、集装箱，www.tjhzh.com.cn />
<meta name="Description" content="浩之航货运代理有限公司国家一级代理资质，向超过数万用户服务" />
9. 网站发布
本例采用租用虚拟主机的形式发布，因此需要将网页上传至虚拟主机即可发布，由于网页媒体程序素材文件较多需要长时间上传，因此需要利用FTP工具进行上传，本例以利用CuteFTP上传为例，输入目标主机IP、账号、密码(由ISP服务商提供)即可登录软件，直接将本地目录的网页媒体程序拖曳到虚拟主机目录即可，如图5199所示。
图5199网站发布
5.6游戏设计与制作
5.6.1游戏基础知识
1. 游戏概念
游戏这个概念很难定义，大家从各个角度对游戏进行了定义。下面各种版本的定义。
(1) David Parlett认为游戏要有“目标和工具”： 目标、结果和系列实现规则。
(2) Clark C. Abt认为游戏是包含玩家决策的活动，是在“有限环境”中寻找目标。
(3) Roger Callois认为游戏包含六大属性： “自由”即体验具有选择性而非义务性
； “单独性”即事先设定于某空间和时间中； “易变性”即具有不确定的结果； “非创造性”即不会创造商品和财富；
“规则性”即受规则限制，玩家必须遵守； “虚构”即游戏不是现实生活，而是共享的独立“现实”。
(4) Bernard Suits认为游戏是“自愿付出完成不必要的障碍。”这是最受大家认可的定义。这个定义听起来有些不同，但包含很多先前定义的概念： 自发性、存在目标和规则。“不必要障碍”说明规则故意拖延效率，例如，若一字棋的目标是横向、纵向及对角方向收集3个符号，最简单的方式就是首回合在同一行中写下3个符号，同时让对手无法接触到纸张。但用户并没有这么做，因为游戏有自己的规则，这些规则是游戏体验的来源。
(5) Katie Salen和Eric Zimmerman创作的Rules of Play一书中认为游戏是“玩家参与规则定义的虚拟冲突，进而产生量化结果的机制”。
通过讨论这些定义，总结出游戏包含：
游戏是一种活动、具有规则、包含冲突、具有目标、包含决策，是虚构内容，非常安全，脱离正常生活，有时也指玩家进入“魔法阵”或共享“有趣心态”，它无法给玩家带来物质收获，游戏具有自发性和不确定的结果，是真实内容的再现或模拟，但其本身采用虚拟模式； 游戏缺乏效率，规则会融入限制玩家采用最便捷方式实现目标的障碍； 游戏包含机制，通常这是一个封闭机制，这意味着资源和信息不会在游戏和外在世界间流动； 游戏是一种艺术形式。
2. 游戏设计方法
从历史上来看，第一种游戏设计方法也就是人们所说的“瀑布模式”： 先在纸上设计出整款游戏的轮廓，随后去执行这个设计，然后测试它以确保所有规则的合理性，并添加一些图像让游戏整体看起来更加好看，最后发行游戏。
1) 瀑布模式
瀑布模式之所以如此命名是因为整个流程就像是倾泻而下的水流，只能朝着一个方向前进，如图5200所示。在这个模式下，如果设计者在最后几个步骤中遇到一些需要改变的规则，那么就糟糕了，因为方法论规定设计者不能回到之前的设计步骤中。
2) 迭代过程
如果能够选择回到之前的步骤去修正一些内容是个不错的主意，而这也是人们后来所说的迭代式方法。
如果是瀑布模式，人们便只能沿着设计游戏、执行设计并确保设计可行这一直线路而行动了。
设计者也可以在后来添加一个额外的步骤去评估游戏，即玩游戏并判断它是否有趣或者哪里需要做出调整。随后做出决定： 你是否完成了任务，还是你应该回到之前的设计步骤进行一些完善？如果设计者认为游戏足够优秀了，那么设计者便完成了所有工作。但是如果设计者认为游戏尚待调整，那么就需要回到之前的设计步骤，找到问题所在，并针对性地进行修改，然后再次评估游戏。反复进行这一过程直到游戏真正得以完善。迭代过程如图5201所示。
图5200瀑布模式
图5201迭代过程
如果设计者认为这种方法很耳熟，那是因为它其实等同于科学理论。
(1) 观察： 在玩游戏或者制作游戏中的体验都证实了一些游戏机制的趣味性。
(2) 假设： 认为所编写的这系列特别规则将能够制作出一款有趣的游戏。
(3) 创造一个试验去证实或反驳这一假设： 组织游戏测试并观察游戏是否具有趣味性。
(4) 执行试验： 玩游戏。
(5) 阐述试验结果，并组成一系列新观察。重新回到第一个步骤。
一般来说，迭代次数越多，最后成品的游戏也会越优秀。因此，任何游戏的设计过程必须包含尽可能多的迭代过程，而如果能够越快执行这些过程，那么将能够创造出更好的游戏。所以，电子游戏设计师经常会先在纸上画出游戏原型，并在他们肯定了游戏的核心原则之后交由编程员进行游戏编程，这一过程称为“快速原型”，如图5202所示。
图5202迭代和快速创建原型
3. 游戏的基本元素
游戏的设计方案应该包含以下内容，其中有些属于游戏的部分内容，有些是设计师在研究这些元素时需要考虑的东西。
1) 玩家
游戏支持玩家个数，如一个玩家VS游戏系统的典型游戏“红心大战”，如图5203所示。玩家的数量是固定的，还是可变动的？又如多个玩家 VS 多个玩家的游戏案例“魔兽世界”，玩家间是什么关系？是团队合作还是独自作战？团队之间是否可能有差异？
图5203纸牌游戏
2) 目标
游戏的目标是什么？玩家努力实现什么？在设计游戏时，如果设计者不知道从何下手的话，这通常是设计者可以提出的首批问题之一。一旦明确了目标，许多其他的正式元素似乎就会自然浮现眼前。以下是某些常见的目标。
(1) 捕捉/摧毁。消灭游戏中对手的所有单位。象棋和军旗是为人所熟知的范例，玩家必须消灭所有敌方的棋子才能获得胜利。
(2) 领地控制。玩家的专注点不一定是摧毁对手，也可以是控制棋盘上的某些区域，如“三国”。
(3) 收集。例如，QQ游戏“魔幻卡片”中需要玩家收集各种卡片。许多平台游戏包括某些玩家需要收集特定数量的分散物品才能通过的关卡。
(4) 解决问题。桌游“妙探寻凶”便是此类游戏的范例，游戏的目标是解决谜题。
(5) 追捕/竞速/逃跑。通常来说，在此类游戏中玩家必须奔向或者逃开某些东西，如“超级玛丽”。
(6) 空间排布。许多游戏以元素布置为目标，如电子游戏“俄罗斯方块”。
(7) 建设。“摧毁”的反方向，玩家的目标是将自己的角色提高或资源建设到某种程度。“模拟人生”采用的便是这种元素。
(8) 其他目标的反面。在某些游戏中，当一名玩家采取了游戏规则禁止的做法，游戏结束，这名玩家便是输家，如“扫雷游戏”。
3) 规则(机制)
规则有3种不同的类别： 设定(游戏开始之初就做完的事情)、游戏过程(游戏期间发生的事情)和决定(导致游戏结束的条件及基于游戏状况决定结果的方法)。有些规则是自动的，它们在游戏的某个时刻被触发，与玩家的选择或互动无关。其他的规则决定了玩家可以在游戏中做出的选择或采取的行动，以及这些行动对游戏状态的影响。
4) 资源和资源管理
“资源”是个广义的类别，用它指代所有处于玩家控制之下的东西。很显然这包括某些具体的资源，如DotA中的道具和“怪物之王”中的魔钻，“苦工”开采的沼气、晶石等，同时资源也包含其他处于玩家控制之下的东西。
玩家控制的是何种类型的资源？在游戏过程中如何对这些资源进行操作？这是游戏设计师必须清晰定义的东西。
5) 游戏状态
某些“资源类”的东西并不属于单个玩家，但是仍然属于游戏的一部分，如“红色警戒”中的无主矿产。游戏中的所有东西
包括当前的玩家资源和所有其他的东西。这些东西所构成的游戏在某个时刻的状况就是所谓的游戏状况。
在桌游中，精确定义游戏状况不总是必要的，但是有时思考这个方面很有用。归根到底，规则的含义就是游戏从一种游戏状况过渡到另一种游戏状况所采用的方法。
在电子游戏中，必须有人定义游戏状况，因为它包括所有计算机必须追踪的数据。通常情况下，这个任务会落到程序员身上，但是如果游戏设计师能够清晰地定义整个游戏状况，可以很大地改善编程团队对游戏的理解。
6) 信息
每个玩家可以看到多少游戏状况？改变玩家可以触及的信息数量会对游戏产生很大的影响，即便所有其他的正式元素都维持不变。以下是某些游戏中使用的信息结构。
(1) 有些游戏会提供全部信息，所有的玩家可以在任何时刻看到全部的游戏状况，如象棋游戏。
(2) 游戏包含某些每个玩家独有的信息。在扑克和其他卡片游戏中，每个玩家都有一手只有他们自己能够看到的牌。
(3) 一个玩家可以拥有自己的保密信息，但是其他玩家不能。这通常出现在一对多的玩家结构中，如“星级争霸”的一对多模式。
(4) 游戏本身包含某些所有玩家都无从知晓的信息，如“星际争霸”的多人对系统模式。
(5) 这些方式的结合。许多即时战略计算机游戏设置有“三角洲部队”，向所有玩家隐藏地图上的某些地方，直到他们派某个单位
到敌方视野范围才能看到。因而，有些信息是向所有玩家隐藏的。除此之外，玩家不能看其他人的屏幕，因而每个玩家都不会知道对手的信息，自己的信息也不会被对手知晓。
7) 顺序
玩家以何种顺序采取行动？游戏如何从一个行动流向另一个行动？根据所使用的回合结构不同，游戏的运行方式也有所不同。
(1) 有些游戏是纯粹的回合制： 在游戏中的任何时刻，只有一个玩家在自己的“回合”内采取行动。当他们结束之后，回合转向其他玩家。多数经典桌游和回合制战略游戏都采用这种方法。
(2) 有些游戏是即时性的，玩家以尽量快的速度开展行动。多数面向动作类的电子游戏都采用这种方法。
(3) 其他变体。对于基于回合的游戏而言，玩家要以何种顺序轮流行动呢？以顺时针方向轮流采取行动是普遍的做法。以顺时针顺序随后跳过首个采取行动的玩家以减少先手优势也是在许多现代桌游中采用的改良方法。
(4) 回合制游戏可以被进一步修正，如加入明确的时间限制或其他形式的时间压力。
8) 玩家互动
游戏中的这个层面经常被忽略，但是却是值得考虑的。玩家如何同其他人互动？他们如何影响其他人？以下是某些玩家互动的范例。
(1) 直接冲突，如我攻击你。
(2) 谈判，如你支持我进入蜀国，下个回合我会帮你进入越国。
(3) 交易，如我用木材换取你的麦子。
(4) 信息共享(我上个回合看过那片被覆盖的区域，如果你进入就会触发陷阱)。
9) 主题(或叙事、背景故事及场景)
以上术语的含义对于玩家而言，它们可以互换，都是指游戏中完全不直接影响游戏玩法的部分。
设置这些内容的主要原因有两个： 首先，场景提供了游戏的情感连接，例如，玩家发现自己对象棋棋盘上卒的关注并不像
对“龙与地下城”中的角色关注那样深，虽然这不一定能够让一款游戏比另一款游戏更好，但是确实可以更容易地让玩家在游戏中投入情感； 其次是精心选择的主题能够让游戏学习和玩起来更加容易，因为规则更易于理解。象棋中棋子的移动规则与主题毫无相关，因而学习象棋的玩家必须死记这些规则。相比之下，“城市大富翁”中的角色与它们的游戏功能都存在联系： 建筑工人可以帮助玩家建造建筑物，市长可以招募新定居者等。游戏中多数的行动都很容易记住，因为它们同游戏的主题存在某些联系。
10) 游戏系统
对于这些正式元素，需要注意以下两点。
(1) 如果改变任意一个正式元素，那么可能产生出差异极大的游戏。游戏中的每个正式元素都深层次地影响玩家体验。在设计游戏时，思考所有的元素，确保每个元素都做出慎重的选择。
(2) 这些元素是相互关联的，改变其中一个可能会影响其他元素。规则控制游戏状况的改变，信息有时会变成资源，顺序可能产生不同类型的玩家互动，改变玩家数量可能影响游戏的目标。
一款游戏可能包含多个系统，如“魔兽世界”有战斗系统、任务系统、公会系统和聊天系统等。
5.6.2设计工具
游戏设计同样是一个软件综合应用的设计项目，游戏是具有交互性的程序系统，因此只要具备设计交互式程序的软件均可以设计游戏，如C、VB等程序设计语言及Flash等具备交互设计的动画软件。但只有程序设计软件还不够，游戏过程当中会出现大量的图片、动画、视频、音频，还需要相关素材的设计开发软件，因此游戏的设计是一个软件综合应用的过程。
5.6.3设计流程
1. 创意生成
设计的第一步是必须有一个基本的游戏创意，不一定要完全成形，但至少要有一个基本的概念。创意生成有以下7种方式。
1) 体验法
从玩家体验的角度出发，构想一套能达到期望美学的规则。想一想自己玩游戏时的最好体验，即什么游戏规则能带来那种体验？
2) 规则法
从在日常生活中观察到的规则或系统出发，特别是那些需要人们做出有趣决定的。观察周围的世界，思考什么系统能做成好游戏。
3) 改良法
从现存的、确定的设计出发，然后将其调整提升。这种方法常用于制作游戏续篇。将认为有潜力但价值还没完全发挥出来的游戏进行改良。
4) 技术法
从技术（如新游戏引擎或特别的游戏部件）出发，将其运用于自己的游戏中。在生活的地方有什么东西还没出现在游戏中，但可以添加到游戏中？
5) 拾遗法
从其他资源中搜集材料，如其他游戏还没用上的艺术作品或游戏机制，利用这些设计一款游戏。
6) 剧情法
从游戏的剧情出发，然后找到匹配的规则，做成一款剧情导向型的游戏。什么类型的故事适合做成游戏？
7) 市场研究法
从市场研究出发： 可能知道某类人群还没被开发，可以针对这类人群设计游戏； 或者只知道当前某个主题很热门，且某段时间内不会有太多的游戏出来填补市场，这就是个时机，可以把这个信息转化为可玩的游戏。
将以上方法组合使用。例如，从体验法和剧情出发，可以制作出一款兼顾剧情和玩法的综合型游戏。
2. 原型制作
有了基本想法，下一步就是尽快将其转化为尽可能廉价的可玩模型。这样做可以为测试和返工节省下大量时间。
1) 原型制作的“法则”
制作原型的目的是最大化迭代循环次数，各个重复循环一般包含4个步骤： 设计、原型、测试和评估。下面从各步骤进行分析。
设计游戏的规则时，如果不折中目标，确实无法节省时间，因为匆匆忙忙设计不出好的创意。
通过制定高效的时间表和设计测试可以减少花在游戏测试上的时间，但仍然有一个固有的限制： 在某个时间点上，测试者就得花费这么多时间来测试游戏，不能再仓促了。评估倒是用不了太多时间，（只是根据测试结果，简单地回答是否来决定游戏好不好），所以也不可能从中挤出什么时间了。
因此，节省时间的重任就落到原型制作这个步骤上了，制作可玩的原型时，需要掌握以下3点。
(1) 能快则快。
怎么快怎么来，只要省钱省事，丑点没关系。
(2) 删繁就简。
只做评估游戏必须具备的部分。如果打算测试新的战斗系统，那么不需要制作出整个探测系统。如果要制作卡片游戏，徒手在卡片上完成就好，没必要输入到PPT上，打印在硬纸片上然后用手把它剪下来。原型阶段主要测试规则，而不必在乎图像等素材设计。
(3) 容易调整。
做测试时，会发现不少问题，所以得保证原型容易调整。
2) 纸上原型
纸上原型就是要有一个有实物的、摆到桌面上、不用计算机(或至少不需要代码)也能玩的游戏。编程很好、很强大，但与纸上原型相比，太慢、太贵。纸上原型具有以下4个优点。
(1) 节省资源。
大多数系统只要一支笔加几张纸就能完成了。
(2) 省时。
设计者不需要在编程、布局或美术设计上浪费时间，只要在碎纸片上设计一些样式就够了。
(3) 容易修改。
不喜欢某个数字，可以擦了另写一个。想法用不了，最多浪费一些时间。就像打草稿： 如果第一次画得不太好，浪费
的时间只是那几秒，可以涂掉重来。
(4) 普适性。
纸上原型基本上可以模拟所有系统，一般认为是只针对电子游戏的系统。
通过制作一些可玩的原型，必须切实地设计出系统。不能只是想“这个游戏包含50张不确定的卡片”，所以设计者必须像游戏设计师那样真正地去设计游戏。
3) 纸上原型的缺陷
纸上原型存在以下5个缺陷。
(1) 不适合以敏捷或时间为基础的系统。
有许多以敏捷为基础的非数字化的游戏，如“街霸”系列电子游戏就很难在纸上模拟得很好。
(2) 有些信息对玩家隐藏，但仍需要记录在案，
如在RTS游戏中非常流行的“帝国时代”。
(3) 含有极端复杂的算法。
这种系统建议使用Excel制作“原型”。如果复杂的系统是游戏的核心部分，这意味着“计算机玩得比玩家还开心”，也许有必要对游戏进行简化处理。
(4) 界面艺术性较高。
“华而不实”等高质量的美术和动画显然不能靠简笔画和手写卡就给原型化，而且这些也不是游戏机制的一部分。
(5) 纸上原型不适用于测试电子游戏的UI。
计算机UI是动态的，但纸是静态的。可以从纸上草稿看出一点视觉设计的意思，但要知道计算机上的实际效果如何，就需要制作数字化原型。
纸上原型的优势是很普遍的，而其缺点却是特定的，所以每个设计师都应该掌握纸上原型的技巧，无论他们是制作电子游戏还是桌面游戏。
4) 计算机原型制作
纸上原型用于测试游戏是否有创意和游戏规则是否合理，在经过纸上原型后就进入到计算机原型制作阶段，该阶段主要
包括以下两个步骤。
(1) 场景、元素制作。
场景制作主要用于设计游戏的界面和实体设计，其中包含大量的素材制作，如游戏中出现的角色、道具、语言、声音等。
(2) 程序设计。
程序设计主要完成在游戏中需要进行的交互动作和算法，如计时、方向控制、计分等。
5) 游戏测试
游戏测试，即在计算机环境下测试游戏的创意与功能、效果是否与设计一致。
以上就是设计游戏的基本过程，游戏需要在以上过程中不断循环完善。
5.6.4制作实例： 极速赛车
极速赛车是大家常见的一款竞速游戏，本例采用Flash CS5和ActionScript 3.0完成游戏的设计。
1. 设计游戏
本游戏的创意、规则设计为通过键盘上的“↑”“←”“→”3个键分别控制赛车的加速前进、向左转、向右转，赛车在环形赛道上进行比赛，若赛车驶离赛道则减速。3分钟跑完赛道三周的为通关，并通过计时进行排名。
2. 原型设计
该游戏设计的场景比较少，规则比较简单，在纸上原型阶段，简单绘制即可转入计算机原型阶段。转入计算机设计阶段，首先设计游戏中出现的各类组件，设计组件的目的是便于游戏修改，组件重用，在该阶段各组件不必设计得很精细，满足测试要求，待游戏测试通过后，再精细修改各组件。
1) 场景中影片剪辑设计
该游戏主要涉及赛车、树、赛道等组件的影片剪辑，其中树影片剪辑有3幅图需要随机、循环地出现在赛道两侧；
赛道影片剪辑需要设计树坑位置，即树出现的位置； 而游戏背景则是体现地平线的天地。各主要影片剪辑设计如图5
204~图5207所示。
图5204赛车影片剪辑
图5205树影片剪辑
图5206赛道影片剪辑
图5207天、地背景影片剪辑
2) 交互程序设计
赛车游戏要展示少数物体向屏幕纵深移动的情况，在场景中不停地变化玩家的视野，在本例中是以移动场景来实现该效果。以下是定义该Flash游戏的类，在该类中对各对象的属性和方法进行了定义。
导入基类后建立两个Sprite，第一个保留所有东西，命名为viewSprite，第二个命名为worldSprite，在worldSprite中放置道路、树和车。
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.×;
public class Racinggame extends MovieClip {
private var viewSprite:Sprite; //所有东西
private var worldSprite:Sprite; //路、树、车
//对象的引用
private var car:Car;
private var ground:Ground;
private var worldObjects:Array; //树和车
//定义键盘输入变量
private var leftArrow，rightArrow，upArrow，downArrow: Boolean;
//定义car对象的 direction 和 speed变量
private var dir:Number;
private var speed:Number;
//生成场景
public function Racinggame()
{
//创建环境，并定中心位置
viewSprite = new Sprite();
viewSprite.x = 275;
viewSprite.y = 350;
addChild(viewSprite);
//添加worldSprite，这里需要将它倾斜90°，将地面平放
worldSprite = new Sprite();
worldSprite.rotationX = -90;
viewSprite.addChild(worldSprite);
//将游戏的地形对象加入场景，并放大20倍，用以覆盖大部分区域
ground = new Ground();
ground.scaleX = 20;
ground.scaleY = 20;
worldSprite.addChild(ground);
//在树坑的位置创建树对象
worldObjects = new Array();
for(var i:int=0;i<ground.numChildren;i++) { //遍历孩子
if (ground.getChildAt(i) is TreeBase) { //掉到树坑
var tree:Tree = new Tree();
tree.gotoAndStop(Math.ceil(Math.random()×3)); //随机树
tree.x = ground.getChildAt(i).x×20; //设定位置
tree.y = ground.getChildAt(i).y×20;
tree.scaleX = 10; //使树的大小合适
tree.scaleY = 10;
tree.rotationX = 90; //竖起树
worldSprite.addChild(tree);
worldObjects.push(tree); //记住树
}
}
//添加车
car = new Car();
car.rotationX = 90;
worldSprite.addChild(car);
worldObjects.push(car);
//初始化方向和速度
dir = 90.0;
speed = 0.0;
//Z值索引排序
zSort();
//响应键盘事件
stage.addEventListener(KeyboardEvent.KEY_DOWN，keyPressedDown);
stage.addEventListener(KeyboardEvent.KEY_UP，keyPressedUp);
//advance game
addEventListener(Event.ENTER_FRAME，moveGame);
}
//读取键盘控制，按下按键
public function keyPressedDown(event:KeyboardEvent) {
if (event.keyCode == 37) {
leftArrow = true;
} else if (event.keyCode == 39) {
rightArrow = true;
} else if (event.keyCode == 38) {
upArrow = true;
} else if (event.keyCode == 40) {
downArrow = true;
}
}
//读取键盘控制，释放按键
public function keyPressedUp(event:KeyboardEvent) {
if (event.keyCode == 37) {
leftArrow = false;
} else if (event.keyCode == 39) {
rightArrow = false;
} else if (event.keyCode == 38) {
upArrow = false;
} else if (event.keyCode == 40) {
downArrow = false;
}
}
//移动控制
public function moveGame(e)
{
//左转还是右转
var turn:Number = 0;
if (leftArrow) {
turn = .3;
} else if (rightArrow) {
turn = -.3;
}
//如果按下向前箭头则加速，否则减速
if (upArrow) {
speed += .1;
if (speed > 5) speed = 5;
} else {
speed -= .05;
if (speed < 0) speed = 0;
}
//如果车驶离赛道则减速
if (!ground.road.hitTestPoint(275，350，true)) {
speed ×= .95;
}
//如果在移动，那么就继续移动并且转弯
if (speed != 0) {
movePlayer(-speed×10);
turnPlayer(Math.min(2.0，speed)×turn);
zSort();
}
}
//场景的位置控制
private function movePlayer(d) {
//move player by moving terrain in opposite direction
worldSprite.x += d×Math.cos(dir×2.0×Math.PI/360);
worldSprite.z += d×Math.sin(dir×2.0×Math.PI/360);
//move car opposite of terrain to keep in place
car.x -= d×Math.cos(dir×2.0×Math.PI/360);
car.y += d×Math.sin(dir×2.0×Math.PI/360);
}
//设置场景的角度转化
private function turnPlayer(d) {
//change direction
dir += d;
//rotate world to change view
viewSprite.rotationY = dir-90;
//rotate all trees and car to face the eye
for(var i:int=0;i<worldObjects.length;i++) {
worldObjects［i］.rotationZ -= d;
}
}
//控制路边树木的显示和高度
private function zSort() {
var objectDist:Array = new Array();
for(var i:int=0;i<worldObjects.length;i++)
{
var z:Number = worldObjects［i］.transform.getRelativeMatrix3D(root).position.z;
objectDist.push({z:z，n:i});
}
objectDist.sortOn( "z"，Array.NUMERIC | Array.DESCENDING );
for(i=0;i<objectDist.length;i++)
{
worldSprite.addChild(worldObjects［objectDist［i］.n］);
}
}
}
}
3. 游戏测试
将Flash发布后进行测试，在游戏设计过程中，一般需要边开发边测试，尽可能早地发现问题，界面如图5208所示。
图5208极速赛车运行界面
5.7虚拟现实设计与制作
5.7.1设计工具
创作VRML可以用任意的文本编辑器，如Windows下的NotePad等，然后保存为以.wrl为扩展名的文件即可。对于复杂的三维造型，如果VRML语句逐句写出，那么其工作量是非常大的，有时也是无法完成的，很多大型的具有三维造型功能的软件(如3ds Max)都开发了VRML文件的输入输出接口，人们可以利用这些造型工具直观快速地创建一个三维空间，然后输出为.wrl扩展名的文件。这样对于复杂的三维造型在VRML环境中的显示就不成问题了。
VrmlPad是ParallelGraphics公司开发的一款功能强大且操作简单的VRML开发设计专业软件，其完全遵照VRML 97标准设计。VrmlPad可以对VRML文件进行浏览编辑，对资源文件进行有效的管理，并且提供了VRML文件的发布向导，可以帮助开发人员编写和开发自己的VRML虚拟现实作品，如图5209所示。
图5209VrmlPad编辑器
5.7.2设计流程
对于虚拟景观场景的开发建模大体分为两个阶段： 第一个阶段是针对场景内各个地上建筑分别单独建模； 第二个阶段则是把所有已建好模的建筑物集成到虚拟环境中。
1. 在3ds Max中构造基本模型
以景观为内容的建模工作既复杂且量大，若全部采用编写VRML代码的方法，易出错且效率低。通常选用三维软件
3ds Max搭建基本场景，其优势是能够快速高效地构造复杂的三维模型，并设定材质、光效和动画，同时兼有输出.wrl格式的功能，这一点对提高建模效率非常有用。
为了准确形象地绘制出虚拟场景，利用3ds Max创建虚拟对象还需要以下3个重要步骤。
1) 绘制场景平面图
为了使场景真实、比例协调，对场景进行合理的布局是至关重要的。在AutoCAD中绘制了场景布局的平面图，生成.dwg格式的矢量文件，该文件通过调整图层和文件块的形式可以导入到3ds Max中，定位道路、楼群和其他建筑物未来的立体布局。场景平面图是场景合理布局的基础。楼宇的建模则参照相关楼宇的规划图纸。可以说，制作任何三维场景，先设计出一幅准确合理的场景平面图十分重要。
2) 采集必要的纹理照片
为了制作出逼真的三维对象，同时简化建模工作量，在制作一些特定对象时，需要
采集纹理图片数据，包括砖纹图片、门窗图片、草地图片等。
在Photoshop中将采集的纹理图片处理成可无缝平铺的贴图。
3) 构建场景三维模型
借助于平面布局图和必要的纹理采集图片，在3ds Max 构建各个三维对象的基本模型。VRML通过节点来描述场景实体，3ds Max可以将其环境中的模型以VRML的格式输出。即将各个三维模型转化为相应的节点，以便为相应的浏览器解释并绘制。
2. 在VrmlPad中编辑
从3ds Max输出的VRML文件虽然已能上网发布，但由于场景物体不全、交互行为不足，因此还应该打开已生成的.wrl文件，加入声音及其他交互行为以完善系统功能，如在场景中加入Background、Viewpoint、Billboard、Inline等节点。再利用造型节点的层次细分和编组节点对场景对象的相应代码做进一步的组织、校验和完善建模流程。
虚拟场景建模的一般流程如图5210所示。
图5210虚拟场景建模一般流程
5.7.3制作实例： 某学院虚拟校园
虚拟校园是基于浏览器的，提供给用户友好的操控界面，用户可以用鼠标任意地拖动、放大或者缩小，操作方便快速。通过这个三维虚拟校园可使用户比较直观地了解校园各区域的分布情况，在这里空间次序的视觉理解和感知变得非常容易，使用户在浏览中产生身临其境的感觉。图5211为某院校虚拟校园的设计实例。
图5211某学院虚拟校园的设计实例
1. 虚拟校园系统的设计分析
A学院的虚拟校园是一个较大规模的三维场景，旨在通过互联网及浏览器展示A学院的校园风貌。游览者可以走进校园，观赏校园的景观布局，领略校园的生活氛围，在虚拟的游览中逐渐了解A学院的风貌。
为了较真实地反映校园风貌，可以通过两个方面表现这个虚拟境界： 第一，要根据A学院实际的景观风貌分别对校园内的各个场景进行建模，这些场景包括道路、教学楼、校门、花草树木、图书馆、学生公寓及一些其他建筑物，通过对这些场景的建模构建出虚拟的A学院校园，也是整个学校给游览者的第一印象； 第二，通过文字、图片、音频等多媒体技术手段辅助性地介绍学院的特色建筑和标志，从而实现介绍A学院的目的； 第三，为了给浏览者一种方便快捷的游览方式，同时增加交互效果，系统需为用户设置多个建筑物的不同观测视点。
经过分析，首先要描绘出整个校园的主干道。主干道在整个校园中起到基线的作用，然后以这条道路作为参照，把独立构建的各个楼宇、场馆、校门、花草树木及其他场景组合安放在相应的位置。三维场景的建模是虚拟校园的重要组成部分，它关乎着虚拟校园能否形象生动的展现。图5212为待建模的各场景的层次关系。
图5212待建模的各个场景的层次关系图
2. 虚拟场景的建模流程
本设计中，对于虚拟校园场景的开发建模大体分为两个阶段： 第一个阶段是针对校园内各个地上建筑分别进行单独建模； 第二个阶段则是把所有已建好模的场景集成到一个虚拟环境中。
1) 在3ds Max中构造基本模型
以校园场景为内容的建模工作复杂，工作量很大，若全部采用VRML代码编写的方法，出错高且效率低。因此，本设计选用三维建模软件3ds Max搭建基本场景，其优势是能够快速高效地构造复杂的三维模型，并设定材质、光效和动画，同时兼有输出.wrl格式的功能，这一点对提高建模效率非常有用。
2) 绘制场景平面图
为了使场景真实，比例协调，对场景进行合理的布局是至关重要的。首先，要在AutoCAD中绘制了场景布局的平面图，生成.dwg格式的矢量文件； 再将该文件通过文件块的形式导入到3ds Max中，定位道路、楼群和其他建筑物的平面布局。场景平面图是场景合理布局的基础，楼宇的建模则参照相关楼宇的规划图纸。图5213为A学院校园场景布局的平面图。图5214为场景布局的平面图导入3ds Max中的效果。
图5213某校园场景布局的平面图
图5214场景布局的平面图导入3ds Max中的效果
3) 采集必要的纹理照片
为了在保证制作出较逼真的三维对象的前提下，尽量减少建模工作量，在制作一些特定对象时，需要在校园内采集纹理图片数据，包括砖纹图片、树木图片、草地图片等。在Photoshop中将采集的纹理图片处理成可无缝拼接的贴图，并保存为JPG格式。
3. 各主要场景的建模
1) 校门的建模
在校门场景构建中要解决的第一个问题是造型外观的控制。造型的外观是通过材质控制的，材质属性包括造型自身的颜色、是否发光、发光颜色、是否透明、透明度等。在基本建模后，编辑节点时可使用Appearance和Material节点控制造型的颜色、发光颜色和透明度。例如，在校门场景的建模中，传达室是由两个正方体造型构成的，外部是半透明的玻璃； 上面的顶棚是扁平状的长方体，外部是银灰色不透明的板材。
在校门场景构建中要解决的第二个问题是校名题字的显示。按照VRML规范，它应该支持包括汉字在内的所有UTF8字符，但许多插件都不支持汉字的显示。VRML不能显示汉字的原因不在于其语言本身，而是在于VRML浏览器的三维引擎。为了在VRML中实现三维字的渲染，通常有两种方法： 第一种是用多边形对齐所要的字体形态； 第二种是用题字照片对三维字体进行纹理渲染。本设计采用的是第二种方法，校门场景的具体实现代码如下：
Transform {
rotation 0.0 1.0 0.0 -0.52
translation 6 0 2
children ［
Shape {
appearance Appearance {
material Material {diffuseColor 0.5 0.5 0.5}
texture ImageTexture {url"tianshi.jpg"}
#欧阳中石题字的天津天狮学院的校名纹理贴图
} geometry Box {size 6.75 2.0 0.5}
}
］
}
Transform节点是一个组节点，这个节点是整个程序设计中的基础节点，几乎每一个模型的建立都用到了Transform，因此对Transform的灵活运用尤为重要，该节点包括一个子节点的列表。这些子节点可以是Shape节点、Group节点或Transform节点。
translation用来指定造型的位置，children域是指定受该节点变换影响的子节点。校门虚拟场景如图5215所示。
图5215校门虚拟场景
2) 图书馆的建模
图书馆的建模是一个较复杂的场景，需要将整个建筑物分割建模。在图书馆的建模中，由于图书馆的左右大部分是对称的，因此可以先对左面的部分进行建模，最后用rotation节点旋转，再进行修改，得到相应的场景，图书馆虚拟场景如图5216所示。
图5216图书馆虚拟场景
以下代码描述了模型旋转和插入的实现方法：
Group {
children ［
Transform {
translation -6.9 -8.2 -3
children ［
DEF Part Inline {
bboxSize 5.0 8.0 2.0
bboxCenter 1.0 4.0 0.0
url "part.wrl"
}
］
}#本段实现插入图书馆对称的另一部分
Transform {
translation -6.9 -4.2 -3
children USE Part
}#对上面的建模重用
Transform {
translation -3.6 -0.2 -12
rotation 0 1 0 3.14
children USE Part
}#旋转
］
}
这里用到了VRML中的两个重要工具： 节点名定义DEF和引用USE，这是VRML提供给用户的两个避免重复劳动的工具。节点命名是以关键字DEF加上所命名名称，置于节点类型定义之前来实现的。这两个说明符可以放在任何允许节点的地方。USE语句并不是复制该节点，而是把该节点再次插入它所在的场景图。
3) 教学楼A的建模
教学楼的建模是一个复杂且较大的场景，同样需要对各个建筑物进行分割建模。教学楼A的主体为非对称结构，因此建模时应分别对各分割结构单独建模，各部分中有对称结构，可采用建模重用的方法。教学楼A虚拟场景如图5217所示。
图5217教学楼A虚拟场景
4) 留学生公寓的建模
留学生公寓的结构依然是呈L形，主体建模方法参照教学楼A的方法，只是在L形的拐角处设计了一个大门的异型结构。留学生公寓虚拟场景如图5218所示。
图5218留学生公寓虚拟场景
4. 虚拟场景的交互实现
用户若希望得到多角度和多方位的观察效果，根据用户动作虚拟场景能够做出一定交互能力，这里还需要为已建立好的虚拟校园设置一些视点，在用户需要时进行切换。交互能力是VRML 2.0最突出的特征。
浏览虚拟校园的过程中，可能已经体验到视点的变化： 当拖动鼠标或按下箭头键时，虚拟境界就会旋转或缩放，这实际上是在调整用户的视点位置或视角。在虚拟场景的重要位置还可以自定义视点节点，它们是虚拟境界创作者给用户推荐的最佳观赏方位，在VRML浏览器中，用户就可以通过鼠标右键选择作者推荐的各个视点。这里在虚拟校园场景中定义两个视点节点：
DEF view1 Viewpoint {
position 0 20 0
description "view1" }
DEF view2 Viewpoint {
position 50 30 80
description "view2" }
其中的坐标表示视点在场景中的三维空间位置，坐标的单位是米，视点的名称将会在浏览器的菜单或按钮中提示出来供用户选择。图5219与图5220为在VRML浏览器中以两个不同视点看到的教学楼C的情况。
图5219View1视点下观察教学楼C的效果
图5220View2视点下观察教学楼C的效果
此外，为了丰富用户感知交互的媒体表现形式，这里还为各主要建模对象(如教学楼、宿舍、图书馆等)增加了语音注释功能。
这里主要利用AudioClip节点来实现，结构如下：
AudioClip｛
url［ ］#exposedField MFSrting
description " " #exposedField MFSrting
direction 0.0 0.0 1.0 #exposedField SFVec3f
loop FALSE #exposedField SFBool
pitch 1.0 #exposedField SFFloat
startTime 0.0 #exposedField SFTime
stopTime 0.0 #exposedField SFTime
…
｝
其中url属性设置声音剪辑的位置，一般声音剪辑在主文件夹根目录下，可以不指定路径，直接输入文件名； description属性标示注释内容； direction属性制定声音的三维传递方向，默认为垂直于听众向外； loop属性设置是否循环播放，默认为不循环； pitch属性设置声音强度，默认为基础倍数1； startTime和stopTime属性分别设置播放的起点和终点，默认为自始至终播放。
这样，事先为各主要建模对象录制好语音注释后，通过AudioClip节点将它们分别设置在相应节点域中，相应代码如下：
AudioClip｛
url " xm.wav "
description "校门"
…
｝
AudioClip｛
url " tsg.wav "
description "图书馆"
…
｝
这样，当用户游历到某个建筑物时，可以将鼠标移到该建筑物上，即刻便会通过媒体计算机的音响播放出该建筑物的语音注释信息，同时鼠标旁也会显示该建筑物的文字注释信息，以此来全方位地增加用户的视听沉浸感。
5. 场景组合
构建完成各部分场景后，使用行插入节点Inline将这些场景进行有序组合成为一个完整的三维虚拟校园场景。每个Inline节点都有一个url域属性，该属性值指定了一个URL位置，这个URL值就是将要插入到VRML中的文件坐标位置。URL指示VRML浏览器采取什么方式获得这个文件，在什么路径能找到这个文件。URL还可以指出该文件是在网络虚拟路径中，还是在本机的物理路径中。场景组合过程中，经常需要调整场景各部分之间的比例和物理位置。
下面的代码将构建好的教学楼A安置在虚拟校园中：
Transform {
translation 0 0 -150
rotation 0 1 0 -1.396
children ［ DEF JXA Inline {url "ajiao.wrl"} ］
}# 教学楼A场景的组合
通过以上方法，依次将各虚拟场景部署在虚拟校园设计的相应位置中，需要变更的是各虚拟场景之间的比例和物理位置。部分参考代码如下：
Transform {
translation 0 0 -120
rotation 0 1 0 -1.127
children ［ DEF TSG Inline {url "tsg.wrl"} ］
}# 图书馆场景的组合
Transform {
translation 0 0 -90
rotation 0 1 0 0.035
children ［ DEF GY Inline {url "gy.wrl"} ］
}# 学院公寓场景的组合
Transform {
translation 0 0 -50
rotation 0 1 0 0
children ［ DEF XM Inline {url "gate.wrl"} ］
}# 校门场景的组合
Transform {
translation 0 0 -170
rotation 0 1 0 -1.597
children ［ DEF JXB Inline {url "bjiao.wrl"} ］
}# 教学楼B场景的组合
Transform {
translation 0 0 -100
rotation 0 1 0 -1.012
children ［ DEF JXC Inline { url "cjiao.wrl"}］
}# 教学楼C场景的组合
从校门口看到的场景组合效果，如图5221所示。
图5221从校门口看到的场景组合效果
在对以上主要建模场景的组合外，希望增加虚拟校园的真实感，还需加入围栏、路灯、绿化草皮及蓝天、白云等辅助场景。
在操场和草坪的建模中，主要采用平面贴图的方式，先根据平面布局图的尺寸和位置，绘制出操场和草坪的平面图，再将其导入3ds Max中，生成富有质感的效果，最后将其与其他场景组合到虚拟校园中，如图5222与图5223所示。
图5222从操场一角看到的两个教学楼的场景组合效果
图5223从操场一角看到的场景组合效果
对于像围栏、路灯和绿化草皮等这些外形对称又多处出现的物体，需要采用Billboard节点法建模，然后再组合到虚拟场景中。以路灯为例，在建模过程中需注意两点： 第一，使用Billboard节点对路灯对象建模，该节点有一项特殊的功能
： 使它的子节点永远面向观看者。路灯的高低决定Box的设置，并且要使长方体基本没有厚度，所以Z轴方向的参数非常小。第二，利用Photoshop软件生成和处理路灯的纹理映像。首先处理掉在路灯的照片中除了路灯轮廓以外的其他事物，将多盏灯泡间的空隙也处理出来，这样可以使路灯的最终效果更好； 接着把图片的背景设置为背景透明； 调整图像的尺寸，把它保存为GIF文件格式，因为GIF格式可以保存一些背景颜色并将其转换成透明，而JEPG不能存储透明性信息； 最后将路灯的图像信息映射到Box节点上去。
路灯的建模代码具体如下：
Billboard{
Children Shape{
appearance Appearance{
texture ImageTexture{url "streetlight.gif" }}}
}geometry Box{size 1 10 0.0001}
建好模后，再通过建模重用的方法，使用DEF和USE多次引用Billboard节点构造好的对象，就可实现多个路灯、多块草坪和成组围栏的虚拟效果了。
最后还需要为整个虚拟场景设置天空和地面的颜色效果，这里需要使用Background节点来定义。代码如下：
Background{
skyColor ［0.0 0.2 0.7，0.0 0.5 1.0，1.0 1.0 1.0］
skyAngle ［1.309，1.571］
groundColor ［0.1 0.0 0.0，0.4 0.25 0.2，0.6 0.6 0.6］
groundAngle ［1.309，1.571］
}
最终，将全部虚拟场景组合后的效果，如图5224所示。
图5224全部场景组合后的虚拟校园鸟瞰效果
5.8练习
一、 填空题
1. 色彩的三要素是、和。
2. Photoshop中通道分为和。
3. 进行图像自由变换的快捷键是。
4. 衡量输入/输出设备图像处理效果好坏的重要指标是。
5. 按动画的视觉空间来分，可以将动画分为和。
6. 在3ds Max中默认使用的4个视图是、、和。
7. 创建放样物体必备的两种曲线是和。
8. 虚拟景观场景的开发建模大体分为两个阶段： 和。
9. HTML元素以起始，以终止。
10. 改变音频素材音量的操作是。
二、 简答题
1. 在Photoshop中“图像大小”与“画布大小”的区别是什么？
2. 位图和矢量图有什么区别？
3. 简述使用“油漆桶”工具和执行“编辑填充”命令对选区填充颜色的区别。
4. Photoshop中支持哪些色彩模式？
5. 简述3ds Max中分段数的作用。
6. 简述HTML5的特性。
7. 如何在影片片段中加入特技效果？
8. 游戏的基本元素有哪些？
9. 虚拟现实技术的基本设计过程是什么？
三、 实验题
1. 基础实验
(1) 使用Photoshop设计制作一张以教师节为主题的贺卡。
(2) 在3ds Max中使用布尔运算功能制作一个茶杯。
(3) 利用HTML5实现小球在桌上弹跳的动画效果。
(4) 利用Photoshop设计个人主页的引导页。
(5) Photoshop设计个人主页的信息展示页面，并利用切片工具生成网页。
(6) 将生成页面改造成网站模板。
2. 综合实验
(1) 使用Premiere制作一个以全国大学生运动会为主题的宣传片。
(2) 制作个人主页，要求包含视频、动画等元素，页面不少于5页。
(3) 完善“极速赛车”实例中的计时和排名控制功能。