(中职）Flash CS3动画设计案例教程项目六课件.ppt

(中职）Flash CS3动画设计案例教程项目六ppt课件项目六项目六 元件与实例元件与实例 任务一任务一星空的制作星空的制作 任务二任务二风扇按钮制作风扇按钮制作 综合实训六综合实训六任务一星空的制作任务一星空的制作 教学目标教学目标 掌握影片剪辑元件的制作方法，理解使用元件的优点。能使用滤镜来美化影片剪辑。教学难点教学难点 库面板的使用及元件的嵌套。教学重点教学重点 1、理解使用元件的优点。2、滤镜的使用方法。3、库面板的使用。任务描述任务描述月隐呈现，夜阑人静；夜色深得不见底，万籁俱静。仰望星空，那远在苍穹的星星，斑驳闪烁；在暗夜的岑寂中万般耀眼。现在就让我们来创造这一美景吧。任务预览 任务分析任务分析本任务需要大量的星星，如果用通常的方法一个一个绘制，既麻烦，又不易修改。这时，就需要使用元件来帮忙。通过创建一个星星元件，然后将元件多次放入场景形成多个实例。任务预览任务预览返回返回工作步骤工作步骤1.运行Flash CS3，新建一个空白文档（ActionScript 2.0）。2.在文档【属性】面板中修改文档背景颜色为灰色（“#999999”），其它参数值默认。3.修改图层名称：将“图层1”改名为“背景”。4.使用矩形工具，禁用笔触颜色，在场景中绘制一矩形。5.选中该矩形，打开【对齐】面板，相对于舞台垂直、水平对齐，并匹配高和宽，如图6-1-26.打开【颜色】面板，修改该矩形填充为线性渐变填充，渐变填充设置如下图所示。并使用“填充渐变”工具改变渐变方向，如下图所示 图6-1-4 图6-1-37.至此，星空背景完成，将该层锁定。8.新建图层，将图层命名为“星星”。9.点击“插入”菜单下的“新建元件”命令，弹出“新建元件”对话框，设置名称为“星星”，类型为“影片剪辑”,如下图所示。点击确定后进入元件编辑状态。10.选择工具箱中的“多边形工具”，设置多边形工具属性的选项为星型，其它参数如下图所示。11.设置填充色为“白色”，禁用笔触颜色，在元件中绘制一个星星。将其相对于舞台水平、垂直居中对齐。12.选中该星星，按【F8】键，将其转换为元件，元件名为“star”，类型为影片剪辑。13.保持舞台上的星星为选中状态，打开【滤镜】面板，点击 为其添加模糊滤镜，参数如右图所示。14.点击“场景1”回到主场景，按【CTRL+F8】键，新建一元件，元件名为“月亮”，类型为“影片剪辑”。15.选择椭圆工具，设置填充颜色为白色，笔触颜色为黑色，按住Shift键在舞台上绘制一个圆。选中边框线，作适当的移动，如右图所示，然后删除不需要的部分，形成月亮图像。16.点击“场景1”回到场景1中。按快捷键【CTRL+L】，打开【库】面板，此时库中有三个元件，如右图所示。其中“star”元件嵌套在“星星”元件中。17.将星星及月亮从库拖放到场景1中去，按住【CTRL】键，拖放星星，以复制多个星星。使用“任意变形工具”改变星星的大小、及角度。18.为月亮添加发光滤镜，参数如下图所示19.适当调整星星、月亮位置，单击“文件”“保存”，保存文件为“星空.fla”。按【CTRL+ENTER】测试影片。相关知识与技能相关知识与技能1.元件的类型元件的类型创建一个元件时就要确定元件的类型，Flash中主要有3种元件类型，即图形元件、影片剪辑和按钮元件。u图形元件图形元件 ：可用于创建静态图像，也可用于创建连接到主时间轴的可重用动画片段，即图形元件实际播放帧数依赖于主时间轴。u影片剪辑元件影片剪辑 ：用于创建可重用的动画片段。影片剪辑可独立播放，它独立于主时间轴，即使主时间轴只有一帧，该动画片段也可循环播放。u按钮元件按钮元件 ：可以创建用于响应鼠标单击、滑过或其它动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例2.图形元件与影片剪辑的区别：图形元件与影片剪辑的区别：图形元件与影片剪辑都可以是动画片段，但它们也有各自的特点：u图形元件的播放依赖于主时间轴，而影片剪辑完全独立于主时间轴。u图形元件数据结构简单，对播放器的压力小，而影片剪辑对播放器压力大。u图形元件可设置播放方式，而影片剪辑则需要脚本语句才可实现。u影片剪辑可以设置滤镜，图形元件则不行。u影片剪辑可以设置混合模式，图形元件则不行。u影片剪辑中可使用“运动时位图缓存”功能，而图形元件则不行。u影片剪辑中可在时间轴上绑定声音，而图形元件即使包含了声音也不会发声。u影片剪辑中设置实例名称，且可在实例上添加动作语句，而图形元件则不行。3.元件与实例元件与实例u位于库中的元件就像是“后台”里的“演员”，从库中调到舞台上的元件称为该元件的实例，就像是让演员到舞台上去表演。但与现实不同的是，“演员”从“后台”走上舞台后，“演员原型”还会存在。u同一元件可以有无数个“实例”，各个“实例”的颜色、方向、大小等可以设置成与原来不同的样式。就像一个演员可以穿上不同服装，扮演不同的角色。对元件的修改会反映到所有该元件的实例上去，对“实例”的属性设置及变形不会影响其他“实例”及元件。4.库的基本操作库的基本操作u【库】面板是存储和管理在Flash中创建的各种元件和导入文件（包括位图、声音、字体及视频文件）的场所。“库”采用了类似Windows组织文件的方式来组织元件。按【F11】键即可打开【库】面板，主要功能如右图所示：u文档切换列表：可以在所有打开的Flash文档库间进行切换。u属性按钮：修改元件属性，可用于转换元件类型等。任务二任务二电风扇按钮制作电风扇按钮制作 教学目标教学目标 掌握按钮元件的制作方法，理解按钮的四帧所代表的意义。教学难点教学难点 理解按钮的四帧所代表的意义。教学重点教学重点 1、理解按钮的四帧所代表的意义。2、变形面板的使用。3、图形元件与影片剪辑元件的区别。任务描述任务描述 炎炎夏日，来一台电风扇扇扇该多惬意啊！那么我们就做一台电风扇吧。这台电风扇还可以通过一个按钮控制它的开关呢。任务分析任务分析 制作本任务，首先我们应该掌握基本绘图工具，学习【复制并应用变形】命令，重点去理解按钮的四帧所代表的意义，为了控制动画的播放，我们将使用几条简单的脚本语句，该部分将在以后的课程中学习。工作步骤工作步骤1.运行Flash CS3，新建一个空白文档（ActionScript 2.0）。2.在【属性】面板中修改文档属性，设置画面尺寸为“800800”，背景色为“白色”，其它参数值默认。3.使用“多边形工具”绘制一个五边形，使用“部分选取工具”、“锚点转换工具”调整锚点的位置及曲率，结果如右图所示。该步骤比较繁琐，需要熟练应用各种工具及耐心。4.选中该图形，按【F8】键将其转换为影片剪辑，命名为“叶片”。5.选中该叶片，按【Q】键打开“任意变形工具”，将中心点移到左下角，按【Ctrl+T】打开【变形】面板，设置旋转角度为“120”，点击“复制并应用变形”命令两次，结果如右图所示。6.选择这三个叶片，打开【滤镜】面板，为它们添加“斜角”滤镜，参数为默认值。7.保持选中状态，按【F8】键，将其转换为影片剪辑，命名为“扇叶”。8.如下图所示，点击“编辑元件”按钮，在下拉菜单中选择“扇叶”，进入“扇叶”元件编辑状态，选中三片叶片，适当移动，使其位于舞台中央。9.保持选中三个叶片状态，右键点击选中的对象，在下拉菜单中执行“分离到图层”命令，这时，三个叶片分别置入一个图层中，删除无内容的图层“图层1”。10.选中第30帧（所有层），按F6键插入关键帧，选择任一过渡帧，在【属性】面板中，设置“补间”为“动画”，“旋转”为“顺时针3次”。此时，时间轴面板如下图所示。11.返回主场景，按【Ctrl+F8】新建一图形元件命名为“面板”。使用直线工具绘制一条笔触宽为1的直线。并将它们相对于舞台水平左对齐，垂直居中。12.按【F11】键打开库面板，将其拖到舞台上，使其左端点对上扇叶的中心，如果线的长度不适合，则进入“面板”元件编辑状态（双击该元件），调整直线的长度，使其略长于“叶片”。13.进入“面板”元件编辑状态（使用第8步方法），按住【Alt】键拖到直线，上下个复制一条直线，从上到下修改三条直线的颜色为“#e8e8e8”、“#cccccc”、“#333333”。14.选中三条直线，按【Ctrl+G】，将它们组合成一个整体。按【Q】键使用自由变形工具将旋转中心点移至左边中部，该步操作应配合放大镜工具尽量做得精细一点，否则后面旋转时会达不到预计效果。15.按【Ctrl+T】键打开【变形】面板，将旋转角度设置为“10”，其它参数默认，点击“复制并应用变形”命令，使其旋转一周，效果如下图所示16.将该图层重命名为“辐条”，然后在其上方新建一层，命名为“边框线”，使用“椭圆”工具，设置笔触颜色为“#999999”，笔触宽度为“8”，按住【ALT+SHIFT】键，从中心向外绘制一个圆盖住辐条的断点。然后相对于舞台水平、垂直居中。17.选中所绘的圆，【CTRL+T】打开【变形】面板，勾选“约束”，将长、宽缩放设为“104%”，其它默认，点击“复制并应用变形”命令，结果如右图所示。如达不到所示效果可适当调节缩放百分比。18.新建一层，命名为“盖子”，使用“椭圆”工具，设置笔触颜色为“#999999”，笔触宽度为“0.25”，填充颜色为“#cccccc”，绘制一个圆，水平垂直居中对齐，结果如右图所示。19.再次新建一层，命名为“盖子刻线”，使用“椭圆”工具，设置笔触颜色为“白色”，笔触宽度为“1”，禁用填充颜色绘制一个圆，水平垂直居中对齐，结果如右图所示。20.再次新建一层，命名为“文字”，使用“文字”工具，在【属性】面板上设置字体为“Stencil Std”，字体大小为“25”，文本颜色为“#3679F5”，然后在舞台上点击，输入“Midea”,水平、垂直居中，结果如右图所示。21.新建图层，命名为“面板”，使用“基本矩形工具”，在【属性】面板中设置笔触颜色为“#999999”，笔触宽度为8，填充颜色为“#cccccc”，矩形边角半径为“70”，其它属性值默认，按住【Shfit】键绘制一个正方形，设置长、宽为“650”,属性设置如下图。22.右键单击该正方形，在快捷菜单中点击“分离”命令。显示“边框线”层，将其中的大圆复制下来，然后在隐藏该层，切换回“面板”图层，右键单击舞台空白处，在快捷菜单中点击“复制到当前位置”命令。然后删除中间的填充。结果如右图所示。23.显示所有图层，最终图层结构如右图所示。点击“场景1”返回主场景。24.将“图层1”改名为“扇叶”，新建一图层，将其命名为“面板”，将面板实例剪切并复制到该层。结果“扇叶”层只有“扇叶”实例，“面板”层只有“面板”实例。选中“扇叶”实例，在【属性】面板中将其命名为“fan”。25.新建一个影片剪辑元件，命名为“按钮”。使用椭圆工具，禁用笔触颜色，填充颜色为黑白渐变。按住【Shfit】键绘制一圆，并相对于舞台水平、垂直居中。使用“填充渐变”工具调整渐变方向如右图所示。26.新建一图层，使用“椭圆工具”，设置笔触颜色为“黑色”，笔触宽度为“1”，禁用填充色，绘制一个圆，居中对齐，结果如右图所示。27.分别选中图层一和图层二的“按下”帧，按【F6】键插入关键帧。选择图层二，使用“颜料桶”工具，设置填充色为黑白渐变，填充内部的小圆。删除小圆保留填充。使用“填充变形”工具调整填充角度如右图所示。28.返回场景1，新建一图层，命名为“按钮”，按【F11】键打开库面板，将“按钮”元件拖入舞台中，调整位置及大小，结果如右图所示。29.新建一影片剪辑元件，命名为“power”，使用“椭圆”工具，设置笔触颜色为“黑色”，笔触宽度为“18”，禁用填充颜色，按住【Shift】键绘制一个圆，相对于舞台居中对齐。使用“选择工具”将圆的上部删除。再用“直线工具”，笔触同上，从中心向上画一条直线，结果如右图所示。30.按【F6】键插入关键帧，将第二帧中图形颜色改为“红色”。选中第一帧，按【F9】键打开【动作】面板，输入“stop（）；”使其实例不会自动播放。返回主场景。31.打开库面板，将“power”元件拖入“按钮”层中(也可拖入新建层中)，调整大小及位置，并在属性面板中将该实例命名为“power”。结果如下图所示。32.现在按【Ctrl+Enter】键测试影片。因为“power”元件的第一帧都加入了动作“stop();”，所以，没有动画出现。现在我们为按钮加入动作，使其能控制动画的播放。此部分内容将在后续章节中学习，这里只要求能模仿即可。33.首先，我们要用一个变量来作为风扇开关状态的标志。这里我们将该变量命名为“switchon”，如变量“switchon”为逻辑值“true”表示打开，“flase”表示关闭。选择主场景时间轴的第一帧，按【F9】键打开动作面板。输入如下代码：switchon=false;/设置开关状态标志 this.fan.stop();/停止实例fan的播放34.选择“按钮”实例（注意不要将“power”实例一同选中），输入如下代码（/及后面的文字为注释部分，不需要输入）：on(release)/当鼠标释放时if(switchon=true)/如果标志为打开this.fan.stop /停止扇叶动画播放this.power.gotoAndStop(1);/显示实例power第一帧switchon=false;/将标志设为关闭 else /否则this.fan.play();/播放扇叶动画this.power.gotoAndStop(2);/显示实例power第二帧switchon=true;/将标志设为打开35.保存文件为“电风扇”，按【Ctrl+Enter】键测试影片，点击按钮测试效果。完成结果时库、主时间轴内容如下图所示。相关知识与技能相关知识与技能1、按钮元件按钮元件使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交互式按钮。按钮元件包括四帧：u弹起帧：当鼠标指针不在按钮上时的状态。u指针经过帧：当鼠标指针在按钮上方时的状态 u按下帧：当鼠标指针点击按钮时状态 u点击帧：响应鼠标动作的区域，此区域在 SWF 文件中是不可见的。如果没有指定“点击”帧，“弹起”状态的图像会被用作“点击”帧。2、改变实例的属性改变实例的属性每个实例可以有自己的属性，属性独立于元件。可以修改单个实例颜色、亮度、透明度；可以对实例进行缩放、旋转、扭曲；改变实例的类型和动画的播放模式。这些操作不会影响元件和其它实例。不同类型的元件属性也不同，下图是三种类型的元件属性面板。改变实例的颜色和透明度：改变实例的颜色和透明度：选中要改变属性的实例，打开属性检查器的颜色下拉菜单选择以下选项：亮度：调整图象的相对亮度和暗度。色调：为实例着色。Alpha：调整实例的透明度。高级：同时设置红、绿、蓝颜色值与透明度参数3.变形实例变形实例选中要改变属性的实例；使用变形工具 ；变形面板或修改菜单中的变形命令对实例进行缩放、扭曲、旋转等操作。综合实训六综合实训六 一、使用Flash制作一盏台灯。要求：使用元件制作一盏台灯，注意要使用滤镜、混合时需要影片剪辑元件，图片与背景融合使用了“变暗”的混合模式。按钮可用上一任务的按钮，也可使用公用库中的按钮。效果如下图所示。动作参考：动作参考：主场景第一帧动作：stop();第一帧中按钮动作：on(release)gotoAndStop(2);第二帧中按钮动作：on(release)gotoAndStop(1);。