Flash cs3 第三章

89第三章 图形、影片、按钮对象的编辑图形对象、影片剪辑对象、按钮对象也叫图形元件、影片剪辑元件、按钮元件，或者最简称呼为图形、影片、按钮，不管怎么称呼，它都指一样东西。

图形元件、影片剪辑元件、按钮元件都有自己的时间轴，对它们的编辑，其实也是对它们的时间轴进行编辑。

第一节 图形元件的编辑首先我们要了解两个概念：(1) 什么是主时间轴？(2) 什么是图形元件时间轴？主时间轴是新建Flash 文档时所看到的时间轴，一个Flash 文档只有一个主时间轴，它是唯一的，并且处于所有结构的最顶层。

主时间轴有时也称为主场景，主场景也就是指主时间轴。

主时间轴的作用主要用于组织动画，即将各种元件、对象等组织在一起，形成一个完整影片。

我们并不赞同直接在主时间轴上制作动画，而是将各种动画制作在各自的元件里，放置在主时间轴上后形成一个整体。

图形元件时间轴是将某个对象转换为图形元件后，双击打开所显示的时间轴，每个图形元件都有自己的时间轴。

3.1.1 三角板的绘制实例源文件：光盘: \实例与视频\第三章\第一节\三角板.fla操作步骤：<1> 启动Flash CS3，新建一个Flash ActionScript2.0文档，将文档的背景颜色设置为“#99FF00”<2> 将“图层1”更名为“三角板”，按住“Shift ”键不放，用“线条工具”在此图层的第1帧绘制如图3.1.01所示的等腰直角三角形。

图3.1.0190<3> 用“选择工具”选定三角形，按快捷键“F8”，将三角形转换为图形元件，设置如图3.1.02所示。

<4> 鼠标指针移动到图形元件“45度三角板”上，双击鼠标，打开图形元件(在场景中打开某个元件时，鼠标指针一定要移动到这个元件上，且鼠标指针形状为“”时，双击才可以打开元件。

) ，如图3.1.03所示。

<5> 双击图形元件“45度三角板”后，打开图形元件“45度三角板”的时间轴，进入图形元件的编辑状态，如图3.1.04所示。

图形元件有自己的时间轴和编辑区，操作上与前两章所讲内容一样。

图3.1.04的①处显示当前操作元件的路径，这对初学的人很重要，通过这所显示的内容能很清楚知道，你现在对哪个对象进行编辑。

当前显示正在对主场景下的“45度三角板”的这个图形元件进行编辑，即最后显示的那个名称就是正在编辑的对象，如图3.1.04的②处所示。

路径总是从主场景开始的，因为任何元件或对象都是放置在主时间轴上的，如图3.1.04的③处所示。

单击③处，返回到主时间轴。

单击④处，返回到上一级对象，或者是在编辑区没有对象的区域双击鼠标，也可以返回上一级对象。

图3.1.02 图3.1.0391<6> 将“图层1”更名为“三角形”，如图3.1.05的①处所示。

在编辑区中用“选择工具”选定三角形，按快捷键“Ctrl+D ”重制一个等腰直角三角形，用“缩放”工具拉小，并移动到如图3.1.05的②处。

用“颜料桶工具”给三角形填上白色，如图3.1.05的③处所示。

<7> 锁定“三角形”图层，单击“插入图层”按钮，新建一图层，并更名为“刻度”。

在“刻度”图层的第1帧画上刻度，如图3.1.06的④处所示。

图3.1.04 图3.1.05图3.1.0692<8> 锁定“刻度”图层，单击“插入图层”按钮，新建一图层，并更名为“数字”。

在“数字”图层的第1帧写入数字，如图3.1.07的④处所示。

<9> 按快捷键“Ctrl+S ”，将文档保存到“E:\实例练习”文件夹中，并命名为“45度三角板”，一个三角板图形就绘制完成。

分析总结：通过本例，我们可以发现主时间轴与元件的时间轴是不同的，此例中主时间轴只有“三角板”这一个图层，而“45度三角板”这个图形元件的时间轴上有三个图层，如图3.1.07所示。

本例将三角板转换为图形元件后，它就有自己的时间轴。

在自己的时间轴上，我们可以将相对独立的对象放置在不同的图层上。

如本例中将三角形、刻度、数字，放置不同的图层，编辑操作上比较灵活，当编辑完成时，可以通过锁定图层的方式锁定编辑完成的对象。

此例中，如果将这三个对象放在一个图层中编辑，操作上将会麻烦得多。

实例练习请你做出“光盘: \实例与视频\第三章\第一节\30度三角板.swf ”的影片所示的三角板。

3.1.2 位图的裁剪选择“菜单→导入→导入到舞台”菜单项，导入的一幅图片，这图片在Flash 中称为位图。

很多时候，我们只需要图片其中的一部分，这时我们应该怎么处理呢？实例源文件：光盘: \实例与视频\第三章\第一节\位图的裁剪.fla操作步骤：<1> 启动Flash CS3，新建一个Flash ActionScript2.0文档。

<2> 将“图层1”更名为“图片”，选择菜单“文件→导入→导入到舞台”菜单项，将“光盘:\实例与视频\第三章\第一节\素材之Q 宠.jpg ”导入编辑区中。

用“选图3.1.0793 择工具”选定图片，按快捷键“F8”，将其转换为图形元件设置如图3.1.08所示。

<3> 选定“选择工具”后，双击编辑区中的图片，打开图形元件“Q 宠”时间轴。

将“图层1”更名为“图片”，按快捷键“Ctrl+B ”打散图片后，锁定该图层，如图3.1.09所示。

<4> 单击“插入图层”按钮，插入一新图层，并将图层更名为“轮廓”，用“线条工具”工具拉出“QQ 宠物”的大致轮廓，绘制轮廓时可以放大编辑区。

