
第2章 基本动画制作




动画制作是Flash软件最重要的功能,本章将通过实例,详细讲解Flash CS3中基本动画的创建和制作方法。
实例52 制作飞奔动画
素材:\实例52\模糊.jpg
源文件:\实例52\制作飞奔动画.fla
包含知识
■ "时间轴"面板
■ 图层的应用
■ 插入空白帧
■ 插入关键帧
重点难点
■ 插入空白帧
■ 插入关键帧
制作思路

绘制第1帧动作

绘制第2帧动作

绘制第3帧动作

绘制第6帧动作

1 新建文件,设置文档大小为“500×200像素”。
2 选择“文件-导入-导入到舞台”命令,导入素材文件夹中的图像“模糊.jpg”到场景中。
3 选择“任意变形工具”,调整位图到合适大小,如图所示,并重命名图层1为“背景”图层。

1 锁定“背景”图层,并隐藏该图层。
2 新建图层2,将其重命名为“人物”图层。
3 在场景中心点位置绘制如图所示的卡通人物。

1 选择“人物”图层,按【F7】键插入空白帧。
2 在场景中心位置绘制如图所示的卡通人物。

1 锁定“人物”图层,单击“背景”图层中的图标解锁图层,单击
图标显示图层。
2 选择“背景”图层,按【F6】键插入关键帧,按住【Shift】键,用“选择工具”将模糊位图向右移动到合适的位置。

1 用与第3步相同的方法,分别在“人物”图层的第3帧、第4帧、第5帧和第6帧绘制人物跑动的动作图形,第1帧~第6帧的人物动作如图所示。
2 用与第4步相同的方法,在“背景”图层中分别水平向右移动第3帧、第4帧、第5帧和第6帧位图的位置。

1 完成“人物”图层和“背景”图层的制作后,在时间轴上单击“绘图纸外观”按钮,可以看到各帧频中人物的动作。
2 按【Ctrl+S】组合键保存文件,按【Ctrl+Enter】组合键预览动画效果,如图所示。
实例53 制作简单变脸
素材:无
源文件:\实例53\制作简单变脸.fla
包含知识
■ 创建图形元件
■ 调整图形元件属性
■ 插入关键帧
■ 预览动画
重点难点
■ 创建图形元件
■ 调整图形元件属性
制作思路

创建图形元件

调整元件亮度

调整元件色调

调整元件Alpha值

1 新建文件,选择“插入-新建元件”命令。
2 在打开的“创建新元件”对话框中的“名称”文本框中输入“脸谱”,在“类型”栏中选中“图形”单选按钮,单击“确定”按钮关闭对话框。
3 绘制脸谱图形,打开“库”面板查看元件。

1 单击“场景1”标签返回主场景,将“脸谱”图形元件拖入其中,在时间轴上单击第2帧,按【F6】键插入关键帧。
2 用“选择工具”选择元件实例,在“属性”面板中的“颜色样式”下拉列表框中选择“亮度”选项,设置亮度数量为-50%。

1 在时间轴上单击第3帧,按【F6】键插入关键帧。
2 用“选择工具”选择元件,在“属性”面板中的“颜色样式”下拉列表框中选择“色调”选项,设置颜色为红色,色彩数量为50%。

1 在时间轴上单击第4帧,按【F6】键插入关键帧。
2 用“选择工具”选择元件,在“属性”面板中的“颜色样式”下拉列表框中选择“Alpha”选项,设置Alpha值为60%。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
注意提示
图形元件除了可以进行本例中的属性设置外,还可以用在静态的图像和可重用的动画片段中。图形元件一般与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。由于没有时间轴,图形元件在fla文件中的尺寸小于按钮或影片剪辑。
实例54 制作变幻乡村
素材:无
源文件:\实例54\制作变幻乡村.fla
包含知识
■ 创建影片剪辑元件
■ 调整影片剪辑元件属性
■ 插入关键帧
■ 预览动画
重点难点
■ 创建影片剪辑元件
■ 调整影片剪辑元件属性
制作思路

创建影片剪辑元件

