Flash 8 绘图练习 蜡烛教案资料

1、Good is good, but better carries it.精益求精，善益求善。Flash 8 绘图练习 蜡烛-Flash8绘图练习-绘制“烛焰”元件前面我们已经对绘图工具做了详细的介绍，下面，我们将以一个实例来全面运用前面所学的知识。这里，我们以绘制一个“情人节贺卡”为例。本节要制作一个综合范例情人节贺卡。在这个范例的制作过程中会使用前面学习的很多绘图工具，并且讲解一些新的绘图方法和技巧。另外，由于这个范例图形比较复杂，我们还使用了“图形元件”这个对象类型，利用“图形元件”可以更加方便的制作复杂图形。范例最终效果如图2-105所示。图2-105情人节贺卡（1）新建一个Flash8

2、影片文档。设置舞台背景颜色为蓝色，其他保持默认设置。（2）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛焰”，选择【行为】为【图形】。如图2-106所示。图2-106新建图形元件（3）单击“确定”按钮，进入到“烛焰”元件的编辑场景。使用【椭圆工具】绘制一个仅有边框无填充色的椭圆，使用【选择工具】调整，如图2-107所示。图2-107绘制烛焰边框（4）执行【窗口】|【混色器】命令，填充样式设为放射状。在渐变条上将左边色标设置为白色，并拖动到偏右方以加大白色在整个渐变色中的比例。将右边色标设置为黄色，如图2-108所示。图

3、2-108混色器设置（5）将场景中的图形填充渐变色后，烛焰的色彩并不尽如人意，需要使用【填充变形工具】进行调整。选择【填充变形工具】单击填充色，会出现一个边上带有三个手柄的环形边框。我们用鼠标分别按住中心的圆圈或边上的手柄里推外拉、上下左右的进行调整，现在将烛焰的颜色调整为上下略带一点黄色，上边黄色略多，如图2-109所示。图2-109调整填充色Flash8绘图练习-绘制“烛身”元件1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛身”，选择【行为】为【图形】。（2）单击“确定”按钮，进入到“烛身”元件的编辑场景。使用

4、【椭圆工具】绘制一个仅有边框无填充色的椭圆，使用【选择工具】略加调整，并使用【任意变形工具】进行旋转，如图2-110所示。图2-110绘制烛身元件（3）打开【混色器】面板，填充样式设为放射状。在渐变条上将左边色标设置为黄色（#F5DD38），并拖动到偏右方；将右边色标设置为红色（#F76648），如图2-111所示。图2-111设置填充色（4）填充渐变色后，使用【填充变形工具】调整，如图2-112所示。图2-112调整填充色（5）为使烛身更漂亮，在刚刚作好的图形旁边画一个无边框的椭圆，颜色填充设置如图2-113所示。左边色标设置为#F76648，右边色标设置为#F5DD38。图2-113设置填

5、充色（6）椭圆画好后用【任意变形工具】调整倾斜，如图2-114所示。图2-114绘制椭圆（7）使用【选择工具】将画好的椭圆拖放到烛身上，如图2-115所示。图2-115调整椭圆位置（8）选择【刷子工具】，在选项中将刷子大小选择略小一点的笔刷，填充色设为淡黄色，在烛身上添加高光，删除边框线条，完成烛身元件造型。如图2-116所示。图2-116绘制高光Flash8绘图练习-绘制“烛光”元件（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛光”，选择【行为】为【图形】。（2）单击“确定”按钮，进入到“烛光”元件的编辑场景。

6、打开【混色器】面板，填充样式设为放射状。将鼠标移近渐变条，当鼠标指针右下角出现一个加号时，单击鼠标，在渐变条上增加一个色标。将左边色标设置为黄色，并稍向右移；中间色标为红色；右边色标为白色，为使光焰呈模糊虚幻而不突兀，将右边白色色标的Alpha值调整为零，如图2-117所示。图2-117设置填充色（3）使用【椭圆工具】绘制一个无边框的正圆，如图2-118所示。图2-118绘制无边框正圆（4）使用【任意变形工具】将其纵向收缩。如图2-119所示。图2-119收缩变形Flash8绘图练习-组装“蜡烛”元件（1）新建一个名字为“蜡烛”的图形元件。进入到这个元件的编辑场景中。（2）“蜡烛”元件共分三层

