第9章节网页制作技术与案例精解9.pptVIP

教材：网页制作技术与案例精解主编：赖步英 清华大学出版社(2009.8) 在网页设计中，除了在网页中插入文字、图片、表格、层等元素外，动画也是不可少的一种网页元素。网页设计中的动画设计，一般采用Flash动画制作软件来制作。利用包含Flash创作工具、渲染引擎，我们可以制作出各式各样的Flash动画来为网页增添动态美感。 主要内容: 任务1 Flash动画原理 任务2 Flash基础 任务3 制作一个按钮元件 任务4 制作一个逐帧动画 任务5 制作一个补间动画 任务6 创建遮罩动画 任务7 创建交互动画 任务8 声音 任务9 Flash影片的发布 任务1 Flash动画原理 知识点：Flash CS3动画原理、功能和应用 1．传统动画、实时动画和电脑动画 传统动画（Conventional Animation）是连续画面（Frame By Frame）的动画。 实时动画（Real—time Animation）是电脑应用于动画制作之后产生的一个全新概念。 电脑动画（Computer Animation）是指使用计算机产生动画效果。2．Flash CS3的特点与主要功能 Flash CS3（CS就是Creative Suite的意思）是两个媒体设计界巨头合并后于2007年开发的新版Flash动画制作软件，它的特点与主要功能见教材 3．Flash CS3应用领域 在现阶段，Flash CS3应用的领域主要有以下。 娱乐短片;片头;广告;MTV;导航条;小游戏：应用程序开发的界面;开发网络应用程序等. 知识点：认识Flash CS3工作窗口 1．Flash CS3的工作窗口 Flash CS3工作窗口一般包括标题栏、菜单栏、时间轴、工具栏、工作区、填充色、帧动作面板、属性面板和浮动面板等。 1）工具栏:工具栏分为工具、查看、颜色和选项4个区域。 2）浮动面板:浮动面板位于工作窗口的右侧，可以根据用户的需要任意关闭或打开。 3）属性面板:“属性”面板位于视图的最下方，在工作区中编辑的每个对象，在其选中状态下，都将在“属性”面板中显示其常规信息，并且可以在属性面板中对其信息进行修改。 4）菜单栏:动画制作所需要的所有操作选项均保存在菜单栏中。 5）舞台、工作区、场景:工作窗口下半部分的灰色区域是工作区，工作区中的白色区域称为舞台，它是绘制静态画面的区域。 6）时间轴窗口:时间轴位于工作区的上方。 知识点：创建元件和转换为元件 1．元件的创建 执行下面的步骤可创建元件。 （1）选择“插入”|“新建元件”命令，弹出“创建新元件”对话框。 （2）在“名称”文本框中为新元件命名。 “类型”选项组中包括以下3种选项。 影片剪辑：使用影片剪辑元件可以创建可重用的动画片段。 图形：图形元件可用于静态图像，并可用于创建连接到主时间轴的可重用的动画片段。 按钮：使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交互，可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。 2．转换元件,转换方法如下： （1）选中需要转换的图像。 （2）选择“修改”|“转换为元件”命令，在“转换为元件”对话框中选择新元件的类型. 知识点：帧、关键帧和逐帧动画 1．帧和关键帧 动画是由若干张连续播放动画的画面组成的，帧正是组成动画的单一画面，是动画中最小的时间单位。关键帧可定义在动画中的变化的帧。创建逐帧动画时，每个帧都是关键帧。在补间动画中，可以在动画的重要位置定义关键帧，让Flash创建关键帧之间的其他帧。关键帧在时间轴中有明显的标志：有内容的关键帧以该帧前面的实心圆表示；空白关键帧之间的其他帧则以该帧前面的空心圆表示，以后添加到同一层的帧的内容将和关键帧相同。 2．制作逐帧动画 创建逐帧动画，需要将每个帧都定义为关键帧，然后给每个帧创建不同的图像。每个新关键帧最初包含的内容与它前面的关键帧一样，因此可以递增地修改动画中的帧。 操作步骤： （1）选择“文件”|“新建”命令，设置场景尺寸宽为550像素、高为200像素，背景颜色为黑色。 （2）在图层1中创建一个橘红色矩形（宽550，高150），作为主画面。在时间轴上的第45帧处右击选择“插入帧”。 （3）新建图层即“图层2”，在此层的时间轴上单击第1帧，选取“文本”工具，输入第一个文字“广”。设置文字为宋体，白色，字号为50。 （4）在“图层2”的时间轴中第5帧上右击，在弹出的快捷菜单中选择“插入关键帧”，选取“文本”工具在“广”后面输入文字“州”。 （5）按步骤（4）相同的方法，依次在第10、15、20、25、30、35、40、45等帧处右击选择“插入关键帧”，并依次输入文字“外”、“语”、“艺”、“术”、“职”、“业”、“学”、“院”，如图9-10所示。 （6）测试影片按组合键Sh