FlashCS6课件制作案例教学经典教程第3章(PPT 68页)

1、精品资源共享课第三章 Flash课件中的元件第1页，共68页。本章主要内容 1创建和编辑元件 2 分析各种元件类型 3 4元件与实例的区别和运用对元件进行滤镜特效的制作 5在3D空间中定位对象第2页，共68页。本章案例介绍本章是一个在课件中如何处理元件的案例。通过这个案例，学习创建或转换元件，图形的二次创作，元件实例的应用等。元件是存储在库面板中的可重复利用的资源，合理的利用元件和编辑元件，对Flash课件的制作非常重要（如图3.1所示）。图3.1第3页，共68页。3.1作品预览 操作步骤如下：在Flash CS6菜单栏中选择“文件” “打开”按钮，打开Lesson03/03Complete文

2、件夹中的03Complete.swf文件。FlashPlayer工具会对03Complete动画进行播放。这个作品适用于各科的静态插图.图 3.2第4页，共68页。3.2 元件及其分类元件元件是用于特效、动画和交互性的可重用的资源，就像影视剧中的演员、道具，都是具有独立身份的元素，却又是构成影片的主体。 影片剪辑一个独立的小影片，可以包含交互动画和音效，甚至可以包含其他的影片剪辑。可以对影片剪辑实例应用滤镜、颜色设置和混合模式。元件可以包含自己独立的“时间轴”。元件可以利用ActionScript语言进行编辑以对用户的操作做出响应。第5页，共68页。3.2 元件的分类按钮用于在影片中创建对鼠标

3、事件响应的互动按钮。制作按钮首先要创造与不同的按钮状态相关联的图形。为了使按钮有更好的效果，还可以在其中加入影片剪辑或音效文件。第6页，共68页。3.2 元件的分类图形通常用于存放静态的图像。但不支持ActionScript脚本代码，并且不能对图形元件应用滤镜或混合模式。第7页，共68页。3.3 新建动画文件放映文件操作步骤如下：1在菜单栏中选择“文件” “新建”按钮。在“新建文件”对话框中，选择“ActionScript 3.0”，然后单击“确定”按钮以创建一个新的Flash文档（*.fla）。2在属性面板中，单击“大小”选项旁边的“编辑”按钮，把“舞台”的大小设置为600像素*450像素。

4、2在菜单栏中选择“文件”“保存”按钮。把文件命名为“03demo.fla”。把它保存在03Start文件夹中。第8页，共68页。3.4 创建元件 1.直接创建新的元件的方式。2.将舞台上的原有图形转换为图形元件。在菜单栏中点击“插入”“新建元件”。在出现的“创建新元件”对话框中，为名称命名为“星”，并选择“图形类型”的元件。Flash进入“元件编辑”模式。在元件编辑区中可以自行绘制图形或导入图形。点击“编辑” “编辑文档”按钮回到主舞台编辑区。选择舞台上的对象。点击“修改”“转换为元件”，在出现的“转换为元件”对话框中，进行命名和选择“图形类型”。当然，这种方式不是一种真正的转换，而是把舞台上

5、的对象放在一个新的元件中。第9页，共68页。3.5 向Flash中导入矢量图形操作步骤如下：1在菜单栏中选择“文件”“导入”“导入到舞台”按钮。2选择Lesson03/03Start文件夹中的person.ai文件。点击打开。3在“导入到舞台”对话框中，有3个图层组合。确保选择了所有的图层。庞大的级联菜单群和图层群是Illustrator所创建的ai文件中所有图层的表现。在“将图层转换为”菜单中选择“Flash图层”，然后勾选“将对象置于原始位置”。点击“确定”按钮（如图3.3所示）。图 3.3第10页，共68页。3.5 向Flash中导入矢量图形此时，Flash将导入Illustrator矢

6、量图形，并且原矢量图形文件中的所有图层组也会出现在“时间轴”中。图 3.4第11页，共68页。3.5 向Flash中导入矢量图形在“舞台”上单击选取Singer图层的矢量人物（唱歌的女孩）。5在菜单栏中选择“修改”“转换为元件”按钮。6将元件命名为“Singer”，并设置“类型”为“影片剪辑”（如图3.5所示）。图 3.5第12页，共68页。3.5 向Flash中导入矢量图形选取Player图层的矢量人物（弹吉他的女孩），也转换为影片剪辑元件，并命名为“Player”。选取Dancer图层的矢量人物（跳舞的两个女孩），也转换为影片剪辑元件，并命名为“Dancer”。库中将分别出现这三个转换为影