7、。先制作烛身层。双击时间轴上“图层1”，将“图层1”改名为“烛身”。如图2-120所示。图2-120修改图层名（3）按Ctrl+L组合键打开【库】面板，将“烛身”元件拖放到舞台上。选中该元件按住Alt键向下拖放进行复制，如图2-121所示。图2-121复制烛身元件（4）选中所有元件，执行【修改】|【对齐】|【左对齐】命令，再执行【按高度均匀分布】命令，效果如图2-122所示。图2-122对齐元件（5）使用【任意变形工具】旋转最上面和最下面的元件，如图2-123所示。图2-123旋转上下元件（6）将鼠标指向“烛身”图层上，单击右键，在弹出的快捷菜单中选择【插入图层】命令。系统默认插入图层为“图层

8、2”，双击“图层2”，改名为“烛焰”。将【库】面板中“烛焰”元件拖放到合适位置。如图2-124所示。图2-124放置烛光元件（7）插入一个新图层，将图层改名为“烛光”。将“烛光”元件拖放到舞台上。因为烛光在蜡烛的后面，所以用鼠标选择“烛光”层，将它拖放到“烛身”层下方。现在三层的排列顺序如图2-125所示。图2-125图层顺序（8）在【属性】面板中将背景色改为黑色，使蜡烛的色彩更明亮。完成后的蜡烛如图2-126所示。图2-126蜡烛完成效果Flash8绘图练习-绘制“心”元件（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名

9、称为“心”，选择【行为】为【图形】。（2）单击“确定”按钮，进入到“心”元件的编辑场景。使用【线条工具】绘制一条竖线，再使用【选择工具】将其调整为曲线，如图2-127所示。图2-127将直线调整为曲线（3）选择【部分选取工具】，单击曲线端点，端点上会出现调节手柄。上下左右移动手柄，将该曲线调整为如图2-128所示形状。图2-128调整曲线形状（4）选中该该曲线，执行【编辑】|【复制】命令，再执行【编辑】|【粘贴到中心位置】命令，选择粘帖得到的曲线，执行【修改】|【变形】|【水平翻转】命令，如图2-129所示。图2-129复制曲线后水平翻转（5）将该两条曲线拖放连接好，成为一个心形，如图2-13

10、0所示。图2-130完成心形（6）打开【混色器】面板，填充样式设为线性。在渐变条上将左边色块设置为#AF057C，将右边色块设置为#E207C8，如图2-131所示。图2-131设置填充色（7）使用【颜料桶工具】从右下向左上拖动鼠标填充颜色，并删除白色边框线，如图2-132所示。图2-132填充颜色（8）选中这个心形，右击它，在弹出的快捷菜单中选择“复制”命令，然后在时间轴上将此层锁定。（9）插入新图层，系统默认为“图层2”，执行“编辑”|“粘贴到当前位置”命令。创建此层的目的是为使心形下方边上呈现白色高光，所以此层的心形比图层1上的心形略小。如果使用【任意变形工具】来调节是很不容易达到这个目

11、的。这里执行【窗口】|【设计面板】|【变形】命令，弹出【变形】面板，设置变形宽度为97%，约束默认为打勾状态，按回车键确定，就可以使图形实现精确的变形。变形面板设置如图2-133所示。图2-133“变形”面板（10）打开【混色器】面板，填充样式设为放射状。在渐变条上将左边色块设置为玫红色（#F91CEE），将右边色块设置为白色，白色的Alpha值为78%，如图2-134所示。图2-134设置填充色（11）将“图层2”的心形填充上述调整好的填充色，并使用【填充变形工具】进行调整，按住方形手柄向外拖动，使填充色变为椭圆状，再按住中心点向上移动。为了使大家能够清楚观察调整的情况，特将背景色暂改为蓝色

