《2022年Flashcs基础教程 .pdf》由会员分享，可在线阅读，更多相关《2022年Flashcs基础教程 .pdf（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 我们共同的flash 课件家园89 第三章图形、影片、按钮对象的编辑图形对象、影片剪辑对象、按钮对象也叫图形元件、影片剪辑元件、按钮元件，或者最简称呼为图形、影片、按钮，不管怎么称呼，它都指一样东西。图形元件、影片剪辑元件、按钮元件都有自己的时间轴，对它们的编辑，其实也是对它们的时间轴进行编辑。第一节图形元件的编辑首先我们要了解两个概念：(1)什么是主时间轴？(2)什么是图形元件时间轴？主时间轴是新建 Flash 文档时所看到的时间轴，一个Flash 文档只有一个主时间轴，它是唯一的，并且处于所有结构的最顶层。主时间轴有时也称为主场景，主场景也就是指主时间轴。主时间轴的作用主要用于组织动画，
2、即将各种元件、对象等组织在一起，形成一个完整影片。我们并不赞同直接在主时间轴上制作动画，而是将各种动画制作在各自的元件里，放置在主时间轴上后形成一个整体。图形元件时间轴是将某个对象转换为图形元件后，双击打开所显示的时间轴，每个图形元件都有自己的时间轴。3.1.1 三角板的绘制实例源文件：光盘实例与视频第三章第一节三角板.fla 操作步骤：启动 Flash CS3，新建一个Flash ActionScript2.0文档，将文档的背景颜色设置为“#99FF00”将“图层1”更名为“三角板”，按住“Shift”键不放，用“线条工具”在此图层的第1 帧绘制如图3.1.01 所示的等腰直角三角形。图 3
3、.1.01 名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 28 页 -第三章图形、影片、按钮对象的编辑90 用“选择工具”选定三角形，按快捷键“F8”，将三角形转换为图形元件，设置如图 3.1.02所示。鼠标指针移动到图形元件“45 度三角板”上，双击鼠标，打开图形元件(在场景中打开某个元件时，鼠标指针一定要移动到这个元件上，且鼠标指针形状为“”时，双击才可以打开元件。)，如图 3.1.03 所示。双击图形元件“45 度三角板”后，打开图形元件“45 度三角板”的时间轴，进入图形元件的编辑状态，如图3.1.04 所示。图形元件有自己的时间轴和编辑区，操作上与前两章所讲内容一样。
4、图3.1.04 的处显示当前操作元件的路径，这对初学的人很重要，通过这所显示的内容能很清楚知道，你现在对哪个对象进行编辑。当前显示正在对主场景下的“45 度三角板”的这个图形元件进行编辑，即最后显示的那个名称就是正在编辑的对象，如图3.1.04 的处所示。路径总是从主场景开始的，因为任何元件或对象都是放置在主时间轴上的，如图3.1.04 的处所示。单击处，返回到主时间轴。单击处，返回到上一级对象，或者是在编辑区没有对象的区域双击鼠标，也可以返回上一级对象。图 3.1.02 图 3.1.03 名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 28 页 - 我们共同的flash 课件家
5、园91 将“图层1”更名为“三角形”，如图 3.1.05 的处所示。在编辑区中用“选择工具”选定三角形，按快捷键“Ctrl+D”重制一个等腰直角三角形，用“缩放”工具拉小，并移动到如图3.1.05 的处。用“颜料桶工具”给三角形填上白色，如图3.1.05 的处所示。锁定“三角形”图层，单击“插入图层”按钮，新建一图层，并更名为“刻度”。在“刻度”图层的第1 帧画上刻度，如图3.1.06 的处所示。图 3.1.04 图 3.1.05 图 3.1.06 名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 28 页 -第三章图形、影片、按钮对象的编辑92 锁定“刻度”图层，单击“插入图层”
6、按钮，新建一图层，并更名为“数字”。在“数字”图层的第1 帧写入数字，如图3.1.07 的处所示。按快捷键“Ctrl+S”，将文档保存到“实例练习”文件夹中，并命名为“45 度三角板”，一个三角板图形就绘制完成。分析总结：通过本例，我们可以发现主时间轴与元件的时间轴是不同的，此例中主时间轴只有“三角板”这一个图层，而“45 度三角板”这个图形元件的时间轴上有三个图层，如图3.1.07 所示。本例将三角板转换为图形元件后，它就有自己的时间轴。在自己的时间轴上，我们可以将相对独立的对象放置在不同的图层上。如本例中将三角形、刻度、数字，放置不同的图层，编辑操作上比较灵活，当编辑完成时，可以通过锁定图
7、层的方式锁定编辑完成的对象。此例中，如果将这三个对象放在一个图层中编辑，操作上将会麻烦得多。实例练习请你做出“光盘实例与视频第三章第一节 30 度三角板.swf”的影片所示的三角板。3.1.2 位图的裁剪选择“菜单导入导入到舞台”菜单项，导入的一幅图片，这图片在Flash 中称为位图。很多时候，我们只需要图片其中的一部分，这时我们应该怎么处理呢？实例源文件：光盘实例与视频第三章第一节位图的裁剪.fla 操作步骤：启动 Flash CS3，新建一个Flash ActionScript2.0文档。将“图层1”更名为“图片”，选择菜单“文件导入导入到舞台”菜单项，将“光盘实例与视频第三章第一节素材之
8、Q 宠.jpg”导入编辑区中。用“选图 3.1.07 名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 28 页 - 我们共同的flash 课件家园93 择工具”选定图片，按快捷键“F8”，将其转换为图形元件设置如图3.1.08 所示。选定“选择工具”后，双击编辑区中的图片，打开图形元件“Q 宠”时间轴。将“图层1”更名为“图片”，按快捷键“Ctrl+B”打散图片后，锁定该图层，如图3.1.09 所示。单击“插入图层”按钮，插入一新图层，并将图层更名为“轮廓”，用“线条工具”工具拉出“QQ 宠物”的大致轮廓，绘制轮廓时可以放大编辑区。用“选择工具”将线条拉成“QQ 宠物”的形状，如
9、图3.1.10 所示。图 3.1.08 图 3.1.09 图 3.1.10 名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 28 页 -第三章图形、影片、按钮对象的编辑94 确认用线条描绘出的QQ 宠物是一个 封闭 的区域后，选定线条轮廓，按快捷键“Ctrl+X”，剪切线条轮廓。解锁“图片”图层，按快捷键“Ctrl+Shift+V”，将线条轮廓粘贴到“图片”图层的第1帧的当前位置。用“选择工具”选定“QQ 宠物”之外的区域，按 Delete 键删除。选定线条轮廓，按 Delete删除，最后剩下“QQ 宠物”部分，删除“轮廓”图层，如图3.1.12 所示。按快捷键“Ctrl+S”，
10、将文档保存到“实例练习”文件夹中，并命名为“位图的裁剪”，完成了图形的裁剪操作。总结分析：本例的思路是用线条描绘出欲保留的位图部分的轮廓，然后将线条与打散后的位图放置于同一图层，用线条将保留部分和删除部分分隔出来。删除不要的部分，完成图形的裁剪。本例关键的两点：(1)位图必须打散；(2)所绘线条轮廓必须封闭。3.1.3 位图的临摹位图与矢量图的最大区别为：位图放大一定倍数后，图像就会失真，而矢量图无论放大多少倍，图像都不会失真。在实际创作过程中，为了达到更好效果，我们应该尽可能的将位图转换为矢量图。如何转换呢？我们可以通过临摹的方式实现。实例源文件：光盘实例与视频第三章第一节位图的临摹.fla
11、 操作步骤：启动 Flash CS3，新建一个Flash ActionScript2.0文档。将“图层1”更名为“图片”，选择菜单“文件导入导入到舞台”菜单项，将“光盘实例与视频第三章第一节素材之鸭子.jpg”导入编辑区中。用“选择工具”选定图片，按快捷键“F8”，将其转换为图形元件设置如图3.1.13 所示。图 3.1.12 名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 28 页 - 我们共同的flash 课件家园95 选定“选择工具”后，双击编辑区中的图片，打开图形元件“鸭子”时间轴。将“图层1”更名为“临摹位图”，锁定该图层，如图3.1.14 所示。单击“插入图层”按钮，
12、插入一新图层，并将图层更名为“线条描绘”。用“线条工具”工具拉出构成“鸭子”的所有线条。绘制时将编辑区放大到合适的大小，鸭子的线条轮廓是由一段段曲线构成，因此，我们可以绘制一条直线，用“选择工具”将这些直线拉成曲线。最终临摹出“鸭子”的形状，如图3.1.15 所示。临摹出鸭子的线条轮廓后，就要给鸭子各个区域填充上相应的颜色。首先我们要选色，我们可以单击“填充颜色”工具，在弹出色板后，将鼠标指针移动到编辑区中你欲取色位置单击鼠标左键，选定某种颜色，如图3.1.16 所示。颜色选择完后，用“颜料桶工具”给各个区域填充颜色。如果是未封闭的区域，请先封闭该区域。图 3.1.13 图 3.1.14 图
13、3.1.15 名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 28 页 -第三章图形、影片、按钮对象的编辑96 颜色填充完成后，选定“临摹位图”图层，单击“删除图层”按钮，删除“临摹位图”图层。单击“场景1”按钮，退回主场景。按快捷键“Ctrl+S”，将文档保存到“实例练习”文件夹中，并命名为“位图的临摹”，完成了位图的临摹操作。总结分析：用 Flash 绘制图画的能力不是所有人都有的，他必须要有很深厚的美术功底的，才能构思出心中的图画。但是临摹的能力是每个人都有的，只要花一些时间，只是一些手工活而已。将位图临摹出来后，图画就变得十分清晰，这是处理图片的一种常用方式。注意：图形元
14、件时间轴只能显示时间轴第1 帧上的内容，它是静态的，不能用于制作动画。多数情况下用于处理图片，或者作为制作动画时的对象使用。第二节影片剪辑元件的编辑3.2.1 心与星实例预览：光盘实例与视频第三章第二节心与星.swf 操作步骤：启动 Flash CS3，新建一个Flash ActionScript2.0文档。将文档的背景颜色设置为“#000000”，即黑色。将主时间轴的“图层1”更名为“影片”，将“笔触颜色”设置为“#666666”即图 3.1.16 图 3.1.17 名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 28 页 - 我们共同的flash 课件家园97 灰白色。用“钢
15、笔工具”在“影片”图层的第1 帧的编辑区中绘制一颗心。用“选择工具”选定这颗心，按快捷键“F8”，将心转换为影片剪辑元件，设置如图3.2.01 所示。选定“选择工具”，在编辑区中双击心的线条，进入影片元件“心与星”的时间轴。将“图层 1”更名为“相爱的心”，并锁定本图层，如图3.2.02 所示。单击“插入图层”按钮，插入一新图层，并更名为“闪烁的星”，用“矩形工具”在“闪烁的星”图层的第1 帧的编辑区中绘制一个矩形，将矩形设置为无线条、宽为100、高为 3、颜色填充类型为放射状，填充后矩形效果为中间黄色，两边黑色，如图3.2.03 所示。设置完成后按快捷键“Ctrl+G”将矩形组合。用“选择工
16、具”选定矩形，按快捷键“Ctrl+D”重制一个矩形，打开“属性”面板，将重制的矩形的宽设置为70、高设置2。分别重制大小两种矩形各一个，按快捷键“Ctrl+Alt+S”，将两个小的矩形分别旋转45 度和-45 度，将一个大的矩形旋转90 度。选定这四个矩形，打开“对齐”面板，设置为水平居中和垂直居中，最终如图3.2.04 所示。按快捷键“F8”，将其转换为影片剪辑元件，设置如图3.2.05 所示。图 3.2.01 图 3.2.02 名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 28 页 -第三章图形、影片、按钮对象的编辑98 制作星的闪烁效果：选定“选择工具”，用鼠标双击星，打
17、开闪烁的星的时间轴，将图层1 第 1 帧的星转换为图形元件，如图3.2.06 所示。分别在“图层1”图层的第8 帧和第 15 帧按“F6”插入关键帧，选定第8 帧上的图形元件“星形”，打开“属性”面板，将“星形”的宽和高分别设置为40。设置完成后，选定第 1 帧，打开“属性”面板，设置如图3.2.07 所示。选定第8 帧，打开“属性”面板，设置如图3.2.08 所示。图 3.2.03 图 3.2.04 图 3.2.05 图 3.2.06 名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 28 页 - 我们共同的flash 课件家园99 选定“选择工具”，在编辑区双击鼠标，返回到“
18、心与星”的时间轴。选定影片剪辑元件“闪烁的星”，按快捷键“Ctrl+D”重制九个“闪烁的星”。将十颗星移动到心上，如图3.2.09 所示。图 3.2.07 图 3.2.08 图 3.2.09 名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 28 页 -第三章图形、影片、按钮对象的编辑100 双击鼠标，退回主场景。按快捷键“Ctrl+S”，将文档保存到“实例练习”文件夹中，并命名为“心与星”。完成了影片剪辑的编辑，按快捷键“Ctrl+Enter”测试影片。总结分析：(1)通过本例我们了解了影片剪辑的编辑，影片剪辑主要用于组织动画，每一个影片剪辑都有自己的时间轴。(2)学习了“影片
19、剪辑嵌套影片剪辑”方法，本例的影片路径为：主场景心与星 闪烁的星，即主场景下放置着“心与星”这个影片剪辑，“心与星”这个影片剪辑下又放置着“闪烁的星”这个影片剪辑。(3)将某一对象转换为影片剪辑元件后，它就是一个独立的对象，它有如下好处：可以放置在编辑区的任何地方、可以改变它的大小、可以改变它的角度、可以复制多个、可以重复使用等。如“闪烁的星”这个影片剪辑，我们就是通过重制方式制作多个相同的影片剪辑，从而实现了多个同时闪烁的星的效果。实例练习请你做出“光盘实例与视频第三章第二节流星.swf”的影片所示的效果。3.2.2 飞翔的海鸥实例预览：光盘实例与视频第三章第二节飞翔的海鸥.swf 操作步骤
20、：启动 Flash CS3，新建一个Flash ActionScript2.0文档。将文档的背景颜色设置为“#999933”。用“矩形工具”在“图层1”的第1 帧绘制一个矩形，用“选择工具”选定矩形，按快捷键“F8”将其转换为影片剪辑元件，设置如图3.2.10 所示。选定“选择工具”，鼠标在编辑区中双击影片剪辑“海鸥”，进入“海鸥”时间轴。选定“图层 1”的第 1 帧的矩形，删除它。(此例中绘制矩形的目的为：选择一个对象，将它转换为影片剪辑，我们需要的是这个影片剪辑，而不是这个矩形。因此，进入影片剪辑的时间轴后，就可以删除矩形了。)打开“光盘实例与视频第二章 第五节 逐帧动画 飞翔的海鸥.fl
21、a”这个Flash 源文件。选定“翅膀”与“身子”图层的18 帧，在这选定的帧上单击鼠标右键，在弹出的快捷菜单中选择“复制帧”菜单项，如图3.2.11 所示。切换到“未命名”文档中，选定“图层 1”的第1 帧，单击鼠标右键，在弹出的快捷菜单中选择“粘贴帧”菜单项，将翅膀飞动这个动画粘贴至“海鸥”这影片剪辑中，如图3.2.12 所示。图 3.2.10 名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 28 页 - 我们共同的flash 课件家园101 选定“选择工具”，在编辑区双击鼠标，退回主场景，用“选择工具”选定影片剪辑“海鸥”，按快捷键“F8”将其转换为影片剪辑，设置如图3.
22、2.13 所示。双击海鸥，进入“飞翔”影片剪辑的时间轴。将“图层1”更名为“海鸥”，用“缩放”工具将“海鸥”影片剪辑缩小到合适大小。用“任意工具”将“海鸥”的“旋转、翻转控制点”移动到海鸥的身子上，如图3.2.14 所示。图 3.2.11 图 3.2.12 图 3.2.13 图 3.2.14 名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 28 页 -第三章图形、影片、按钮对象的编辑102 单击“添加运动引导层”按钮，添加一引导层，在引导层的第1 帧上绘制一条曲线。绘制完成后，在引导层的第80 帧处按快捷键“F5”插入过渡帧。在“海鸥”图层的第80帧处按快捷键“F6”插入关键帧
23、，锁定引导层，如图3.2.15 所示。选定“紧贴到对象”选项，将第1 帧上的海鸥移动至引导线的一端，特别注意“旋转、翻转控制点”一定要吸附到引导线的端点，如图3.2.16 所示。将第80 帧的海鸥移动至引导线的另一端，“旋转、翻转控制点”要吸附到引导线的端点，如图3.2.17 所示。图 3.2.15 图 3.2.16 图 3.2.17 名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 28 页 - 我们共同的flash 课件家园103 选定“海鸥”图层的第1 帧，建立“创建补间动画”。选定“选择工具”后在编辑区双击鼠标，退回到主场景。按快捷键“Ctrl+S”，将文档保存到“实例练
24、习”文件夹中，并命名为“飞翔的海鸥”。按快捷键“Ctrl+Enter”测试影片，一个具有两重动作的动画就制作完成了。总结分析：(1)本例继续运用“影片剪辑嵌套影片剪辑”这种动画制作的思维方式实现了双重动画制作，例如海鸥即有翅膀舞动的动画，又有从右向左飞翔的动画。(2)通过“复制帧”“粘贴帧”命令的方式引用其他Flash 源文件中素材。实例练习请你做出“光盘实例与视频第三章第二节运动的狗.swf”的影片所示的效果。3.2.3 太阳、地球、月亮实例预览：光盘实例与视频第三章第二节太阳地球月亮.swf 操作步骤：启动 Flash CS3，新建一个Flash ActionScript2.0文档。用“椭
25、圆工具”在“图层1”的第1 帧绘制一个圆，设置圆为红色，无线条，宽高都设置为 75。用“文本工具”在编辑区输入“太阳”两字，设置文本的颜色为黄色，字号为20。用“选择工具”选定圆和文字，打开“对齐”面板，将它们设置为“相对于舞台水平居中和垂直居中”，如图 3.2.18 所示。用“选择工具”选定圆和文字，按快捷键“F8”转换为影片剪辑元件，设置如图3.2.19所示。图 3.2.18 名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 28 页 -第三章图形、影片、按钮对象的编辑104 选定“选择工具”，鼠标双击“太阳与地球”影片剪辑，进入它的时间轴。将“图层1”更名为“太阳”后锁定本
26、图层。单击“插入图层”按钮，新建一图层，更名为“地球”，用“椭圆工具”在此图层的第1 帧绘制一个无线条的蓝色圆，设置圆的宽和高都为50。用“文本工具”输入“地球”两字，将文字的颜色设置为绿色，字号为16。选定此图层的第 1 帧，打开“对齐”面板，设置为水平居中和垂直居中，移动到适当位置后锁定本图层。单击“添加运动引导层”按钮，添加一引导层，在此图层的第1 帧绘制一个无填充色的椭圆，用“旋转”工具将这个椭圆旋转一定角度，删去椭圆线条一小部分，出现一个小缺口，移动椭圆到适当位置后锁定本图层。最后效果如图3.2.20 所示。解锁“地球”图层，选定“地球”图层的第1 帧，按快捷键“F8”将其转换为影片
27、剪辑，设置如图3.2.21 所示。选定“选择工具”，鼠标双击“地球与月亮”影片剪辑，进入它的时间轴。将“图层1”图 3.2.19 图 3.2.20 图 3.2.21 名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 28 页 - 我们共同的flash 课件家园105 更名为“蓝地球”后锁定此图层。单击“插入图层”按钮，插入一新图层，并将此图层更名为“月亮”，用“椭圆工具”在此图层的第1帧绘制一个无线条黑色的圆，将圆的宽高设置为25。用“选择工具”选定圆，按快捷键“F8”将其转换为图形元件，设置如图3.2.22 所示。单击“添加运动引导层”按钮，添加一引导层，用“椭圆工具”在引导层
28、的第1 帧上绘制一个椭圆，删除出一个小缺口后，移动到如图3.2.23 所示位置，编辑完成后锁定本图层。在“引导层”和“蓝地球”图层的第20 帧上按“F5”插入过渡帧，在“月亮”图层的第20 帧上按“F6”插入关键帧。选定“月亮”图层的第1 帧上的月亮，将它的“旋转、翻转控制点”吸附到引导线的一端点，选定“月亮”图层的第20 帧上的月亮，将它的“旋转、翻转控制点”吸附到引导线的另一端点。选定“月亮”图层的第1 帧，建立“创建补间动画”，将“蓝地球”图层移动到“引导层”之上，编辑完成“地球与月亮”影片剪辑，如图3.2.24 所示。选定“选择工具”，鼠标双击编辑区，退出“地球与月亮”影片剪辑时间轴，
29、进入“太阳与地球”影片剪辑的时间轴。把“地球与月亮”影片剪辑作为动画对象，用相同的方法制作地球绕太阳旋转的动画。在“引导层”和“太阳”图层的第365 帧上按“F5”插入过渡帧，在“地球”图层的第365 帧上按“F6”插入关键帧。选定“地球”图层的第1图 3.2.22 图 3.2.23 图 3.2.24 名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 28 页 -第三章图形、影片、按钮对象的编辑106 帧上的地球，将它的“旋转、翻转控制点”吸附到引导线的一端点，选定“地球”图层的第 365 帧上的地球，将它的“旋转、翻转控制点”吸附到引导线的另一端点。选定“地球”图层的第1 帧，
30、建立“创建补间动画”，编辑完成“太阳与地球”影片剪辑，如图3.2.25 所示。选定“选择工具”后在编辑区双击鼠标，退回到主场景。按快捷键“Ctrl+S”，将文档 保 存 到“实 例 练 习”文 件 夹 中，并 命 名 为“太 阳 地 球 月 亮”。按 快 捷 键“Ctrl+Enter”测试影片，月亮绕地球旋转的同时又旋绕太阳旋转的动画就制作完成了。总结：本例仍然是用“影片剪辑嵌套影片剪辑”的方法制作双重动画，同时进一步加深影片剪辑的编辑。第三节按钮元件的编辑3.3.1 文字按钮实例预览：光盘实例与视频第三章第三节播放.swf 操作步骤：启动 Flash CS3，新建一个Flash Action
31、Script2.0文档。将“图层1”更名为“按钮”，用“文本工具”在此图层的第1 帧上输入“播放”两字，设置文字的字体为黑体、颜色为蓝色、字号为35、加粗。用“选择工具”选定文字，按快捷键“F8”，将文字转换为按钮元件，设置如图3.3.01 所示。图 3.2.25 名师资料总结-精品资料欢迎下载-名师精心整理-第 18 页，共 28 页 - 我们共同的flash 课件家园107 选定“选择工具”，鼠标双击“播放”按钮元件，进入“播放”按钮元件的时间轴，如图3.3.02 所示。对比图形元件与影片剪辑元件的时间轴，我们可以发现按钮元件的时间轴有一点小小的不同。按钮元件的时间轴只有4 帧，分别是“弹
32、起”、“指针经过”、“按下”、“点击”，因此，对按钮的编辑就是对这四个帧的编辑。选定“指针经过”帧，按快捷键“F6”插入关键帧，将“播放”两字的颜色设置为紫色。选定“按下”帧，按“F6”插入关键帧，将此帧上的“播放”两字的颜色设置为绿色。设置完成后，按快捷键“Ctrl+Enter”测试影片，打开测试窗口，将鼠标指针移动到“播放”按钮上将会出现手形，感受鼠标弹起、鼠标经过、鼠标按下三种状态与“播放”两字的颜色变化。图 3.3.01 图 3.3.02 图 3.3.03 弹起时，显示为蓝色经过时，显示为紫色按下时，显示为绿色名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 28 页 -
33、第三章图形、影片、按钮对象的编辑108 关闭测试窗口，退回到未命名文档，按快捷键“Ctrl+S”，将文档保存到“实例练习”文件夹中，并命名为“播放”，完成文字按钮的编辑。总结分析：本例通过颜色的变化来说明了按钮时间轴中“弹起”、“指针经过”、“按下”这三个帧的编辑，按钮的编辑就是对这三种鼠标状态的编辑，点击帧 是确定鼠标作用的范围，此例没有编辑，默认为前一帧的内容所占区域大小。编辑时，各帧的内容不仅有颜色变化，还可以是形状变化、大小变化、声音变化、动画变化等。实例练习请你做出“光盘实例与视频第三章第三节停止.swf”的影片所示的按钮效果。3.3.2 在按钮中加入影片剪辑实例预览：光盘实例与视频
34、第三章第三节旋转的按钮.swf 操作步骤：启动 Flash CS3，新建一个Flash ActionScript2.0文档。将“图层1”更名为“按钮”，选定“椭圆工具”，打开“属性”面板，设置线条颜色为蓝色(#0000FF)，填充色为无颜色；设置起始角度为90，结束角度为0，内径为50，如图3.3.04所示。在此图层的第1 帧上绘制一个圆，设置圆的宽和高为 200，最终效果如图3.3.05 所示。图 3.3.04 图 3.3.05 名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 28 页 - 我们共同的flash 课件家园109 用“选择工具”选定圆，按快捷键“F8”，先将圆转
35、换为图形元件，设置如图3.3.06所示。再次选定圆，按快捷键“F8”，将圆转换为影片剪辑元件，设置如图3.3.07所示。选定“选择工具”，将鼠标指针移动到圆的线条上，两次双击圆的线条，进入“图形圆”的时间轴。按住“Shift”键不放，用“线条工具”在编辑区中绘制一个等腰直角三角形，设置这个三角形的宽为140，高为 70，如图 3.3.08 所示。将这个三角形移到如图3.3.09所示位置，删除一些线条，用“颜料桶工具”给这个封闭的区域填充蓝色，完成“图形圆”的编辑。选定“选择工具”，鼠标在编辑区中双击，退出“图形圆”的时间轴，进入“影片圆”的时间轴。选定“图层1”的第 10 帧，按快捷键“F6”
36、插入关键帧。选定此图层的第1 帧，图 3.3.06 图 3.3.07 图 3.3.08 图 3.3.09 名师资料总结-精品资料欢迎下载-名师精心整理-第 21 页，共 28 页 -第三章图形、影片、按钮对象的编辑110 打开“属性”面板，设置如图3.3.10 所示。选定“选择工具”，在编辑区中双击鼠标，回到主场景时间轴。选定“影片圆”，按快捷键“F8”，将“影片圆”转换为按钮元件，设置如图3.3.11 所示。选定“选择工具”，鼠标在“按钮圆”上双击，进入“按钮圆”的时间轴。选定“弹起”帧上的“影片圆”，按快捷键“Ctrl+Alt+S”，将“影片圆”旋转30 度，如图3.3.12 所示。图 3
37、.3.10 图 3.3.11 名师资料总结-精品资料欢迎下载-名师精心整理-第 22 页，共 28 页 - 我们共同的flash 课件家园111 选定“指针经过”帧，按“F6”插入关键帧。选定“按下”帧，按“F6”插入关键帧。选定“弹起”帧上的“影片圆”，按两次快捷键“Ctrl+B”，将影片对象打散为矢量对象，选定此帧上的填充部分，将填充部分的颜色设置为红色。选定“按下”帧上的“影片圆”，按两次快捷键“Ctrl+B”，将影片对象打散为矢量对象，选定此帧上的填充部分，将填充部分的颜色设置为黄色。按快捷键“Ctrl+Enter”测试影片，我们可以看到，当鼠标未处于按钮上是，按钮显示为红色；当鼠标移
38、动到按钮上时，按钮开始旋转；当鼠标按下时，按钮显示为黄色；当鼠标处于没有颜色填充的按钮区域内时，此时，按钮并不会旋转，说明此区域不是按钮作用区域。这可能给实际操作带不不便，因此，我们要补全这部分区域。关闭测试窗口，进入“按钮圆”的时间轴。选定“点击”帧，按“F6”插入关键帧，用“椭圆工具”在此帧上绘制一个黑色圆，设置圆的宽和高为200，将圆移动至如图3.3.13所示位置，“点击”帧的作用就是确定按钮的作用范围。图 3.3.12 图 3.3.12 名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 28 页 -第三章图形、影片、按钮对象的编辑112 按快捷键“Ctrl+S”，将文档保
39、存到“实例练习”文件夹中，并命名为“按钮的旋转”。按快捷键“Ctrl+Enter”测试影片，我们可以看到一个具有动感的按钮。总结分析：本例学习了在按钮的“指针经过”帧中加入影片剪辑，使按钮具有动感。同时我们也可以在“弹起”、“按下”帧上加入影片剪辑，“点击”帧的作用就是确定按钮的作用域。实例练习请你做出“光盘实例与视频第三章第三节 play.swf”的影片所示的按钮效果。第四节 Flash元件的相关操作3.4.1 太阳、月亮实例预览：光盘实例与视频第三章第四节太阳月亮.fla 一、太阳影片剪辑的制作 启动Flash CS3，新建一个Flash ActionScript2.0文档。将“图层1”更
40、名为“对比”，用“椭圆工具”在此图层的第1 帧上绘制一个红色的圆，设置圆的宽和高为100。用“文本工具”输入“太阳”两字，设置字体为宋体、字号为20、颜色为黄色。太阳两字移动到圆的中心位置，用“选择工具”选定圆和文字，按快捷键“F8”将其转换为影片剪辑元件，设置如图 3.4.01 所示。圆与文字在编辑区中的位置、比例大小如图3.4.02 所示。图 3.4.01 图 3.4.02 名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 28 页 - 我们共同的flash 课件家园113 二、库面板的认识按快捷键“Ctrl+L”打开库面板，如图3.4.03 所示，或者点击“右方窗口”的“库
41、”选项，如图3.4.03 的处。如果“库面板”不在右方窗口里，请拖动“库面板”的标题栏到右方窗口，放开鼠标即可。图3.4.03 的处选择相应的Flash 文档，切换到相应文档的库；处为对象的预览窗口；处为文档库内容的显示区；处显示元件或对象的图标，鼠标双击图标，可以进入相应元件的时间轴进行编辑；处显示元件或者对象的名称，鼠标双击，重命名元件；处为“新建元件”按钮，单击打开“新建元件”对话框；处为“新建文件夹”按钮，单击新建一个文件夹。当文档的库中有无数元件时，可以将相关联的元件移入相关的文件夹中，使文档库更清晰。处为“删除”按钮，选定元件或文件夹后，单击“删除”按钮，可删除选定对象。Flash
42、 文档创建的图形元件、影片剪辑元件、按钮元件都会出现在库中，还包括从外部导入的图片、声音、视频等文件都会出现在库中，Flash 文档的库最大的好处就是可以重复使用。在库面板里选定某一对象后，拖动相应对象到编辑区中，出现虚线框后，放开鼠标，可将库中的对象引入到编辑区中。三、直接复制元件 按快捷键“Ctrl+L”打开库面板，选定“太阳”影片剪辑后拖动它到编辑区中，如图3.4.04 所示。图 3.4.04 图 3.4.03 名师资料总结-精品资料欢迎下载-名师精心整理-第 25 页，共 28 页 -第三章图形、影片、按钮对象的编辑114 选定“选择工具”，鼠标双击右边的“太阳”影片剪辑，进入“太阳”
43、影片剪辑的时间轴。我们把圆形更改为月亮形，把太阳两字更改为月亮，我们看有何变化？最终效果如图 3.4.05 所示。选定“选择工具”，在编辑区中双击鼠标，退回到主场景。这时我们可以发现，编辑区左边的太阳也变成了月亮。这是怎么回事呢？因为在编辑区中两个太阳都属于是同一个影片剪辑“太阳”，当“太阳”这个影片剪辑有改动时，编辑区所有引用这个影片剪辑的地方都会发现变化。影片剪辑这一特性也同样适用图形元件和按钮元件，因此在实际操作过程中应特别注意。我们可以用“直接复制元件”命令解决这个问题。按快捷键“Ctrl+L”打开库面板，鼠标指针移动到库面板中“太阳”影片剪辑上后单击鼠标右键，在弹出的快捷菜单中选择“
44、直接复制”菜单项，如图3.4.6 所示。同时弹出“直接复制元件”对话框，设置如图3.4.07 所示。图 3.4.05 图 3.4.06 图 3.4.07 名师资料总结-精品资料欢迎下载-名师精心整理-第 26 页，共 28 页 - 我们共同的flash 课件家园115 单击图 3.4.07 的处的“确定”按钮后，库面板中多了一个“月亮”的影片剪辑，如图 3.4.08 所示。双击库中“太阳”影片剪辑的图标，进入“太阳”影片剪辑的时间轴，请将“太阳”影片剪辑里的月亮更改为太阳，最终效果如图3.4.09 所示。再次按快捷键“Ctrl+L”打开库面板，单击“太阳”与“月亮”影片剪辑，我们可以发现，两个
45、影片剪辑里都有各自的内容。四、交换元件 退回到主场景，选定“选择工具”，将鼠标指针移动到编辑区中右边的太阳上，单击鼠标右键，在弹出的快捷菜单中选择“交换元件”菜单项，如图3.4.10 所示。同时弹出“交换元件”对话框，设置如图3.4.11 所示。图 3.4.08 图 3.4.09 图 3.4.10 名师资料总结-精品资料欢迎下载-名师精心整理-第 27 页，共 28 页 -第三章图形、影片、按钮对象的编辑116 在主场景上，最终效果如图3.4.12 所示。同时“直接复制元件”和“交换元件”命令同样适用图形元件和按钮元件。图 3.4.11 图 3.4.12 名师资料总结-精品资料欢迎下载-名师精心整理-第 28 页，共 28 页 -