新标准中文版FlashMX基础培训教程第5章.ppt

《新标准中文版FlashMX基础培训教程第5章.ppt》由会员分享，可在线阅读，更多相关《新标准中文版FlashMX基础培训教程第5章.ppt（105页珍藏版）》请在三一办公上搜索。

1、第5章 图像与元件,本章要点图像操作 元件介绍创建元件,本章逻辑结构,5.1 导入图像5.1.1 导入图像 5.1.2 导入图像应注意的问题 5.2 编辑图像 5.2.1 将图像转换为矢量图 5.2.2 将图像转换为矢量色块 5.2.3 设置图像资源属性,本章逻辑结构,5.3 元件库面板和元件 5.3.1 元件库面板 5.3.2 创建元件 5.3.3 编辑元件 5.3.4 元件的变形 5.3.5 其他属性的调整 5.3.6 为实例指定不同元件,本章逻辑结构,5.3.7 改变元件类型5.4 图形元件5.4.1 创建图形元件5.4.2 图形元件与影片剪辑元件5.5 影片剪辑元件5.5.1 创建影片

2、剪辑元件,本章逻辑结构,5.5.2 将舞台中的对象转换为影片剪辑元件5.6 按钮元件 5.6.1 创建按钮元件 5.6.2 编辑按钮元件,5.1 导入图像,导入图像,导入文件或图片的操作如下：1、执行【文件】【导入（Import）】命令，或者 按【Ctrl+R】组合键，打开的【导入】对话框。2、择要导入文件的保存位置，然后在下面的列表 框中选择要导入的文件。3、单击【打开】按钮即可将选择的文件导入到当 前文件中。,5.1.2 导入图像应注意的问题,在导入文件时，经常遇到以下问题：如果执行的是【文件】【导入到库(Import to Library)】命令，可以直接导入元件库，在其中直接调用需要的

3、文件即可。,在导入文件时，如果导入目录下的文件是一组序列文件，则会弹出如图所示的询问对话框，这时可以根据需要进行选择。,在导入Flash MX不兼容的文件时，会弹出一个警告对话框，如图所示，指示该文件不能被导入到Flash MX中。这时只能单击【确定】按钮取消此次导入操作。,可以将选择的多个文件同时导入。在制作过程中，如果已经执行了复制操作，可以直接执行【编辑】【粘贴】命令或者按【Ctrl+V】组合键将剪贴板中的内容粘贴到舞台中。,5.2 编辑图像,将图像转换为矢量图,转换方法如下：1、首先导入一幅位图图像，然后使用【画笔工 具】在图像上绘制一些色彩，如图所示。,2、执行【修改】【分离】命令将

4、图像分离。这时，位图被转换为矢量图形，如图所示。,3、用鼠标拖动图形的线条，会使图形的边缘弯 曲成弧形，图案会等比例向外延续，并且使 图像有序地重复排列，如图所示。,4、这时再用【画笔工具】在图像上绘制，就会 看到图像被色彩覆盖了，如图所示。,将图像转换为矢量色块,将矢量图转换为矢量色块的操作步骤如下：1、继续上面的例子。将舞台中所有内容删除，打 开元件库面板，图像拖动到舞台上。2、执行【修改】【转换位图为矢量图（Trace Bitmap）】命令，打开如图所示的对话框。,3、在此对话框中可以设置以下选项：颜色阈值（Color）：最小区域（Minimum Area）：曲线拟合（Curve Fit

5、）：角阈值（Corner）：4、设置完成后，单击【确定】按钮，会出 现转换进度框。,5、取消对图像的选择。在【混色器】面板中设置 一种橙黄色到白色的线性渐变，然后在图像中 单击，得到如图所示的效果。,设置图像资源属性,打开元件库面板，导入的图像被放置在元件库面板中。在元件库面板中双击图像资源图标，打开如图所示的【位图属性（Bitmap Properties）】对话框。,在此对话框中可以进行如下设置：图像名称框：浏览框：【允许平滑（Allow smoothing）】复选框：【压缩（Compression）】选项框：【使用导入的JPEG数据（Use document default quality

6、）】复选框：,【更新（Update）】按钮：【导入】按钮：【测试（Test）】按钮：,5.3 元件库面板和元件,图所示是一个含有各种元件的元件库面板。,元件库面板,元件库面板中的各个按钮和区域的作用：展开/折叠按钮：【元件库面板控制】按钮：元件预览区：图像资源图标：按钮（Button）元件：,图形（Graphic）元件：影片剪辑元件：【新建元件】按钮：【新建文件夹】按钮：【属性】按钮：【删除元件】按钮：【宽库视图】按钮：【窄库视图】按钮：,创建元件,元件：是Flash MX中可以重复利用的图像、动画或按钮，应用元件可以使动画的编辑更简单化。元件主要包括三种：图形元件按钮元件影片剪辑元件。,两种