12、，如图2-135所示。图2-135调整填充色（12）现在只是使这一层的心形下方颜色变亮了，但并未因此而形成高光状态，所以我们还得在此层上再加一层，掩盖住多余的白色，只留出两边的高光。复制“图层2”的心形，然后锁定“图层2”。（13）插入一个新图层，系统默认为“图层3”，执行“编辑”|“粘贴到当前位置”命令。（14）将此层的心形填充新的渐变色。设置渐变色样式为放射状，左边色块为#FA3AF0，右边色块为#F444C9，Alpha值为62%，如图2-136所示。Flash8绘图练习-制作“项链”元件图2-136设置填充色（15）填充此色后会发现并没有出现我们希望的效果。因为填充的色彩虽然外周是半透

13、明的，但这个透明色是圆形，无论怎么样调整都无法达到心形状态。执行【修改】|【形状】|【柔化填充边缘】命令，弹出“柔化填充边缘”对话框，设置距离30px，步骤数为10，如图2-137所示。图2-137柔化填充边缘设置现在看效果已经出来了。如图2-138所示。图2-138柔化后效果（16）目前这个心形的立体感并不强，因为主要的高光部分还没添加上去。锁定“图层3”，插入新图层，在“图层4”中将刚刚复制的“图层2”的心形再次执行【编辑】|【粘帖到当前位置】命令，使用【选择工具】框选心形的下半部分并将其删除，如图2-139所示。图2-139删除心形下半部分（17）使用【部分选取工具】将下端的直线调整为曲

14、线，并使两端尽量圆滑。如图2-140所示。图2-140调整圆滑（18）打开“混色器”面板，将填充色样式改变线性，设置两边色块均为白色，右边色块Alpha为0%，如图2-141所示。图2-141设置填充色填充颜色后，使用【填充变形工具】进行调整，如图2-142所示。图2-142调整填充色到此为止，“心”元件制作完毕。Flash8逐帧动画详解及实例从本单元起，我们将逐渐给大家介绍Flash8.0中的五种常见的动画形式：逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导线动画。本节着重介绍逐帧动画（FrameByFrame），这是一种常见的动画手法，它的原理是在“连续的关键帧”中分解动画动作，也就

15、是每一帧中的内容不同，连续播放而成动画。由于逐帧动画的帧序列内容不一样，不仅增加制作负担而且最终输出的文件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。1逐帧动画的概念和在时间帧上的表现形式在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画在时间帧上表现为连续出现的关键帧，如图3-2-1所示。图3-2-1逐帧动画2创建逐帧动画的几种方法（1）用导入的静态图片建立逐帧动画用jpg、png等格式的静态图片连续导入Flash中，就会建立一段逐帧动画

16、。（2）绘制矢量逐帧动画用鼠标或压感笔在场景中一帧帧的画出帧内容。（3）文字逐帧动画用文字作帧中的元件，实现文字跳跃、旋转等特效。（4）导入序列图像可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift3D等）产生的动画序列。3绘图纸功能（1）绘画纸的功能绘画纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了。如图3-2-2所示，这是使用绘画纸功能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好

17、像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时你只能编辑当前帧的内容。图3-2-2同时显示多帧内容的变化（2）绘图纸各个按钮的介绍绘图纸外观按钮按下此按钮后，在时间帧的上方，出现绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。绘图纸外观轮廓按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。3.绘图纸显示多帧按钮，按下后可以显示全部帧内容，并且可以进行“多帧同时编辑”。修改绘图纸标记按下后，弹出菜单，菜单中有以下选项：“总是显示标记”选项会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开

18、。“锚定绘图纸外观标记”选项会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。“绘图纸2”选项会在当前帧的两边显示两个帧。“绘图纸5”选项会在当前帧的两边显示五个帧。“绘制全部”选项会在当前帧的两边显示全部帧。上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制作二个逐帧动画实例，以加深对逐帧动画的认识。4奔跑的豹子茫茫雪原上，有一只矫健的豹子在奔跑跳跃，这是一个利用导入连续位图而创建的逐帧动画，如图3-2-3所示。图3-2-3奔跑的豹子1、创建影片文档执