7、片剪辑的元件（如图3.6所示）。而且在“舞台”上还有这三个元件的实例。图 3.6第13页，共68页。3.6 向Flash中导入位图Flash是无法创建位图的，也不能对位图进行复杂的编辑。但是在Flash课件的制作过程中往往需要大量的使用位图。同样Flash也可以导入如Adobe PhotoShop等专业的图形制作软件创建的位图。第14页，共68页。3.6 向Flash中导入位图1在菜单栏中选择“文件”“导入”“导入到舞台”按钮。2选择Lesson03/03Start文件夹中的background.psd文件。点击打开。3在“导入到舞台”对话框中，有3个图层。确保选择了所有的图层。4在左边的图层

8、窗口中分别点选这三个图层，在右边的选项中，选中“具有可编辑图层样式的位图图像”单选按钮（如图3.7所示）。这样使得psd文件中的位图导入到Flash后直接转换为影片剪辑元件。图 3.7第15页，共68页。3.6 向Flash中导入位图5在“将图层转换为”菜单中选择“Flash图层”，然后勾选“将对象置于原始位置”。点击“确定”按钮。此时，Flash将导入Photoshop位图图形，并且文件中的所有图层组也会出现在“时间轴”中。Photoshop图像将会自动被转换为影片剪辑元件，并被保存在“库”中。 6将前面导入的3个矢量图层拖拽到“时间轴”的顶部，使得他们不被背景层覆盖（如图3.8所示）。图

9、3.8第16页，共68页。3.7 通过库来管理元件库是Flash中的一个重要工具，合理使用库进行设计可以简化设计的过程，这也是进行复杂动画设计的重要技巧和手段。每个Flash文件都有一个存放元件、位图、声音和视频文件的库。利用“库”面板可以查看和组织库中的文件。当选取库中的一个元件时，“库”面板上部的小窗口将显示出来。现在，在当前动画的“库”文件中具有多个影片剪辑元件和多个文件夹，并且具有多个实例。可以通过在文件夹中组织这些元件，更好地在“库”中管理他们。第17页，共68页。3.7 通过库来管理元件1在“库”面板的左下角点击“新建文件夹”按钮。创建一个新文件夹。2将该文件夹命名为“Person

10、” （如图3.10）。3把Dancer、Player、Singer影片剪辑元件拖拽到Person文件夹中（如图3.10所示）。图 3.9图 3.10第18页，共68页。3.8 更改实例的大小和位置1单击选择background图层中的背景层。在属性面板中，将X轴、Y轴距离都设置为0像素。将图形的宽设置为600像素，高设置为450像素。2在工具面板中选择“任意变形”工具。点击piano图层中的钢琴键层。所选的实例周围将出现方框控制句柄。在按住Shift键的同时拖动某个角的控制句柄，减小钢琴键的大小，并拖动图层到舞台的左下角对齐（如图3.11所示）。图3.11第19页，共68页。3.8 更改实例的

11、大小和位置3用选择“任意变形”工具点击music图层。按住Shift键的同时拖动某个角的控制句柄，减小音乐图层的大小，并拖动图层到舞台的右边对齐。4用选择“任意变形”工具点击Singer图层。按住Shift键的同时拖动某个角的控制句柄，减小图层的大小，并拖动图层到舞台的左下方对齐。5用选择“任意变形”工具点击Player图层。按住Shift键的同时拖动某个角的控制句柄，减小图层的大小，并拖动图层到舞台的右下方对齐。6用选择“任意变形”工具点击Dancer图层。按住Shift键的同时拖动某个角的控制句柄，减小图层的大小，并拖动图层到舞台的中部对齐。第20页，共68页。3.8 更改实例的大小和位置