调整元件混合模式

调整元件颜色样式

调整元件混合模式

1 新建文件,选择“插入-新建元件”命令。
2 在打开的“创建新元件”对话框中的“名称”文本框中输入“乡村”,在“类型”栏中选中“影片剪辑”单选按钮,单击“确定”按钮关闭对话框。
3 绘制一个乡村图形,打开“库”面板查看元件。

1 单击“场景1”标签返回主场景,将“乡村”图片剪辑元件拖入到场景中,在时间轴上单击第5帧,按【F6】键插入关键帧。
2 选择元件实例,在“属性”面板中的“混合”下拉列表框中选择“差异”选项。

1 在时间轴上单击第10帧,按【F6】键插入关键帧。
2 选择元件实例,在“属性”面板中的“颜色”下拉列表框中选择“色调”选项,设置颜色为黑色,色彩数量为60%。

1 在时间轴上单击第15帧,按【F6】键插入关键帧。
2 选择元件实例,在“属性”面板中的“混合”下拉列表框中选择“强光”选项。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
注意提示
影片剪辑元件与图形元件不同的地方在于,影片剪辑元件可以创建可重用的动画片段。影片剪辑元件拥有各自独立于主时间轴的多帧时间轴,可以在影片剪辑中创建帧动画和补间动画。也可以将影片剪辑元件实例放在按钮元件的时间轴内,以创建动画按钮。此外,还可以使用ActionScript对影片剪辑进行改编。
实例55 制作简单按钮
素材:无
源文件:\实例55\制作简单按钮.fla
包含知识
■ 创建按钮元件
■ 制作简单按钮
■ 插入关键帧
■ 预览动画
重点难点
■ 创建按钮元件
■ 制作简单按钮
制作思路

“弹起”帧图形

“指针经过”帧图形

“按下”帧图形

“点击”帧图形

1 新建文件,选择“插入-新建元件”命令。
2 在打开的“创建新元件”对话框中的“名称”文本框中输入“简单按钮”,在“类型”栏中选中“按钮”单选按钮,单击“确定”按钮关闭对话框。
3 进入按钮元件编辑区,在其中可以查看固有的时间帧。

1 在“弹起”帧中绘制一个如图所示的圆形轮廓。
2 用“颜料桶工具”将图形填充为“#660000”、“#ffccff”和“#990000”的放射状渐变色。

1 在时间轴上单击“指针经过”帧,按【F6】键插入关键帧。
2 用“颜料桶工具”将图形填充为“#808d03”、“#fafdf0”和“#96a40f”的渐变色。

1 在时间轴上单击“按下”帧,按【F6】键插入关键帧。
2 用“颜料桶工具”将图形填充为“#09882f”、“#d7fdda”和“#0aa027”的渐变色。

1 在时间轴上单击“点击”帧,按【F6】键插入关键帧。
2 用“颜料桶工具”将图形填充为“#0606b5”、“#d7d8fd”和“#180aa0”的渐变色。

1 单击“场景1”标签返回主场景,打开“库”面板,从“库”面板中将按钮元件拖入到场景中,按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,鼠标按下时的效果如图所示。
实例56 飞机滑翔
素材:无
源文件:\实例56\飞机滑翔.fla
包含知识
■ 创建图形元件
■ 插入帧
■ 插入关键帧
■ 创建补间动画
重点难点
■ 创建图形元件
■ 创建补间动画
制作思路

绘制天空背景

创建飞机元件

移动飞机位置

创建动画补间动画

1 新建文件,设置文档大小为“550×300像素”。
2 用“矩形工具”在场景中绘制一个矩形,并用“颜料桶工具”
将其填充为“#ffffff”和“#4199f1”的线性渐变色。
3 用“钢笔工具”绘制出白云轮廓,并填充为“#ffffff”颜色。

1 在时间轴上单击第40帧,按【F5】键插入帧。

1 锁定图层1,新建图层2,并重命名为“飞机”图层。
2 新建一个名为“飞机”的图形元件,并绘制出飞机图形。
3 单击“场景1”标签返回主场景,将“飞机”图形元件拖入场景中如图所示的位置。

