《情境3首页动画设计》由会员分享，可在线阅读，更多相关《情境3首页动画设计（39页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作网页设计与制作学习情境3首页动画设计 教学目标教学目标知识目标：知识目标：1了解Flash动画的特点与应用范围。2理解Flash文档、Flash影片的作用，了解Flash播放器。3了解矢量图形的特点，理解Flash形状图形的绘制特点。4理解形状图形与组合图形、元件与库、元件与实例的关系。5理解层、时间轴、帧、场景的概念，了解帧的编辑方法。6理解Flash动画的分类，了解逐帧动画的应用范围；了解补间动画的应用范围。7了解引导层、遮罩层的作用及制作方法。教学目标教学目标能力目标：能力目标：1掌握Flash动画的制作特点和常见动画效果，使学生能运用所学的技能解决简单的实际问题。2掌握F
2、lash动画测试方法，掌握Flash动画的优化的方法，掌握Flash动画发布方法，掌握Flash动画播放方法。3掌握工具箱中各工具的使用方法。4掌握绘制矢量图形的方法。5掌握逐帧动画的制作方法，掌握补间动画的制作方法。6掌握引导层、遮罩层的制作方法。FLASH是Macromedia公司推出的一种优秀的矢量动画编辑软件，Flash以便捷、完美、舒适的动画编辑环境，深受广大动画制作爱好者的喜爱。 在进行福建省国际电子商务网站首页面的设计时，我们将页面的banner用flash制作成动画，通过三幅不同的画面展现公司的服务外贸电子商务、培训认证及公司的技术支持这三方面主要的业务。 FLASH的工作窗口
3、的工作窗口菜单栏工具箱时间轴舞台属性面板工作面板工具箱工具箱部分选取工具部分选取工具套索工具套索工具文本工具文本工具矩形和多角星形工具矩形和多角星形工具刷子工具刷子工具任意变形工具任意变形工具颜料桶工具颜料桶工具橡皮擦工具橡皮擦工具缩放工具缩放工具笔触颜色笔触颜色填充颜色填充颜色选择工具选择工具线条工具线条工具钢笔工具钢笔工具椭圆工具椭圆工具铅笔工具铅笔工具任意变形工具任意变形工具墨水瓶工具墨水瓶工具滴管工具滴管工具手形工具手形工具新建文档在Flash 8的主界面中选择【文件】【新建】命令，在打开的【新建文档】对话框的【常规】选项卡中，选择flash文档类型，然后单击【确定】按钮即可新建一个F
4、lash文档。 新建文档第一步：舞台的设计第一步：舞台的设计在进行首页动画的设计时，首先我们要设计舞台，主要包括背景颜色、场景尺寸、场景、场景显示比例、标尺、网格以及辅助线等内容。 第一步：舞台的设计第一步：舞台的设计第二步：演员的准备第二步：演员的准备导入图片到库1.制作图形元件图形元件用于创建可反复使用的图形或连接到主时间轴的动画片段，它可以是静止的图片，也可以是由多个帧组成的动画。窗口菜单中选择【插入】【新建元件】命令（或按【Ctrl+F8】键），打开【创建新元件】对话框；打开库面板。点击库面板中的添加新元件按钮，会打开创建新元件窗口，如下图：1.制作图形元件1.制作图形元件2影片剪辑元
5、件影片剪辑元件本身也是一段动画。使用影片剪辑元件可创建反复使用的动画片段，且可独立播放。影片剪辑元件拥有自己的独立于主时间轴的多帧时间轴，当播放主动画时，影片剪辑元件也在循环播放。时间轴和帧时间轴和帧 “时间轴”控制面板（简称“时间轴”）可以对动画中层和帧的电影内容进行组织和控制，使这些内容随着时间的推移而发生相应的变化。在Flash中帧的可以理解为在某个时刻的画面。在Flash中帧又可根据其意义和用法不同分为关键帧、普通帧、空白关键帧、空白普通帧和空帧。 时间轴和帧时间轴和帧帧的分类 关键帧关键帧：关键帧定义了动画的变化环节，按【F6】键可以创建关键帧，并在时间轴上显示为一个黑色小圆圈。普通
6、帧普通帧：时间轴中每一小格在创建动画时都是一个普通帧，无内容的帧是空白的单元格，有内容的帧显示出一定的颜色，其中的内容与它前面的一个关键帧的内容完全相同。按【F5】键可以创建普通帧。帧的分类空白关键帧空白关键帧：空白关键帧中没有内容，主要用于在画面与画面之间形成间隔。按【F7】键可以创建空白关键帧，并在时间轴上显示为空心的小圆圈。一旦在空白关键帧中添加了内容，空白关键帧就会变为关键帧。图层的分类图层的分类 普通层：当创建一个新的Flash文档后，它就包含一个普通层，它是Flash中应用最多的图层。引导层：利用引导层可以制作沿路径运动的动画。遮罩层：遮住下面层的内容，透过建立的矢量图形可以看见下
7、面图层的内容。制作影片剪辑元件打开【创建新元件】对话框。新建一个影片剪辑元件，如下图。单击确定按钮进入影片剪辑元件的编辑区。制作影片剪辑元件在图层1插入背景图片，在40帧处插入帧，使得背景保持不变。插入一个新的图层，在第5帧处插入一个关键帧，再将我们事先准备好的图片元件“福建省国际电子商务中心”拖到新建图层上，并调整好位置。创建逐帧动画逐帧动画是指由位于同一图层的许多连续关键帧组成的动画，制作者需要在动画的每一帧中创建不同的内容。当动画播放时，Flash就会一帧一帧地显示每帧中的内容。一个逐帧动画，动画中的每一帧都是关键帧。逐帧动画的特点 逐帧动画中的每一帧都是关键帧，每个帧的内容都需要手动编
8、辑，工作量很大，一般不采用该方式制作动画。逐帧动画由许多单个关键帧组合而成，每个关键帧均可独立编辑，且相邻关键帧中的对象变化不大。逐帧动画的文件较大，不利于编辑。创建逐帧动画在福建省国际电子商务中心的图层中，别在第6,7,8,9,10处插入关键帧。点击图片，在属性窗口里如右图，调整图片的透明度（Alpha），使得图片由模糊到清晰，有一个跳出的感觉。 制作影片剪辑元件接着再分别插入三个新的图层，在一个图层的第15帧处插入一个关键帧，将“依拖高科技，推广电子商务，捉进信息化”图片元件插入到图层中；在另两个图层的第25帧处关键帧，将箭头和“更多了解”元件分别插入图层中，按照设置“福建省国际电子商务中
9、心”图片的主法，设置“依拖高科技，推广电子商务，捉进信息化”和“更多了解”这两个图片。 最后效果图第三步：剧本的编写第三步：剧本的编写flash的动画制作中，剧本就是对时间轴的设置，演员必须按照，时间轴上的设置来表演。 从库中将我们事先准备的元件拖出，放到舞台的相应位置上。通常情况下，将不同的元件放在不同的图层上，这样设置就相互不干扰。 第三步：剧本的编写第三步：剧本的编写我们先将banner1影片剪辑元件拖放到舞台中，并在40帧处插入帧，使得banner1的表演时间为40帧；插入两个图层，在第二个图层的第41帧处插入一个关键帧，将banner2影片剪辑元件拖放到舞台中，在80帧处插入一帧，同
10、样使得banner1的表演时间为40帧；然后在第三个图层的第81帧处插入一个关键帧，将banner3影片剪辑元件拖放到舞台中，在120帧处插入一帧，使得banner3的表演时间为40帧。制作影片剪辑元件制作影片剪辑元件插入一个新图层，将banner1图所对应的小图片添加到图层，并放在舞台下方。制作该小图片向上跳动画，该动画使用补间动画来完成。 补间动画动画补间动画，是制作Flash动画过程中使用得最为频繁的一种动画类型。其就是在两个关键帧上分别定义两个不同的属性，如对象的大小、位置、角度等，然后在两个关键帧之间建立一种运动渐变关系。 动画补间动画的特点不需要手工创建每个帧的内容，只需要创建两个
11、关键帧的内容，两个关键帧之间的所有动画都由Flash创建，制作更加简便。由手工控制，帧与帧之间的过渡可能不自然、连贯；而补间动画除两个关键帧由手工控制外，中间的帧都由Flash自动生成，因此渐变过程更为连贯。文件小，是一种应用较多的动画制作方式动画补间动画制作方法 在动画的起始帧插入关键帧，并编辑起始帧中的内容。选择起始帧，单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命令，或在【属性】面板的【补间】下拉列表框中选择【动画】选项。选择结束帧并插入关键帧，再编辑结束帧中的内容。动画补间动画制作在第4帧处插入一个关键帧，并确定好小图片在第1帧和第4帧处的位置。在第1帧和第4帧之间的灰色过渡帧
12、中单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令。这时从第1帧到第4帧以浅蓝色显示，中间有一个箭头指示，表示小图片将从第1帧运动到第4帧中的位置，这样，就完成了从第1帧到第4帧的运动补间的动画设置。(如下图)动画补间动画制作第三步：剧本的编写第三步：剧本的编写接着再插入一个新的图层，将另两个小图标施入到舞中，使其作用的范围为1-40帧，这样一个banner1图的动画就完成了。插入一个新图层，选择文字输入工具，在舞台上输入：电子商务 服务外贸、人才升级 培训认证及商通软件 助企业腾飞。在120帧处插入一帧，使得文字的使用范围120帧。 第三步：剧本的编写第三步：剧本的编写以同样的办法制作另外两个banner图。最后我们就得到了一个完整三幅banner图相互切换的动画。小结Flash以其独特的特点广泛用于网络动画设计和多媒体创作领域中，深受大家的喜欢。 作为Flash的初学者，不要急于求成，应该循序渐进，首先先掌握动画制作的基本方法，掌握各种元件的制作和各种工具的使用，合理安排知识，并结合相应的实例进行练习。只要持之以恒，就一定可以要做出理想的作品。