19、行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*260象素，【背景色】为白色，如图3-2-4所示。图3-2-4创建新文档2、创建背景图层选择第一帧，执行【文件】|【导入到场景】命令，将本实例中的名为“雪景.bmp”图片导入到场景中。在第8帧按F5，加过渡帧使帧内容延续。3、导入gif动画新建一层，选择第一帧，执行【文件】|【导入到场景】命令，将本教程中的“奔跑的豹子”系列图片导入。此时，会弹出一个对话框，如图3-2-5所示。3-2-5系列图片导入选择【是】按钮，Flash会自动把gif中的

20、图片序列按序以逐帧形式导入场景的左上角，如图3-2-7所示。3-2-7导入的gif动画在场景的上方形成帧帧动画如图3-2-8所示是导入后的动画序列，它们被Flash自动分配在8个关键帧中。图3-2-8导入的8张图片4、调整对象位置此时，时间帧区出现连续的关键帧，从左向右拉动播放头，就会看到一头勇猛的豹子在向前奔跑，但是，被导入的动画序列位置尚未处于我们需要的地方，缺省状况下，导入的对象被放在场景坐标“0，0”处，我们必须移动它们。你当然可以一帧帧调整位置，完成一幅图片后记下其坐标值，再把其它图片设置成相同坐标值，如果你有足够耐性和时间，也无妨，那么，我们何不试试“多帧编辑”功能呢？先把“雪景”

21、图层加锁，然后按下时间轴面板下方的【绘图纸显示多帧】按钮，再单击【修改绘图纸标记】按钮，在弹出的菜单中选择【显示全部】选项，如图3-2-9所示。图3-2-9选择显示全部选项最后执行【编辑】|【全选】命令，此时时间轴和场景效果如图3-2-10所示。图3-2-10选取多帧编辑用鼠标左键按住场景左上方的豹子拖动，就可以一次把8帧中的图片一次全移动到场景中了。5、设置标题文字在场景中新建一个图层，单击工具栏上的文字工具按钮,设置【属性】面板上的文本参数如下，【文本类型】为静态文本；【字体】为隶书；【字体大小】35；【颜色】为深蓝色。如图3-2-11所示。图3-2-11字体【属性】面板参数设置在文本框输

22、入“奔跑的豹子”五个字，居中放置。6、测试存盘执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“奔跑的豹子.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“奔跑的豹子.swf”文件。Flash8形状补间动画详解及实例形状补间动画是Flash中非常重要的表现手法之一，运用它，你可以变幻出各种奇妙的不可思议的变形效果。本节从形状补间动画基本概念入手，带你认识形状补间动画在时间帧上的表现，了解补间动画的创建方法，学会应用“形状提示”让图形的形变自然流畅，最后，提供了二个实例练手，帮助你更深

23、地理解形状补间动画。1形状补间动画的概念（1）形状补间动画的概念在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。（2）构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。（3）形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之

24、间有一个长长的箭头，如图3-3-1所示。图3-3-1形状补间动画在时间帧面板上的标记（4）创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕。2认识形状补间动画的属性面板Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后，点击时间帧，【属性】面板如图3-3-2所示。图3-3-2形状

25、补间动画【属性】面板形状补间动画的【属性】面板上只有二个参数：（1）“简单”选项在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入具体的数值，形状补间动画会随之发生相应的变化。在1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。默认情况下，补间帧之间的变化速率是不变的。（2）“混合”选项“混合”选项中有二项供选择：“角形”选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。“分布式”选项：创建的动画中间形状比较平滑和不规则。至此，“形状补间动画”的相关知识大家都