12、最终效果如图3.12所示。图3.12第21页，共68页。3.8 更改实例的大小和位置获取有关舞台上的实例的信息1. 在“属性”检查器中，可以查看实例的行为和设置；对于所有实例类型，均可以查看色彩效果设置、位置和大小；对于图形，还可以查看循环模式和包含该图形的第一帧；对于按钮，还可以查看实例名称 （如果已分配）和跟踪选项；对于影片剪辑，还可以查看实例名称 （如果已分配）。 对于位置，属性检查器显示元件注册点或元件左上角的 x 和 y 坐标，具体取决于在“信息”面板上选择的选项。2. 在“信息”面板上，查看实例的大小和位置、实例注册点的位置、实例的红色值 (R)、绿色值 (G)、蓝色值 (B) 和

13、 alpha (A) 值（如果实例有实心填充）；以及指针的位置。“信息”面板还显示元件注册点或元件左上角的 x和y坐标，具体取决于选择了哪个选项。 要显示注册点的坐标，请单击“信息”面板内坐标网格中的中心方框。 要显示左上角的坐标，请单击坐标网格中的左上角方框。第22页，共68页。3.8 更改实例的大小和位置3. 在影片浏览器中，查看当前文档的内容，包括实例和元件。4. 在“动作”面板中查看分配给按钮或影片剪辑的所有动作。获取有关实例的信息操作步骤：首先，在舞台上选择该实例。显示要使用的“属性”检查器（“窗口”“属性”）或面板要显示“信息”面板，请选择“窗口”“信息”。要显示影片浏览器，请选择

14、“窗口”“影片浏览器”。 要显示“动作”面板，请选择“窗口”“动作”第23页，共68页。3.9 对元件进行编辑1 .从“库”中编辑元件2.在“舞台”中直接编辑元件在“库”中双击Singer影片剪辑元件通过双击舞台上的某个实例以直接进入该实例所在元件的编辑模式，但也能够查看其周围的环境。第24页，共68页。3.9.1 从“库”中编辑元件1在“库”中双击Singer影片剪辑元件。Flash将会进入元件编辑模式。在这种模式下，可以查看元件的内容，舞台顶部的水平条显示，当前舞台不再处于“场景1”中，而是处于名为“Singer”的元件内（如图3.13所示）。图3.13第25页，共68页。3.9.1 从“

15、库”中编辑元件2再双击图画以编辑这个元件。这样就可以从元件层进入到组层（如图3.14所示）。将会看见，该矢量图是由若干个小矢量图形组成的。图3.14第26页，共68页。3.9.1 从“库”中编辑元件3要对图像上的某个组件的内容进行修改，可以直接双击进入该组件。下面我们要将歌手的裙子改为红色。点击周边白色空白区域取消对整个矢量图形的选择。单独点击蓝色的裙子选定该对象（如图3.15所示）。图3.15第27页，共68页。3.9.1 从“库”中编辑元件双击该对象进入对象编辑模式。点击后会看见该对象是一个不规则的蓝色矢量图形（如图3.16所示）。4选择“填充颜色”工具。选取红色为新的填充颜色，应用当前矢

16、量图形上（如图3.17所示）。图3.16图3.17第28页，共68页。3.9.1 从“库”中编辑元件5在水平条中点击“场景1”，返回到主时间轴。库中的影片剪辑元件进行了修改。“舞台”上的该元件的实例也反映了对元件所做的修改。如果编辑元件，“舞台”上该元件所有实例都会相应的发生改变（如图3.19所示）。舞台上方的顶部水平条中会有4个按钮（如图3.18所示）。当前正在编辑的模式是“绘制对象”，上一级为包含所有对象的“组”，再上一级为Singer元件，最上一级为舞台场景。图3.18图3.19第29页，共68页。3.9.2 在“舞台”中直接编辑元件1在“舞台”上双击Dancer元件的实例。Flash将

17、灰显舞台上所有其他的对象，进入该元件的编辑模式。顶部的水平条也从“场景1”进入“Dancer”元件内（如图3.20所示）。2再双击图画以编辑这个元件。这样就可以从元件层进入到组层（如图3.21所示）。将会看见，该矢量图是由若干个小矢量图形组成的。图3.21图3.20第30页，共68页。3.9.2 在“舞台”中直接编辑元件3要对图像上的某个组件的内容进行修改，可以直接双击进入该组件。下面我们要将右边舞者的裙子改为绿色。点击红色的裙子选定该对象（可调整显示比例，放大图形以便选择）。双击该对象进入对象编辑模式。点击后会看见该对象是一个不规则的红色矢量图形（如图3.22所示）。4选择“填充颜色”工具。