7、新建元件库的方法：1、在元件库中单击【新建元件】按钮创建元件2、就是通过【插入】【新建元件（New Symbol）】命令来创建元件（或按【Ctrl+F8】组合键创建元件）。,编辑元件,元件的编辑可以在多种模式下进行：1、一般的元件编辑模式2、在当前环境下进行编辑3、在新窗口中编辑。,一、在元件编辑模式下进行编辑两种常用从主场景切换到元件编辑模式的方式：选取要编辑的元件，单击鼠标右键，在弹出的快捷菜单中选择【编辑】命令，进入元件编辑模式。在元件库中选择要进行编辑的元件，双击预览框，进入元件编辑模式。,二、在当前模式下编辑元件 右击元件实例，在弹出的快捷菜单中选择【在当前位置上编辑（Edit In

8、 Place）】命令，在当前窗口中的其他对象变灰，被编辑元件的名称出现在舞台顶端的信息栏中。,三、在新窗口中编辑 在场景中右键单击某实例，从弹出的快捷菜单中选择【在新建窗口中编辑（Edit In New Window）】命令，可打开新窗口编辑元件。,元件的变形,执行【窗口】【变形】命令将【变形】面板调出，如图所示，可在面板里设置其相应的属性。,其他属性的调整,其他属性的调整，可以通过【属性】面板来完成。在【颜色】下拉列表中选择某一项可以调整实例的相关属性，如图所示，,为实例指定不同元件,给实例指定不同的元件操作步骤：1、在舞台中单击选中要指定其他元件的实例，打开属性面板。,2、在【属性】面板中

9、单击【交换元件（Swap Symbol）】按钮，打开如图所示的对话框。,3、在其中选择一个元件替换当前的元件。单击对 话框底部的【复制元件（Duplicate Symbol）】按钮可复制选中的元件。4、单击【确定】按钮，即可为实例指定其他元 件。如果要替换元件的所有实例，可拖动具 有相同名称的元件到元件库面板中。,5.3.7 改变元件类型,方法是一：可以通过【属性】面板设置来改变实例类型，打开【属性】面板，单击【元件行为（Symbol Behavior）】下拉按钮，从列表框中选择【图形（Graphic）】、【按钮】和【影片剪辑（Movie Clip）】三种类型之一。,方法二：在元件库中右键单击

10、某元件，从弹出的快捷菜单中选择【行为（Behavior）】的子菜单项，如图所示。,5.4 图形元件,5.4.1 图形元件,以“落花飘舞”的例子来介绍图形元件的创建方法：操作步骤如下：1、新建一个文件，在属性面板中设置背景颜色为 蓝色，如图所示。,2、执行【插入】【新建元件】命令，打开【创建 新元件】对话框，在【名称（Name）】文本 框中输入“花”作为元件的名称，并选择【图 形】单选项，如图所示。,3、单击【确定】按钮进入该元件的编辑状态，这 时，舞台中心有一个十字型标记，表示页面的 中心坐标点。4、在工具箱的颜色区中设置【笔触颜色】为无 色，填充色为一种白色到紫色的线性渐变，如图所示。,5、

11、在工具箱中单击【椭圆工具】，在舞台中绘 制一个圆形，并且使用【箭头工具】调整它 的形状，如图所示。,6、选中此矢量图，按【Ctrl+C】组合键将其复 制，然后粘贴4份，并且使用【任意变形】工 具旋转它们的角度，使其组成一个漂亮的花 朵，再在花朵中间绘制一个黄色的圆心，如 图所示。,7、执行【插入】【新建元件】命令，打开【创 建新元件】对话框，命名为“落花1”，然后选 择【图形】单选项，单击【确定】按钮创建 一个新元件，并进入其编辑界面。8、执行【窗口】【库】命令将元件库打开，将“花”图形元件拖动到舞台中。,9、单击【时间轴】面板中的【添加运动引导层】按钮建立一个导向图层，为第一层增加一个动 画

12、导向图层，如图所示。,10、在工具箱中单击【铅笔工具】，在舞台中绘 制落花飘动的路径，如图所示。,11、选择【箭头工具】，在选项区中单击【对齐 对象（Snap to Objects）】按钮，然后单击 图层 1中的花朵，将其移动到运动路径的顶 端，将花朵吸附到路径上，如图所示。,12、单击花朵所在层的第1帧，打开【属性】面 板，在【补间】下拉列表中选择【动作】，如图所示。,13、单击引导层的第15帧，按【F5】键插入一个 普通帧，然后单击图层 1的第15帧，按【F6】键插入一个关键帧，并且将花朵移动到路径的 中间位置，这时的舞台如图所示。,14、选择工具箱中的【任意变形工具】，将花朵 旋转一定的

