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