18、选取绿色为新的填充颜色，应用当前矢量图形上（如图3.23所示）。图3.22图3.23第31页，共68页。3.9.2 在“舞台”中直接编辑元件舞台上方的顶部水平条中会有4个按钮（如图3.24所示）。当前编辑的模式是“绘制对象”，上一级为包含所有对象的“组”，再上一级为Dancer元件，最上一级为舞台场景。5在水平条中点击“场景1”，返回到主时间轴。“舞台”上该元件的实例发生改变（如图3.25所示）。图3.25图3.24第32页，共68页。3.10对实例进行特效模糊Alpha排序滤镜颜色效果为了达到美化的效果，需要对舞台添加虚化（下面是本节用到的步骤）第33页，共68页。3.10对实例进行特效1点

19、击Dancer图层，从“库”中把“Dancer”元件拖拽到舞台上。此时，舞台上又多了一个“Dancer”元件的实例。如果此时改变该元件的各种属性，两个实例都会发生相应的变化。2右击拖入的元件实例，在弹出的快捷菜单中选择“排列”，然后在子菜单中选择“下移一层”。按住Shift键的同时拖动某个角的控制句柄，放大新的实例的大小，并拖动图层到舞台的中间（如图3.26所示）。图3.26第34页，共68页。3.10对实例进行特效两个实例的叠加使得舞台的元素过多，效果过于混乱。可以通过更改透明度和模糊特效来进行优化。3选取新的实例。在属性面板中，展开“滤镜”区域。4单击“滤镜”区域底部的“添加滤镜”按钮，并

20、选择“模糊”（如图3.27所示）。图3.27第35页，共68页。3.10对实例进行特效5在滤镜窗口将出现模糊滤镜。将模糊X和模糊Y的值设置为10像素。效果如图3.28所示。6在属性面板中，从“颜色效果”的样式菜单中选择Alpha。将Alpha滑块拖动到40%。这样会改变实例的透明度（如图3.29所示）。图3.28图3.29第36页，共68页。3.10对实例进行特效修改后的效果如图3.30所示。图3.30第37页，共68页。3.11添加3D特效文字1在图层顶部插入一个新图层。命名为Text。2从工具面板中选择“文本”工具。3在舞台上点击输入标题“音乐之声”。属性中字符大小设置为100点，颜色设置

21、为白色（如图3.31所示）。4从工具面板中选择“3D旋转”工具。实例上出现了一个圆形的彩色靶心，这是用于3D旋转的辅助线。红色经线围绕X轴旋转实例；绿色线围绕Y轴旋转实例；蓝色线围绕Z轴旋转实例（如图3.32所示）。图3.31图3.32第38页，共68页。3.11添加3D特效文字5单击其中一条辅助线，并在任意一个方向上拖拽鼠标，在3D空间中旋转实例（如图3.33所示）。也可单击并拖拽最外部的橙色辅助线，在全部3个方向上任意旋转实例。6选取该实例。在属性面板中，展开“滤镜”区域。4单击“滤镜”区域底部的“添加滤镜”按钮，并选择“投影”（如图3.34所示）。图3.34图3.33第39页，共68页。

22、3.11添加3D特效文字5在滤镜窗口将出现投影滤镜。将模糊X和模糊Y的值设置为10像素。颜色设置为灰色（如图3.35所示）。图3.35第40页，共68页。完成现在就完成了本章的作品！效果如图3.36所示。图3.36第41页，共68页。知识点认识素材和图片素材的导入元件概述和元件的类型 元件的创建、转换与编辑 使用滤镜对元件实例进行操作 在3D空间中定位对象 学习元件库的基本操作 使用“库”面板中的项目元件实例的编辑和属性应用设置第42页，共68页。精品资源共享课第二章 Flash课件中图形的绘制与编辑主讲：徐兆佳第43页，共68页。本章主要内容 1绘制基础图形，并进行简单修改 2对图形进行填充

