2019年第3章动画制作基础课件

《2019年第3章动画制作基础课件》由会员分享，可在线阅读，更多相关《2019年第3章动画制作基础课件（91页珍藏版）》请在金锄头文库上搜索。

1、第3章 动画制作基础,教学要点,基于帧的动画制作方法 形状补间与动作补间的制作 遮罩动画的制作 动画引导路径的制作,3.1 Flash动画基础,与Flash文档相关的文件类型 时间轴 场景 动画元素,3.1.1 与Flash文档相关的文件类型,FLA格式：是Flash用保存设计时的各种信息的格式。FLA格式的文件通常比较大。 SWF格式：发布Flash动画时主要使用SWF格式，SWF文件是播放器和网页中实际加载的Flash文件格式。 SWC格式：是Flash组件的压缩格式。,概念,3.1.2 时间轴,时间轴就是用来组织和控制文档内容在一定时间内播放的图层数和帧数。 与胶片一样，Flash 文档

2、也将时长分为帧。 图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。,概念,3.1.2 时间轴,时间轴面板分成4个部分：顶区、图层区、时间帧区、状态区。,时间轴面板介绍,3.1.2 时间轴,时间轴的顶区由两行组成。 第1行是切换行，只要单击相应的文件名就可以在几个FLA或SWF文件之间进行切换。 第2行从左向右是当前场景的名称、编辑场景和编辑元件间的切换、场景显示比例。,时间轴顶区,3.1.2 时间轴,每个图层都包含一些动画元素，上面图层中的元素遮盖下面图层中的元素。 图层控制按钮如下： 显示/隐藏图层 锁定/解除锁定图层 显示图层的轮廓,时间轴图层按钮,3.1.

3、2 时间轴,图层有以下几种类型： 层文件夹 引导层 遮罩层 普通层,时间轴图层类型,3.1.2 时间轴,Flash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等。默认时为每秒播放12帧。 关键帧 普通帧 帧标签 帧注释 播放头,时间轴时间帧区,3.1.2 时间轴,指示所选的帧编号、当前帧频以及到当前帧为止的运行时间。 “帧显示模式”按钮，主要用于控制绘图纸效果。 所谓绘制纸就是允许同时显示当前帧附近的多个帧，这对于估计动画的下一帧的位置有很大的好处。,时间轴状态栏,3.1.3 场景,在时间轴面板的下面，占据界面最大的区域就是“场景”。 可以增加或删除“场景”。,场景面板,3

4、.1.3 场景,在场景中可以实现以下操作： 复制场景 增加场景 删除场景 更改场景名称 更改场景顺序 转换场景,场景面板的使用,3.1.4 动画元素,Flash场景中常用的动画元素有： 矢量图形 位图图像 文字对象 静态文本 动态文本 输入文本,常用动画元素一,3.1.4 动画元素,声音对象 按钮对象 影片剪辑 动作脚本语句,常用动画元素二,3.2 逐帧动画,创建逐帧动画的方法 绘图纸 上机实训飞翔的老鹰 上机实训制作会旋转的动画,3.2.1 创建逐帧动画的方法,用导入的静态图片建立逐帧动画 绘制矢量逐帧动画 文字逐帧动画 指令逐帧动画 导入序列图像,创建逐帧动画,3.2.2 绘图纸,绘画纸是

5、定位和编辑动画的辅助功能。 这个功能对于制作逐帧动画特别有用。 通常情况下，Flash 在舞台中一次只能显示动画序列的一个帧，使用绘画纸功能后，就可以在舞台中一次查看两个或多个帧了。,绘图纸的用途,3.2.2 绘图纸,使用绘图纸功能后的场景效果。 可以看出，当前帧中内容用全彩色显示，其他帧内容以半透明显示。,绘图纸的用途演示,3.2.2 绘图纸,【绘图纸外观】按钮：拉动外观标记的两端，可以扩大或缩小显示范围。 【绘图纸外观轮廓】按钮：场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。 【编辑多个帧】按钮，可以显示全部帧内容，并且可以进行“多帧同时