1 在时间轴上单击第15帧,按【F6】键插入关键帧。
2 用“选择工具”将飞机向右拖动到如图所示的位置。
3 在时间轴上单击第1帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令。

1 在时间轴上单击第40帧,按【F6】键插入关键帧。
2 将飞机向右拖动到如图所示的位置。
3 在时间轴上单击第15帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例57 桃花朵朵开
素材:无
源文件:\实例57\桃花朵朵开.fla
包含知识
■ 绘制矢量图形
■ 插入帧
■ 插入空白帧
■ 创建补间形状
重点难点
■ 插入帧
■ 创建补间形状
制作思路

绘制椭圆

绘制树干

绘制桃花

预览动画

1 新建文件,将图层1重命名为“树干”图层。
2 用“椭圆工具”在场景中绘制一个填充颜色为“#6d4201”、笔触颜色为无色的椭圆。

1 在时间轴上单击第30帧,按【F7】键插入空白帧,用“刷子工具”在场景中绘制如图所示的桃树树干。
2 单击第1帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间形状”命令,创建补间形状。

1 锁定“树干”图层,新建图层2,并重命名为“桃花”,单击“桃花”图层的第30帧,按【F7】键插入空白帧。
2 用“刷子工具”绘制出几个填充颜色为“#ffddee”、Alpha值为0%的花蕊图形。

1 单击“桃花”图层的第41帧,按【F6】键插入关键帧。
2 用“选择工具”适当调整花蕊的大小。
3 单击“桃花”图层的第30帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间形状”命令。
4 单击“树干”图层的第41帧,按【F5】键插入帧。

1 单击“桃花”图层的第77帧,按【F7】键插入空白帧,在场景中绘制出几个桃花图形。
2 单击“桃花”图层的第41帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间形状”命令。
3 单击“树干”图层的第77帧,按【F5】键插入帧。

1 分别在“树干”图层和“桃花”图层的第100帧插入帧,按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例58 弹跳的篮球
素材:无
源文件:\实例58\弹跳的篮球.fla
包含知识
■ 创建图形元件
■ 插入关键帧
■ 创建补间动画
■ 补间动画缓动的设置
重点难点
■ 创建图形元件
■ 补间动画缓动的设置
制作思路

绘制篮球

创建补间动画

设置补间动画缓动

创建补间动画

1 新建文件,将图层1重命名为“篮球”。
2 用“椭圆工具”在场景中绘制笔触颜色为“#7a333d”的圆,并用“颜料桶工具”
将其填充为“#ffffff”、“#eb6856”和“#7a3332”的放射状渐变色。
3 用“钢笔工具”绘制笔触色为“#5b231c”的线条。

1 选择篮球图形,按【F8】键,在打开的“转换为元件”对话框中设置名称为“篮球”,类型为“图形”,单击“确定”按钮关闭对话框。
2 打开“库”面板可以查看“篮球”元件。

1 在时间轴上单击第20帧,按【F6】键插入关键帧,用“选择工具”选择篮球,按住【Shift】键向下拖动到合适位置。
2 单击第1帧,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令创建补间动画。

1 单击第1帧,在“属性”面板中的“缓动”文本框中输入“-80”。

1 在时间轴上单击第40帧,按【F6】键插入关键帧,将篮球向上拖动到合适的位置。
2 在时间轴上单击第20帧,创建补间动画。
3 用与第4步相同的方法,设置缓动为“80”。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例59 赛车过弯道
素材:无
源文件:\实例59\赛车过弯道.fla
包含知识
■ 创建图形元件
■ 插入关键帧
■ 创建补间动画
■ 自定义缓入/缓出
重点难点
■ 创建图形元件
■ 自定义缓入/缓出
制作思路

绘制汽车

创建补间动画

自定义缓入/缓出

预览效果

1 新建文件,将图层1重命名为“弯道”。
2 在场景中绘制一个如图所示的弯曲道路,并在第45帧插入帧。

