引导路径动画制作实例

引导路径动画制作实例实例1——星星字实例简介沪上老康是个Flash“老玩童”，他的古道热肠为人所称道，老康蓝屋（）是他的个人网站，这个网站在闪客中也是大名鼎鼎。下面来研究一下网站上“老康蓝屋”这几个字的动画效果，它是一个多图层路径引导动画，其运行效果如图3-6-5所示。本例的源文件“星星字.fla”保存在光盘的相关目录中。图3-6-5本例运行效果知识提要z创建多层引导路径动画z用文字做路径z创建光芒四射的星星制作步骤（1）创建影片文档步骤1设置影片文档属性执行【文件】|【新建】命令，新建一个影片文档，设置舞台尺寸为515×152像素，背景色为黑色（在教程中，我们为了更好地显示场景中的内容，背景色设为了深蓝色），如图3-6-6所示。图3-6-6文档属性步骤2创建背景图层执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的名为“老康蓝屋背景.bmp”的图片导入到场景中（“老康蓝屋.bmp”图片位置：光盘\example\part3\***\图片\老康蓝屋.bmp）。（2）创建元件步骤1创建“老康蓝屋”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“老康蓝屋”，如图3-6-7所示。图3-6-7创建“老康蓝屋”元件选择【文本工具】，在场景中输入“老康蓝屋”四个字，在【属性】面板中，设置文本类型【静态文本】，字体【华文彩云】，字体大小为80，颜色为白色，如图3-6-8所示。图3-6-8“老康蓝屋”文字【属性】面板步骤2创建“星星”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“星星”，如图3-6-9所示。图3-6-9创建“星星”元件在这个新元件中，我们将用一个圆形构成星星的主体，另用三条直线构成星星四射的光芒。引导路径动画(3)将【图层1】名称重新命名为“中心”，选择【椭圆工具】，设置【笔触颜色】为无，在场景中画一个圆形，大小为“13×13”像素。在【混色器】面板中，选择【填充样式】为【放射状】，将两个色标的颜色均设置为白色，其中左边的【Alpha】值为100%，右边的为0%，用【颜料桶工具】填充圆形，设置颜料桶属性和填充后的效果如图3-6-10所示。图3-6-10画星星的中心新建一个图层，重新命名为“光芒”，选择工具栏上的【矩形工具】，设置【笔触颜色】为无，在场景中绘制一个细长的矩形。在【混色器】面板中，选择【填充样式】为【线性】，将四个色标的颜色均设置为白色。其中，中间两个色标【Alpha】值为100%，左右两边的两个色标【Alpha】值为0%，用【颜料桶工具】填充矩形，设置颜料桶属性如图3-6-11所示。图3-6-11【混色器】面板接着，我们复制几条光芒，执行【窗口】|【设计面板】|【变形】命令，打开【变形】面板，设置【旋转】为45度，连续单击三次【复制并应用变形】按钮，星星的光芒就画好了，变形面板及星星效果分别如图3-6-12(a)和3-6-12(b)所示。3-6-12（a）制作完成的星星效果图3-6-12（b）变形面板注意，画好的星星中心要对准场景中的十字星(为了显示清楚，图3-6-12中星星放大300%)。步骤3创建“旋转的星星”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“旋转的星星”。从库中将名为“星星”的元件拖到第1帧中，在第20帧添加关键帧，再在第1帧建立动作补间动画，在【属性】面板上设置顺时针旋转一周，如图3-6-13所示。图3-6-13设置动作补间动画的旋转步骤4创建“填充颜色”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“填充颜色”。先从库里把图形元件“老康蓝层”拖到场景中，然后执行【修改】|【分离】命令三次，把文字打散为图形，其中第一次是将图形元件实例分离成文字，第二次是将文字分离成单个的字块，第三次是将文字块分离成图形。选择【选择工具】，在场景的空白处单击，取消对文字的选择，再选择【颜料桶工具】，把每个字中间的空隙都填充上蓝色，如图3-6-14所示。图3-6-14填充好的文字（3）创建动画单击时间轴右上方的【编辑场景】按钮，选择【场景1】切换到主场景中。本实例场景中共有八个图层，最下面的图层是图片背景，在前面已经先建好了，现在我们从最后第二层开始向上一层一层地叙述，在叙述过程中，请随时参考图3-6-16。步骤1创建【填充蓝色的文字】层根据需要，我们先将背景图层的帧延伸到第60帧，再插入一个新图层并命名为“填充蓝色的文字”。现在我们在【填充蓝色的文字】图层中，把库里的名为“填充颜色”的元件拖到场景中间，在【属面】板中设置【X】为9，【Y】为65。注意，以后的操作中，上面各图层中的文字都要和本图层中的文字对齐。在第30、60帧插入关键帧，在第1、30帧间建立动作补间动画，接着编辑第1、第60帧中的元件实例。分别选择第1帧与第60帧中的“填充颜色”元件实例，在【属性】面板上设置【Alpha】值为0%，如图3-6-15所示。如此设置的作用是让文字的底色有明暗渐变的效果，让画面更生动一些。图3-6-15在【属性】面板中设置元件实例透明度引导路径动画(4)步骤2创建【文字】层新建名为“文字”的图层，把库里名为“老康蓝屋”的元件拖到场景中，文字的边缘要和下面的“填充蓝色的文字”图层文字边缘对齐，必要时可把对象放大。步骤3创建引导层和被引导层新建一图层并命名为“星星一”，再单击时间轴上的【添加引导层】按钮，创建引导层，此时刚刚新建的图层会自动缩进到引导层下面，单击缩进了的这一层，在时间轴上连续单击【添加图层】按钮，共三次，就会在引导层下面创建好四个缩进的被引导层，其它三个图层分别命名为“星星二”、“星星三”和“星星四”，在这些被引导图层中，用来放置旋转的星星。完成后的时间轴如图3-6-16所示。图3-6-16时间轴面板步骤4设置引导层选中引导图层，从库里把名为“老康蓝屋”的元件拖出来，其边缘要和下面的“文字”图层中的对象边缘对齐，执行【修改】|【分离】命令三次，把文字打散成形状，注意，这时“老康蓝屋”元件已经被“打散”，原文字的边缘已经成为“线段”，它将被我们用作“引导线”。这时候的场景效果如图3-6-17所示。图3-6-17打散文字，作为引导线步骤5设置被引导层在步骤3里面，我们已经创建了四个“被引导层”，现在我们来设置这四个“被引导层”里的内容，每个图层里放一个“星星”元件，并分别沿着“老康蓝屋”4字的边缘运动。首先设置第一个“老”字：为了防止对引导层进行误操作，我们先锁住该层，图层结构如图3-6-18所示。图3-6-18锁定引导层选中【星星一】图层，单击工具箱上的【对齐对象】按钮，从库里把名为“旋转的星星”的元件拖出来，放在“老”字边缘的某一点，这是星星运动的起始点，在第60帧添加关键帧，移动星星到文字边缘的另一处，这是星星运动的结束点。在第1帧建立动作补间动画。切记：元件的中心点一定要位于文字边缘的线上，如图3-6-19所示。图3-6-19星星在第1、60帧中的位置从左向右拉动播放头，观察星星是否沿文字的边缘运动，如果从起始点直接运动到结束点，表示引导失败，检查元件的中心是不是位于文字边缘的线上，或者改变运动的起始点和结束点，二者之间的路径不能太远，太复杂。另外3个被引导层的设置同上述一样，只是分别对准“康”、“蓝”、“屋”3个文字对象，这里不再赘述。4．实例2——海底世界实例简介海底是很多人向往的神秘世界，今天，我们就用Flash来试着描绘这个世界。笔者设计的这个实例中包括了动作补间动画、形状补间动画、遮罩动画、引导路径动画等四种动画形式，制作上要比前面几节中的实例难度大一些，不过，它能综合复习前面学过的内容，操作原理也是我们熟悉的，相信你一定能顺利完成这个实例，效果如图3-6-20所示，本例的源文件“海底.fla”可以在光盘的相关目录中找到。图3-6-20海底知识提要●综合应用四种动画形式●创建透明水泡●创建多层遮罩制作步骤（1）创建影片文档新建一个影片文档，设置舞台尺寸为450×300像素，【背景色】为深蓝色，如图3-6-20所示。图3-6-21设置文档属性引导路径动画(5)（2）创建元件本例中的元件较前面的实例要多一些，我们把它们分成“水泡部分”、“海底部分”、“游鱼部分”三大部分来叙述。先来创建和水泡有关的部分。步骤1创建“单个水泡”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“单个水泡”。先在场景中画一个无边的圆，颜色任意，大小为30×30像素，再在【混色器】面板中，添加两个色标，颜色全为白色，【Alpha】值从左向右依次为100%、40%、10%、100%，如图3-6-22所示，选择【颜料桶工具】，在画好的圆的中心偏左上的地方单击一下，如对填充的颜色不满意，可以用【填充变形工具】进行调整。图3-6-22水泡（放大400倍）、填充位置及混色器面板参数步骤2创建“一个水泡及引导线”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“一个水泡及引导线”。单击【添加引导层】按钮，添加一个引导层，在此层中用【铅笔工具】从场景的中心向上画一条曲线，在第60帧处添加普通帧。将工具箱中的【对齐对象】按钮按下，选中被引导层的第一帧，从【库】中将名为“单个水泡”的元件，拖放在引导线的下端，在第60帧添加关键帧，把“单个水泡”元件实例移到引导线的上端并设置【Alpha】值为50%，如图3-6-23所示。图3-6-23水泡及引导线步骤3创建“成堆的水泡”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“成堆的水泡”。从库里拖入数个“一个水泡及引导线”元件，任意改变大小和位置，图3-6-24仅供参考。图3-6-24成堆的水泡（放大400倍）下面我们来做“游鱼”部分的元件。步骤4创建“游鱼”元件执行【插入】|【新建元件】命令，新建影片剪辑，名称为“游鱼”。在场景中共设四层，图层名称分别为“鱼头”、“中间鱼尾”、“上面鱼尾”、“下面鱼尾”。在各图层中画出鱼的各部分形状，如图3-6-25所示，“鱼头”层中是鱼的眼睛和圆滚滚的身子，为了体现鱼游动时的婀娜多姿，我们把鱼尾分成上、中、下三部分（有关鼠绘的知识请看相关章节），画好后在第7、14帧处各添加关键帧，把鱼头、鱼尾位置形状稍做改变，在第1、7、14帧处创建补间形状动画。为了保持动作连贯，第20帧和第1帧中的形状是完全一样的。图3-6-25鱼在各帧的形状及时间轴面板步骤5创建“鱼及引导线”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“鱼及引导线”。此元件只有引导层和被引导层二层，单击时间轴面板上的【添加运动引导层】按钮，新建引导层，在引导层中用【铅笔工具】画一条曲线，作为鱼儿游动时的路径，选择引导图层的第100帧，按F5键，使图层中的帧延伸到第100帧。在被引导层中拖入库中名为“游鱼”的元件，用【任意变形工具】调整“游鱼”元件实例的大小，选择第100帧，按F6键，插入关键帧，分别调整第1帧和第100帧中的“游鱼”元件实例到引导线的两端，在第1帧建立补间运动动画，其位置如图3-6-26所示。图3-6-26鱼在第1帧和第100帧的位置引导路径动画(6)在【属性】面板上，选中【路径调整】、【同步】和【对齐】复选框，如图3-6-27所示。图3-6-27设置属性下面我们来创建海底实例中“水波荡漾”效果所需的元件。步骤6创建“海底”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“海底”。选择第1帧，然后再执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的名为“海底.bmp”的图片导入到场景中（“海底.bmp”图片位置：光盘\example\part3\***\图片\海底.bmp）。步骤7创建“遮罩矩形”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“遮罩矩形”。在场景中画一个500×4的无边矩形，因为“遮罩层”中的图形在播放时不会显示，所以设置颜色为任意。复制并粘贴这个矩形，向下移一点位置，使其变成二个，再复制并粘贴这二个矩形，再向下移一点位置，使其变为四个，如此循环，在粘帖过程中，选中所有矩形，在【