1、第第5章章 网页动画制作网页动画制作 2014.11网页设计与制作网页设计与制作第第5章章 网页动画制作网页动画制作 制作逐帧动画制作逐帧动画 5.2制作元件动画制作元件动画 5.3Flash工作窗口工作窗口 5.1制作遮罩动画制作遮罩动画 5.5制作引导线动画 5.6制作补间动画制作补间动画 5.4制作交互动画 5.7网页设计与制作网页设计与制作本章要点本章要点 本章介绍FALASH CS6在网页动画制作中的应用。主要包括补间动画，遮罩动画，引导线动画以及交互动画的设计与制作方法。本章要点本章要点v移动补间动画制作v逐帧动画制作v遮罩动画制作v引导线动画制作v按钮制作v交互动画制作网页设计与
2、制作网页设计与制作5.1 Flash工作窗口工作窗口 Flash工作区工作区 5.1.1启动启动Flash后，其工作窗口如图后，其工作窗口如图6-1所示。所示。时间轴属性栏工具栏舞台菜单栏库面板 Flash的工作界面网页设计与制作网页设计与制作5.1 Flash工作窗口工作窗口Flash工作区工作区5.1.1（1）舞台）舞台工作窗口的灰色区域是工作区，工作区中的白色区域称为舞台。舞台是绘工作窗口的灰色区域是工作区，工作区中的白色区域称为舞台。舞台是绘制静态画面的区域，也是播放影片的区域。只有在舞台中制作的对象才能制静态画面的区域，也是播放影片的区域。只有在舞台中制作的对象才能作为影片输出。处于
3、舞台以外工作区中的对象，不会显示在作为影片输出。处于舞台以外工作区中的对象，不会显示在Flash动画中，动画中，一般用于动画制作。所有的动画创作均在工作区中进行，在工作区中可以一般用于动画制作。所有的动画创作均在工作区中进行，在工作区中可以对创作的对象进行编辑与修改。对创作的对象进行编辑与修改。制作动画时，可以借助标尺或网格定位元素。制作动画时，可以借助标尺或网格定位元素。显示标尺：选择显示标尺：选择“视图视图”菜单的菜单的“标尺标尺”选项。选项。显示网格：选择显示网格：选择“视图视图”菜单的菜单的“网格网格”、“显示网格显示网格”选项。选项。（2）属性面板）属性面板位于舞台右侧的垂直面板。在
4、舞台上编辑的每个元素，在其选中状态下，位于舞台右侧的垂直面板。在舞台上编辑的每个元素，在其选中状态下，都将在属性面板中显示其常规信息，并且可以在属性面板中对其信息进行都将在属性面板中显示其常规信息，并且可以在属性面板中对其信息进行修改。修改。网页设计与制作网页设计与制作5.1 Flash工作窗口工作窗口Flash文档的基本操作文档的基本操作 5.1.2第一次启动Flash时，将显示“欢迎屏幕”，可以选择打开已有文件、新建文件、从模板创建文件。如图所示。以上操作在Flash工作区也可进行。打开文档网页设计与制作网页设计与制作5.1 Flash工作窗口工作窗口Flash文档的基本操作文档的基本操作
5、 5.1.21打开已有Flash文档在“文件”菜单选择“打开”选项，或按“CtrlO”快捷键，进入“打开”对话框。2新建Flash文档（1）在“文件”菜单选择“新建”选项，或按“CtrlN”快捷键，进入“新建文档”对话框。（2）在“新建文档”对话框所显示的新建项目中选择一项后，按“确定”按钮退出。ActionScript 3.0是最新版本的Flash脚本语言，可以添加交互动作，要求浏览器具有Flash Player 9或更高版本。（3）在新建文档状态，打开属性面板。文档尺寸的默认设置是550像素400像素。网页设计与制作网页设计与制作5.1 Flash工作窗口工作窗口库面板的基本操作 5.1.
6、3 用户可以利用Flash创建图形、按钮或影片剪辑并保存为元件，元件存储在“库”中。Flash可以将jpg图像或MP3声音文件导入“库”中。方法如下：在“文件”菜单选择“导入”、“导入到库”选项，在“导入到库”对话框，选择指定文件后单击“打开”按钮。库面板以缩略图方式显示所有已导入的图像。“库”面板 预览窗口网页设计与制作网页设计与制作5.1 Flash工作窗口工作窗口预览影片与发布影片 5.1.41预览影片在制作影片过程中，通过多次的预览，可以检查影片是否实现了预期效果。快速查看动画或影片的效果，可以在“控制”菜单选择“测试影片”选项，也可按下“Ctrl+Enter”组合键。Flash在单独
7、的窗口打开并播放影片。预览模式将循环播放影片。2发布影片影片制作结束后，可以在Flash中发布。Flash将创建一个HTML文件和一个SWF文件。swf文件是最终的Flash影片，而HTML文件则指示Web浏览器如何显示swf文件。发布时，将两个文件上传到Web服务器的同一个文件夹。上传之后需要测试，以确保正常播放。发布流程如下：（1）在“文件”菜单选择“发布设置”选项。（2）在“格式”选项卡选“Flash（.swf）”和“HTML（.html）”复选框。（3）在“HTML”选项卡，取消选中“循环”复选框。如图5-7所示。（4）设置完成后，单击“发布”按钮。网页设计与制作网页设计与制作5.2
8、制作逐帧动画制作逐帧动画 帧与关键帧 5.2.11帧动画是由若干张连续播放的画面组成的，帧正是组成动画的单一画面，是动画中最小的时间单位。Flash CS6默认的帧速率是每秒24帧，即每秒播放24个画面。2关键帧关键帧是动画中变化的帧，是动画转折变化的时间点。当动画元素发生形状或位置改变时，其相应的时间点应添加关键帧。关键帧在时间轴中有明显的标志：有内容的关键帧以黑色实心圆表示；没有任何内容的关键帧则以空心圆表示。以后添加到同一层的帧的内容将和关键帧相同。创建逐帧动画时，每个帧都是关键帧。创建补间动画时，可在动画的重要位置定义关键帧，由Flash自行创建关键帧之间的其他帧。3帧的选择与移动对帧
9、的操作通常有选择和移动。需要移动关键帧时，首先选中关键帧，然后将关键帧拖拽到目标位置。需要选择多个帧时，直接拖拽起始帧到达目标帧后放开鼠标，所有选中的帧呈蓝色显示。也可通过“右键快捷菜单”，移动或复制帧。网页设计与制作网页设计与制作5.2 制作逐帧动画制作逐帧动画 创建逐帧动画 5.2.21预备知识1：文本编辑单击工具栏的“文本工具”按钮，在舞台指定位置单击，即可开始输入文本。选中文本，舞台右侧将显示文本属性面板，可以设置文本的字体、大小、颜色、字间距、对齐方式等属性。文本属性面板由“静态文本”、“动态文本”和“输入文本”三个选项卡组成。在舞台上创建静态文本，在对应的文本属性面板可以设置段落、
10、链接、滤镜。通过“文本”菜单也可设置文本属性。2预备知识2：矩形工具使用矩形工具按钮可以直接在舞台上绘制矩形，按住shift键时，可以绘制正方形。单击矩形工具按钮，舞台右侧将显示矩形工具属性面板，可以设置边框的样式、颜色、填充颜色。静态文本属性面板 网页设计与制作网页设计与制作5.2 制作逐帧动画制作逐帧动画 创建逐帧动画 5.2.23预备知识3：颜料桶工具颜料桶工具是对图形内部区域进行填充的工具，不论填充的区域是否封闭，都可以进行颜色填充，并将填充区域自动封闭。单击颜料桶工具按钮，舞台右侧将显示颜料桶工具属性面板，可以设置填充的颜色。单击工具箱最下面的“选项”工具，可以选择“封闭”填充区的模
11、式。4预备知识4：在动画制作中，插入关键帧命令是对动画状态的改变，一般是指出现动作或画面的变化。而插入帧命令一般来讲，就是为了延续前边关键帧的状态，也是指延续前一个动作或画面的显示。5预备知识5：插入关键帧的快捷键是F6，删除关键帧快捷键是shift+F6插入普通帧的快捷键是F5，删除关键帧快捷键是shift+F5 网页设计与制作网页设计与制作5.2 制作逐帧动画制作逐帧动画 创建逐帧动画 5.2.2操作实例操作实例5-1 创建逐帧动画创建逐帧动画打字效果打字效果操作步骤：操作步骤：（1）新建Flash文档，在属性面板和对话框设置文档“宽”为550px、“高”为200px，背景颜色为“黑色”。
12、（2）在图层1创建橘红色矩形。选择“矩形工具”，画出矩形框；选择“颜料桶工具”，以“橘红”色填充矩形区域。重复上述操作，制作“橘黄”色内矩形。（3）创建图层。单击“新建图层”按钮，新建图层2。（4）设置帧在图层1时间轴的第31帧处插入帧。单击选择第31帧，在“插入”菜单选择“时间轴”、“帧”选项。也可以右键单击第31帧，在快捷菜单选择“插入帧”。在图层2从时间轴的第一帧开始，每隔一帧插入一个关键帧，建立序列帧到第31帧处。单击指定帧，在“插入”菜单选择“时间轴”、“关键帧”选项。设置结果如图5-11所示。网页设计与制作网页设计与制作5.2 制作逐帧动画制作逐帧动画 创建逐帧动画 5.2.2 图
13、5-10 橘红色矩形区域 图5-11 插入关键帧 图5-12 输入文字网页设计与制作网页设计与制作5.2 制作逐帧动画制作逐帧动画 创建逐帧动画 5.2.2（5）按图5-12输入文本在图层2选择第1帧，在工具箱选择“文本工具”，在舞台上单击左键，输入第一个字母“f”。在第3帧，双击字母，进入文字编辑状态，输入字母“fl”。在第5帧，输入字母“fla”。在第7帧，输入字母“flas”。在第9帧，输入字母“flash”。在第13帧，输入字母“flash 2”。在第15帧，输入字母“flash 20”。在第17帧，输入字母“flash 201”。在第19帧，输入字母“flash 2013”。在21帧
14、处输入“点”，27帧处删除第三个“点”，29帧处再次输入“点”。以产生“点”闪烁的效果。网页设计与制作网页设计与制作5.3 制作元件动画制作元件动画 元件 5.3.11元件元件是对原有图形或图符的再次编辑，并成为以后创建Flash动画的一个基本元素。元件是用于特效、动画和交互性设计的可重用资源。在文档中使用元件可以明显减小文件的大小，缩短下载时间。元件分为按钮、图形、影片剪辑三种类型。2元件库元件存储在“库”面板中，当把元件拖拽到舞台上时，Flash创建元件的一个实例，而实例只是元件在舞台上的的一个副本，原始元件仍然保存在“库”中。通过“库”面板可以查看并区分元件的类型。网页设计与制作网页设计
15、与制作5.3 制作元件动画制作元件动画 元件 5.3.13按钮元件按钮元件可响应按钮静止、将鼠标指针移到按钮上、按下鼠标左键3种事件。这3种事件对应着按钮的4种状态和4个关键帧。（1）弹起帧：对应“按钮静止”状态。定义按钮的正常显示效果，即按钮未被单击时所显示的效果。（2）指针经过帧：对应“将鼠标指针移动到按钮上”状态。定义当鼠标指针移到按钮上但不单击时的效果。该帧相对于弹起帧应有所变化。例如，定义当鼠标指针移到按钮上时，按钮颜色变化、文字字体改变或放大、缩小等。（3）按下帧：对应“按下按钮”状态。定义按钮被按下时的效果。例如，图形按钮被按下时一般会自动缩小，出现动态效果。（4）点击帧：对应“
16、定义按钮响应区域”状态。定义按钮的响应区域。只有在响应区域按下按钮时，系统才能响应按下事件。响应区域是不可见的。定义该帧时，必须保证响应区域包括按钮的弹起、指针经过和按下3种状态区域。不定义该帧时，系统默认弹起帧状态为按钮的区域响应。网页设计与制作网页设计与制作5.3 制作元件动画制作元件动画 制作按钮 5.3.2操作实例操作实例5-2 制作文字按钮制作文字按钮操作步骤：操作步骤：（1）插入按钮新建Flash文档，在属性面板和对话框设置文档尺寸为240*45像素。在“插入”菜单选择“新建元件”选项，进入“创建新元件”对话框，在类型下拉列表选择“按钮”。如图5-14所示。单击“确定”按钮进入按钮
17、编辑区，时间轴将出现按钮的“弹起”、“指针经过”、“按下”、“点击”4个状态帧。（2）制作“弹起”帧按钮效果在“弹起”帧状态，利用“文字工具”输入“旅游资讯”，设置字号为“15”、字体为“黑体”、颜色为“深灰色”。图5-14 创建按钮元件 网页设计与制作网页设计与制作5.3 制作元件动画制作元件动画 制作按钮 5.3.2在“窗口”菜单选择“对齐”选项，在“对齐”属性面板，勾选“与舞台对齐”选框，选择“对齐”项第2个图标，使文字在垂直方向对齐；再选择“分布”项第2个图标，使文字在水平方向对齐。如图5-15所示。制作标签下划线。新建“图层2”，使用工具栏的“矩形工具”，在文字下方创建矩形，并更改边
18、框颜色为“无色”，内部填充颜色为“灰色”。如图5-16所示。图5-15 对齐 图5-16 颜色设置网页设计与制作网页设计与制作5.3 制作元件动画制作元件动画 制作按钮 5.3.2（3）制作“指针经过”帧按钮效果在图层1、图层2的“指针经过”帧处分别插入关键帧，此时“弹起”帧的文字及矩形框自动复制到“指针经过”帧的工作区。分别选中文字和矩形，在工具箱调整色彩为蓝色。（4）制作“按下”帧按钮效果在图层1、图层2的“按下”帧处插入关键帧，此时“指针经过”帧的文字和矩形框自动复制到“按下”帧的工作区。分别选中文字和矩形，在工具箱调整色彩为红色。（5）制作“点击”帧按钮效果在图层1、图层2的“点击”帧
19、处插入关键帧，定义按钮的有效单击范围。本例不定义该帧，默认“弹起”为响应区域。（5）在舞台插入按钮单击舞台左上角的“场景1”按钮，结束元件按钮的制作过程，元件按钮存入库面板。在舞台插入按钮。打开“库”面板，将“库”中的按钮拖到舞台。默认插入在图层1的第1帧。按照上述方法，继续制作“国内旅行”、“国外旅行”两个按钮。按钮制作完成，保存文件并预览。网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画 补间动画是实现一种状态到另一种状态的改变，只需要开始和结束两种状态，中间的变化过程由Flash自动生成。制作补间动画时，在时间轴的一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小
20、、颜色、位置、透明度等，Flash根据二者之间帧的值自动创建动画，为两个关键帧插入补间帧。Flash补间动画包括“创建补间动画”、“创建补间形状”和“传统补间动画”。补间动画是Flash中非常重要的表现手段之一。“创建传统补间”需要在时间轴上为动画的结束点添加关键帧，添加“创建传统补间”命令制作动画补间，这种动画形式是在低级版本中所普遍采用的动画形式，并被延续到高版本中。“创建补间动画”则不需要创建关键帧，只需在时间轴上直接选择创建补间动画命令，同时在舞台上移动图形位置，flash会记录下动作，并在时间轴结束位置自动添加关键帧。网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画图层与
21、文本分散到层图层与文本分散到层 5.4.11图层与图层操作图层与图层操作时间轴面板包含图层。每个图层对应一条完时间轴面板包含图层。每个图层对应一条完整的帧序列，每个图层的帧是独立的。整的帧序列，每个图层的帧是独立的。图层按出现在时间轴中的顺序堆叠在一起，图层按出现在时间轴中的顺序堆叠在一起，最底部图层的对象将在舞台上所有对象的最最底部图层的对象将在舞台上所有对象的最底部显示。上方图层的对象可遮挡其下方图底部显示。上方图层的对象可遮挡其下方图层的对象。层的对象。每个图层都可包含对象，在一个图层绘制和每个图层都可包含对象，在一个图层绘制和编辑对象时，不会影响其他图层的对象。编辑对象时，不会影响其他
22、图层的对象。系统默认图层名为系统默认图层名为“图层图层+序号序号”。单击图。单击图层可选中该图层，双击图层名可修改图层名，层可选中该图层，双击图层名可修改图层名，拖动图层上下移动可改变图层的位置，双击拖动图层上下移动可改变图层的位置，双击“图层属性图层属性”图标可进入图标可进入“图层属性图层属性”对话对话框。框。“图层属性”对话框网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画图层与文本分散到层图层与文本分散到层 5.4.1图层操作区利用三个按钮控制全部图层。图层操作区利用三个按钮控制全部图层。显示或隐藏所有图层：隐藏图层时，图层中的内容不可见。显示或隐藏所有图层：隐藏图层时，图层
23、中的内容不可见。锁定或解除锁定所有图层：加锁时，图层中的内容可见但不可编锁定或解除锁定所有图层：加锁时，图层中的内容可见但不可编辑。辑。将所有图层显示为轮廓：图层中的对象只显示轮廓线。将所有图层显示为轮廓：图层中的对象只显示轮廓线。图层操作区的下方有三个按钮：新建图层、新建文件夹、删除。图层操作区的下方有三个按钮：新建图层、新建文件夹、删除。2文本分离文本分离使一段文本分离为各自独立的文字，每个文字均可独立选取与设置。使一段文本分离为各自独立的文字，每个文字均可独立选取与设置。在在“修改修改”菜单选择菜单选择“分离分离”选项，可使每个文字各自独立。选项，可使每个文字各自独立。3分散到层分散到层
24、分离之后的每个文字可以分配到独立的图层，并针对每个独立的文字分离之后的每个文字可以分配到独立的图层，并针对每个独立的文字（图层）进行动画制作。这是文本动画中常用的操作之一。（图层）进行动画制作。这是文本动画中常用的操作之一。在在“修改修改”菜单，选择菜单，选择“时间轴时间轴”、“分散到图层分散到图层”选项，将文字从左选项，将文字从左至右分配到从上至下的图层中。至右分配到从上至下的图层中。网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2预备知识：如何调整动画播放时间与速度预备知识：如何调整动画播放时间与速度在文本动画
25、制作中，通常以文本字数作为计算动画播放时间的参考。在文本动画制作中，通常以文本字数作为计算动画播放时间的参考。例如，文本包括例如，文本包括23个字母、个字母、5个空格，共计个空格，共计28个文字。如果每个文字显示一帧，个文字。如果每个文字显示一帧，则共计则共计28帧。如果按照每秒帧。如果按照每秒24帧速率，需要帧速率，需要1秒左右时间。如果需要显示速度秒左右时间。如果需要显示速度变慢，那么每个文字中间可以空余变慢，那么每个文字中间可以空余1至至2帧，以延长动画的播放时间。帧，以延长动画的播放时间。操作实例操作实例5-3 制作风吹字效果的动画制作风吹字效果的动画操作步骤：操作步骤：（1）制作背景
26、，并修改文档尺寸）制作背景，并修改文档尺寸新建新建flash文档。文档。在在“文件文件”菜单选择菜单选择“导入导入”、“导入到库导入到库”选项，将素材选项，将素材“背景图像背景图像”导入到库面板。导入到库面板。如果在如果在“文件文件”菜单选择菜单选择“导入导入”、“导入到舞台导入到舞台”选项，选项，“背景图像背景图像”将将直接导入舞台。直接导入舞台。打开打开“库库”面板，将面板，将“背景图像背景图像”拖拽到舞台。拖拽到舞台。网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2在舞台上，单击选中在舞台上，单击选中“背景图
27、像背景图像”，在右侧位图属性面板查看图像大小。，在右侧位图属性面板查看图像大小。例如，图像大小为例如，图像大小为“984*281”。按图像大小更改按图像大小更改“舞台舞台”大小。在大小。在“文档属性文档属性”对话框，输入宽度和高度对话框，输入宽度和高度值：值：“984*281”，单击，单击“确定确定”按钮，完成舞台大小的设置。按钮，完成舞台大小的设置。再次选中再次选中“背景图像背景图像”，在位图属性面板的，在位图属性面板的“X”、“Y”坐标中输入坐标中输入0，使图，使图像的左边与舞台对齐。像的左边与舞台对齐。在时间轴图层面板，单击在时间轴图层面板，单击“图层图层1”右侧的右侧的“锁定或解除锁定
28、图层锁定或解除锁定图层”按钮，按钮，锁定锁定“图层图层1”，防止后序操作破坏背景图像。如图所示。，防止后序操作破坏背景图像。如图所示。锁定图层 网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2（2）制作页眉文字层）制作页眉文字层在时间轴图层面板，单击在时间轴图层面板，单击“新建图层新建图层”按钮，新建按钮，新建“图层图层2”。如图。如图5-24所所示。示。使用工具箱的文字工具，在舞台上输入文字使用工具箱的文字工具，在舞台上输入文字“快乐去旅游快乐去旅游 行走人生路行走人生路”。在文字属性面板，设置文字大小在文字属性
29、面板，设置文字大小“40”、字体、字体“黑体黑体”、颜色、颜色“白色白色”，并调，并调整文字位置。如图整文字位置。如图5-25所示。所示。图5-25 设置文字属性 图5-24 新建图层网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2在在“修改修改”菜单选择菜单选择“分离分离”选项，使每个文字各自独立。如图选项，使每个文字各自独立。如图5-26所示。所示。在文字编辑状态，在在文字编辑状态，在“右键快捷菜单右键快捷菜单”选择选择“分散到层分散到层”命令，使每个文命令，使每个文字都独立成为一个层。这时的字都独立成为一个层
30、。这时的“图层图层2”成为空图层，按下成为空图层，按下“delete”键删除键删除“图层图层2”。如图。如图5-27所示。所示。（3）制作）制作“快乐去旅行快乐去旅行”文字位移动画，产生由左上至右下的位移效果文字位移动画，产生由左上至右下的位移效果在在“图层图层1”的的50帧处，单击鼠标右键，在快捷菜单选择帧处，单击鼠标右键，在快捷菜单选择“插入帧插入帧”选项，选项，使使“图层图层1”中的背景图像保持显示到中的背景图像保持显示到50帧。如图帧。如图5-27所示。所示。选择总长度选择总长度50帧，是因为每个文字动画的时间长度计划为帧，是因为每个文字动画的时间长度计划为5帧，共帧，共10个文字。个
31、文字。图5-26 文字分离图5-27 文字分散到层网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2在在“编辑编辑”菜单选择菜单选择“标尺标尺”选项，工作区显示标尺刻度线。使用选项，工作区显示标尺刻度线。使用“选择工具选择工具”，拖，拖拽顶端标尺到第一行文字下方对齐，继续拖拽左端标尺到第一行文字左边对齐。如图拽顶端标尺到第一行文字下方对齐，继续拖拽左端标尺到第一行文字左边对齐。如图5-28所示。所示。拖拽的标尺线称为标尺参考线，是为了后续移动文字时，使文字在同一水平线对齐。拖拽的标尺线称为标尺参考线，是为了后续移动文
32、字时，使文字在同一水平线对齐。选中时间轴第选中时间轴第1帧，在舞台中全选第一行文字帧，在舞台中全选第一行文字“快乐去旅游快乐去旅游”，将文字移出舞台至舞，将文字移出舞台至舞台上方。播放动画时，文字将从画面外进入舞台。台上方。播放动画时，文字将从画面外进入舞台。制作制作“快快”字的动画效果。在字的动画效果。在“快快”图层的第图层的第“5帧帧”处，单击鼠标右键，在快捷菜处，单击鼠标右键，在快捷菜单选择单选择“插入关键帧插入关键帧”选项，使用移动工具把选项，使用移动工具把“快快”字从舞台上方移到舞台标尺标注的字从舞台上方移到舞台标尺标注的位置。在第位置。在第50帧处插入帧，使帧处插入帧，使“快快”字
33、运动完成后保持显示到字运动完成后保持显示到50帧。如图帧。如图5-30所示。所示。图5-30“快”字动画设置网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2制作制作“乐乐”字动画效果。移动字动画效果。移动“乐乐”图层第图层第1帧到第帧到第5帧处，并在第帧处，并在第10帧处插帧处插入关键帧，把入关键帧，把“乐乐”字从画面外拖拽到舞台中。即字从画面外拖拽到舞台中。即“乐乐”字从第字从第5帧开始从画面帧开始从画面外飞入舞台。在外飞入舞台。在“乐乐”字图层第字图层第50帧处插入帧，使帧处插入帧，使“乐乐”字运动完成后保持显
34、字运动完成后保持显示到示到50帧。帧。参考步骤参考步骤-，制作，制作“去去”、“旅旅”、“行行”3个字的动画效果。个字的动画效果。设置设置“快快”图层的补间动画。在图层的补间动画。在“快快”字图层的字图层的1到到5帧之间，单击右键，在帧之间，单击右键，在快捷菜单选择快捷菜单选择“创建传统补间创建传统补间”选项，设置选项，设置“快快”字的位移补间动画效果。字的位移补间动画效果。重复上述操作，为重复上述操作，为“乐乐”、“去去”、“旅旅”、“游游”图层分别设置位移补间动图层分别设置位移补间动画效果。画效果。（4）制作）制作“行走人生路行走人生路”文字位移动画，产生由右上至左下的位移效果文字位移动画
35、，产生由右上至左下的位移效果在第在第1帧处拖拽标尺线对齐到文字帧处拖拽标尺线对齐到文字“行行”的左侧。将的左侧。将“行走人生路行走人生路”文字移出文字移出舞台至舞台右上方。舞台至舞台右上方。参照（参照（3）的步骤）的步骤-，制作，制作“行走人生路行走人生路”的动画效果。如图的动画效果。如图5-33所示。所示。（5）保存动画文件，导出播放文件）保存动画文件，导出播放文件在在“控制控制”菜单选择菜单选择“播放播放”选项，也可按下选项，也可按下“ctrl+enter”组合键，预览动组合键，预览动画。画。保存源文件。在保存源文件。在“文件文件”菜单选择菜单选择“另存为另存为”，将文件存储为，将文件存储
36、为.fla的原文件格的原文件格式。式。导出播放文件。在导出播放文件。在“文件文件”菜单选择菜单选择“导出导出”、“导出影片导出影片”选项，将文件选项，将文件存储为存储为.swf播放文件格式。播放文件格式。网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画利用移动补间动画制作网页页眉利用移动补间动画制作网页页眉 5.4.2 操作实例5-3的图层与帧设置网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画制作图片切换动画 5.4.3预备知识：元件透明度预备知识：元件透明度通过改变元件的透明度，可以制作元件透明度的补间动画。透明度值从通过改变元件的透明度，可以制作元件透明度的补间动
37、画。透明度值从0到到100。0代表完全透明，代表完全透明，100是不透明。是不透明。设置透明度（设置透明度（Alpha）的方法：选中舞台上的元件，在元件属性面板的）的方法：选中舞台上的元件，在元件属性面板的“色彩色彩效果效果”栏，单击栏，单击“样式样式”下拉列表，选择下拉列表，选择“Alpha”选项，拖动选项，拖动“Alpha”滑块，滑块，可以改变透明度值，也可通过右侧文本框直接输入数值。可以改变透明度值，也可通过右侧文本框直接输入数值。操作实例操作实例5-4 制作图片切换的动画。制作图片切换的动画。操作步骤：操作步骤：（1）新建）新建Flash文档，制作背景文档，制作背景新建新建flash文
38、档，利用文档，利用“文件文件”菜单的菜单的“导入导入”、“导入到库导入到库”选项，将选项，将“广告栏背景广告栏背景”和和“广告栏图片广告栏图片”导入库。导入库。将将“广告栏背景广告栏背景”图像拖到舞台，利用位图属性面板查看其尺寸，利用文图像拖到舞台，利用位图属性面板查看其尺寸，利用文档属性面板更改舞台大小为档属性面板更改舞台大小为231*113像素。像素。网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画制作图片切换动画 5.4.3利用位图属性面板将利用位图属性面板将“广告栏背景广告栏背景”图像坐标图像坐标“X”、“Y”设置为设置为“0”，使，使图像与舞台对齐。如图图像与舞台对齐。如
39、图5-35、图、图5-36所示。所示。锁定广告栏背景图层锁定广告栏背景图层“图层图层1”。（2）制作第一个张图片，设置图形元件透明度补间动画）制作第一个张图片，设置图形元件透明度补间动画新建新建“图层图层2”，将库中的，将库中的“广告栏图片广告栏图片”拖拽到舞台，使用工具箱的拖拽到舞台，使用工具箱的“移移动工具动工具”，并配合键盘的移动键，移动图片与图层，并配合键盘的移动键，移动图片与图层1的背景图片上对齐。的背景图片上对齐。选择图层选择图层2，在，在“修改修改”菜单选择菜单选择“转换成元件转换成元件”选项，在选项，在“转换为元件转换为元件”对话框，对话框，“名称名称”为为“元件元件1”、“类
40、型类型”选择选择“图形图形”。“广告栏图片广告栏图片”被被转换为图形元件。转换为图形元件。图5-35 属性栏 图5-36 背景图片 网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画制作图片切换动画 5.4.3选择图层选择图层2，在第，在第5帧、第帧、第10帧、第帧、第15帧处分别插入关键帧。帧处分别插入关键帧。在时间轴第在时间轴第1帧处，选中舞台图片，在元件属性面板设置透明度帧处，选中舞台图片，在元件属性面板设置透明度（Alpha）”。将。将“Alpha”值设为值设为“40”后，图片变得透明了。如图后，图片变得透明了。如图5-40所示。所示。在第在第15帧处，选中舞台图像，设置帧处
41、，选中舞台图像，设置“Alpha”值为值为“40”。在第在第1帧和第帧和第10帧处，分别设置补间动画：单击右键，在快捷菜单选择帧处，分别设置补间动画：单击右键，在快捷菜单选择“传传统补间动画统补间动画”，完成动画制作。如图，完成动画制作。如图5-41所示。所示。（3）制作第二张图片，设置图形元件透明度补间动画）制作第二张图片，设置图形元件透明度补间动画将将“广告栏图片广告栏图片2”素材图片导入到库。素材图片导入到库。新建新建“图层图层3”，拖拽，拖拽“广告栏图片广告栏图片2”素材图片到舞台，并转换为图形元件。素材图片到舞台，并转换为图形元件。移动图片位置与背景图片对齐。移动图片位置与背景图片对
42、齐。图5-40 图形元件透明度 图5-41 图形元件补间设置网页设计与制作网页设计与制作5.4 制作补间动画制作补间动画制作图片切换动画 5.4.3选择图层选择图层3第第1帧，拖拽关键帧到第帧，拖拽关键帧到第15帧处。如图帧处。如图5-43所示。所示。在图层在图层3第第20帧、第帧、第25帧、第帧、第30帧处，分别插入关键帧。如图帧处，分别插入关键帧。如图5-44所示。所示。在图层在图层3第第15帧、第帧、第30帧处，分别选中舞台图像，设置透明度帧处，分别选中舞台图像，设置透明度“Alpha”值值为为“30”。在图层在图层3第第15帧、第帧、第25帧处，分别设置补间动画。如图帧处，分别设置补间
43、动画。如图5-45所示。所示。在图层在图层1时间轴第时间轴第30帧处，插入帧，使背景图像延长显示到第帧处，插入帧，使背景图像延长显示到第30帧。如图帧。如图5-45所示。所示。完成制作，保存文件，输出播放文件。完成制作，保存文件，输出播放文件。图5-43 拖拽关键帧 图5-44 创建关键帧 图5-45 插入帧 网页设计与制作网页设计与制作5.5 制作遮罩动画制作遮罩动画 5.5.1遮罩动画是遮罩动画是Flash很重要的动画类型，很多效果丰富的动画都是通过遮罩动画很重要的动画类型，很多效果丰富的动画都是通过遮罩动画实现的。遮罩动画可以是填充的形状、文字对象、图形元件的实例或影片剪实现的。遮罩动画
44、可以是填充的形状、文字对象、图形元件的实例或影片剪辑。辑。遮罩层创建在遮罩层创建在Flash图层中。可以在遮罩层创建一个任意形状的图层中。可以在遮罩层创建一个任意形状的“视窗视窗”，遮，遮罩层下方图层的对象可以通过该罩层下方图层的对象可以通过该“视窗视窗”显示出来，而显示出来，而“视窗视窗”之外的对象之外的对象因被遮住而不能显示。因被遮住而不能显示。可以将多个图层组织在一个遮罩层之中。可以将多个图层组织在一个遮罩层之中。预备知识：任意变形工具预备知识：任意变形工具使用使用“任意变形任意变形”工具可以使图形和图像改变大小或旋转方向，利用工具可以使图形和图像改变大小或旋转方向，利用“任意任意变形变
45、形”工具调整线条和形状轮廓线上的点，还可以产生点的透视变形。移动工具调整线条和形状轮廓线上的点，还可以产生点的透视变形。移动旋转轴心可以产生不同的旋转效果。旋转轴心可以产生不同的旋转效果。“修改修改”菜单的菜单的“变形变形”子菜单，列出了子菜单，列出了11项变形工具。项变形工具。使用工具箱的使用工具箱的“任意变形工具任意变形工具”，也可完成变形操作。，也可完成变形操作。网页设计与制作网页设计与制作5.5 制作遮罩动画制作遮罩动画 5.5.1操作实例操作实例5-5 制作动态制作动态logo。操作步骤：操作步骤：（1）导入）导入logo图标，并编辑位图图标，并编辑位图新建新建flash文档。文档。
46、利用利用“文件文件”菜单的菜单的“导入导入”、“导入到库导入到库”选项，将选项，将“logo”和和“遮罩素遮罩素材材”图像导入到库。图像导入到库。打开库面板，将打开库面板，将“logo”图像拖拽到舞台上。图像拖拽到舞台上。利用文档属性面板更改舞台大小为利用文档属性面板更改舞台大小为183*50像素。像素。使用工具箱的使用工具箱的“任意变形工具任意变形工具”，调整，调整logo图像的大小，使图像与舞台大图像的大小，使图像与舞台大小匹配。小匹配。新建图层新建图层2，在舞台右侧输入文字，在舞台右侧输入文字“我爱旅游我爱旅游”和和“I love to travel”，设，设置中文字体为置中文字体为“黑
47、体黑体”、大小为、大小为“30”、颜色为、颜色为“黑色黑色”；英文字体为；英文字体为“Arial Rounded MT Bold”、大小为、大小为“17”、颜色为、颜色为“黑色黑色”。并调整文字的构图布。并调整文字的构图布局。局。网页设计与制作网页设计与制作5.5 制作遮罩动画制作遮罩动画 5.5.1（2）创建图形元件，并制作关键帧动画）创建图形元件，并制作关键帧动画新建图层新建图层3，将，将“遮罩素材遮罩素材”图像从库中拖拽到舞台上，并调整图像大小与图像从库中拖拽到舞台上，并调整图像大小与位置。如图位置。如图5-50所示。所示。在在“修改修改”菜单选择菜单选择“转换成元件转换成元件”选项，将
48、素材图像转换为图形元件选项，将素材图像转换为图形元件“元件元件1”。如图。如图5-50所示。所示。在图层在图层1、图层、图层2的第的第20帧处插入帧。帧处插入帧。在图层在图层3的第的第1帧处，将图形元件帧处，将图形元件1移动到文字的左侧。如图移动到文字的左侧。如图5-50所示。所示。在图层在图层3的第的第20帧处，插入关键帧，将图形元件帧处，插入关键帧，将图形元件1水平移动到文字右侧对齐。水平移动到文字右侧对齐。如图如图5-51所示。所示。在第在第1到到20帧任意一帧上单击右键创建帧任意一帧上单击右键创建“传统补间动画传统补间动画”。预览效果是图形元件由右向左位移。预览效果是图形元件由右向左位
49、移。图5-50“遮罩素材”图像的位置图5-51 图形元件位移网页设计与制作网页设计与制作5.5 制作遮罩动画制作遮罩动画 5.5.1（3）创建遮罩动画）创建遮罩动画将图层将图层3拖拽到图层拖拽到图层2下方，使文字图层在图像图层的上方显示。如图下方，使文字图层在图像图层的上方显示。如图5-52所示。所示。在图层在图层2（文字层）上单击右键，在快捷菜单选择（文字层）上单击右键，在快捷菜单选择“遮罩层遮罩层”选项，添加遮选项，添加遮罩动画效果。如图罩动画效果。如图5-53所示。所示。完成制作，保存文件，输出播放文件。完成制作，保存文件，输出播放文件。图5-52 图层位移图5-53 图形元件位移网页设
50、计与制作网页设计与制作5.6 制作引导线动画制作引导线动画 5.5.1引导线动画主要以移动补间动画为基础，通过引导层路径，使运动图引导线动画主要以移动补间动画为基础，通过引导层路径，使运动图形沿着特定路线进行补间动画，很多特殊效果都是通过引导线动画类形沿着特定路线进行补间动画，很多特殊效果都是通过引导线动画类型实现的。型实现的。引导层是制作引导线动画的关键。在引导层建立曲线线段作为动画的引导层是制作引导线动画的关键。在引导层建立曲线线段作为动画的路径，曲线线段是不封闭的，有起点和终点，起点和终点之间必须是路径，曲线线段是不封闭的，有起点和终点，起点和终点之间必须是连续的。引导层中的引导线在视图