用“选择工具”将线条拉成“QQ 宠物”的形状，如图3.1.10所示。

图3.1.08图3.1.09 图3.1.1094<5> 确认用线条描绘出的QQ 宠物是一个封闭的区域后，选定线条轮廓，按快捷键“Ctrl+X ”，剪切线条轮廓。

解锁“图片”图层，按快捷键“Ctrl+Shift+V ”，将线条轮廓粘贴到“图片”图层的第1帧的当前位置。

<6> 用“选择工具”选定“QQ 宠物”之外的区域，按Delete 键删除。

选定线条轮廓，按Delete删除，最后剩下“QQ 宠物”部分，删除“轮廓”图层，如图3.1.12所示。

<7> 按快捷键“Ctrl+S ”，将文档保存到“E:\实例练习”文件夹中，并命名为“位图的裁剪”，完成了图形的裁剪操作。

总结分析：本例的思路是用线条描绘出欲保留的位图部分的轮廓，然后将线条与打散后的位图放置于同一图层，用线条将保留部分和删除部分分隔出来。

删除不要的部分，完成图形的裁剪。

本例关键的两点：(1) 位图必须打散；(2) 所绘线条轮廓必须封闭。

3.1.3 位图的临摹位图与矢量图的最大区别为：位图放大一定倍数后，图像就会失真，而矢量图无论放大多少倍，图像都不会失真。

在实际创作过程中，为了达到更好效果，我们应该尽可能的将位图转换为矢量图。

如何转换呢？我们可以通过临摹的方式实现。

实例源文件：光盘: \实例与视频\第三章\第一节\位图的临摹.fla操作步骤：<1> 启动Flash CS3，新建一个Flash ActionScript2.0文档。

<2> 将“图层1”更名为“图片”，选择菜单“文件→导入→导入到舞台”菜单项，将“光盘:\实例与视频\第三章\第一节\素材之鸭子.jpg ”导入编辑区中。

用“选择工具”选定图片，按快捷键“F8”，将其转换为图形元件设置如图3.1.13所示。

图3.1.1295<3> 选定“选择工具”后，双击编辑区中的图片，打开图形元件“鸭子”时间轴。

将“图层1”更名为“临摹位图”，锁定该图层，如图3.1.14所示。

<4> 单击“插入图层”按钮，插入一新图层，并将图层更名为“线条描绘”。

用“线条工具”工具拉出构成“鸭子”的所有线条。

绘制时将编辑区放大到合适的大小，鸭子的线条轮廓是由一段段曲线构成，因此，我们可以绘制一条直线，用“选择工具”将这些直线拉成曲线。

最终临摹出“鸭子”的形状，如图3.1.15所示。

<5> 临摹出鸭子的线条轮廓后，就要给鸭子各个区域填充上相应的颜色。

首先我们要选色，我们可以单击“填充颜色”工具，在弹出色板后，将鼠标指针移动到编辑区中你欲取色位置单击鼠标左键，选定某种颜色，如图3.1.16所示。

颜色选择完后，用“颜料桶工具”给各个区域填充颜色。

如果是未封闭的区域，请先封闭该区域。

图3.1.13图3.1.14图3.1.1596<6> 颜色填充完成后，选定“临摹位图”图层，单击“删除图层”按钮，删除“临摹位图”图层。

单击“场景1”按钮，退回主场景。

<7> 按快捷键“Ctrl+S ”，将文档保存到“E:\实例练习”文件夹中，并命名为“位图的临摹”，完成了位图的临摹操作。

总结分析：用Flash 绘制图画的能力不是所有人都有的，他必须要有很深厚的美术功底的，才能构思出心中的图画。

但是临摹的能力是每个人都有的，只要花一些时间，只是一些手工活而已。

将位图临摹出来后，图画就变得十分清晰，这是处理图片的一种常用方式。

注意：图形元件时间轴只能显示时间轴第1帧上的内容，它是静态的，不能用于制作动画。

多数情况下用于处理图片，或者作为制作动画时的对象使用。

第二节 影片剪辑元件的编辑3.2.1 心与星实例预览：光盘: \实例与视频\第三章\第二节\心与星.swf操作步骤：<1> 启动Flash CS3，新建一个Flash ActionScript2.0文档。

将文档的背景颜色设置为“#000000”，即黑色。

<2> 将主时间轴的“图层1”更名为“影片”，将“笔触颜色”设置为“#666666”即图3.1.16图3.1.1797灰白色。

用“钢笔工具”在“影片”图层的第1帧的编辑区中绘制一颗心。

<3> 用“选择工具”选定这颗心，按快捷键“F8”，将心转换为影片剪辑元件，设置如图3.2.01所示。

<4> 选定“选择工具”，在编辑区中双击心的线条，进入影片元件“心与星”的时间轴。

将“图层1”更名为“相爱的心”，并锁定本图层，如图3.2.02所示。

<5> 单击“插入图层”按钮，插入一新图层，并更名为“闪烁的星”，用“矩形工具”在“闪烁的星”图层的第1帧的编辑区中绘制一个矩形，将矩形设置为无线条、宽为100、高为3、颜色填充类型为放射状，填充后矩形效果为中间黄色，两边黑色，如图3.2.03所示。

设置完成后按快捷键“Ctrl+G ”将矩形组合。

<6> 用“选择工具”选定矩形，按快捷键“Ctrl+D ”重制一个矩形，打开“属性”面板，将重制的矩形的宽设置为70、高设置2。

分别重制大小两种矩形各一个，按快捷键“Ctrl+Alt+S ”，将两个小的矩形分别旋转45度和-45度，将一个大的矩形旋转90度。