网页制作技术与案例精解.ppt

《网页制作技术与案例精解.ppt》由会员分享，可在线阅读，更多相关《网页制作技术与案例精解.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教材：网页制作技术与案例精解教材：网页制作技术与案例精解主编：赖步英主编：赖步英 清华大学出版社清华大学出版社(2009.8)(2009.8)1第第9章章FlashCS3让网页动起来让网页动起来在网页设计中，除了在网页中插入文字、图片、表格、层等元素在网页设计中，除了在网页中插入文字、图片、表格、层等元素外，动画也是不可少的一种网页元素。网页设计中的动画设计，外，动画也是不可少的一种网页元素。网页设计中的动画设计，一般采用一般采用Flash动画制作软件来制作。利用包含动画制作软件来制作。利用包含Flash创作工具创作工具、渲染引擎，我们可以制作出各式各样的、渲染引擎，我们可以制作出各式各样的F

2、lash动画来为网页动画来为网页增添动态美感。增添动态美感。主要内容主要内容:任务任务1Flash动画原理动画原理任务任务2Flash基础基础任务任务3制作一个按钮元件制作一个按钮元件任务任务4制作一个逐帧动画制作一个逐帧动画任务任务5制作一个补间动画制作一个补间动画任务任务6创建遮罩动画创建遮罩动画任务任务7创建交互动画创建交互动画任务任务8声音声音任务任务9Flash影片的发布影片的发布 2任务任务1 1Flash动画原理动画原理知识点：知识点：FlashCS3动画原理、功能和应用动画原理、功能和应用1传统动画、实时动画和电脑动画传统动画（传统动画（ConventionalAnimatio

3、n）是连续画面（）是连续画面（FrameByFrame）的动画。）的动画。实时动画（实时动画（RealtimeAnimation）是电脑应用于动画制作）是电脑应用于动画制作之后产生的一个全新概念。之后产生的一个全新概念。电脑动画（电脑动画（ComputerAnimation）是指使用计算机产生动）是指使用计算机产生动画效果。画效果。2Flash CS3的特点与主要功能FlashCS3（CS就是就是CreativeSuite的意思）是两个媒体设的意思）是两个媒体设计界巨头合并后于计界巨头合并后于2007年开发的新版年开发的新版Flash动画制作软件，动画制作软件，它的特点与主要功能见教材它的特点

4、与主要功能见教材3Flash CS3应用领域在现阶段，在现阶段，FlashCS3应用的领域主要有以下。应用的领域主要有以下。娱乐短片娱乐短片;片头片头;广告广告;MTV;导航条导航条;小游戏：应用程序开小游戏：应用程序开发的界面发的界面;开发网络应用程序等开发网络应用程序等.返回目录返回目录3知识点：认识知识点：认识FlashCS3工作窗口工作窗口1Flash CS3的工作窗口FlashCS3工作窗口一般包括标题栏、菜单栏、时间轴、工具栏、工工作窗口一般包括标题栏、菜单栏、时间轴、工具栏、工作区、填充色、帧动作面板、属性面板和浮动面板等。作区、填充色、帧动作面板、属性面板和浮动面板等。1）工具

5、栏）工具栏:工具栏分为工具、查看、颜色和选项工具栏分为工具、查看、颜色和选项4个区域。个区域。2）浮动面板）浮动面板:浮动面板位于工作窗口的右侧，可以根据用户的需要任浮动面板位于工作窗口的右侧，可以根据用户的需要任意关闭或打开。意关闭或打开。3）属性面板）属性面板:“属性属性”面板位于视图的最下方，在工作区中编辑的每面板位于视图的最下方，在工作区中编辑的每个对象，在其选中状态下，都将在个对象，在其选中状态下，都将在“属性属性”面板中显示其常规信息，面板中显示其常规信息，并且可以在属性面板中对其信息进行修改。并且可以在属性面板中对其信息进行修改。4）菜单栏）菜单栏:动画制作所需要的所有操作选项均

6、保存在菜单栏中。动画制作所需要的所有操作选项均保存在菜单栏中。5）舞台、工作区、场景）舞台、工作区、场景:工作窗口下半部分的灰色区域是工作区，工工作窗口下半部分的灰色区域是工作区，工作区中的白色区域称为舞台，它是绘制静态画面的区域。作区中的白色区域称为舞台，它是绘制静态画面的区域。6）时间轴窗口）时间轴窗口:时间轴位于工作区的上方。时间轴位于工作区的上方。任务任务2 Flash基础基础返回目录返回目录4知识点：创建元件和转换为元件知识点：创建元件和转换为元件1元件的创建元件的创建执行下面的步骤可创建元件。执行下面的步骤可创建元件。（1）选择）选择“插入插入”|“新建元件新建元件”命令，弹出命令