23、和笔触设置 3 4元件的基本操作利用钢笔工具创建和编辑曲线 5创建和编辑文本第44页，共68页。本章案例介绍本章是一个语文诗词的静态插图课件。通过这个案例，学习Flash工具面板中的常用绘画工具、绘画调整工具、颜色工具等来绘制一些矢量形状，修改它们，以及学习组合简单的元素来创建复杂的画面。学习创建和修改图形是在制作Flash动画的基础。只有绘制好了静态矢量图，才能制作出优秀的动画作品。第45页，共68页。2.1 新建文件 操作步骤如下：1在菜单栏中选择“文件”-“新建”按钮。 在“新建文件”对话框中，选择“ActionScript 3.0”，然后单击“确定”按钮以创建一个新的Flash文档（*

24、.fla）。2在菜单栏中选择“文件”-“保存”按钮。把文件命名为“02demo.fla”，并把它保存在02Start文件夹中。第46页，共68页。2.2 笔触和填充在Flash中的每幅图形开始于一种形状。形状由两个部分组成：填充和笔触，。请牢记这两个组成部分。填充和笔触是彼此独立的，因此可以轻松地修改或删除其中一个部分，而不会影响另一个部分。该怎么操作呢？第47页，共68页。2.2 笔触和填充操作如下：1在选择工具面板中的矩形工具后，将工具面板的笔触颜色改为红色，填充颜色改色蓝色。也可以在右侧的属性检查器中进行同样的修改。将笔触的大小改为3像素。在舞台上绘制一个矩形。2图形绘制后可以进行修改。

25、在属性检查器中把填充更改为绿色，笔触改为黄色，笔触改为5像素。舞台上的矩形将发生改变。第48页，共68页。2.2 笔触和填充3可以独立地移动填充或笔触。点击黑色箭头的“选择工具”按钮，在点击图形中黄色的填充部分，就可以拖拽移动该部分的内容了。4如果想移动整个形状，就要确保同时选取它的填充和笔触，即鼠标双击。5删除刚才创建的图形。第49页，共68页。2.3 创建基本形状 使用“椭圆”工具操作步骤如下：1在“工具”面板中，在“矩形”工具上单击并按住鼠标左键，访问隐藏的工具。然后选择“椭圆”工具。2确保没有选择“对象绘制”模式图标（）。将工具面板的笔触颜色改为红色，填充颜色改色黄色。按住键盘上的Sh

26、ift键，同时在舞台上单击拖拽它，绘制一个正圆。3在“时间轴”上选择“图层1”，然后双击图层的名称，输入“月亮”，再单击名称框外面，更改图层名称。4在“工具”面板中，点击“选择工具”按钮。全选当前图形（包括笔触和填充）。5在属性检查器中，将圆形的高宽都改为200像素。 如果不按Shift键，Flash将不会对圆的长宽进行等比例的缩放，这样可以绘制各种长宽大小的椭圆。使用矩形工具画图时按住Shift键可画正方形，使用画线工具画图按住Shift键可画直线。第50页，共68页。2.3 创建基本形状 更改笔触和使用渐变填充操作步骤如下：1在“工具”面板中，点击“选择工具”按钮。2当鼠标箭头移动到圆形外

27、围的笔触圆环时，会箭头会变成（）形状。点击圆环。3按下Delete键。这样就删除了圆的外围笔触，只保留了内部的填充以方便后面的编辑。4选中黄色圆。单击菜单栏“窗口”-“颜色”按钮。弹出“颜色面板”。第51页，共68页。2.3 创建基本形状 更改笔触和使用渐变填充5单击“颜色”面板中的“填充颜色”图标（），在“纯色”下拉菜单中选择“线性渐变”，从左到右任意选择渐变的颜色。6在“颜色”面板中选择位于颜色渐变左边的颜色指针，然后在十六进制栏中输“FFF098”。按下Enter回车键。7选择最右边的颜色指针，输入“FFEE48”，按下Enter回车键。圆月亮的表面上将从浅黄到深黄进行渐变。8月亮的渐变

