当前位置: 首页 > >

情境3首页动画设计_图文

发布时间:

网页设计与制作
学习情境3.首页动画设计

教学目标
? 知识目标: ? 1.了解Flash动画的特点与应用范围。 ? 2.理解Flash文档、Flash影片的作用,了解Flash播放器。 ? 3.了解矢量图形的特点,理解Flash形状图形的绘制特点。 ? 4.理解形状图形与组合图形、元件与库、元件与实例的
关系。 ? 5.理解层、时间轴、帧、场景的概念,了解帧的编辑方
法。 ? 6.理解Flash动画的分类,了解逐帧动画的应用范围;了
解补间动画的应用范围。 ? 7.了解引导层、遮罩层的作用及制作方法。

教学目标
? 能力目标: ? 1.掌握Flash动画的制作特点和常见动画效果,
使学生能运用所学的技能解决简单的实际问题。 ? 2.掌握Flash动画测试方法,掌握Flash动画的优
化的方法,掌握Flash动画发布方法,掌握Flash 动画播放方法。 ? 3.掌握工具箱中各工具的使用方法。 ? 4.掌握绘制矢量图形的方法。 ? 5.掌握逐帧动画的制作方法,掌握补间动画的制 作方法。 ? 6.掌握引导层、遮罩层的制作方法。

? FLASH是Macromedia公司推出的一种优秀 的矢量动画编辑软件,Flash以便捷、完美、 舒适的动画编辑环境,深受广大动画制作 爱好者的喜爱。
? 在进行福建省国际电子商务网站首页面的 设计时,我们将页面的banner用flash制作 成动画,通过三幅不同的画面展现公司的 服务外贸电子商务、培训认证及公司的技 术支持这三方面主要的业务。

FLASH的工作窗口

菜单栏

时间轴



















属性面板

选择工具 线条工具 钢笔工具 椭圆工具 铅笔工具 任意变形工具 墨水瓶工具 滴管工具
手形工具

工具箱
部分选取工具 套索工具 文本工具 矩形和多角星形工具 刷子工具 任意变形工具
颜料桶工具 橡皮擦工具 缩放工具
笔触颜色 填充颜色

新建文档
? 在Flash 8的主界面中选择【文件】→【新 建】命令,在打开的【新建文档】对话框 的【常规】选项卡中,选择flash文档类型, 然后单击【确定】按钮即可新建一个Flash 文档。

新建文档

第一步:舞台的设计
? 在进行首页动画的设计时,首先我们要设 计舞台,主要包括背景颜色、场景尺寸、 场景、场景显示比例、标尺、网格以及辅 助线等内容。

第一步:舞台的设计

第二步:演员的准备
? 导入图片到库

1.制作图形元件
? 图形元件用于创建可反复使用的图形或连 接到主时间轴的动画片段,它可以是静止 的图片,也可以是由多个帧组成的动画。
? 窗口菜单中选择【插入】→【新建元件】 命令(或按【Ctrl+F8】键),打开【创建 新元件】对话框;
? 打开库面板。点击库面板中的添加新元件 按钮,会打开创建新元件窗口,如下图:

1.制作图形元件

1.制作图形元件

2.影片剪辑元件
? 影片剪辑元件本身也是一段动画。使用影 片剪辑元件可创建反复使用的动画片段, 且可独立播放。
? 影片剪辑元件拥有自己的独立于主时间轴 的多帧时间轴,当播放主动画时,影片剪 辑元件也在循环播放。

时间轴和帧
? “时间轴”控制面板(简称“时间轴”)可 以对动画中层和帧的电影内容进行组织和 控制,使这些内容随着时间的推移而发生 相应的变化。
? 在Flash中帧的可以理解为在某个时刻的画 面。
? 在Flash中帧又可根据其意义和用法不同分 为关键帧、普通帧、空白关键帧、空白普 通帧和空帧。

时间轴和帧

帧的分类
? 关键帧:关键帧定义了动画的变化环节, 按【F6】键可以创建关键帧,并在时间轴 上显示为一个黑色小圆圈。
? 普通帧:时间轴中每一小格在创建动画时 都是一个普通帧,无内容的帧是空白的单 元格,有内容的帧显示出一定的颜色,其 中的内容与它前面的一个关键帧的内容完 全相同。按【F5】键可以创建普通帧。

帧的分类
? 空白关键帧:空白关键帧中没有内容,主 要用于在画面与画面之间形成间隔。按 【F7】键可以创建空白关键帧,并在时间 轴上显示为空心的小圆圈。一旦在空白关 键帧中添加了内容,空白关键帧就会变为 关键帧。

图层的分类
? ⑴普通层:当创建一个新的Flash文档后, 它就包含一个普通层,它是Flash中应用最 多的图层。
? ⑵引导层:利用引导层可以制作沿路径运 动的动画。
? ⑶遮罩层:遮住下面层的内容,透过建立 的矢量图形可以看见下面图层的内容。

制作影片剪辑元件
? 打开【创建新元件】对话框。新建一个影 片剪辑元件,如下图。单击确定按钮进入 影片剪辑元件的编辑区。

制作影片剪辑元件
? 在图层1插入背景图片,在40帧处插入帧, 使得背景保持不变。
? 插入一个新的图层,在第5帧处插入一个关 键帧,再将我们事先准备好的图片元件 “福建省国际电子商务中心”拖到新建图 层上,并调整好位置。。