1 锁定“弯道”图层,新建图层1,将其重命名为“汽车”。
2 绘制一个汽车图形,按【F8】键将其转换为图形元件“car”。

1 单击“汽车”图层第5帧,按【F6】键插入关键帧,用“选择工具”选择汽车,按住【Shift】键向上拖动到合适位置。
2 单击“汽车”图层第1帧,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令创建补间动画。

1 单击“汽车”图层第25帧,按【F6】键插入关键帧,单击第5帧,创建补间动画。
2 选择第25帧的汽车,用“任意变形工具”旋转汽车元件,使其符合道路走向。

1 单击“汽车”图层的第5帧,在“属性”面板中单击“编辑”按钮,打开“自定义缓入/缓出”对话框。
2 将光标移动到自定义线的控制点上,鼠标光标变成形状,拖动设置自定义线弧度,单击“确定”按钮关闭对话框。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例60 旋转的车轮
素材:无
源文件:\实例60\旋转的车轮.fla
包含知识
■ 创建图形元件
■ 创建影片剪辑元件
■ 创建补间动画
■ 设置旋转选项
重点难点
■ 创建影片剪辑元件
■ 设置旋转选项
制作思路

创建图形元件

创建影片剪辑元件

将元件拖入场景

创建补间动画

1 新建文件,设置文档大小为“550×250像素”。
2 在场景中绘制一个如图所示的车轮图形。
3 选择图形,按【F8】键将其转换为图形元件“轮子”。

1 选择“插入-新建元件”命令,在打开的“创建新元件”对话框中的“名称”文本框中输入“旋转”,在“类型”栏中选中“影片剪辑”单选按钮,单击“确定”按钮关闭对话框。
2 打开“库”面板,将“轮子”元件拖入到场景中。

1 单击第5帧,按【F6】键插入关键帧,单击第1帧创建补间动画。
2 单击第1帧,在“属性”面板中的“旋转”下拉列表框中选择“顺时针”选项,在“旋转数”文本框中输入“5”。

1 单击“场景1”标签返回主场景。
2 打开“库”面板,将“旋转”元件拖入到场景中。

1 单击第50帧,按【F6】键插入关键帧,将“旋转”元件实例向右拖动到合适的位置。
2 单击第1帧,创建补间动画。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例61 数字变化
素材:无
源文件:\实例61\数字变化.fla
包含知识
■ 插入关键帧
■ 创建补间形状
■ 添加形状提示
■ 修改形状提示
重点难点
■ 添加形状提示
■ 修改形状提示
制作思路

创建补间形状

添加形状提示

修改形状提示

预览动画效果

1 新建文件,用“文本工具”在场景中输入文字“1”,设置字体为“Rockwell Extra Bold”,字体大小为96,文本颜色为“#0000ff”。
2 选择文字,按【Ctrl+B】组合键分离文字。

1 单击第20帧,按【F7】键插入空白帧,用文本工具输入文字“2”,选择文字,按【Ctrl+B】组合键分离文本。
2 单击第1帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间形状”命令创建补间形状。

1 在时间轴中单击“绘图纸外观”按钮。
2 在时间轴中单击帧可以查看动画变化过程。
3 再次单击“绘图纸外观”按钮取消查看。

1 单击第1帧,选择“修改-形状-添加形状提示”命令插入形状提示符“a”,用“选择工具”拖动“a”到图形“1”的左上角。
2 单击第20帧,拖动“a”到图形“2”的左上角。

1 单击第1帧,用与第4步相同的方法添加形状提示符“b”。
2 拖动“b”到图形“1”的右下角,单击第20帧,拖动“b”到图形“2”的右下角,如图所示。

1 按【Ctrl+S】组合键保存文件。
2 在时间轴中单击“绘图纸外观”按钮,添加形状提示后的补间形状效果如图所示。
实例62 角色出现
素材:无
源文件:\实例62\角色出现.fla
包含知识
■ 调整图形比例
■ 旋转图形
■ 倾斜图形
■ 创建补间动画
重点难点
■ 调整图形
■ 创建补间动画
制作思路

创建图形元件