28、中深黄色部分过多，还要在中间位置让颜色适当变浅。点击月亮图形，在渐变定义条的下面的中间位置单击，创建新的颜色指针。9选择新的颜色指针，然后输入“F2E484”，为新颜色设定比当前颜色更浅的黄色，再按Enter。月亮的渐变填充中浅黄色的部分将更加多，月亮也就更加明亮。第52页，共68页。2.4 创建背景图案2.4.1 使用“矩形”工具2.4.2 使用“渐变变形”工具2.4.3使用“钢笔”工具2.4.4利用“选择”和“部分选取”工具编辑曲线2.4.5删除或添加锚点第53页，共68页。2.4 创建背景图案 使用“矩形”工具 操作步骤如下：1、新建图层并重命名为“背景”。2、在舞台上创建一个矩形。选择

29、笔触颜色为“无”，填充颜色为蓝色，其位置和属性和舞台一样大小。3、改变矩形的填充色。将其填充为一从深蓝到浅蓝的渐变图形。4、即完成了矩形背景的创建。第54页，共68页。2.4 创建背景图案 使用“渐变变形”工具 1、新建图层并重命名为“背景”。2、在舞台上创建一个矩形。选择笔触颜色为“无”，填充颜色为蓝色，其位置和属性和舞台一样大小。3、改变矩形的填充色。将其填充为一从深蓝到浅蓝的渐变图形。4、即完成了矩形背景的创建。1、变形句柄右侧边线上的方块句柄点击拖拽可以改变渐变的范围；2、变形句柄右侧边线顶上的圆圈箭头句柄点击拖拽可以改变渐变的方向；3、变形句柄中心的圆圈句柄点击拖拽可以改变渐变的位置

30、。第55页，共68页。2.4 创建背景图案使用“钢笔”工具 操作步骤如下：1、新建图层并重命名为“波纹1”。2、选择“钢笔”工具，将笔触设为“深蓝色”。3、在舞台上建立第一个锚点，开始作图。在“舞台”上的另一个部分单击，指示形状中的下一个锚点。重复操作，直至最后一个锚点与第一个锚点重合，描绘出波纹的大致形状。4、为波纹1填充适当的渐变色。5、重复操作，完成图层“波纹2”的制作。第56页，共68页。2.4 创建背景图案利用“选择”和“部分选取”工具编辑曲线 操作步骤如下：1选取“选择”工具。2把鼠标指针指在一条曲线上，如果看到的是光标附近出现了曲线，那么就可以编辑和调整曲线。3拖动曲线和调整它的

31、形状以至达到所需的效果。4在形状的轮廓上单击，就可以出现锚点和句柄，调整和美化曲线和形状。第57页，共68页。2.4 创建背景图案 删除或添加锚点 添加锚点 删除锚点图标功能添加一个锚点删除一个锚点第58页，共68页。2、5 创建特殊形状 创建圆形形状 操作步骤如下：1新建一个图层，命名为“白月亮”。2单击按住“矩形”工具，访问它下面的隐藏工具“椭圆工具”。3在“工具”面板中，选择笔触为空，填充为白色。4利用“椭圆”工具按住Shift键在舞台的左上部区域创建一个小圆形状第59页，共68页。2、5 创建特殊形状 创建星型形状 操作步骤如下：1新建一个图层，命名为“星星”。2单击按住“矩形”工具，

32、访问它下面的隐藏工具“多角星工具”。3在属性面板中，点击工具设置“选项.”按钮，会出现如图2.27所示的对话框，在样式下拉菜单选择“星形”，变数设置为“5”。4在属性面板中，点击笔触颜色，选择为“空”，点击填充颜色，选择为黄色。5用同样的方式，选择填充颜色为橘黄和土黄，以不同的大小在“星星”图层中绘制出多个五角星和圆形的图像。第60页，共68页。2.6 创建和编辑文本1新建图层命名为“文本”。2选择“文本”工具。创建文字“古朗月行”。3选中刚创建的文本，选择“修改”“转换为元件”，类型为影片剪辑，命名为“古朗月行”，点击“确定”按钮。4在元件“古朗月行”中编辑文字，选择自己喜欢的字体和颜色，调整大小。5选中文本，选择“修改”“分离”，这样分离两次。第一次如图2.61所示，第二次如图2.62所示，注意第二次分离后字体上会出现斑点，就表示分离彻底了，可以用图形的方式进