7、，弹出“创建新元件创建新元件”对话框。对话框。（2）在）在“名称名称”文本框中为新元件命名。文本框中为新元件命名。“类型类型”选项组中包括以下选项组中包括以下3种选项。种选项。影片剪辑：使用影片剪辑元件可以创建可重用的动画片段。影片剪辑：使用影片剪辑元件可以创建可重用的动画片段。图形：图形元件可用于静态图像，并可用于创建连接到主时间轴的图形：图形元件可用于静态图像，并可用于创建连接到主时间轴的可重用的动画片段。可重用的动画片段。按钮：使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交按钮：使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交互，可以定义与各种按钮状态关联的图形，然后将动作指定

8、给按钮互，可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。实例。2转换元件转换元件,转换方法如下：转换方法如下：（1）选中需要转换的图像。）选中需要转换的图像。（2）选择）选择“修改修改”|“转换为元件转换为元件”命令，在命令，在“转换为元件转换为元件”对话框中选对话框中选择新元件的类型择新元件的类型.任务任务3 制作一个按钮元件制作一个按钮元件返回目录返回目录5操作步骤：操作步骤：（1）启动）启动Flash CS3，新建一个，新建一个Flash文档，利用文档，利用“椭圆椭圆”工具在场景工具在场景1中绘制一个椭圆，设置椭圆线条粗细为中绘制一个椭圆，设置椭圆线条粗细为5.75，填充色

9、为无。，填充色为无。（2）利用）利用“橡皮橡皮”工具在椭圆顶端和底端擦出一个缺口。工具在椭圆顶端和底端擦出一个缺口。（3）利用）利用“铅笔铅笔”工具在椭圆形顶端画一条根茎。工具在椭圆形顶端画一条根茎。（4）利用）利用“选择选择”工具将工具将“苹果苹果”选中，把苹果转换为按钮。选中，把苹果转换为按钮。（5）在时间轴的）在时间轴的“指针经过指针经过”下方的空格处右击，选择下方的空格处右击，选择“插入关键帧插入关键帧”。选中选中“苹果苹果”，利用，利用“变形变形”工具将工具将“苹果苹果”的大小设置为高为的大小设置为高为130，宽，宽为为130。（6）利用）利用“文字工具文字工具”在在“苹果苹果”图形

10、上面输入图形上面输入“APPLE”。（7）在时间轴上的）在时间轴上的“按下按下”下方的空格处右击，选择下方的空格处右击，选择“插入关键帧插入关键帧”。选中文字选中文字“APPLE”并将它删除，利用并将它删除，利用“橡皮橡皮”工具将工具将“红苹果红苹果”擦成如擦成如图图9-7所示的形状。所示的形状。（8）在时间轴）在时间轴“点击点击”下方的空格处右击，选择下方的空格处右击，选择“插入关键帧插入关键帧”。单击。单击“场景场景1”，选择，选择“控制控制”|“测试影片测试影片”命令测试命令测试“动感红苹果动感红苹果”。（9）保存文件，选择）保存文件，选择“文件文件”|“导出导出”|“导出影片导出影片”

11、命令。命令。【案例【案例9-1】创建动感创建动感“红苹果红苹果”按钮按钮返回目录返回目录6知识点：帧、关键帧和逐帧动画知识点：帧、关键帧和逐帧动画1帧和关键帧帧和关键帧动画是由若干张连续播放动画的画面组成的，帧正是组成动画是由若干张连续播放动画的画面组成的，帧正是组成动画的单一画面，是动画中最小的时间单位。关键帧可定动画的单一画面，是动画中最小的时间单位。关键帧可定义在动画中的变化的帧。创建逐帧动画时，每个帧都是关义在动画中的变化的帧。创建逐帧动画时，每个帧都是关键帧。在补间动画中，可以在动画的重要位置定义关键帧，键帧。在补间动画中，可以在动画的重要位置定义关键帧，让让Flash创建关键帧之间

12、的其他帧。关键帧在时间轴中有创建关键帧之间的其他帧。关键帧在时间轴中有明显的标志：有内容的关键帧以该帧前面的实心圆表示；明显的标志：有内容的关键帧以该帧前面的实心圆表示；空白关键帧之间的其他帧则以该帧前面的空心圆表示，以空白关键帧之间的其他帧则以该帧前面的空心圆表示，以后添加到同一层的帧的内容将和关键帧相同。后添加到同一层的帧的内容将和关键帧相同。2制作逐帧动画制作逐帧动画创建逐帧动画，需要将每个帧都定义为关键帧，然后给每创建逐帧动画，需要将每个帧都定义为关键帧，然后给每个帧创建不同的图像。每个新关键帧最初包含的内容与它个帧创建不同的图像。每个新关键帧最初包含的内容与它前面的关键帧一样，因此可

13、以递增地修改动画中的帧。前面的关键帧一样，因此可以递增地修改动画中的帧。任务任务4 制作一个逐帧动画制作一个逐帧动画返回目录返回目录7操作步骤：操作步骤：（1）选择）选择“文件文件”|“新建新建”命令，设置场景尺寸宽为命令，设置场景尺寸宽为550像素、高为像素、高为200像素，背景颜色为黑色。像素，背景颜色为黑色。（2）在图层）在图层1中创建一个橘红色矩形（宽中创建一个橘红色矩形（宽550，高，高150），作为主画面。），作为主画面。在时间轴上的第在时间轴上的第45帧处右击选择帧处右击选择“插入帧插入帧”。（3）新建图层即）新建图层即“图层图层2”，在此层的时间轴上单击第，在此层的时间轴上单击