旋转图形

倾斜图形

旋转倾斜图形

1 新建文件,在场景中绘制出如图所示的暴力猴图形。
2 选择图形,按【F8】键将其转换为图形元件“暴力猴”。

1 单击第15帧,按【F6】键插入关键帧。
2 单击第1帧,在其上单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令创建补间动画,选择“暴力猴”元件,打开“变形”面板,设置宽度和高度为0%。

1 单击第30帧,按【F6】键插入关键帧,选择“暴力猴”元件,打开“变形”面板,设置旋转为60度。
2 单击第15帧,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令创建补间动画。

1 单击第40帧,按【F6】键插入关键帧,选择“暴力猴”元件,打开“变形”面板,设置倾斜为30度和20度。
2 单击第30帧,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令创建补间动画。

1 单击第50帧,按【F6】键插入关键帧,选择“暴力猴”元件,打开“变形”面板,设置宽度和高度为80%,旋转为-30度。
2 单击第40帧,创建补间动画。

1 按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例63 夜幕降临
素材:\实例63\草原.png
源文件:\实例63\夜幕降临.fla
包含知识
■ 创建元件
■ 创建多图层动画
■ 修改元件亮度
■ 创建补间动画
重点难点
■ 创建多图层动画
■ 修改元件亮度
制作思路

创建天空图层

创建太阳图层

创建月亮图层

创建背景图层

1 新建文件,重命名图层1为“天堂”,选择“文件-导入-导入到库”命令,导入“草原.png”到“库”面板。
2 设置文档大小为“350×300像素”,在场景中绘制一个“550×300像素”,笔触颜色为无色的矩形,并填充为“#5184fb”、“#ffffff”的线性渐变色。
3 选择图形,按【F8】键将其转化为影片剪辑元件“天空”。

1 分别在第20帧和第80帧插入关键帧。
2 单击第80帧,选择“天空”元件,在“属性”面板中的“颜色”下拉列表框中选择“亮度”选项,设置亮度数量为-60%。
3 单击第20帧,创建补间动画。

1 锁定“天空”图层,新建图层2,重命名为“太阳”。
2 绘制一个太阳图形,并将其转换为图形元件“太阳”。
3 分别在“太阳”图层的第20帧和第45帧插入关键帧,单击第45帧,将“太阳”元件向下拖动到合适位置,单击第20帧,创建补间动画。

1 锁定“太阳”图层,新建图层3,重命名为“月亮”。
2 绘制一个月亮图形,并将其转换为图形元件“月亮”。
3 分别在“月亮”图层的第35帧和第55帧插入关键帧,单击第55帧,选择“月亮”元件向下拖动到合适位置,单击第35帧,创建补间动画。

1 锁定“月亮”图层,新建图层4,重命名为“草原”。
2 打开“库”面板,拖动位图“草原”到场景中,使其底部与场景对齐,将位图转换为影片剪辑元件“背景”。
3 分别在“草原”图层的第20帧和第80帧插入关键帧,选择第80帧中的“背景”元件,在“属性”面板中设置颜色模式为“亮度”,亮度数量为-60%,单击第20帧,创建补间动画。

1 分别在“天空”图层、“月亮”图层和“草原”图层的第100帧插入帧,按【Ctrl+S】组合键保存文件。
2 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例64 变幻的灯光
素材:无
源文件:\实例64\变幻的灯光.fla
包含知识
■ 创建元件
■ 添加"滤镜-发光"效果
■ 修改元件色调
■ 创建补间动画
重点难点
■ 创建补间动画
■ 修改元件色调
制作思路

绘制图形

添加“滤镜-发光”效果

修改元件色调

修改元件色调

1 新建文件,设置背景色为“#333333”。
2 创建影片剪辑元件“元件1”,绘制出灯光的轮廓线条。
3 用“颜料桶工具”将图形填充为“#e3fdd7”、“#44cc09”、“#bdf0b0”、“#5cef6a”、“#fffbd5”的线性渐变色和“#ffffff”、“#7cf04a”的放射状渐变色。

