Flash_CS3中文版基础与实例教程下.doc
《Flash_CS3中文版基础与实例教程下.doc》由会员分享,可在线阅读,更多相关《Flash_CS3中文版基础与实例教程下.doc(39页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、【精品文档】如有侵权,请联系网站删除,仅供学习与交流Flash_CS3中文版基础与实例教程下.精品文档.第十一课 按钮 按钮元件是Flash的基本元件之一,它具有多种状态,并且会响应鼠标事件,执行指定的动作,是实现动画交互效果的关键对象。 从外观上,按钮可以是任何形式。比如,可能是一幅位图,也可以是矢量图;可以是矩形,也可以是多边形;可以是一根线条,也可以是一个线框;甚至还可以是看不见的“透明按钮”。11.1.1 认识按钮元件 下面通过制作来详细认识按钮元件。 (1)新建一个影片文档,选择“插入”|“新建元件”命令,弹出一个【创建新元件】对话框,在“名称”中输入“按钮”,选择“类型”为“按钮”
2、,如图1所示。图1 新建按钮元件 (2)单击“确定”按钮,进入到按钮元件的编辑场景中,如图2所示。图2 按钮元件的时间轴 按钮有特殊的编辑环境,通过在四个不同状态的帧时间轴上创建关键帧,可以指定不同的按钮状态。 “弹起”帧:表示鼠标指针不在按钮上时的状态。 “指针经过”帧:表示鼠标指针在按钮上时的状态。 “按下”帧:表示鼠标单击按钮时的状态。 “点击”帧:定义对鼠标做出反应的区域,这个反应区域在影片播放时是看不到的。 11.1.2变色按钮 本小节我们要制作一个变色按钮,按钮是一个蓝色的椭圆形,当鼠标指向按钮时,椭圆变为黄色,当鼠标单击按钮时,椭圆变为绿色。如图3所示。图3范例效果 具体的制作步
3、骤如下: (1)新建一个影片文档,选择“插入”|“新建元件”命令,弹出【创建新元件】对话框,在“名称”中输入“椭圆”,选择“类型”为“按钮”,如图4所示。图4 新建按钮元件 (2)单击“确定”按钮,进入到按钮元件的编辑场景中,选择椭圆工具,设置“填充色”为样本色中的“蓝色球形”。如图5所示。图5 选择填充色 单击“确定”按钮。在场景中绘制一个如图6所示的椭圆。图6 椭圆 (3)选择“指针经过”帧,按F6键插入一个关键帧。把该帧上的图形重新填充为黄色到黑色的放射状渐变色,效果如图7所示。图7 “指针经过”帧上的图形 (4)选择“按下”帧,按F6键插入一个关键帧。把该帧上的图形重新填充为绿色到黑色
4、的放射状渐变色,效果如图8所示。图8 “按下”帧上的图形 (5)选择“点击”帧,按F6键插入一个关键帧,这样就定义了鼠标的响应区为椭圆。“点击”帧中的内容,在播放时是看不到的,但是它可以定义对鼠标单击所能够做出反应的按钮区域。也可以不定义“点击”帧,这时“弹起”状态下的对象就会被作为鼠标响应区。 至此,这个按钮元件就制作好了。现在返回“场景1”,并从“库”面板中将“椭圆”按钮元件拖放到舞台上,然后按下CtrlEnter组合键测试一下,将鼠标指针移动到按钮上,按钮会变色了。11.1.3 文字按钮 文字按钮是导航菜单中经常使用的元素。如图9所示,这就是一个网站导航菜单,里面包括5个文字按钮。图9
5、导航菜单 下面我们先制作这个包括5个文字按钮的导航菜单。 (1)新建一个Flash CS3影片文档。设置舞台尺寸为48080像素,背景颜色为黑色。 (2)选择“插入”|“新建元件”命令,弹出【创建新元件】对话框,在“名称”中输入“首页按钮”,选择“类型”为“按钮”,单击“确定”按钮,进入到按钮元件的编辑场景中。 (3)选择“文本工具”,在“属性”面板中,设置“文本类型”为静态文本,“字体”为楷体,“字体大小”为40,“文本颜色”为白色。在场景中输入“首页”文字。如图10所示。图10 制作“弹起”帧上的文字 (4)选择“指针经过”帧,按F6键插入一个关键帧。把该帧上的文字颜色重新设置为黄色。 (
6、5)选择“按下”帧,按F6键插入一个关键帧。把该帧上的文字颜色重新设置为红色。如图11所示。图11制作“按下”帧上的文字 (6)选择“点击”帧,按F7键插入一个空白关键帧。单击“编辑多个帧”按钮,如图12所示。这样可以使文字显示出来,辅助创建“点击”帧上的感应区。图12 单击“编辑多个帧”按钮 (7)选择“矩形工具”,绘制一个刚好覆盖着文字的矩形。如图13所示。这个矩形是文字按钮的鼠标感应区域。如果不创建这个矩形,默认情况下感应区域是文字线条,这样就会出现按钮感应不灵敏的现象,只有鼠标刚好指向文字线条上才能感应。图13 绘制矩形 (8)返回“场景1”,并从“库”面板中将“首页”按钮元件拖放到舞
7、台上,然后按下CtrlEnter组合键测试。 (9)其他4个文字按钮的制作方法类似。制作完成以后,整齐排列在舞台上即可。11.1.4透明按钮 透明按钮是一种很特殊的按钮,利用透明按钮制作上小节的导航菜单会更简便。 (1)新建一个Flash CS3影片文档。设置舞台尺寸为48080像素,背景颜色为灰色。 (2)选择“插入”|“新建元件”命令,新建一个名位“透明”的按钮元件。在这个元件的编辑场景中,选择“点击”帧,按F7键插入一个空白关键帧。用“矩形工具”绘制一个大小合适的矩形。如图14所示。图14 绘制矩形 这样就制作了一个透明按钮。这个按钮只有一个矩形鼠标响应区,没有按钮图形。 (3)返回“场
8、景1”,用“文本工具”在舞台上输入5个文字。如图15所示。图15输入文字 (4)打开“库”面板,拖放5个“透明”按钮元件实例放置到5个文字上。如图16所示。图16 添加透明按钮元件后的效果 这样每个文字上都覆盖一个透明按钮,因此文字也就具备按钮的功能了。教学后记:第十二课 动态特效按钮 影片剪辑的灵活性和无限扩展性是其他两种元件无法比拟的,而按钮元件强大的动画控制功能又是影片剪辑不能相提并论的。如果将影片剪辑恰当地嵌入到按钮中,按钮元件就会具两者之长,这类按钮就可以称之为动态特效按钮。 范例简介 本范例利用影片剪辑强大的动画效果制作动态特效按钮,当鼠标移动到按钮上时,按钮呈现出动态特效,如果将
9、其运用在动画作品中定会锦上添花。范例效果如图1所示。图1 范例效果通过本例的学习,可以掌握将影片剪辑嵌入到按钮元件的方法和技巧。 制作步骤 1新建影片文档和设置文档属性 (1)启动Flash CS3, 选择“文件”|“新建”命令,新建一个影片文档。 (2)展开“属性”面板,单击“大小”右边的“文档属性”按钮,弹出【文档属性】对话框。设置“背景颜色”为淡黄色,影片尺寸为200150像素,其他参数保持默认。 2制作“圆”影片剪辑 (1)选择“插入”|“新建元件”命令,弹出【创建新元件】对话框。输入元件的“名称”为“圆”,选择“类型”为“影片剪辑”,如图3所示。图3 【创建新元件】对话框 (2)在此
10、元件的编辑场景中,选择“椭圆工具”,设置笔触颜色为蓝色,填充色为无,将鼠标十字指针对齐场景的中心点十字,接着按住键盘上的Shift键和Alt键,绘制出1个以场景中心为圆心的圆。 (3)按同样的方法,在场景中再绘制1个稍小的圆。效果如图3所示。图3 绘制圆形 (4)选择线条工具,在元件的编辑场景中绘制1条直线。如图4所示。图4 绘制直线 (5)选择“窗口”|“变形”命令,打开“变形”面板,如图5所示,设置旋转的角度为22.5,接着单击“复制并应用变形”按钮,绘制出1个被切割的圆。图5 变形面板 (6)选择圆形中多余的线条,按下键盘上的Del键将其删除,使用选择工具框选所有对象,按快捷键Ctrl+
11、G将其组合,如图6所示。图6 删除多余线条 (7)单击图层1的第10帧,按F6键插入关键帧。选中第1帧,在属性面板的“补间”后的下拉框中选择“动画”命令,设置“旋转”参数为“顺时针,1次”。此时的时间轴和舞台效果如图7所示。图7时间轴和舞台效果 3绘制“晕”影片剪辑 (1)选择“插入”|“新建元件”命令,弹出【创建新元件】对话框,输入元件的“名称”为“晕”,选择“类型”为“影片剪辑”,如图8所示。图8 【创建新元件】对话框 (2)在此元件的编辑场景中,选择椭圆工具,设置笔触颜色为无,填充色为蓝色,将鼠标十字指针对齐场景的中心点十字,接着按住键盘上的Shift键和Alt键,绘制出1个以场景中心为
12、圆心的圆。 (3)单击图层1的第10帧,按F6键插入关键帧。选中第10帧上的圆,单击任意变形工具,按住Shift键拖动角手柄,将圆放大。接着选中第1帧,在属性面板的“补间”后的下拉框中选择“形状”命令,完成形状补间动画的定义。此时的时间轴和舞台效果如图9所示。图9 时间轴和场景效果 (4)单击选中第1帧,接着按住Shift键单击第10帧,选中第110帧。然后右击,在弹出的快捷菜单中选择“复制帧”命令,如图10所示。图10 复制帧 (5)插入新图层,在第5帧右击,在弹出的快捷菜单中选择“粘贴帧”命令,完成补间动画的复制。此时的时间轴如图11所示。图11图层和时间轴效果 4制作动态特效按钮元件 (
13、1)选择“插入”|“新建元件”命令,弹出【创建新元件】对话框,在“名称”中输入“动态特效按钮”,“类型”选择“按钮”,单击“确定”按钮,如图12所示。图12 新建按钮元件 (2)在按钮元件的编辑场景中,可以看到按钮元件特有的四帧编辑时间轴结构。将“图层1”重命名为“按钮图形”,先在该图层的第1帧(“弹起”帧)用绘图工具绘制一个放射状填充的按钮图形,如图13所示。图13 “弹起”帧的按钮图形 (3)选择第2帧(“经过”帧),按F6键插入关键帧,将这个帧上的按钮图形更改一下填充颜色,将原来的蓝色到黑色的放射状渐变色改为淡蓝色到黑色的渐变色,并把按钮向右下方移动一些位置,如图14所示。这样将使按钮按
14、下时有一个颜色改变和一个动态的效果。图14 “经过”帧的按钮图形 (4)选择第3帧(“按下”帧),按F6键插入关键帧,将这个帧上的按钮图形更改一下填充颜色,将原来的蓝色到黑色的放射状渐变色改为黑色到蓝色的渐变色,如图15所示。图15 “按下”帧的按钮图形 (5)新建2个图层,将它重命名为“圆”和“晕”,选中第2帧,按F7键插入空白关键帧。从“库”面板中拖动“圆”影片剪辑到舞台上,调整它的大小恰好与按钮相吻合。效果如图16所示。图16 调整“圆”的位置 (6)在“晕”图层的第2帧上按F7键插入空白关键帧。从“库”面板中拖动“晕”影片剪辑到舞台上,调整它的大小和位置如图17所示。图17调整“晕”的
15、位置 (7)拖动“按钮图形”图层置于“圆”和“晕”图层之上,如图18所示。返回到主场景,拖动“库”中的“动态特效按钮”到舞台上。图18时间轴图层效果 (8)按下快捷键“Ctrl+S”保存文件。按下快捷键“Ctrl+Enter”测试影片效果,动态特效按钮制作完成。教学后记:第十三课 声音在Flash中的应用 本课素材下载 在Flash动画作品中,仅有动感元素是远远不够的,音视频的支持同样是不可缺少的。Flash支持音频、视频等多种媒体的导入功能,特别是Flash CS3版本,有了新的改进。 由于Flash设计的初衷是提供网络应用的多媒体集成元素,所以它对声音和视频的支持是非常好的,不但可以将声音
16、做大幅度的压缩。而且改进了视频导入工具。它能创建、编辑和部署流和渐进式下载的 Flash Video。 Flash提供了许多使用声音的方式。可以使声音独立于时间轴连续播放,或使动画与一个声音同步播放。还可以向按钮添加声音,使按钮具有更强的感染力。另外,通过设置淡入淡出等效果可以使声音更加优美,通过自带的压缩功能能更好地提高作品质量。由此可见,Flash对声音的支持已经达到了新的高度。13.1.1 导入声音 只有将外部的声音文件导入到Flash中以后,才能在Flash作品中加入声音效果。能直接导入Flash的声音文件类型,主要有WAV和MP3两种格式。另外,如果系统上安装了QuickTime 4
17、或更高的版本,就可以导入AIFF格式和只有声音而无画面的QuickTime影片格式。 下面通过操作来学习将声音导入Flash动画中的方法。 (1)新建一个Flash CS3影片文档。 (2)选择“文件”“导入”“导入到库”命令,弹出【导入到库】对话框,在该对话框中,选择要导入的声音文件,单击“打开”按钮,将声音导入,如图1所示。图1 【导入到库】对话框 (3)等待一段时间后,导入的声音就可以在“库”面板中看到刚导入的声音文件,下面就可以像使用元件一样使用声音对象了,如图2所示。图2 “库”面板中的声音文件13.1.2 引用声音 无论是采用导入舞台还是导入到库的方法,将声音从外部导入Flash中
18、以后,时间轴并没有发生任何变化。必须引用声音文件,声音对象才能出现在时间轴上,才能进一步应用声音。 接着13.1.1小节继续操作。 (1)将“图层1”重新命名为“声音”,选择第1帧,然后将“库”面板中的声音对象拖放到场景中,如图3所示。图3 将声音引用到时间轴上 (2)这时会发现“声音”图层第1帧出现一条短线,这其实就是声音对象的波形起始点,任意选择后面的某一帧,按下F5键,就可以看到声音对象的波形,如图4所示。这说明已经将声音引用到“声音”图层了。这时按一下键盘上的回车键,可以听到声音了,如果想听到效果更为完整的声音,可以按下快捷键Ctrl+Enter。图4 图层上的声音13.1.3 编辑声
19、音 选择“声音”图层的第1帧,打开属性面板,可以发现,属性面板中有很多设置和编辑声音对象的参数,如图5所示。图5 声音的属性面板 面板中各参数的意义如下。 “声音”选项:从中可以选择要引用的声音对象,这也是另一个运用库中声音的方法。 “效果”选项:从中可以选择一些内置的声音效果,比如让声音的淡入、淡出等效果。 “编辑”按钮:单击这个按钮可以进入到声音的编辑对话框中,对声音进行进一步的编辑。 “同步”:这里可以选择声音和动画同步的类型,默认的类型是“事件”类型。另外,还可以设置声音重复播放的次数。 运用到时间轴上的声音,往往还需要在声音的“属性”面板中对它进行适当的属性设置,才能更好地发挥声音的
20、效果。下面详细介绍有关声音属性设置以及对声音进一步编辑的方法。 1“效果”选项 在时间轴上,选择包含声音文件的第一个帧,在声音的“属性”面板中,打开“效果”菜单,可以用该菜单设置声音的效果,如图6所示。图6 声音效果设置 以下是对各种声音效果的解释。 “无”:不对声音文件应用效果,选择此选项将删除以前应用过的效果。 “左声道”/“右声道”:只在左或右声道中播放声音。 “从左到右淡出”/“从右到左淡出”:会将声音从一个声道切换到另一个声道。 “淡入”:会在声音的持续时间内逐渐增加其幅度。 “淡出”:会在声音的持续时间内逐渐减小其幅度。 “自定义”:可以使用“编辑封套”创建声音的淡入和淡出点。 2
21、“同步”属性 打开“同步”菜单,这里可以设置“事件”、“开始”、“停止”和“数据流”四个同步选项,如图7所示。图7 同步属性 “事件”选项:会将声音和一个事件的发生过程同步起来。事件与声音在它的起始关键帧开始显示时播放,并独立于时间轴播放完整的声音,即使SWF文件停止执行,声音也会继续播放。当播放发布的SWF文件时,事件与声音混合在一起。 “开始”选项:与“事件”选项的功能相近,但如果声音正在播放,使用“开始”选项则不会播放新的声音实例。 “停止”选项:将使指定的声音静音。 “数据流”选项:将强制动画和音频流同步。与事件声音不同,音频流随着 SWF文件的停止而停止。而且,音频流的播放时间绝对不
22、会比帧的播放时间长。当发布SWF 文件时,音频流混合在一起。 通过“同步”弹出菜单还可以设置“同步”选项中的“重复”和“循环”属性。为“重复”输入一个值,以指定声音应循环的次数,或者选择“循环”以连续重复播放声音,如图8所示。图8 设置重复或者循环属性 3“编辑”按钮 单击该按钮可以利用Flash中的声音编辑控件编辑声音。虽然Flash处理声音的能力有限,无法与专业的声音处理软件相比,但是在Flash内部还是可以对声音做一些简单的编辑,实现一些常见的功能,比如控制声音的播放音量、改变声音开始播放和停止播放的位置等。 编辑声音文件的具体操作如下。 (1)在帧中添加声音,或选择一个已添加了声音的帧
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash_CS3 中文版 基础 实例教程
限制150内