14、第1帧，选取帧，选取“文本文本”工具，输入第一个文字工具，输入第一个文字“广广”。设置文字为宋体，白色，字号为。设置文字为宋体，白色，字号为50。（4）在）在“图层图层2”的时间轴中第的时间轴中第5帧上右击，在弹出的快捷菜单中选择帧上右击，在弹出的快捷菜单中选择“插入关键帧插入关键帧”，选取，选取“文本文本”工具在工具在“广广”后面输入文字后面输入文字“州州”。（5）按步骤（）按步骤（4）相同的方法，依次在第）相同的方法，依次在第10、15、20、25、30、35、40、45等帧处右击选择等帧处右击选择“插入关键帧插入关键帧”，并依次输入文字，并依次输入文字“外外”、“语语”、“艺艺”、“术术

15、”、“职职”、“业业”、“学学”、“院院”，如图，如图9-10所所示。示。（6）测试影片按组合键）测试影片按组合键Shift+Enter，可以看见文字的打印效果。，可以看见文字的打印效果。（7）保存文件，选择）保存文件，选择“文件文件”|“导出导出”|“导出影片导出影片”命令，以命令，以dazi.swf文件名保存在文件名保存在【案例【案例9-2】逐帧动画逐帧动画打字效果打字效果返回目录返回目录8【案例【案例9-3】逐渐消失的逐渐消失的“爱爱”操作步骤：操作步骤：（1）启动）启动FlashCS3，新建文档，将文档属性设置为：高为，新建文档，将文档属性设置为：高为400像素，像素，宽为宽为400像

16、素，背景颜色为白色。像素，背景颜色为白色。（2）选取）选取“文本文本”工具，在舞台中输入工具，在舞台中输入“爱爱”字（字体为华文楷体，字（字体为华文楷体，字号为字号为96，颜色为红色），并使用，颜色为红色），并使用“变形变形”工具放大为宽工具放大为宽200高高197.5，如图，如图9-11所示。所示。（3）用）用“选择选择”工具选中工具选中“爱爱”字，选择字，选择“修改修改”|“分离分离”命令，将命令，将“爱爱”字打散，在图层一时间轴上的第字打散，在图层一时间轴上的第5帧处右击并在弹出的快捷菜单帧处右击并在弹出的快捷菜单中选择中选择“插入关键帧插入关键帧”。（4）单击第）单击第5帧处的关键帧，

17、选取帧处的关键帧，选取“橡皮橡皮”工具，擦掉工具，擦掉“爱爱”字底部的字底部的小部分，同样在第小部分，同样在第10帧处右击并在弹出的快捷菜单中选择帧处右击并在弹出的快捷菜单中选择“插入关键插入关键帧帧”，再选取，再选取“橡皮橡皮”工具，擦掉工具，擦掉“爱爱”字的下半部分，依次类推，直字的下半部分，依次类推，直到第到第30帧，把帧，把“爱爱”字从下往上逐渐擦掉，如图字从下往上逐渐擦掉，如图9-12所示为第所示为第5帧和第帧和第15帧帧“爱爱”字被擦除的效果。字被擦除的效果。（5）以）以ai.fla保存在保存在“chap9案例案例9-3”文件夹中。文件夹中。（6）测试并导出影片，选择）测试并导出影

18、片，选择“文件文件”|“导出导出”|“导出影片导出影片”命令，命令，以以ai.swf文件名保存在文件名保存在“chap9案例案例9-3”文件夹中。文件夹中。返回目录返回目录9【案例【案例9-4】夜晚天空上闪烁的星星夜晚天空上闪烁的星星返回目录返回目录10客户端客户端服务器端服务器端【案例【案例【案例【案例9-49-4】夜晚天空上闪烁的星星夜晚天空上闪烁的星星夜晚天空上闪烁的星星夜晚天空上闪烁的星星操作步骤：操作步骤：操作步骤：操作步骤：（1 1）新建一个）新建一个）新建一个）新建一个FlashFlash文档，设置文档大小为文档，设置文档大小为文档，设置文档大小为文档，设置文档大小为550550

19、像素宽、像素宽、像素宽、像素宽、400400像素高，像素高，像素高，像素高，背景色设置为黑色。背景色设置为黑色。背景色设置为黑色。背景色设置为黑色。（2 2）在）在）在）在“图层图层图层图层1”1”中选取中选取中选取中选取“椭圆形椭圆形椭圆形椭圆形”工具，并在工具，并在工具，并在工具，并在“属性属性属性属性”面板中设置填面板中设置填面板中设置填面板中设置填充色为充色为充色为充色为“白色白色白色白色”，描边颜色为，描边颜色为，描边颜色为，描边颜色为“无无无无”，在舞台中绘制一个椭圆形。，在舞台中绘制一个椭圆形。，在舞台中绘制一个椭圆形。，在舞台中绘制一个椭圆形。（3 3）选中整个椭圆，选择）选中