1 创建影片剪辑元件“灯光”,打开“库”面板,将“元件1”拖入到场景中。
2 用“选择工具”选择图形元件实例,在“滤镜”面板中添加“发光”滤镜,设置模糊为40,颜色为“#99ff66”。

1 单击“场景1”标签返回主场景,打开“库”面板,将“灯光”元件拖入到场景中,在第5帧插入关键帧,单击第1帧创建补间动画。
2 单击第5帧,选择元件实例,在“属性”面板中的“颜色”下拉列表框中选择“色调”选项,设置颜色为“#00ff66”。

1 在第10帧插入关键帧,单击第5帧创建补间动画。
2 单击第10帧,选择元件实例,在“属性”面板中的“颜色”下拉列表框中选择“色调”选项,设置颜色为“#00ffff”。

1 在第15帧插入关键帧,单击第10帧创建补间动画。
2 单击第15帧,选择元件实例,在“属性”面板中的“颜色”下拉列表框中选择“色调”选项,设置颜色为“#ccff66”。

1 在第20帧插入关键帧,单击第15帧创建补间动画。
2 单击第20帧,选择元件实例,在“属性”面板中的“颜色”下拉列表框中选择“色调”选项,设置颜色为“#ff6666”。
3 按【Ctrl+S】组合键保存文件。
实例65 窗凝效果
素材:\实例65\雨后.jpg
源文件:\实例65\窗凝效果.fla
包含知识
■ 导入位图
■ 添加"滤镜-模糊"效果
■ 创建补间动画
■ 创建遮罩层
重点难点
■ 创建补间动画
■ 创建遮罩层
制作思路

导入位图

添加“滤镜-模糊”效果

创建补间动画

创建遮罩层

1 新建文件,设置文档大小为“240×350”像素,选择“文件-导入-导入到舞台”命令,导入素材文件夹中的“雨后.jpg”到场景中。
2 将图层1重命名为“模糊”图层,用“任意变形工具”调整位图的大小和位置,使其覆盖场景的白色区域。

1 用“选择工具”选择位图,按【F8】键将其转换为影片剪辑元件“模糊”。
2 选择元件,在“滤镜”面板中添加“模糊”滤镜,设置模糊为10,品质为“高”。
3 单击第200帧,按【F5】键插入帧。

1 锁定“模糊”图层,新建图层2,并重命名为“露”。
2 新建一个图形元件,命名为“补间1”,并绘制出如图所示的“露”图形。返回主场景,打开“库”面板,将图形元件“补间1”拖入到场景中图像的上方。

1 在“露”图层的时间轴上单击第200帧,按【F6】键插入关键帧。用“选择工具”将“补间1”元件实例向下拖动,使其上方与场景顶部对齐。
2 单击第1帧,创建补间动画。

1 锁定“露”图层,新建图层3,并重命名为“清晰”。
2 打开“库”面板,将位图“雨后”拖入到场景中。
3 将鼠标光标移动到“清晰”图层上,按住鼠标左键不放,同时向下拖动,使其位于“露”图层的下方。

1 将鼠标光标移动到“露”图层上,单击鼠标右键,在弹出的快捷菜单中选择“遮罩层”命令。
2 按【Ctrl+S】组合键保存文件。
3 按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例66 翻山越岭
素材:无
源文件:\实例66\翻山越岭.fla
包含知识
■ 绘制图形
■ 创建影片剪辑元件
■ 创建补间动画
■ 创建运动引导图层
重点难点
■ 创建补间动画
■ 创建运动引导图层
制作思路

绘制背景图形

创建汽车元件

创建引导图层并绘制引导线

创建补间动画

1 新建文件,设置文档大小为“600×300像素”,背景颜色设置为“#999999”。
2 将图层1重命名为“背景”,在场景中绘制出如图所示的山峰图形。

1 新建影片剪辑元件“汽车”,将图层1重命名为“车”。
2 绘制一个汽车图形,分别在第2帧~第8帧插入关键帧,并分别调整各帧中汽车的位置。
3 新建图层2,在第1帧绘制一个烟雾图形,并将其转换为图形元件,在第8帧插入关键帧,放大图形,单击第1帧,创建补间动画。

