1、第三章 Flash CS3入门及制作实例,内容提要,3.1 Flash CS3的工作环境简介 3.2 基本绘图工具 3.3 基本动画制作 3.4 动画制作实例,3.1 Flash CS3的工作环境简介,菜单栏,时间轴,舞台,工具箱,属性面板,浮动面板,时间轴,时间轴：用于组织和控制文档内容在一定时间内播放的图层数和帧数,舞台,工作区（舞台的后台 ）,常用面板,“属性”面板：舞台的下方 “对齐”面板：“窗口”|“对齐” “颜色”面板：“窗口”|“颜色” “样本”面板：颜色库面板 “信息”面板：在编辑操作的过程中为用户提供一些相关的信息。 “场景”面板：显示了当前动画的场景数量和播放的先后顺序 “
2、变形”面板：对选定对象执行缩放、旋转、倾斜和创建副本的操作 “动作”面板：方便使用Flash的脚本编程语言ActionScript而专门提供的操作界面 “组件”面板：动作集合,3.2 基本绘图工具（工具箱）,选择工具 部分选取工具 直线工具 套索工具 钢笔工具 矩形工具 铅笔工具,刷子工具 任意变形工具 渐变变形工具 墨水瓶工具与颜料桶工具 滴管工具 橡皮擦工具 文本工具,3.3 基本动画制作,3.3.1 逐帧动画方法与实例,创建逐帧动画的几种方法： 1用导入的静态图片建立逐帧动画用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。 2绘制矢量逐帧动画用鼠标或压感笔在
3、场景中一帧帧的画出帧内容。 3文字逐帧动画用文字作帧中的元件，实现文字跳跃、旋转等特效。 4指令逐帧动画在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 5导入序列图像可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。,3.3.1 逐帧动画方法与实例,例1：奔驰的汽车 步骤1：新建一个大小为550*400的动画文件，在第1帧处按F6插入关键桢。 步骤2：选择“文件|导入|导入到舞台”，将小汽车的图片导入到舞台上 步骤3：单击第2帧，插入关键桢(F6) ，选中舞台上的小汽车并水平平移一段距离。 步骤4：单击第3帧，插入关键桢(F6)
4、 ，选中舞台上的小汽车继续水平平移一段距离。 步骤5：按照3和4的步骤重复几次直至小骑车平移到最右边。 步骤6：同时按下Ctrl+回车键，即可观看最后的动画效果。,3.3.1 逐帧动画方法与实例,例2：奔驰的骏马-（导入连续图片 ） 步骤1：新建一个影片文档，在“属性”面板上设置文件大小为460290像素，“背景色”为白色。 如下图所示。,3.3.1 逐帧动画方法与实例,步骤2：创建背景图层。将当前图层重命名为“背景”，选择第一帧，选择菜单命令“文件|导入|导入到舞台”，将背景图片导入舞台中，在第8帧处按F5键插入普通帧，使帧内容延续到第8帧。 步骤3：导入素材到库。选择菜单命令“文件|导入|
5、导入到库”，在弹出的对话框中找到素材所在的文件夹，按Ctrl+A，把素材全部选中，再点击右下角的“打开”按钮，这样所有的素材都导入到库中。如左图所示。,3.3.1 逐帧动画方法与实例,步骤4：将马的图片添加到舞台上。插入一个新的图层并选中第1帧，单击库里名为“马1”的图形元件，按住鼠标左键拖动到舞台上，然后释放鼠标，这样“马1”图形就拖到舞台上了。选中第2帧，按F7键插入7个空白关键帧，依次在各个空白关键帧上，分别从库里拖出“马2”、“马3”、“马4”、“马5”、“马6”、“马7”、“马8”到舞台上，时间轴上所有空白关键帧都变成关键帧了。下图为导入的图片序列。,3.3.1 逐帧动画方法与实例,
6、步骤5：调整对象位置。单击“时间轴”面板下方的“编辑多个帧”按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择“绘制全部”命令。最后执行“编辑”菜单下的“全选”命令，此时时间轴和场景效果。此时时间轴和场景效果如下图所示。 步骤6：测试存盘 。,3.3.2 形状补间动画实例,例：变形文字 步骤1：新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为白色。 步骤2：选中“工具栏”中的“文本工具”，在舞台上单击并输入大写字母“A”，选中字母“A”，在文本“属性”面板中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色”（#FF0000）。 步骤3：在第10、20、30帧
7、处分别按F6键建立关键帧，用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝色”（#0000FF），将第30帧的文字改为“D”、颜色改为“黄色”（#FFFF00）。,步骤4：分别选择各关键帧的文字，选择菜单命令“修改|分离”，将各关键帧上的文字打散。 步骤5：创建形状补间动画。分别选择第1、10、20帧，将其“属性”面板中的“补间”设为“形状”。设置后时间轴如图所示。,步骤6： Ctrl+Enter快捷键预览动画,3.3.3 动作补间动画方法与实例,两种方式： 1) 先创建好两个帧的状态，然后在两个关键帧之间建立动作补间关系。
8、 2) 先创建好起点关键帧，然后给此帧赋予动作补间模式，再去创建终点关键帧，两帧之间就建立了动作补间关系。,3.3.3 动作补间动画方法与实例,动作补间动画的属性面板,“缓动” 选项:-1到-100 :动画运动速度从慢到快，朝运动结束的方向加速补间。 1到100:动画运动的速度从快到慢，朝运动结束的方向减慢补间。 默认 :补间帧之间的变化速率是不变的,3.3.3 动作补间动画方法与实例,动作补间动画的属性面板,“旋转”选项: 无:禁止元件旋转 自动:使元件在需要最小动作的方向上旋转对象一次 顺时针或逆时针+N:使元件在运动时顺时针或逆时针旋转相应的圈数,3.3.3 动作补间动画方法与实例,例：
9、跳动的弹球，且落地时还有弹性的效果。 步骤1：新建一个文档。在“属性”面板中设置影片的宽为300像素，高为300像素，背景色为白色。 步骤2：绘制图形。 选择菜单命令“文件”|“导入”|“导入到库”，选择弹球图片后，将弹球导入到库。在绘制时，最好是选择菜单命令“视图”|“网格”|“显示网格”，在舞台上显示网格。 步骤3：选择菜单命令“插入”|“新建元件”，新建图形元件名称填为弹球并将库中的弹球位图拖动到舞台上。 步骤4：回到场景编辑界面，打开“库”面板，将图形元件“弹球”从库中拖到舞台上。 步骤5：创建动画。,注意,3.3.3 动作补间动画方法与实例,（1）在第20帧按F6键插入关键帧，按向下
10、的方向键将图形放到场偏下的位置，模拟弹球着地的样子。为了模拟弹球着地时被压缩的样子，应该在随后的几帧里将图形压缩再恢复。在第25帧处按F6键插入关键帧，将图形进行压缩，即上下端点距离缩短，左右距离拉长，但图形的着地点不应该变化，所以压缩前必须记住最下端的位置。压缩完后，将图形下移到刚才记下的位置上。 （2）单击第20帧，选择菜单命令“编辑”|“时间轴”|“复制帧”，复制这一帧，再单击第30帧，选择菜单命令“编辑”|“时间轴”|“粘贴帧”，把第20帧的内容粘贴过来。在这一帧上，弹球将恢复原形，准备跳起。 （3）按照第（2）步的方法，将第1帧的内容复制到第50帧。这一弹球将完成一个循环。,3.3.
11、3 动作补间动画方法与实例,（4）现在为每一帧的运动加上渐变。由于重力作用，图形下落的时候加速，上升的时候减速，所以在第1帧的属性中将“补间”设置为“动画”，将“缓动”值改为-60。如下图：,3.3.3 动作补间动画方法与实例,（5）在第20帧至第25帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第25帧至第30帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第30帧的属性中将“补间”设置为“动画”，将“缓动”值改为60。创建后的时间轴如下图：,步骤5：测试动画。按Ctrl+Enter快捷键测试动画。,3.3.4 遮罩动画方法与实例,1.遮罩和遮罩的创建 1）遮罩及其作用
12、 遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。,3.3.4 遮罩动画方法与实例,2）创建遮罩的方法 （1）创建遮罩 （2）构成遮罩和被遮罩层的元素 （3）遮罩中可以使用的动画形式 3）
13、遮罩层的基本原理： 能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。,3.3.4 遮罩动画方法与实例,要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_Alpha属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在gif动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮
14、廓按钮，使之变成，使遮罩层只显示边框形状，在这种情况下，你还可以拖动边框调整遮罩图形的外形和位置。 在被遮罩层中不能放置动态文本。,技巧,3.3.4 遮罩动画方法与实例,例：扫描文字,步骤1：新建一个Flash文档。 步骤2：按Ctrl+F8快捷键插入一个“图形”元件，并命名为“文字”。选中“工具栏”中的“文本工具”在舞台上单击，输入文字“HELLO,FLASH!”，然后在下面的“属性”面板中设置字体为“Arial Black”、字号为“45”、颜色任意。文字元件如图。,3.3.4 遮罩动画方法与实例,步骤3：按Ctrl+F8快捷键插入一个“图形”元件，并命名为“彩条”。将工具箱中的填充颜色设
15、置为彩色。,选择工具箱中的“矩形工具”，画出如图3-67所示彩条。注意，彩条的宽度应长于文字的宽度。,3.3.4 遮罩动画方法与实例,步骤4：单击文档窗口右上方的“场景”按钮，回到主场景中。从“库”面板中拖动图形元件“彩条”到舞台上适当的位置。 步骤5：右击当前图层，在弹出的快捷菜单中选择“插入图层”命令，在当前图层的上方插入一个新的图层“图层2”。从“库”面板中拖动图形元件“文字”到舞台上 。,3.3.4 遮罩动画方法与实例,步骤6：在“图层2”的第30帧处按F5键，插入普通帧。在“图层1”的第30帧处按F6键，插入关键帧。 步骤7：在“图层1”的第1帧至第30帧之间右击鼠标，在弹出的菜单中
16、选择“创建补间动画”命令。选择“图层1”的第15帧，用工具箱中的选择工具选中彩条，拖动向向右平移，使第一个字母与矩形的左边线对齐。 步骤8：右击“图层2”，在弹出的快捷菜单中选择“遮罩层”命令，将“图层2”图层设置成遮罩层，这时“图层1”自动成了被遮罩层。 步骤9：本例制作完成，按Ctrl+Enter快捷键预览动画。,3.3.5 引导路径动画方法与实例,1)创建引导层和被引导层,方法：,3.3.5 引导路径动画方法与实例,2)引导层和被引导层中的对象 引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。 而“被引导层”中的
17、对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能使用形状。 由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是动作补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。,方法：,3.3.5 引导路径动画方法与实例,3)向被引导层中添加元件 “引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头，如下图所示：,方法：,3.3.5 引导路径动画方法与实例,1)“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，在“属性”
18、面板上，选中“调整到路径”复选框，对象的基线就会调整到运动路径。而如果选中“对齐”复选框，元件的注册点就会与运动路径对齐。 2)引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等。 3)在做引导路径功，拖动对象时，对象的中心会自动吸附到动画时，按下工具箱中的“对齐对象”按钮 ，可以使“对象附着于引导线”的操作更容易成路径端点上。 4)过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。,技巧：,3.3.5 引导路径动画方法与实例,5)向被引导层中放入元件时，在动画开始和结束的关键帧
19、上，一定要让元件的注册点对准线段的开始和结束的端点，否则无法引导，如果元件为不规则形，可以点击工具箱中的“任意变形工具”，调整注册点。 6)如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择“属性”，在对话框中选择“一般”，作为正常图层类型。 7)如果想让对象作圆周运动，可以在“引导层”画一根圆形线条，再用“橡皮擦工具”擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。 8)引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。,技巧：,3.3.5 引导路径动画方法与实
20、例,例：小球沿着弯曲道路运动,1新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为黑色。 2选择菜单命令“视图”|“网格”|“显示网格”，在舞台上显示网格线。 3绘制曲线。选中“工具箱”中的“钢笔工具”，在“颜色”设置里将笔触颜色设为红色（#FF0000）。首先在场景中单击 ，出现一个控制点，然后在它的右斜上方单击并拖动鼠标，直到第1个控制点和第2 个控制点间出现圆滑的曲线满意松开鼠标。再在第2个控制点的右斜下方单击并拖动鼠标，这时在第2个控制点和第3个控制点间出现圆滑的曲线。最后在第3个控制点的右斜上方单击并拖动鼠标，这时在第3个控制点和第4个控制点间出现圆滑的曲线。绘
21、制成的曲线如右下图所示。,如果绘制的曲线不满意，可以用选中选择工具指向需要修整的地方，鼠标指针变成 时拖动鼠标即可调整曲线的弯曲度,3.3.5 引导路径动画方法与实例,4右击当前图层名，在弹出的快捷菜单中选择“插入图层”命令，插入一个新的图层。单击“工具箱”中的“椭圆工具”，设置笔触颜色为无、填充颜色为蓝色（#0000FF）。按住Shift键并在场景上拖动鼠标，绘制一个大小适中的圆。 5添加引导层。在“图层2”图层的名称上右击，在弹出的快捷菜单中选择“添加引导层”命令。此时“时间轴”上新增加了一个引导层。 6选中“图层1”图层中的曲线，按Ctrl+C快捷键，然后选中“引导层”图层，按Ctrl+
22、V快捷键在引导层上粘贴曲线图形。拖动“引导层”图层上的曲线到“图层1”图层中曲线的正上方，使两条曲线间隔大约刚才绘制的圆的直径的路离。 7用“工具箱”中的“橡皮擦工具”，将“引导层”图层中的曲线的最高的地方擦去一小块、最低的地方也擦去一小块。此时曲线被分成3部分。,3.3.5 引导路径动画方法与实例,8拖动“图层2”图层中的圆，使圆的注册点对准“引导层”图层中第1段曲线的起始位置。移动“图层1”图层中的曲线，使之与圆外切，擦除该曲线的起始点到圆的切点之间的一段曲线 。用“选择工具”对“图层1”图层中的曲线整形，使之与“引导层”图层的曲线平行，擦除“引导层”图层中曲线末尾多余的部分。效果如图：,
23、3.3.5 引导路径动画方法与实例,9单击“图层1”图层中的第30帧，按F5键插入普通帧（使第1帧的内容延续到这一帧）。 10单击“引导层”图层中的第30帧，按F5键插入普通帧。 11单击“图层2”图层中的第10帧，按F6键插入一个关键帧。拖动圆，使圆的注册点对准“引导层”图层的第1 段曲线的结束点。 12分别单击“图层2”图层的第11、20、21、30帧，按F6键插入关键帧。拖动圆，使圆的注册点分别对准“引导层”图层的第2段曲线的起始点、结束点，第3段曲线的起始点、结束点。 13创建动作补间动画。分别在“图层2”图层的第1帧至第10帧之间、第11帧至第20帧这间、第21帧至第30帧之间右击，
24、在弹出快捷菜单中选择“创建补间动画”命令。 14本例制作完成，按Ctrl+Enter快捷键预览动画。,3.4 动画制作实例,摇曳的烛光 溪流效果,3.4 动画制作实例一-摇曳的烛光,步骤1：新建一个文档。背景色黑色，其他默认。 步骤2：选择“插入”|“新建元件”，将元件命名为“光圈”，类型为“影片剪辑”。 步骤3：在工具栏中，笔触色禁止，填充色放射状，在颜色面板中，将类型设置为放射状，三个色标：左FFFF00 Alpha100%，中FFFF6E Alpha77%，右FFFFCC Alpha0%，如图。,用椭圆工具画个圆，全居中：,3.4 动画制作实例一-摇曳的烛光,步骤4：第15、第30帧加上
25、关键帧，点中第15帧，再点修改变形缩放和旋转，缩放150。如左图：,步骤5：在图层1上点一下，这样整个图层都被选中了(时间轴为黑色了)，再在属性面板里“补间“，选择“形状“。释放下鼠标，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的实线箭头，表示形状补间动画创建好了。,3.4 动画制作实例一-摇曳的烛光,步骤6：选择“插入”|“新建元件”，将元件命名为“蜡烛”，类型为“影片剪辑”。选择“文件”|“导入”|“导入到库”，导入本实例中使用的蜡烛烛身，如图所示。将库中的元件蜡烛位图拖入到场景中。在第30帧处插入帧，延长到30帧，并将图层上锁。,步骤7：在图层1上新建图层，画火苗。笔触
26、色禁止，填充色线性：左FFFF99 Alpha100%，右FFFF1B Alpha30%，画椭圆，并用部分选择工具整调形状使该椭圆的形状像火苗。,3.4 动画制作实例一-摇曳的烛光,步骤8：在图层2第30帧插入关键帧，在第1帧到第30帧之间创建形状补间动画，如下图所示。,步骤9：在图层2第8帧插入关键帧，选中火焰，点击右键选择“分离”。用部分选择工具调整形状，第14帧插入关键帧，继续调整。以此类推，第 20 、26帧都插入关键帧做调整，可以只做火苗伸长和压缩，做成上下窜动，也可以再加上左右摆动。,3.4 动画制作实例一-摇曳的烛光,步骤10：在图层2上新建图层，点第1帧，从库中把元件光圈拖入摆
27、放在适当的位置并调整好大小，在属性面板里“颜色”里Alpha设置为50%，如图3-80所示。,步骤11：回到场景中，从库里把蜡烛元件拖到场景中，摆放好， Ctrl+Enter 即可观看到蜡烛火焰摇曳的效果。,3.4 动画制作实例二-溪流效果,步骤1：新建一个文档，大小为550400像素。 步骤2：选择菜单命令“文件”|“导入”|“导入到舞台”，导入如右上图所示的位图图像，将其放置在主场景的背景层。 步骤3：按Ctrl+F8快捷键制作影片中关键的图形元件，并取名为“矩形”。使用“矩形工具”绘制如右下图所示的矩形，可以使用任意颜色填充。,导入位图,3.4 动画制作实例二-溪流效果,步骤4：按Ctr
28、l+F8快捷键，新建图形元件，并取名为“流水”。将库中的位图图像放到图形元件内部，然后执行菜单命令“修改”|“分离”，将位图打散，用“套索工具”将位图图像中小溪流水的部分选取出来，其余的部分删除（选取出来之后点击右键选择“剪切”），如右上图。 步骤5：回到主场景，新建图层，将刚刚制作的图形元件“流水”拖动到舞台上和整体位图小溪位置重复的地方，并降低其透明度为50%，如右下图。,3.4 动画制作实例二-溪流效果,步骤6：新建一个名为“矩形”的图层，在第30帧处按F6键，创建关键帧。将“矩形”元件放置在这一层的第1帧和第30帧，元件的位置分别在小溪的开始处和结束处。 步骤7：在“矩形”图层的第13
29、0帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令，创建两关键帧之间的动作补间动画，并在其它图层的第30帧处插入帧，将其他图层的内容也延续到第30帧。 步骤8：设置“矩形”图层为遮罩层，“图层2”为被遮罩层。即可在“流水”元件所在层和“矩形”元件所在的层之间创建蒙版动画，使矩形被挖空，看到小溪。 步骤9：按Ctrl+Enter快捷键，预览动画效果。,习题,3-1、如何给填充和形状添加边框？ 3-2、在Flash CS3中要绘制精确的直线或曲线路径，可以使用什么绘图工具？ 3-3、 Flash的属性设置包括哪些？ 3-4、如果使用颜料桶、墨水瓶工具进行填色，在“选项”和“属性”面板的颜色列表中选取颜色不能满足用户所需，应该怎么办？ 3-5、什么是逐帧动画？什么是补间动画？ 3-6、逐帧动画和补间动画有什么不同？ 3-7、补间的形式有几种？ 3-8、一个遮罩效果能有几个遮罩层？ 3-9、遮罩动画和引导路径动画有什么区别？ 3-10、形状图形能用来制作动作补间动画吗？,The End,