20、整个椭圆，选择）选中整个椭圆，选择）选中整个椭圆，选择“编辑编辑编辑编辑”|“”|“复制复制复制复制”命令，选择命令，选择命令，选择命令，选择“编辑编辑编辑编辑”|“”|“粘贴到中心位置粘贴到中心位置粘贴到中心位置粘贴到中心位置”命令，则复制一个相同的椭圆形。将复制的椭圆形命令，则复制一个相同的椭圆形。将复制的椭圆形命令，则复制一个相同的椭圆形。将复制的椭圆形命令，则复制一个相同的椭圆形。将复制的椭圆形旋转旋转旋转旋转4545，并与椭圆形中心点对齐，同理再复制两个相同的椭圆形，得，并与椭圆形中心点对齐，同理再复制两个相同的椭圆形，得，并与椭圆形中心点对齐，同理再复制两个相同的椭圆形，得，并与椭

21、圆形中心点对齐，同理再复制两个相同的椭圆形，得到了一个星形。到了一个星形。到了一个星形。到了一个星形。（4 4）选择）选择）选择）选择“编辑编辑编辑编辑”|“”|“全选全选全选全选”命令，将命令，将命令，将命令，将“星形星形星形星形”全部选中，选择全部选中，选择全部选中，选择全部选中，选择“修修修修改改改改”|“”|“转换元件转换元件转换元件转换元件”命令，设置类型为图形，把星形转换为图形元件命令，设置类型为图形，把星形转换为图形元件命令，设置类型为图形，把星形转换为图形元件命令，设置类型为图形，把星形转换为图形元件1 1。（5 5）将留在场景中的星形元件全部删除，在场景中利用）将留在场景中的

22、星形元件全部删除，在场景中利用）将留在场景中的星形元件全部删除，在场景中利用）将留在场景中的星形元件全部删除，在场景中利用“椭圆工具椭圆工具椭圆工具椭圆工具”绘制一个圆形，改变颜色，使圆形变为光晕效果。然后，选择绘制一个圆形，改变颜色，使圆形变为光晕效果。然后，选择绘制一个圆形，改变颜色，使圆形变为光晕效果。然后，选择绘制一个圆形，改变颜色，使圆形变为光晕效果。然后，选择“修改修改修改修改”|“”|“转换为元件转换为元件转换为元件转换为元件”命令，设置类型为图形，转换为元件命令，设置类型为图形，转换为元件命令，设置类型为图形，转换为元件命令，设置类型为图形，转换为元件2 2。任务任务5 制作一

23、个补间动画制作一个补间动画返回目录返回目录11（6 6）将留在场景中的圆形元件全部删除，选择）将留在场景中的圆形元件全部删除，选择）将留在场景中的圆形元件全部删除，选择）将留在场景中的圆形元件全部删除，选择“插入插入插入插入”|“”|“新建元件新建元件新建元件新建元件”命令，在打开的对话框中设置类型为命令，在打开的对话框中设置类型为命令，在打开的对话框中设置类型为命令，在打开的对话框中设置类型为“影片剪辑影片剪辑影片剪辑影片剪辑”，新建一个，新建一个，新建一个，新建一个“影片剪影片剪影片剪影片剪辑辑辑辑”元件元件元件元件3 3，进入元件，进入元件，进入元件，进入元件3 3的编辑模式，打开的编辑

24、模式，打开的编辑模式，打开的编辑模式，打开“库库库库”面板，分别把面板，分别把面板，分别把面板，分别把“星形星形星形星形”元件元件元件元件1 1和和和和“光晕光晕光晕光晕”元件元件元件元件2 2拖拽到元件拖拽到元件拖拽到元件拖拽到元件3 3场景中，使得场景中，使得场景中，使得场景中，使得“光晕光晕光晕光晕”和和和和“星形星形星形星形”元元元元件中心点重合。件中心点重合。件中心点重合。件中心点重合。（7 7）在元件）在元件）在元件）在元件3“3“图层图层图层图层1”1”的时间轴上，分别在的时间轴上，分别在的时间轴上，分别在的时间轴上，分别在2020、4040、6060帧处插入关键帧。帧处插入关键

25、帧。帧处插入关键帧。帧处插入关键帧。利用利用利用利用“选择选择选择选择”工具，分别在第工具，分别在第工具，分别在第工具，分别在第1 1、2020、4040、6060帧中单击元件帧中单击元件帧中单击元件帧中单击元件1 1或元件或元件或元件或元件2 2（星（星（星（星形或圆），设置形或圆），设置形或圆），设置形或圆），设置“颜色颜色颜色颜色”为为为为“色调色调色调色调”，设置第，设置第，设置第，设置第1 1帧为白色。设置第帧为白色。设置第帧为白色。设置第帧为白色。设置第2020帧的帧的帧的帧的RGBRGB为为为为204204、153153、0 0。（8 8）在元件）在元件）在元件）在元件3 3的的