创建逐帧动画
? 逐帧动画是指由位于同一图层的许多连续 关键帧组成的动画,制作者需要在动画的 每一帧中创建不同的内容。
? 当动画播放时,Flash就会一帧一帧地显示 每帧中的内容。一个逐帧动画,动画中的 每一帧都是关键帧。

逐帧动画的特点
? 逐帧动画中的每一帧都是关键帧,每个 帧的内容都需要手动编辑,工作量很大, 一般不采用该方式制作动画。
? 逐帧动画由许多单个关键帧组合而成, 每个关键帧均可独立编辑,且相邻关键 帧中的对象变化不大。
? 逐帧动画的文件较大,不利于编辑。

创建逐帧动画
? 在福建省国际电子商务中心的图层中,别 在第6,7,8,9,10处插入关键帧。
? 点击图片,在属性窗口里如右图,调整图 片的透明度(Alpha),使得图片由模糊到 清晰,有一个跳出的感觉。

制作影片剪辑元件
? 接着再分别插入三个新的图层,在一个图层 的第15帧处插入一个关键帧,将“依拖高科 技,推广电子商务,捉进信息化”图片元件 插入到图层中;
? 在另两个图层的第25帧处关键帧,将箭头和 “更多了解”元件分别插入图层中,
? 按照设置“福建省国际电子商务中心”图片 的主法,设置“依拖高科技,推广电子商务, 捉进信息化”和“更多了解”这两个图片。

最后效果图

第三步:剧本的编写
? flash的动画制作中,剧本就是对时间轴的 设置,演员必须按照,时间轴上的设置来 表演。
? 从库中将我们事先准备的元件拖出,放到 舞台的相应位置上。通常情况下,将不同 的元件放在不同的图层上,这样设置就相 互不干扰。

第三步:剧本的编写
? 我们先将banner1影片剪辑元件拖放到舞台中, 并在40帧处插入帧,使得banner1的表演时间为 40帧;
? 插入两个图层,在第二个图层的第41帧处插入一 个关键帧,将banner2影片剪辑元件拖放到舞台 中,在80帧处插入一帧,同样使得banner1的表 演时间为40帧;
? 然后在第三个图层的第81帧处插入一个关键帧, 将banner3影片剪辑元件拖放到舞台中,在120帧 处插入一帧,使得banner3的表演时间为40帧。

制作影片剪辑元件

制作影片剪辑元件
? 插入一个新图层,将banner1图所对应的小 图片添加到图层,并放在舞台下方。
? 制作该小图片向上跳动画,该动画使用补 间动画来完成。

补间动画
? 动画补间动画,是制作Flash动画过程中使 用得最为频繁的一种动画类型。其就是在 两个关键帧上分别定义两个不同的属性, 如对象的大小、位置、角度等,然后在两 个关键帧之间建立一种运动渐变关系。

动画补间动画的特点
? 不需要手工创建每个帧的内容,只需要创 建两个关键帧的内容,两个关键帧之间的 所有动画都由Flash创建,制作更加简便。
? 由手工控制,帧与帧之间的过渡可能不自 然、连贯;而补间动画除两个关键帧由手 工控制外,中间的帧都由Flash自动生成, 因此渐变过程更为连贯。
? 文件小,是一种应用较多的动画制作方式

动画补间动画制作方法
? 在动画的起始帧插入关键帧,并编辑起始帧中 的内容。
? 选择起始帧,单击鼠标右键,在弹出的快捷菜 单中选择【创建补间动画】命令,或在【属性】 面板的【补间】下拉列表框中选择【动画】选 项。
? 选择结束帧并插入关键帧,再编辑结束帧中的 内容。

动画补间动画制作
? 在第4帧处插入一个关键帧,并确定好小图片在第 1帧和第4帧处的位置。
? 在第1帧和第4帧之间的灰色过渡帧中单击鼠标右 键,在弹出的快捷菜单中选择“创建补间动画” 命令。
? 这时从第1帧到第4帧以浅蓝色显示,中间有一个 箭头指示,表示小图片将从第1帧运动到第4帧中 的位置,这样,就完成了从第1帧到第4帧的运动 补间的动画设置。(如下图)

动画补间动画制作

第三步:剧本的编写
? 接着再插入一个新的图层,将另两个小图 标施入到舞中,使其作用的范围为1-40帧, 这样一个banner1图的动画就完成了。
? 插入一个新图层,选择文字输入工具,在 舞台上输入:电子商务 服务外贸、人才升 级 培训认证及商通软件 助企业腾飞。在 120帧处插入一帧,使得文字的使用范围 120帧。

第三步:剧本的编写
? 以同样的办法制作另外两个banner图。最 后我们就得到了一个完整三幅banner图相 互切换的动画。

小结
? Flash以其独特的特点广泛用于网络动画设 计和多媒体创作领域中,深受大家的喜欢。 作为Flash的初学者,不要急于求成,应该 循序渐进,首先先掌握动画制作的基本方 法,掌握各种元件的制作和各种工具的使 用,合理安排知识,并结合相应的实例进 行练习。只要持之以恒,就一定可以要做 出理想的作品。




友情链接: 高中资料网 职业教育网 成人教育网 理学 大学工学资料