第 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 创建影片剪辑元件本章逻辑结构
5.5.2 将舞台中的对象转换为影片剪辑元件
5.6 按钮元件
5.6.1 创建按钮元件
5.6.2 编辑按钮元件
5.1 导入图像
5.1.1 导入图像导入文件或图片的操作如下:
1、执行 【 文件 】 【 导入( Import) 】 命令,或者按 【 Ctrl+R】 组合键,打开的 【 导入 】 对话框。
2、择要导入文件的保存位置,然后在下面的列表框中选择要导入的文件。
3、单击 【 打开 】 按钮即可将选择的文件导入到当前文件中。
5.1.2 导入图像应注意的问题在导入文件时,经常遇到以下问题:
如果执行的是 【 文件 】 【 导入到库 (Import to
Library)】 命令,可以直接导入元件库,在其中直接调用需要的文件即可。
在导入文件时,如果导入目录下的文件是一组序列文件,则会弹出如图所示的询问对话框,
这时可以根据需要进行选择。
在导入 Flash MX不兼容的文件时,会弹出一个警告对话框,如图所示,指示该文件不能被导入到 Flash MX中。这时只能单击 【 确定 】 按钮取消此次导入操作。
可以将选择的多个文件同时导入。
在制作过程中,如果已经执行了复制操作,可以直接执行 【 编辑 】 【 粘贴 】 命令或者按
【 Ctrl+V】 组合键将剪贴板中的内容粘贴到舞台中。
5.2 编辑图像
5.2.1 将图像转换为矢量图转换方法如下:
1、首先导入一幅位图图像,然后使用 【 画笔工具 】 在图像上绘制一些色彩,如图所示。
2、执行 【 修改 】 【 分离 】 命令将图像分离。
这时,位图被转换为矢量图形,如图所示。
3、用鼠标拖动图形的线条,会使图形的边缘弯曲成弧形,图案会等比例向外延续,并且使图像有序地重复排列,如图所示。
4、这时再用 【 画笔工具 】 在图像上绘制,就会看到图像被色彩覆盖了,如图所示。
5.2.2 将图像转换为矢量色块将矢量图转换为矢量色块的操作步骤如下:
1、继续上面的例子。将舞台中所有内容删除,打开元件库面板,图像 拖动到舞台上。
2、执行 【 修改 】 【 转换位图为矢量图( Trace
Bitmap) 】 命令,打开如图所示的对话框。
3、在此对话框中可以设置以下选项:
颜色阈值( Color):
最小区域( Minimum Area):
曲线拟合( Curve Fit):
角阈值( Corner):
4、设置完成后,单击 【 确定 】 按钮,会出现转换进度框。
5、取消对图像的选择。在 【 混色器 】 面板中设置一种橙黄色到白色的线性渐变,然后在图像中单击,得到如图所示的效果。
5.2.3 设置图像资源属性
打开元件库面板,导入的图像被放置在元件库面板中。
在元件库面板中双击图像资源图标,打开如图所示的 【 位图属性( Bitmap Properties) 】 对话框。
在此对话框中可以进行如下设置:
图像名称框:
浏览框:
【 允许平滑( Allow smoothing) 】 复选框:
【 压缩( Compression) 】 选项框:
【 使用导入的 JPEG数据( Use document
default quality) 】 复选框:
【 更新( Update) 】 按钮:
【 导入 】 按钮:
【 测试( Test) 】 按钮:
5.3 元件库面板和元件
图所示是一个含有各种元件的元件库面板。
5.3.1 元件库面板元件库面板中的各个按钮和区域的作用:
展开 /折叠按钮,
【 元件库面板控制 】 按钮,
元件预览区,
图像资源图标,
按钮( Button)元件,
图形( Graphic)元件,
影片剪辑元件,
【 新建元件 】 按钮,
【 新建文件夹 】 按钮,
【 属性 】 按钮,
【 删除元件 】 按钮,
【 宽库视图 】 按钮,
【 窄库视图 】 按钮,
5.3.2 创建元件元件:是 Flash MX中可以重复利用的图像、动画或按钮,应用元件可以使动画的编辑更简单化。
元件主要包括三种:
– 图形元件
– 按钮元件
– 影片剪辑元件。
两种新建元件库的方法:
1、在元件库中单击 【 新建元件 】 按钮创建元件
2、就是通过 【 插入 】 【 新建元件( New
Symbol) 】 命令来创建元件(或按 【 Ctrl+F8】
组合键创建元件)。
5.3.3 编辑元件元件的编辑可以在多种模式下进行:
1、一般的元件编辑模式
2、在当前环境下进行编辑
3、在新窗口中编辑。
一、在元件编辑模式下进行编辑两种常用从主场景切换到元件编辑模式的方式:
选取要编辑的元件,单击鼠标右键,在弹出的快捷菜单中选择 【 编辑 】 命令,进入元件编辑模式。
在元件库中选择要进行编辑的元件,双击预览框,进入元件编辑模式。
二、在当前模式下编辑元件右击元件实例,在弹出的快捷菜单中选择 【 在当前位置上编辑( Edit In Place) 】 命令,在当前窗口中的其他对象变灰,被编辑元件的名称出现在舞台顶端的信息栏中。
三、在新窗口中编辑在场景中右键单击某实例,从弹出的快捷菜单中选择 【 在新建窗口中编辑( Edit In New
Window) 】 命令,可打开新窗口编辑元件。
5.3.4 元件的变形
执行 【 窗口 】 【 变形 】 命令将 【 变形 】 面板调出,如图所示,可在面板里设置其相应的属性。
5.3.5 其他属性的调整
其他属性的调整,可以通过 【 属性 】 面板来完成。在 【 颜色 】 下拉列表中选择某一项可以调整实例的相关属性,如图所示,
5.3.6 为实例指定不同元件给实例指定不同的元件操作步骤:
1,在舞台中单击选中要指定其他元件的实例,
打开属性面板。
2,在 【 属性 】 面板中单击 【 交换元件( Swap
Symbol) 】 按钮,打开如图所示的对话框。
3、在其中选择一个元件替换当前的元件。单击对话框底部的 【 复制元件( Duplicate
Symbol) 】 按钮可复制选中的元件。
4、单击 【 确定 】 按钮,即可为实例指定其他元件。如果要替换元件的所有实例,可拖动具有相同名称的元件到元件库面板中。
5.3.7 改变元件类型
方法是一:可以通过 【 属性 】 面板设置来改变实例类型,打开 【 属性 】 面板,单击 【 元件行为( Symbol Behavior) 】 下拉按钮,从列表框中选择 【 图形( Graphic) 】,【 按钮 】 和 【 影片剪辑( Movie Clip) 】 三种类型之一。
方法二:在元件库中右键单击某元件,从弹出的快捷菜单中选择 【 行为( Behavior) 】 的子菜单项,如图所示。
5.4 图形元件
5.4,1 图形元件以,落花飘舞”的例子来介绍图形元件的创建方法:
操作步骤如下:
1、新建一个文件,在属性面板中设置背景颜色为蓝色,如图所示。
2、执行 【 插入 】 【 新建元件 】 命令,打开 【 创建新元件 】 对话框,在 【 名称( Name) 】 文本框中输入“花”作为元件的名称,并选择 【 图形 】 单选项,如图所示。
3、单击 【 确定 】 按钮进入该元件的编辑状态,这时,舞台中心有一个十字型标记,表示页面的中心坐标点。
4、在工具箱的颜色区中设置 【 笔触颜色 】 为无色,填充色为一种白色到紫色的线性渐变,
如图所示。
5、在工具箱中单击 【 椭圆工具 】,在舞台中绘制一个圆形,并且使用 【 箭头工具 】 调整它的形状,如图所示。
6、选中此矢量图,按 【 Ctrl+C】 组合键将其复制,然后粘贴 4份,并且使用 【 任意变形 】 工具旋转它们的角度,使其组成一个漂亮的花朵,再在花朵中间绘制一个黄色的圆心,如图所示。
7、执行 【 插入 】 【 新建元件 】 命令,打开 【 创建新元件 】 对话框,命名为“落花 1”,然后选择 【 图形 】 单选项,单击 【 确定 】 按钮创建一个新元件,并进入其编辑界面。
8、执行 【 窗口 】 【 库 】 命令将元件库打开,将
“花”图形元件拖动到舞台中。
9、单击 【 时间轴 】 面板中的 【 添加运动引导层 】
按钮建立一个导向图层,为第一层增加一个动画导向图层,如图所示。
10、在工具箱中单击 【 铅笔工具 】,在舞台中绘制落花飘动的路径,如图所示。
11、选择 【 箭头工具 】,在选项区中单击 【 对齐对象( Snap to Objects) 】 按钮,然后单击图层 1中的花朵,将其移动到运动路径的顶端,将花朵吸附到路径上,如图所示。
12、单击花朵所在层的第 1帧,打开 【 属性 】 面板,在 【 补间 】 下拉列表中选择 【 动作 】,
如图所示。
13、单击引导层的第 15帧,按 【 F5】 键插入一个普通帧,然后单击图层 1的第 15帧,按 【 F6】
键插入一个关键帧,并且将花朵移动到路径的中间位置,这时的舞台如图所示。
14、选择工具箱中的 【 任意变形工具 】,将花朵旋转一定的角度。
15、选中引导层的第 15帧,将其拖动到第 40帧,
使其延续到此位置。再单击图层 1的第 40
帧,插入一个关键帧。将花朵移动到路径的最底端。这的舞台和时间轴如下图所示。
16、使用 【 任意变形工具 】 将花朵旋转一个角度。
17、用同样的方法制作一个“落花 2”图形元件,只是将花朵稍微缩小一点,并绘制不同的路径,
如下图所示。
18、单击舞台上方的 【 场景 1】 按钮,切换到场景中。在打开的元件库中将“落花 1”和“落花 2”
拖动到舞台中的不同位置。单击第 40帧,按
【 F5】 键插入一帧,执行 【 控制 】 【 测试影片 】 命令,可以观看花朵落地的效果。
19、达到满意的效果后,执行 【 文件 】 【 保存 】
命令将其保存为“落花”。
5.4.2 图形元件与影片剪辑元件图形元件和影片剪辑元件有以下几个不同点:
图形元件是一个在时间轴上放置静态信息的快速方法,而影片剪辑是在自己的时间轴上独立的动画。
图形元件用于存储单帧的原始数据。当涉及
ActionScript程序或是运行动画时,需要使用影片剪辑。
在使用时要注意以下几点:
图形的实例属性在设计时就固定了,反之,在运行时影片剪辑应该有实例属性。
工作时可以预览图形元件,但不能预览影片剪辑。
图形元件的实例属性在设计时由 【 属性 】 面板中的相关设置来控制和修改。
影片剪辑的实例属性可以由 【 动作 】 面板来设置,尽管处理起来有点抽象,但它可以使动画变得更加灵活。
5.5 影片剪辑元件
5.5.1 创建影片剪辑元件
下面介绍创建影片剪辑元件的一般方法。为了方便,接着上一节图形元件的实例继续操作。
具体步骤如下:
1、新建一个文件,然后执行 【 文件 】 【 作为库打开( Open As Library) 】 命令,将上面制作的
“落花”动画在元件库中打开,如图所示。
2、执行 【 插入 】 【 新建元件 】 命令,在打开的对话框中选择 【 影片剪辑 】 单选项,并将元件命名为“逝去”,如图所示。
3、单击 【 确定 】 按钮进入该影片剪辑元件的编辑界面。
4、将元件库中的“花”图形元件拖动到舞台中,
并且放置到合适位置,然后适当调整它的大小。
5、单击第 30帧,按 【 F6】 键插入一个关键帧,使用 【 任意变形工具 】 将其缩小,如图所示。
6、单击第 1帧,打开 【 属性 】 面板,在 【 补间 】
下拉列表中选择 【 动作 】,然后在下面的 【 旋转 】 列表中选择 【 顺时针旋转 】,并在右侧的数值框中输入 1(表示旋转一圈),如图所示。
7、单击时间轴面板中的 【 插入图层 】 按钮,再插入一个图层 2。单击第一帧,再从元件库中拖出一个“花”图形元件到舞台中,放置到合适位置并调整它的大小。
8、在第 30帧处插入一个关键帧,用同样的方法设置图层 2第 1帧的属性,如图所示,此元件逆时针旋转 2圈。
9、再新建一个图层,将“落花”动画元件库中的
“落花 1”图形元件拖动到舞台中,并放置到舞台的左侧。这时的舞台效果和时间轴如下图所示。
10、单击 【 场影 1】 按钮进入主场景 1,单击图层
1的第 1帧,导入一幅图像,如图所示。
11、新建一个图层,单击其中的第 1帧,打开元件库,从中拖动“逝去”影片剪辑元件到舞台中,如图所示。
12、再在舞台右下角放置该影片剪辑元件,并使用 【 任意变形工具 】 将其适当缩小。
13、执行 【 文件 】 【 保存 】 命令,将该动画保存为“冬日飘花”。
5.5.2 将舞台中的对象转换为影片剪辑元件将舞台中的对象转换为影片剪辑元件方法:
1、新建一个文件,在舞台中使用 【 椭圆工具 】 绘制一个圆形。
2、执行 【 窗口 】 【 混色器 】 命令,打开 【 混色器 】 面板,设置成如图所示的效果。
3、从工具箱中选择 【 颜料桶工具 】,在圆形填充区域单击使其变成一个圆球体,如图所示。
4、单击第 10帧,插入一个关键帧,使用 【 任意变形工具 】 将其缩小,拖动过程中按 Shift+Alt】
组合键使其以当前球体为同心圆缩小。
5、在第 20帧插入一个关键帧,将球体重新放大。
分别设置第 1帧和第 10帧的属性,如图所示。
6、在时间轴面板中单击第 1帧,按住 【 Shift】 键,
再单击第 20帧,将这些帧选中,然后单击鼠标右键,从弹出的快捷菜单中选择 【 拷贝帧 】 命令,如图所示。
7、按 【 Ctrl+F8】 组合键新建一个影片剪辑元件,单击该元件编辑界面的第 1帧,然后单击鼠标右键,在弹出的快捷菜单中选择 【 粘贴帧 】
命令。这时的舞台和时间轴如图所示。
8、将场景 1中的所有内容删除,然后从元件库中拖动刚才创建的元件到舞台中。
9、单击选中该元件的实例,打开 【 属性 】 面板,
在 【 颜色 】 下拉列表中选择 【 色调 】,然后设置其中的 RGB颜色值,如图所示。
10、执行 【 控制 】 【 测试影片 】 命令或者按
【 Ctrl+Enter】 组合键,可以测试该元件实例的效果。单击 【 Ctrl+S】 组合键将其保存起来。
5.6 按钮元件按钮元件有 4种基本的鼠标状态,在时间轴上表现为 4帧,如图所示。
弹起:
指针经过:
按下:
点击:
5.6.1 创建按钮元件按钮的一般创建方法:
1、新建一个文件,执行 【 插入 】 【 新建元件 】
命令,打开 【 创建新元件 】 对话框。为元件命名,并在 【 行为 】 区中选择 【 按钮 】 单选项,如图所示。
2、单击 【 确定 】 按钮进入按钮元件编辑窗口,
每帧显示弹起、按下、指针经过和点击 4个状态中的一个。
3、单击 【 弹起 】 帧,在舞台中使用 【 矩形工具 】 绘制如图所示的图形。除了绘制图形外,还可以拖入图形元件或导入位图。
4、单击 【 指针经过 】 帧,插入关键帧。用同样的方法在 【 按下 】 帧插入一个关键帧,然后修改它的效果。图所示是这两帧的按钮状态。
5、最后,在 【 点击 】 状态插入关键帧。这时的舞台和时间轴如图所示。
6、打开元件库,将制作完成的按钮元件拖动到主场景的舞台中,按 【 Ctrl+Enter】 组合键测试按钮的效果,如图所示。
5.6.2 编辑按钮元件一、为按钮添加声音为按钮添加声音的操作步骤:
1、新建一个按钮元件,双击此元件进入按钮元件的编辑界面,新建一个声音层,用来放置声音文件。
2、单击 【 指针经过 】 帧,插入一个关键帧。
3、执行 【 窗口 】 【 公用库( Common Libraries) 】
【 声音( Sounds) 】 命令,打开声音的共享元件库,如图所示。
4、选择声音元件后,将其拖动到舞台中,如图所示。
5、单击 【 按下 】 帧,插入一个关键帧,再从声音共享元件库中选择一个声音元件放置到舞台中。这时的舞台和时间轴如图所示。
6、按 【 Ctrl+Enter】 组合键测试按钮的声音效果。当鼠标经过按钮时播放一种声音,而当单击按钮时播放另一声音。
二、为按钮添加动画为按钮添加动画状态操作步骤:
1、按前面的过程建立一个新按钮,也可以直接使用添加声音后的按钮元件。
2、新建一个层,使影片剪辑有 4个关键帧和按钮的 4个状态相匹配。然后单击 【 按下 】 帧,
插入一个关键帧。
3、执行 【 文件 】 【 作为库打开 】 命令,将上节制作的“冬日飘花”动画作为元件库打开。
4、拖动“逝去”影片剪辑元件到舞台中,并放置到合适位置。
5、如果有必要还可以选择其他帧,为其添加动画。可以为 【 弹起 】,【 指针经过 】 和 【 按下 】 状态添加动画,因为 【 点击 】 状态在影片中不可见,所以不必为它设置动画。
6、按 【 Ctrl+Enter】 组合键测试动画按钮效果。
习题(五)
选择题
1,我们可以使用以下几种方法导入图像
( )。
A,使用 【 导入 】 命令
B,使用粘贴的方法
C,使用 【 打开 】 命令
D,使用 【 导入图像 】 命令
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、利用图形元件、按钮元件和影片剪辑元件制作一个动画。