6、编辑”。,绘图纸各个按钮的用途,3.2.2 绘图纸,【修改绘图纸标记】按钮，按下此按钮后弹出一个菜单，菜单中各选项含义如下 【总是显示标记】 【锚定绘图纸】 【绘图纸2】 【绘图纸5】 【绘图全部】,绘图纸各个按钮的用途,3.2.3 上机实训飞翔的老鹰,这是利用导入gif动画而创建的逐帧动画。,效果预览,打开源文件,预览动画效果,3.2.3 上机实训飞翔的老鹰,新建一个Flash文档。 设置大小为288像素209像素。 背景颜色为白色。,新建文档,3.2.3 上机实训飞翔的老鹰,导入“背景.bmp”文件 选择第30帧，增加过渡帧,创建背景图层,3.2.3 上机实训飞翔的老鹰,新建一个图层，选中

7、第1帧，执行【文件】|【导入】|【导入到舞台】命令，导入 “老鹰.gif”文件。,导入gif动画,3.2.3 上机实训飞翔的老鹰,将老鹰适当缩小一些，并适当调节它的位置。,调整对象大小及位置,3.2.3 上机实训飞翔的老鹰,新建一个图层，输入“天高任鸟飞”。,添加文字,3.2.3 上机实训飞翔的老鹰,执行【控制】|【测试影片】命令，观察动画的效果。 如果满意，执行【文件】|【保存】命令，将文件保存成“飞翔的老鹰.fla”文件。 如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令。,测试存盘,3.2.4 上机实训制作旋转动画,逐帧动画,效果预览,打开源文件,预览动画效果,3

8、.2.4 上机实训制作旋转动画,新建一个Flash文档。 文件大小为550像素400像素。 【背景颜色】为白色。,新建文档,3.2.4 上机实训制作旋转动画,选择第1帧，执行【文件】|【导入】|【导入到舞台】命令，将 “背景”图片导入到场景中。,创建背景,3.2.4 上机实训制作旋转动画,新建一个名为“立方体”的影片剪辑元件。 依次绘制各帧中立方体的外形并填充相应的颜色，共18帧。,新建影片剪辑元件,3.2.4 上机实训制作旋转动画,新建一层。 在时间轴的第1帧上，把库中的“立方体”影片剪辑拖入主场景中。 放在场景的中下部。 按Ctrl+回车预览动画效果。,创建“立方体”图层,3.3 形状补间

9、动画,通过补间形状，可以创建类似于形变的效果，使一个形状看起来随着时间变成另一个形状。 运用它可以制作出各种奇妙的变形效果。,3.3.1 形状补间动画基础,在一个关键帧中绘制一个形状。 在另一个关键帧中更改该形状或绘制另一个形状。 Flash根据二者之间的形状来创建的动画被称为“形状补间动画”。,制作原理,3.3.1 形状补间动画基础,形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化。 其变形的灵活性介于逐帧动画和动作补间动画二者之间。 如果使用图形元件、按钮、文字，则必须先“分离”才能创建变形动画。,动画的元素,3.3.1 形状补间动画基础,形状补间动画建好后，时间帧面板的背

10、景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。,在时间轴上的表现,3.3.1 形状补间动画基础,在动画开始处创建或选择一个关键帧，并设置要开始变形的形状。 在动画结束处创建或选择一个关键帧并设置要变成的形状。 再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，选择【形状】。,制作方法,3.3.2 形状补间动画的属性面板,3.3.3 使用形状提示,在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。,形状提示的作用,3.3.3 使用形状提示,单击动画开始帧，执行【修改】|【形状】|【添加形状提示】命令。该帧的

11、形状上就会增加一个带字母的红色圆圈，在结束帧形状中也会出现一个“提示圆圈”。 用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置。,添加形状提示的方法,3.3.3 使用形状提示,“形状提示”可以连续添加，最多26个。 将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作更有效。 形状提示的摆放位置也要符合逻辑顺序。 形状提示要在形状的边缘才能起作用。 调整形状提示位置前，按下“贴紧至对象”按钮，会自动把“形状提示”吸附到边缘上。,添加形状提示的技巧,3.3.4 上机实训珍惜水源,效果预览,打开源文件,预览动画效果,3.3.4 上机实训珍惜水源,新建文档 文件大小为500410