1 单击“场景1”标签返回主场景,新建图层2,重命名为“汽车”。
2 在时间轴上单击“添加运动引导层”按钮2,并用“铅笔工具”绘制如图所示的引导曲线。

1 锁定“背景”图层和引导图层,选择“汽车”图层。
2 打开“库”面板,将“汽车”元件拖入到场景中。
3 用“选择工具”拖动“汽车”元件实例,使其中心点位于引导曲线上,如图所示。

1 在第20帧插入关键帧,然后分别在“背景”图层和引导图层的第20帧处插入关键帧,并在“汽车”图层中拖动“汽车”元件实例,使其中心点位于引导曲线上。
2 单击“汽车”图层的第1帧,创建补间动画。

1 用与第5步相同的方法,分别在“汽车”图层的第25帧、第35帧和第40帧处插入关键帧,并调整“汽车”元件实例的位置。
2 在第25帧、第35帧和第40帧处创建补间动画,如图所示。
3 按【Ctrl+S】组合键保存文件。
实例67 旋转的时钟
素材:无
源文件:\实例67\旋转时钟.fla
包含知识
■ 绘制图形
■ 创建影片剪辑元件
■ 创建补间动画
■ 调整元件中心点
重点难点
■ 创建补间动画
■ 调整元件中心点
制作思路

绘制背景图形

创建元件

放置元件

预览效果

1 新建文件,设置文档背景颜色为“#990000”。
2 将图层1重命名为“背景”,在场景中绘制出如图所示的钟面图形。
3 按【F8】键,将绘制的钟面图形转换为图形元件“时钟”。

1 新建影片剪辑元件“秒针”,绘制一个如图所示的秒针,并将其转换为图形元件“秒”。
2 用“任意变形工具”选择图形元件,图形元件出现中心点
,将鼠标光标移动到中心点上,光标变为
形状,拖动中心点到元件的底部位置。

1 在第72帧插入关键帧,单击第1帧,创建补间动画。
2 单击第1帧,在“属性”面板中的“旋转”下拉列表框中选择“顺时针”选项,在“旋转数”文本框中输入“1”。

1 单击“场景1”标签,返回主场景,新建影片剪辑元件“分针”,绘制一个分针图形,并转换为图形元件“分”。
2 用与第2步和第3步相同的方法,调整分针的中心点位置,在第432帧处插入关键帧,并创建补间动画。

1 单击“场景1”标签,返回主场景,新建影片剪辑元件“时针”,绘制一个时针图形,并转换为图形元件“时”。
2 用与第2步和第3步相同的方法,调整时针的中心点位置,在第2592帧处插入关键帧,并创建补间动画。

1 单击“场景1”标签返回主场景,新建3个图层,分别重命名为“时针”、“分针”和“秒针”。
2 打开“库”面板,分别将“时针”、“分针”和“秒针”影片剪辑元件拖入到对应的图层中,并调整其位置,使它们都位于钟面的中心位置。
3 按【Ctrl+S】组合键保存文件,测试效果如图所示。
实例68 淡入淡出
素材:\实例68\绘制花伞.fla
源文件:\实例68\淡入淡出.fla
包含知识
■ 复制图形
■ 将图形转换为元件
■ 设置元件Alpha值
■ 创建补间动画
重点难点
■ 利用Alpha创建动画效果
■ 复制图形
制作思路

复制图形

转换为元件

设置Alpha值

预览效果

1 新建文件,设置文档大小为“550×200像素”,背景颜色为“#009966”。
2 打开“绘制花伞.fla”文件,选择花伞并复制粘贴到新建的文件中,然后调整伞的大小。

1 选择伞,然后按【F8】键,将其转换为影片剪辑元件“伞”。
2 将元件“伞”向左拖出场景,如图所示。

1 选择“伞”元件,在“属性”面板中的“颜色”下拉列表框中选择“Alpha”,在“Alpha 数量”文本框中输入“30%”。