26、的的“图层图层图层图层1”1”的时间轴中，选取的时间轴中，选取的时间轴中，选取的时间轴中，选取“任意变形任意变形任意变形任意变形”工具，分别对工具，分别对工具，分别对工具，分别对第第第第2020帧、第帧、第帧、第帧、第4040帧和第帧和第帧和第帧和第6060帧处的帧处的帧处的帧处的“星形星形星形星形”元件元件元件元件1 1进行缩放、旋转。然后，在进行缩放、旋转。然后，在进行缩放、旋转。然后，在进行缩放、旋转。然后，在第第第第8080帧处右击，选择帧处右击，选择帧处右击，选择帧处右击，选择“插入关键帧插入关键帧插入关键帧插入关键帧”。（9 9）单击）单击）单击）单击“场景场景场景场景1”1”，回

27、到，回到，回到，回到“场景场景场景场景1”1”中，打开中，打开中，打开中，打开“库库库库”面板，将面板，将面板，将面板，将“影片剪辑影片剪辑影片剪辑影片剪辑”元件元件元件元件3 3拖拽到场景中，选取拖拽到场景中，选取拖拽到场景中，选取拖拽到场景中，选取“任意变形任意变形任意变形任意变形”工具，将在场景中的工具，将在场景中的工具，将在场景中的工具，将在场景中的“元件元件元件元件3”3”缩放、旋转到适当大小。缩放、旋转到适当大小。缩放、旋转到适当大小。缩放、旋转到适当大小。（1010）用）用）用）用“选择选择选择选择”工具选中场景中的工具选中场景中的工具选中场景中的工具选中场景中的“元件元件元件元

28、件3”3”，选择，选择，选择，选择“编辑编辑编辑编辑”|“”|“复制复制复制复制”命令，选择命令，选择命令，选择命令，选择“编辑编辑编辑编辑”|“”|“粘贴到中心位置粘贴到中心位置粘贴到中心位置粘贴到中心位置”命令，命令，命令，命令，（1111）测试影片，保存文件）测试影片，保存文件）测试影片，保存文件）测试影片，保存文件,选择选择选择选择“文件文件文件文件”|“”|“导出导出导出导出”|“”|“导出影片导出影片导出影片导出影片”命令。命令。命令。命令。返回目录返回目录12【案例【案例9-5】创建位置和旋转动画创建位置和旋转动画操作步骤：操作步骤：（1）新建一个）新建一个Flash文档，设置文

29、档宽为文档，设置文档宽为500、高为、高为395，背景色为白色，背景色为白色，（2）选择）选择“文件文件”|“导入导入”|“导入到库导入到库”，选择图像文件（涡，选择图像文件（涡1.jpg），），将将“涡涡1.jpg”拖放到舞台中作为背景，在时间轴上第拖放到舞台中作为背景，在时间轴上第40帧右击，选择帧右击，选择“插入插入关键帧关键帧”。（3）新建）新建“图层图层2”，使用，使用“文字文字”工具，输入文字工具，输入文字“FlashCS3”，选中文，选中文字，选择字，选择“修改修改”|“转换为元件转换为元件”命令，将类型设置为图形。命令，将类型设置为图形。（4）在）在“图层图层2”的第的第1帧处

30、选取帧处选取“任意变形任意变形”工具，单击工具，单击“FlashCS3”文文字，将其缩小并拖放到背景画面底部，并在字，将其缩小并拖放到背景画面底部，并在“属性属性”面板中设置其颜色和色面板中设置其颜色和色调。调。（5）在第）在第10帧处右击并选择帧处右击并选择“插入关键帧插入关键帧”命令，选取命令，选取“任意变形任意变形”工具，工具，在舞台上将该帧在舞台上将该帧“FlashCS3”文字放大并移动到画面中央，并设置其颜色为文字放大并移动到画面中央，并设置其颜色为红色。红色。（6）在第）在第15帧处右击并选择帧处右击并选择“插入关键帧插入关键帧”命令，用命令，用“变形变形”工具将工具将“Flash

31、CS3”文字缩小并旋转，并设置其颜色为白色。文字缩小并旋转，并设置其颜色为白色。（7）在第）在第20帧处右击并选择帧处右击并选择“插入关键帧插入关键帧”命令，使用命令，使用“变形变形”工具使文工具使文字旋转倒置并放大，设置其颜色为粉红色字旋转倒置并放大，设置其颜色为粉红色.（8）在第）在第30帧处右击并选择帧处右击并选择“插入关键帧插入关键帧”命令，使用命令，使用“变形变形”工具使文工具使文字旋转正放并放大，设置其颜色为白色。字旋转正放并放大，设置其颜色为白色。（9）在第）在第40帧处，右击并选择帧处，右击并选择“插入关键帧插入关键帧”命令，使用命令，使用“变形变形”工具使工具使文字旋转正放并