12、像素 【背景颜色】为白色,新建文档,3.3.4 上机实训珍惜水源,将名为“珍惜水源.jpg”图片导入到舞台。 选择第80帧，按键盘上的F5键，增加一个普通帧。,加入背景,3.3.4 上机实训珍惜水源,新建一个名为“水珠1”图层。 使用【椭圆工具】画一个无边的圆。 用【颜料桶工具】填充圆。,创建水珠,3.3.4 上机实训珍惜水源,复制刚画好的水珠。 新建3个图层，在每个图层中粘贴一个水珠，调整水珠的位置。 在第20、40帧处为各图层添加关键帧。,复制4个水珠,3.3.4 上机实训珍惜水源,选取第一个水珠，在第40帧处用文字“珍”取代水珠。 对“庆”字执行【分离】命令，把文字转为形状。 在第40帧

13、处的相应图层上依次用“惜”、“水”、“源”3个字取代另外3个水珠，并执行【分散】命令。,将文字转为形状取代水珠,3.3.4 上机实训珍惜水源,在“水珠”各图层的第60帧及第80帧处，分别添加关键帧。 分别复制第20帧中的“水珠”图形，再分别粘贴到第80帧中。 注意： 应该先清除第80帧处4个“水珠”图层中的内容。,文字到水珠的转变,3.3.4 上机实训珍惜水源,在“水珠”各图层的第20、60帧处单击帧，建立形状补间动画。,创建形状补间动画,3.3.5 上机实训添加形状提示,效果预览,打开源文件,预览动画效果,3.3.5 上机实训添加形状提示,新建文档 创建变形对象 把字符转为形状 创建补间动画

14、 添加形状提示 添加文字,制作步骤,3.4 动作补间动画,运用动作补间动画可以做出令人称奇的仿3D的效果。,3.4.1动作补间动画的概念,在一个关键帧上放置一个元件。在另一个关键帧改变这个元件的大小、颜色、位置、透明度等。Flash根据二者之间的帧创建的动画被称为动作补间动画。 条件： 二个关键帧 有时间差 关键帧内是元个或成组对象,基本概念,3.4.1动作补间动画的概念,构成动作补间动画的元素是元件(包括影片剪辑、图形元件、按钮、文字、位图、组合等，但不能是形状)。 只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。,动作补间动画的构成元素,3.4.1动作补间动画的概念,动作补

15、间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头。,在时间帧面板上的表现,3.4.1动作补间动画的概念,形状、动作补间动画的区别,3.4.1动作补间动画的概念,在动画开始处创建或选择一个关键帧并设置一个元件。 在动画结束处创建或选择一个关键帧并设置该元件的属性。 再单击开始帧，用右键单击帧，在弹出的菜单中选择【创建补间动画】。,创建方法,3.4.2动作补间动画的属性设置,【缓动】选项 【旋转】选项 【调整到路径】,帧属性面板,【同步】复选框 【对齐】选项,3.4.3上机实训网站横幅广告的制作,效果预览,打开源文件,预览动画效果,3.4.3上机实训网站横幅广告的制

16、作,新建一个Flash文档 文件大小为52060像素 【背景颜色】为白色 将名为“启航背景.bmp” 导入到舞台 调整图片的大小和位置 选中第205帧，按F5键添加普通帧,新建影片文档,3.4.3上机实训网站横幅广告的制作,创建“电脑动画”文字效果 创建“网页设计”文字效果 创建“图像制作”文字效果 创建“闪客启航”文字效果 创建“语音教学”文字效果,创建动画,3.5 遮罩动画,常见的遮罩动画效果 水波 万花筒 百叶窗 放大镜 望远镜,3.5.1遮罩动画的概念,在Flash中，可以在遮罩层上创建一个任意形状的“视窗”。 遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。,什么是遮罩,3.5.1遮罩动画的概念,用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见。 用来遮罩住某一元件的一部分，从而实现一些特殊的效果。,遮罩有什么用,3.5.2创建遮罩的方法,遮罩层其实是由普通图层转化的。 在某个图层上单击鼠标右键，在弹出的菜单中选择【遮罩层】，该图层就会成为遮罩层。,创建遮罩,3.5.2创建遮罩的方法,遮罩层中内容： 按