13、角度。15、选中引导层的第15帧，将其拖动到第40帧，使其延续到此位置。再单击图层 1的第40 帧，插入一个关键帧。将花朵移动到路径 的最底端。这的舞台和时间轴如下图所示。,16、使用【任意变形工具】将花朵旋转一个角度。17、用同样的方法制作一个“落花2”图形元件，只 是将花朵稍微缩小一点，并绘制不同的路径，如下图所示。,18、单击舞台上方的【场景 1】按钮，切换到场景 中。在打开的元件库中将“落花1”和“落花2”拖 动到舞台中的不同位置。单击第40帧，按【F5】键插入一帧，执行【控制】【测试影 片】命令，可以观看花朵落地的效果。,19、达到满意的效果后，执行【文件】【保存】命令将其保存为“落

14、花”。,图形元件与影片剪辑元件,图形元件和影片剪辑元件有以下几个不同点：图形元件是一个在时间轴上放置静态信息的快速方法，而影片剪辑是在自己的时间轴上独立的动画。图形元件用于存储单帧的原始数据。当涉及ActionScript程序或是运行动画时，需要使用影片剪辑。,在使用时要注意以下几点：图形的实例属性在设计时就固定了，反之，在运行时影片剪辑应该有实例属性。工作时可以预览图形元件，但不能预览影片剪辑。图形元件的实例属性在设计时由【属性】面板中的相关设置来控制和修改。,影片剪辑的实例属性可以由【动作】面板来设置，尽管处理起来有点抽象，但它可以使动画变得更加灵活。,5.5 影片剪辑元件,创建影片剪辑元

15、件,下面介绍创建影片剪辑元件的一般方法。为了方便，接着上一节图形元件的实例继续操作。具体步骤如下：,1、新建一个文件，然后执行【文件】【作为库打 开（Open As Library）】命令，将上面制作的“落花”动画在元件库中打开，如图所示。,2、执行【插入】【新建元件】命令，在打开的对 话框中选择【影片剪辑】单选项，并将元件命 名为“逝去”，如图所示。,3、单击【确定】按钮进入该影片剪辑元件的编辑 界面。4、将元件库中的“花”图形元件拖动到舞台中，并 且放置到合适位置，然后适当调整它的大小。,5、单击第30帧，按【F6】键插入一个关键帧，使 用【任意变形工具】将其缩小，如图所示。,6、单击第1

16、帧，打开【属性】面板，在【补间】下拉列表中选择【动作】，然后在下面的【旋 转】列表中选择【顺时针旋转】，并在右侧的 数值框中输入1（表示旋转一圈），如图所示。,7、单击时间轴面板中的【插入图层】按钮，再插 入一个图层2。单击第一帧，再从元件库中拖 出一个“花”图形元件到舞台中，放置到合适位 置并调整它的大小。,8、在第30帧处插入一个关键帧，用同样的方法设 置图层 2第1帧的属性，如图所示，此元件逆时 针旋转2圈。,9、再新建一个图层，将“落花”动画元件库中的“落 花1”图形元件拖动到舞台中，并放置到舞台的 左侧。这时的舞台效果和时间轴如下图所示。,10、单击【场影 1】按钮进入主场景1，单击

17、图层 1的第1帧，导入一幅图像，如图所示。,11、新建一个图层，单击其中的第1帧，打开元 件库，从中拖动“逝去”影片剪辑元件到舞台 中，如图所示。,12、再在舞台右下角放置该影片剪辑元件，并使 用【任意变形工具】将其适当缩小。13、执行【文件】【保存】命令，将该动画保存 为“冬日飘花”。,将舞台中的对象转换为影片剪辑元件,将舞台中的对象转换为影片剪辑元件方法：1、新建一个文件，在舞台中使用【椭圆工具】绘 制一个圆形。,2、执行【窗口】【混色器】命令，打开【混色 器】面板，设置成如图所示的效果。,3、从工具箱中选择【颜料桶工具】，在圆形填充 区域单击使其变成一个圆球体，如图所示。4、单击第10帧

18、，插入一个关键帧，使用【任意变 形工具】将其缩小，拖动过程中按Shift+Alt】组合键使其以当前球体为同心圆缩小。,5、在第20帧插入一个关键帧，将球体重新放大。分别设置第1帧和第10帧的属性，如图所示。,6、在时间轴面板中单击第1帧，按住【Shift】键，再单击第20帧，将这些帧选中，然后单击鼠标 右键，从弹出的快捷菜单中选择【拷贝帧】命 令，如图所示。,7、按【Ctrl+F8】组合键新建一个影片剪辑元件，单击该元件编辑界面的第1帧，然后单击鼠标右键，在弹出的快捷菜单中选择【粘贴帧】命令。这时的舞台和时间轴如图所示。,8、将场景1中的所有内容删除，然后从元件库 中拖动刚才创建的元件到舞台中