26、已经有所了解，下面动手个实例，体会一下形状补间动画的奇妙。实例:庆祝国庆实例简介国庆的夜空绚丽多彩，朵朵礼花在天空中绽放，远处传来礼炮的轰鸣声，让我们来给这美丽的夜晚增加点喜庆，挂几个大红灯笼来庆祝祖国的生日吧。实例播放效果如图3-3-4所示。图3-3-4庆祝国庆实例画面知识提要创建矢量图形创建形状补间动画将文字转变为形状用混色器设置颜色制作步骤1、创建新文档执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*330象素，【背景色】为白色，如图3-3-5所示。图3-3-5文档属性2、创建背景

27、图层执行【文件】|【导入到场景】命令，将本实例中名为“节日夜空.jpg”图片导入到场景中，在第80帧处按下F5，加普通帧。如图3-3-6所示。图3-3-6插入背景图片3、创建灯笼形状我们先来画灯笼，执行【窗口】|【设计面板】|【混色器】命令，打开混色器面板，如图3-3-7所示设置混色器面板的各项参数。图3-3-7混色器面板设置之一选择工具栏上的椭圆工具，去掉边线，在场景中画一个椭圆做灯笼的主体，大小为65*40象素。接着我们来画灯笼上下的边，打开【混色器】面板，按照如图3-3-8设置参数。图3-3-8混色器面板设置之二选择工具栏上的矩形工具，去掉边线，画一个矩形，大小为30*10象素，复制这个

28、矩形，分别放在灯笼的上下方，再画一个小的矩形，长宽为7*10象素，作为灯笼上面的提手。最后用直线工具在灯笼的下面画几条黄色线条做灯笼穗，一个漂亮的灯笼就画好了。如图3-3-9所示（为了能清楚的显示灯笼，可暂时将背景色改为蓝色）。图3-3-9画好的灯笼4、复制粘贴四个灯笼复制刚画好的灯笼，新建三个图层，在每个图层中粘贴一个灯笼，调整灯笼的位置，使其错落有致的排列在场景中。在第20、40帧处为各图层添加关键帧，如图3-3-10所示。图3-3-10错落有致的灯笼及时间轴面板5、把文字转为形状取代灯笼选取第一个灯笼，在第40帧处用文字“庆”取代灯笼，文字的的【属性】面板上的参数：【文本类型】为静态文本

29、，【字体】为隶书，【字体大小】为60，【颜色】为红色。对“庆”字执行【修改】|【分散】命令，把文字转为形状。如图3-3-11上半部分所示。依照以上步骤，在第40帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代另外三个灯笼，并执行【分散】操作，其结果如图3-3-11下半部分所示。图3-3-11用文字形状取代灯笼形状及文字打散6、设置文字形状到灯笼形状的转变。在“灯笼”各图层的第60帧及80帧处，分别添加关键帧，现在，在80帧处各“灯笼”图层中的内容为“文字图形”，应该把它们换成“灯笼”。具体办法可以分别选择第20帧中的“灯笼”图形，再一个个“粘贴”进第80帧中，当然，你先应该清除第80帧处

30、4个“灯笼”图层中的内容哦！7、创建形状补间动画。在“灯笼”各图层的第20、60帧处单击帧，在【属性】面板上单击【补间】旁边的小三角在弹出的菜单中选择【形状】，建立形状补间动画，如图3-3-12所示。图3-3-12创建形状补间动画8、测试存盘执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“庆祝国庆.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“庆祝国庆.swf”文件。使用形状提示形状补间动画看似简单，实则不然，Flash在“计算”2个关键帧中图形的差异时，远不如我们想象中的“聪明

31、”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时，“形状提示”功能会大大改善这一情况。形状提示的作用在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。（2）添加形状提示的方法先在形状补间动画的开始帧上单击一下，再执行【修改】|【形状】|【添加形状提示】命令，该帧的形状就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，在适当位置安放，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图3-3-3所示。图3-3-3添加形状提示后各帧的变化（3）添加形状提示的技巧“形状提示”可以连续添加，最多能添加26个。按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。确保“形状提示”是符合