32、放大，设置其颜色为白色。文字旋转正放并放大，设置其颜色为白色。（10）选中第）选中第1、15、20、30帧，右击并选择帧，右击并选择“创建补间动画创建补间动画”命令。命令。（11）测试影片。选择）测试影片。选择“文件文件”|“导出导出”|“导出影片导出影片”命令，保存动画。命令，保存动画。返回目录返回目录13知识点：网站开发流程知识点：网站开发流程知识点：遮罩动画知识点：遮罩动画遮盖项目可以是填充的形状、文字对象、图形元遮盖项目可以是填充的形状、文字对象、图形元件的实例或影片剪辑。可以将多个图层组织在一个遮件的实例或影片剪辑。可以将多个图层组织在一个遮罩之中，以创建复杂的效果。罩之中，以创建复

33、杂的效果。创建遮罩层时，可以将遮罩项目放置在需要用作创建遮罩层时，可以将遮罩项目放置在需要用作遮罩的层上。与填充或笔触不同，遮罩项目好像是个遮罩的层上。与填充或笔触不同，遮罩项目好像是个窗口，透过它可以看到位于它下面的链接层区域。除窗口，透过它可以看到位于它下面的链接层区域。除了透过遮罩项目显示的内容之外，其余的所有内容都了透过遮罩项目显示的内容之外，其余的所有内容都被遮罩层的其余部分隐藏起来。一个遮罩层只能包含被遮罩层的其余部分隐藏起来。一个遮罩层只能包含一个遮罩项目。按钮内部不能有遮罩层，也不能将一一个遮罩项目。按钮内部不能有遮罩层，也不能将一个遮罩层应用于另一个遮罩层。个遮罩层应用于另一

34、个遮罩层。任务任务6 创建遮罩动画创建遮罩动画返回目录返回目录14（1）新建文档，宽）新建文档，宽550、高、高300，背景为黑色，新建一个图层并命名为，背景为黑色，新建一个图层并命名为TEXT，单击，单击TEXT层的第层的第1帧，选取帧，选取“文字文字”工具，在舞台中输入工具，在舞台中输入“中中国益智网国益智网”文本，在属性面板中，设置文本为宋体，文本，在属性面板中，设置文本为宋体，大小为大小为70，颜色为蓝色。在，颜色为蓝色。在TEXT层中的第层中的第30帧处右击并选择帧处右击并选择“插入关插入关键帧键帧”命令。命令。（2）单击）单击“文件文件”|“导入导入”|“导入到库导入到库”命令，选