1 在第20帧插入关键帧,并将元件向右移动到场景中。
2 选择元件“伞”,在“属性”面板中的“颜色”下拉列表框中选择“无”选项。
3 在时间轴的第1帧处创建补间动画。

1 在第40帧插入关键帧,将元件向右移动出场景。
2 选择“伞”元件,在“属性”面板中的“颜色”下拉列表框中选择“Alpha”选项。
3 在时间轴的第21帧处创建补间动画。

1 按【Ctrl+S】组合键保存文件,按【Ctrl+Enter】组合键预览动画,效果如图所示。
实例69 跑步
素材:无
源文件:\实例69\跑步.fla
包含知识
■ 绘制多层次图形
■ 创建逐帧动画
■ 创建补间动画
■ 创建多层次动画
重点难点
■ 绘制多层次图形
■ 制作多层次动画
制作思路

绘制多层次图形

制作人物跑步

制作多层次动画

1 新建文件,设置文档大小为“550×500像素”,背景颜色为“#0099ff”。
2 新建图形元件“路”,绘制如图所示的多楼图形,并将其转换为图形元件“多楼1”。

1 在场景中绘制如图所示的多楼图形,并将其转换为图形元件“多楼2”。

1 锁定图层1,新建图层2,并绘制如图所示的图形。

1 锁定图层2,新建图层3。
2 在图层3中绘制如图所示的道路图形,并选择图层3的图形,按【Ctrl+G】组合键将其进行组合。

1 单击“场景1”标签返回主场景,新建影片剪辑元件“跑步”。
2 用与实例52相同的方法制作出如图所示的人物跑动逐帧动画。
3 单击“场景1”标签返回主场景。

1 打开“库”面板,将元件“路”拖入到场景中并使其左侧与场景左侧对齐。
2 在第50帧插入关键帧,将元件“路”向左移动使其右侧与场景右侧对齐,并在第1帧创建补间动画。
3 新建图层2,将元件“跑步”拖入场景,按【Ctrl+S】组合键保存文件。
实例70 星球
素材:无
源文件:\实例70\星球.fla
包含知识
■ 绘制图形
■ 绘制引导动画
■ 创建补间动画
■ 创建多层引导动画
重点难点
■ 绘制引导动画
■ 制作多层引导动画
制作思路

绘制月亮图形

绘制地球图形

绘制引导动画

制作多层引导动画

1 新建文件,设置背景颜色为“#000000”。
2 新建图形元件“月亮”,并绘制如图所示的月亮图形。

1 单击“场景1”标签返回主场景,新建图形元件“地球”,并绘制如图所示的地球图形。

1 新建影片剪辑元件“月绕地”,从“库”面板中将“地球”元件拖入到场景中,新建图层2,并从“库”面板中将“月亮”元件拖入到场景中。
2 在时间轴上单击“添加运动引导层”按钮添加引导层。再绘制一个绕地球的圆,擦除其右下方的一小部分线条,绘制出引导线。用“选择工具”
拖动“月亮”元件实例,使其中心点位于引导曲线上作为起点,如图所示。

1 在图层2的第50帧插入关键帧,在引导图层的第50帧处插入帧,选择图层2第50帧中的“月亮”元件实例,拖动它,使其中心点位于引导线擦除部分的下方端点处。
2 在图层2的第1帧处创建补间动画,然后在图层1的第50帧处插入帧。

1 返回主场景,绘制一个“太阳”,并转换其为图形元件。
2 新建图层2,从“库”面板中将元件“月绕地”拖入到场景中,在图层2的上方添加引导层,并绘制引导曲线。
3 锁定图层1和引导图层,选择图层2,用“任意变形工具”选择“月绕地”元件实例的中心点
,将其移动到地球中心上,然后将元件拖动到引导线的起点上。

1 在图层2的第100帧处插入关键帧,在图层1和引导层的第100帧处插入帧。
2 选择图层2,并将元件拖动到引导线的终点上,然后单击第1帧并创建补间运动动画。
3 完成效果如图所示,按【Ctrl+S】组合键保存文件。