19、。9、单击选中该元件的实例，打开【属性】面板，在【颜色】下拉列表中选择【色调】，然后 设置其中的RGB颜色值，如图所示。,10、执行【控制】【测试影片】命令或者按【Ctrl+Enter】组合键，可以测试该元件 实例的效果。单击【Ctrl+S】组合键将 其保存起来。,5.6 按钮元件,按钮元件有4种基本的鼠标状态，在时间轴上表现为4帧，如图所示。弹起：指针经过：按下：点击：,创建按钮元件,按钮的一般创建方法：1、新建一个文件，执行【插入】【新建元件】命令，打开【创建新元件】对话框。为元件 命名，并在【行为】区中选择【按钮】单选 项，如图所示。,2、单击【确定】按钮进入按钮元件编辑窗口，每帧显示弹

20、起、按下、指针经过和点击4个 状态中的一个。,3、单击【弹起】帧，在舞台中使用【矩形工 具】绘制如图所示的图形。除了绘制图形 外，还可以拖入图形元件或导入位图。,4、单击【指针经过】帧，插入关键帧。用同样 的方法在【按下】帧插入一个关键帧，然后 修改它的效果。图所示是这两帧的按钮状态。,5、最后，在【点击】状态插入关键帧。这时的 舞台和时间轴如图所示。,6、打开元件库，将制作完成的按钮元件拖动到 主场景的舞台中，按【Ctrl+Enter】组合键测 试按钮的效果，如图所示。,编辑按钮元件,一、为按钮添加声音 为按钮添加声音的操作步骤：1、新建一个按钮元件，双击此元件进入按钮元 件的编辑界面，新建

21、一个声音层，用来放置 声音文件。2、单击【指针经过】帧，插入一个关键帧。,3、执行【窗口】【公用库（Common Libraries）】【声音（Sounds）】命令，打开声音的共享元 件库，如图所示。,4、选择声音元件后，将其拖动到舞台中，如图 所示。,5、单击【按下】帧，插入一个关键帧，再从声 音共享元件库中选择一个声音元件放置到舞 台中。这时的舞台和时间轴如图所示。,6、按【Ctrl+Enter】组合键测试按钮的声音效 果。当鼠标经过按钮时播放一种声音，而当 单击按钮时播放另一声音。,二、为按钮添加动画 为按钮添加动画状态操作步骤：1、按前面的过程建立一个新按钮，也可以直接 使用添加声音后

22、的按钮元件。2、新建一个层，使影片剪辑有4个关键帧和按 钮的4个状态相匹配。然后单击【按下】帧，插入一个关键帧。,3、执行【文件】【作为库打开】命令，将上节制作的“冬日飘花”动画作为元件库打开。4、拖动“逝去”影片剪辑元件到舞台中，并放置到合适位置。,5、如果有必要还可以选择其他帧，为其添加动 画。可以为【弹起】、【指针经过】和【按 下】状态添加动画，因为【点击】状态在影 片中不可见，所以不必为它设置动画。,6、按【Ctrl+Enter】组合键测试动画按钮效果。,习题（五）,选择题 1、我们可以使用以下几种方法导入图像（）。A.使用【导入】命令 B.使用粘贴的方法 C.使用【打开】命令 D.使

23、用【导入图像】命令,AB,2、我们可以将元件分为哪三种类型（）。A.照片 B.影片剪辑 C.按钮 D.图形,BCD,3、按钮的4种基于鼠标的状态分别是（）。A.【弹起】B.【指针经过】C.【按下】D.【点击】,ABCD,4、元件有三种编辑模式，它们分别是（）。A.在当前环境下进行编辑 B.在主场景的舞台中编辑 C.在新窗口中编辑 D.元件编辑模式,ACD,5、元件库面板底部有几个按钮，它们分别是（）。A.【新建元件】按钮 B.【新建文件夹】按钮 C.【属性】按钮 D.【删除元件】按钮,ABCD,判断题 1、在图形元件中，动作和声音是不可用的。（）2、在Flash中，元件和实例都可以改变大小、亮 度和透明度等，因此它们没有区别。（）,3、动作本身不能直接分配给按钮元件，只能分 配给元件的实例。（）4、元件只可以在主场景的工作区中放置，不能 在其他元件中添加或包含它们。（）5、为了编辑位图图像，必须先将其转换为矢量 图。（）,实践练习 1、体会图形元件与影片剪辑元件的不同。2、分别创建三种不同类型的元件，并对它们进 行编辑和修改。3、利用图形元件、按钮元件和影片剪辑元件制 作一个动画。,