35、择图像文件命令，选择图像文件(船船.gif），作为移动的背景图像。），作为移动的背景图像。（3）双击）双击“图层图层1”名称改名为名称改名为“遮盖层遮盖层”。单击。单击“遮盖层遮盖层”的第的第1帧，帧，将将“库库”面板中的面板中的“船船”元件元件1拖放到画面右侧，选择拖放到画面右侧，选择“修改修改”|“转换转换为元件为元件”命令，选择类型为图形。命令，选择类型为图形。（4）在）在“遮盖层遮盖层”的第的第30帧处右击并选择帧处右击并选择“插入关键帧插入关键帧”命令。单击命令。单击“遮盖层遮盖层”层的第层的第30帧，将帧，将“船船”元件元件1移动到画面的最左侧移动到画面的最左侧.（5）在）在“遮盖

36、层遮盖层”层时间轴上的第层时间轴上的第130帧之间任意帧处右击，选择帧之间任意帧处右击，选择“创建补间动画创建补间动画”命令，设置图层为移动补间动画。命令，设置图层为移动补间动画。（6）对着）对着TEXT图层右击，选择图层右击，选择“遮罩层遮罩层”命令。命令。（7）测试影片。选择）测试影片。选择“文件文件”|“导出导出”|“导出影片导出影片”命令，保存动画命令，保存动画.【案例【案例9-6】制作一个遮罩动画制作一个遮罩动画返回目录返回目录15操作步骤：操作步骤：（1）新建）新建Flash文档，设置文档大小：宽为文档，设置文档大小：宽为500、高、高400。选择。选择“文文件件”|“导入导入”|

37、“导入到库导入到库”命令，分别导入命令，分别导入4张不同的新闻图像文张不同的新闻图像文件（件（1.jpg，2.jpg,3.jpg，4.jpg）。）。（2）选择）选择“插入插入”|“新建元件新建元件”命令，选择类型为图形，将命令，选择类型为图形，将“库库”面板中的面板中的“1.jpg”图像拖放到元件图像拖放到元件1的舞台上，则把的舞台上，则把“1.jpg“图图像转换为图形元件像转换为图形元件1。用相同方法分别把其他。用相同方法分别把其他3幅图像转换为图形元幅图像转换为图形元件件24。（3）单击）单击“场景场景1”，在，在“图层图层1”的第的第1帧处单击，将帧处单击，将“库库”面板中面板中的的“元

38、件元件1”拖放到场景中央的位置。拖放到场景中央的位置。（4）在）在“图层图层1”的第的第10、15、25帧处分别右击选择帧处分别右击选择“插入关键帧插入关键帧”，在第，在第1、25帧处分别单击场景中的元件帧处分别单击场景中的元件1图像，在其属性面板中图像，在其属性面板中设置设置“颜色颜色”为为“Alpha”，值为，值为“0%”，在第，在第10、15帧处分别单帧处分别单击场景中的元件击场景中的元件1图像，在其属性面板中设置图像，在其属性面板中设置“颜色颜色”为为“Alpha”，值为，值为“100%”，在第，在第110帧之间任意帧处右击，选择帧之间任意帧处右击，选择“创建补间创建补间动画动画”命令

39、，同样，在第命令，同样，在第1525帧之间任意帧处右击，在弹出的快帧之间任意帧处右击，在弹出的快捷菜单中选择捷菜单中选择“创建补间动画。创建补间动画。（5）在）在“场景场景1”的的“图层图层1”上面新建上面新建“图层图层2”，在，在25帧处右击并帧处右击并选择选择“插入关键帧插入关键帧”命令，将命令，将“库库”中的元件中的元件2拖放到场景中，并移拖放到场景中，并移动到场景右侧。动到场景右侧。【案例【案例9-7】新闻广告片头新闻广告片头返回目录返回目录16（6）在）在“图层图层2”的第的第35帧处插入关键帧。单击选中第帧处插入关键帧。单击选中第35帧，移动元件帧，移动元件2到场景中央。在第到场景

40、中央。在第40、50帧分别插入关键帧，单击选中第帧分别插入关键帧，单击选中第50帧，移动元帧，移动元件件2到场景左侧。在第到场景左侧。在第2540帧之间的任意一帧处右击并选择帧之间的任意一帧处右击并选择“创建补间创建补间动画动画”，同样，在第，同样，在第4050帧之间的任意一帧处右击并选择帧之间的任意一帧处右击并选择“创建补间创建补间动画。动画。（7）在）在“图层图层2”上面新建上面新建“图层图层3”，在第，在第50帧处插入关键帧，从帧处插入关键帧，从“库库”中导入元件中导入元件3到场景中，并移动到场景上方。到场景中，并移动到场景上方。（8）在）在“图层图层3”的第的第60帧处插入关键帧。单击

41、选中第帧处插入关键帧。单击选中第60帧，移动元件帧，移动元件3到场景中央。在第到场景中央。在第65、75帧处插入关键帧，单击选中第帧处插入关键帧，单击选中第75帧，移动元件帧，移动元件3到场景下方。单击选中第到场景下方。单击选中第50、75帧，利用帧，利用“变形变形”工具缩小元件工具缩小元件3并旋转并旋转180。分别在第。分别在第50、65帧处右击，在弹出的快捷菜单中选择帧处右击，在弹出的快捷菜单中选择“创建补间创建补间动画动画”命令，设置补间动画，并在命令，设置补间动画，并在“属性属性”面板中设置旋转，逆时针转面板中设置旋转，逆时针转2次，如图次，如图9-29所示。所示。（9）在）在“图层图

42、层3”上面新建上面新建“图层图层4”，在第，在第75帧处插入关键帧，从帧处插入关键帧，从“库库”中导入元件中导入元件3到场景中，并移动到场景中央。到场景中，并移动到场景中央。（10）在）在“图层图层4”的第的第85、90、100帧处插入关键帧，单击选中第帧处插入关键帧，单击选中第100帧，帧，利用利用“变形变形”工具先把元件工具先把元件4旋转旋转180，并缩小元件，并缩小元件4的宽和高直到的宽和高直到0。在。在第第75、100帧处单击，在元件帧处单击，在元件4属性面板中，调整属性面板中，调整“颜色颜色”为为“Alpha”，值为值为0%。分别在第。分别在第75、90帧处右击，在弹出的快捷菜单中选

43、择帧处右击，在弹出的快捷菜单中选择“创建补创建补间动画间动画”命令，设置补间动画，并在第命令，设置补间动画，并在第75帧处元件帧处元件4的的“属性属性”面板中设面板中设置旋转，顺时针转置旋转，顺时针转2次，如图次，如图9-30所示。所示。（11）测试影片。选择）测试影片。选择“文件文件”|“导出导出”|“导出影片导出影片”命令，保存动画。命令，保存动画。返回目录返回目录17任务任务7创建交互动画创建交互动画【案例【案例9-8】鼠标悬停动画鼠标悬停动画操作步骤：操作步骤：（1）新建一个）新建一个Flash文档，改变文档大小，宽为文档，改变文档大小，宽为240，高为，高为131像素。从像素。从外部

44、导入外部导入4幅图（幅图（1.jpg，2.jpg，3.jpg，4.jpg）到）到“库库”中，并分别转换中，并分别转换为为4个图形元件。个图形元件。（2）选择）选择“插入插入”|“新建元件新建元件”命令，选择类型为按钮，单击命令，选择类型为按钮，单击“确定确定”按钮，建立一个按钮按钮，建立一个按钮“元件元件5”。（3）在按钮）在按钮“元件元件5”的的“弹起弹起”下面空格处单击，然后，将下面空格处单击，然后，将“库库”面板面板中的图形元件中的图形元件1拖拽到舞台中央位置。拖拽到舞台中央位置。（4）在）在“鼠标经过鼠标经过”下面空格处右击并选择下面空格处右击并选择“插入关键帧插入关键帧”命令，单击命

45、令，单击舞台中的图形，并在其舞台中的图形，并在其“属性属性”面板中设置面板中设置“颜色颜色”为为“亮度亮度”，亮度，亮度值为值为“16%”。（5）同样，按照步骤（）同样，按照步骤（2）（）（4）分别建立）分别建立3个按钮元件，并将其他个按钮元件，并将其他3个个图形元件分别加入到图形元件分别加入到3个按钮元件中，然后，采用和设置按钮个按钮元件中，然后，采用和设置按钮“元件元件5”一一样的方法设置样的方法设置3个按钮元件的属性。个按钮元件的属性。（6）选择）选择“插入插入”|“新建元件新建元件”命令，选择类型为命令，选择类型为“影片剪辑影片剪辑”，单，单击击“确定确定”按钮，则建立一个按钮，则建立

46、一个“影片剪辑影片剪辑”元件元件9，单击时间轴上的第，单击时间轴上的第1帧，依次将帧，依次将“库库”面板中的面板中的4个按钮元件拖拽到个按钮元件拖拽到“影片剪辑影片剪辑”元件元件9中，中，并将并将4个按钮元件并排放着。个按钮元件并排放着。返回目录返回目录18（7）在）在“影片剪辑影片剪辑”元件元件9的第的第60帧和第帧和第120帧处分别插入关键帧，单击帧处分别插入关键帧，单击选中第选中第60帧，单击帧，单击4个按钮元件，按下向右方向键不放直到个按钮元件，按下向右方向键不放直到4个按钮元件向个按钮元件向右移动两幅图的位置。在第右移动两幅图的位置。在第1帧帧60帧的任意一帧上右击并在弹出的快捷帧的

47、任意一帧上右击并在弹出的快捷菜单中选择菜单中选择“创建补间动画创建补间动画”命令，在第命令，在第60120帧的任意一帧上右击并帧的任意一帧上右击并选择选择“创建补间动画创建补间动画”命令，使影片剪辑中的按钮左右来回移动。命令，使影片剪辑中的按钮左右来回移动。（8）在）在“库库”面板中双击面板中双击“补间补间1”前面的图标，进入前面的图标，进入“补间补间1”编辑模式。编辑模式。（9）在）在“补间补间1”的舞台上右击第一个按钮元件的舞台上右击第一个按钮元件5，选择，选择“动作动作”命令，如命令，如图图9-36所示，在所示，在“动作动作-帧帧”面板的右边文本框中输入如下方框中的语句面板的右边文本框中

48、输入如下方框中的语句（或单击（或单击“+”按钮并在弹出的快捷菜单中选择按钮并在弹出的快捷菜单中选择“全部函数全部函数”|“影片剪辑影片剪辑控制控制”|“on”命令）。命令）。On（rollOver）Stop();On（rollOut）Play();（10）在）在“补间补间1”的舞台上依次单击其他的舞台上依次单击其他3个按钮元件，然后，在个按钮元件，然后，在“动作动作-帧帧”面板右边的文本框中依次输入上面方框中的语句。面板右边的文本框中依次输入上面方框中的语句。（11）单击）单击“场景场景1”，将，将“库库”中的中的“影片剪辑影片剪辑”元件元件9拖拽到场景中，拖拽到场景中，并测试影片。并测试影片

49、。（12）保存文件，选择）保存文件，选择“文件文件”|“导出导出”|“导出影片导出影片”命令，命令，返回目录返回目录19知识点：为动画添加声音知识点：为动画添加声音1导入声音导入声音Flash在库中保存声音、位图和元件。与图形元件一样，只要有一个声音在库中保存声音、位图和元件。与图形元件一样，只要有一个声音文件的副本，就可以在文档中以各种方式使用这个声音。文件的副本，就可以在文档中以各种方式使用这个声音。2为动画添加声音为动画添加声音要将声音从库中添加到文档，可以把声音分配到一个层，然后在要将声音从库中添加到文档，可以把声音分配到一个层，然后在“属性属性”面板的面板的“声音声音”控件中设置选项

50、。应将每个声音放在独立的层上。控件中设置选项。应将每个声音放在独立的层上。3编辑声音编辑声音定义声音的起始点或控制播放时的音量，可以使用定义声音的起始点或控制播放时的音量，可以使用“属性属性”面板中的面板中的“声音声音”编辑控件，如图编辑控件，如图9-37所示。所示。Flash可以改变声音开始播放与停止播可以改变声音开始播放与停止播放的位置，这对于通过删除声音文件的无用部分来减小文件的大小是很放的位置，这对于通过删除声音文件的无用部分来减小文件的大小是很有用的。有用的。执行下列操作可编辑声音。执行下列操作可编辑声音。（1）单击）单击“属性属性”面板中的面板中的“编辑编辑”按钮，弹出按钮，弹出“