中职 网页动画制作项目八 动态的按钮电子课件 .ppt

《中职 网页动画制作项目八 动态的按钮电子课件 .ppt》由会员分享，可在线阅读，更多相关《中职 网页动画制作项目八 动态的按钮电子课件 .ppt（81页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中职 网页动画制作项目八 动态的按钮电子课件（高教版）中职 网页动画制作项目八 动态的按钮电子课件（高教版）项目八项目八 动态的按钮动态的按钮按钮元件的制作按钮元件的制作 任务一任务一 认识按钮元件认识按钮元件 任务二任务二 制作播放器音效按钮制作播放器音效按钮 任务三任务三 制作风车动态按钮制作风车动态按钮 任务四任务四 制作网站导航条制作网站导航条【知识加油站知识加油站】实战演练实战演练 制作商务网站中的按钮制作商务网站中的按钮 拓展训练拓展训练 制作一个用户注册的交互式页面制作一个用户注册的交互式页面 本任务目标本任务目标:能利用按钮元件完成各种按钮的制作。本任务重点本任务重点:1、按钮

2、元件的特点2、按钮元件的制作方法3、创建按钮对象项目任务上一页下一页【开篇语开篇语】Flash Flash动画作为一种交互式动画，为用户提供交动画作为一种交互式动画，为用户提供交互控制功能是它的主要功能。而在互控制功能是它的主要功能。而在FlashFlash的各种交互的各种交互手段中，按钮控制是最简单、最常用的一种。手段中，按钮控制是最简单、最常用的一种。FlashFlash动画中的按钮各种各样，功能各异，点击按钮即可完动画中的按钮各种各样，功能各异，点击按钮即可完成各种控制操作。成各种控制操作。本项目以一个儿童学习网站的按钮制作为实例，本项目以一个儿童学习网站的按钮制作为实例，重点介绍了图像

3、按钮、音效按钮、动态按钮、二级导重点介绍了图像按钮、音效按钮、动态按钮、二级导航按钮等几种常用的、典型的按钮是如何制作的。此航按钮等几种常用的、典型的按钮是如何制作的。此外，在知识加油站里还介绍了外，在知识加油站里还介绍了FlashFlash中组件的知识和中组件的知识和常用几种组件控件的使用方法。常用几种组件控件的使用方法。项目任务上一页下一页 一、按钮元件的特点一、按钮元件的特点 在在FlashFlash动画中，按钮的主要功能是让用户在点击按钮后实动画中，按钮的主要功能是让用户在点击按钮后实现一些控制功能，如重新播放动画，控制背景音乐的开和关等。为现一些控制功能，如重新播放动画，控制背景音乐

4、的开和关等。为了在动画中能够区分出有特殊功能按钮来，一般的按钮都会在鼠标了在动画中能够区分出有特殊功能按钮来，一般的按钮都会在鼠标经过它时发生一些变化。因此按钮元件与一般的图形元件和影片剪经过它时发生一些变化。因此按钮元件与一般的图形元件和影片剪辑元件有一些不同，它具有以下特点。辑元件有一些不同，它具有以下特点。1 1按钮元件的时间轴与影片剪辑一样，是独立于主时间轴的。在动按钮元件的时间轴与影片剪辑一样，是独立于主时间轴的。在动画播放时它可以反复播放自身时间轴上的内容。但是，按钮元件只画播放时它可以反复播放自身时间轴上的内容。但是，按钮元件只有前有前4 4帧有作用，其它帧在播放时不起作用。帧有

5、作用，其它帧在播放时不起作用。2 2按钮元件内可以包含按钮元件内可以包含FlashFlash支持的所有元素，包括图形元件实例、支持的所有元素，包括图形元件实例、影片剪辑实例、位图、组合、分散的矢量图形以及动态文本和输入影片剪辑实例、位图、组合、分散的矢量图形以及动态文本和输入文本等。文本等。3 3按钮元件时间轴的帧上可以添加声音，但不能添加动作脚本。按按钮元件时间轴的帧上可以添加声音，但不能添加动作脚本。按钮的动作脚本只能应用于具体的实例对象。钮的动作脚本只能应用于具体的实例对象。4 4使用按钮元件创建的按钮实例对象必须与动作脚本相配合，才能使用按钮元件创建的按钮实例对象必须与动作脚本相配合，

6、才能制作互动效果，完成控制功能。制作互动效果，完成控制功能。项目任务上一页下一页二、按钮元件的制作方法二、按钮元件的制作方法 按钮元件时间轴上的四个固定帧具有特殊的作用，按钮元件时间轴上的四个固定帧具有特殊的作用，制作按钮元件实际是就是根据按钮的实际显示需要和动制作按钮元件实际是就是根据按钮的实际显示需要和动画效果来设计这四帧的内容。第画效果来设计这四帧的内容。第1 1帧称为帧称为“弹起弹起”帧，帧，它的内容是鼠标指针不接触按钮时按钮的外观样式；第它的内容是鼠标指针不接触按钮时按钮的外观样式；第2 2帧称为帧称为“指针经过指针经过”帧，它的内容是鼠标经过按钮时帧，它的内容是鼠标经过按钮时按钮的

7、外观样式；第按钮的外观样式；第3 3帧称为帧称为“按下按下”帧，是在按钮上帧，是在按钮上按鼠标左键时按钮的外观样式；而第按鼠标左键时按钮的外观样式；而第4 4帧称为帧称为“点击点击”帧，它的内容不显示，只是用来确定按钮的响应区域。帧，它的内容不显示，只是用来确定按钮的响应区域。下面以一个常用的重播文字按钮的例子来简单介绍一下下面以一个常用的重播文字按钮的例子来简单介绍一下按钮的元件的制作方法。按钮的元件的制作方法。项目任务上一页下一页1.1.编辑编辑“弹起弹起”帧帧 要制作一个按钮元件，必须要执行要制作一个按钮元件，必须要执行【插入插入】【新建元件新建元件】命令，新建一个按钮类型的元件。进命令

8、，新建一个按钮类型的元件。进入元件编辑界面后，首先要确定按钮在正常动画播入元件编辑界面后，首先要确定按钮在正常动画播放时的外观样式。所以要先选中放时的外观样式。所以要先选中“弹起弹起”，然后输，然后输入文字入文字“重播重播”，设置文本的字符系列为微软雅黑，设置文本的字符系列为微软雅黑，大小为大小为5050点，颜色为白色。点，颜色为白色。“弹起弹起”帧的文字效果帧的文字效果和时间轴如图和时间轴如图8-18-1所示。所示。图8-1“弹起”帧的文字效果和时间轴项目任务上一页下一页2.2.编辑编辑“指针经过指针经过”帧帧 接下来要设计鼠标经过按钮时按钮的动态变化，接下来要设计鼠标经过按钮时按钮的动态变

9、化，这样才能更好的提示用户这是一个功能按钮。为此这样才能更好的提示用户这是一个功能按钮。为此要在要在“指针经过指针经过”帧上插入关键帧，这时帧上插入关键帧，这时“弹起弹起”帧的内容会被自动复制到帧的内容会被自动复制到“指针经过指针经过”帧，点击帧，点击“重播重播”文字，在属性面板中修改它的字符颜色为黄文字，在属性面板中修改它的字符颜色为黄色（色（#FFFF00#FFFF00），），“指针经过指针经过”帧的文字效果和时间帧的文字效果和时间轴如图轴如图8-28-2所示。所示。图8-2“指针经过”帧的文字效果和时间轴项目任务上一页下一页3.3.编辑编辑“按下按下”帧帧 如果希望在鼠标按下按钮时与经过

10、按钮时的样式如果希望在鼠标按下按钮时与经过按钮时的样式不同，还可以编辑不同，还可以编辑“按下按下”帧的状态。在帧的状态。在“按下按下”上上插入一个关键帧，然后在文本对象的属性面板中为它插入一个关键帧，然后在文本对象的属性面板中为它添加发光滤镜效果，添加发光滤镜效果，“按下按下”帧的文字效果、滤镜参帧的文字效果、滤镜参数和时间轴如图数和时间轴如图8-38-3所示。所示。图8-3“按下”帧的文字效果、滤镜参数和时间轴项目任务上一页下一页4.编辑编辑“点击点击”帧帧 按钮元件的按钮元件的“点击点击”帧用来确定按钮响应鼠标的范围，帧用来确定按钮响应鼠标的范围，现在如果要扩大重播按钮的响应范围，只要鼠标

11、靠近现在如果要扩大重播按钮的响应范围，只要鼠标靠近“重重播播”两个字就会响应按钮变化，那么在两个字就会响应按钮变化，那么在“点击点击”帧上插入帧上插入关键帧，用矩形工具绘制一个比文字稍大一圈的矩形框覆关键帧，用矩形工具绘制一个比文字稍大一圈的矩形框覆盖住文字就可以了。由于盖住文字就可以了。由于“点击点击”帧中的内容不显示，因帧中的内容不显示，因此图形的颜色无所谓，我们关心的只是图形覆盖的范围。此图形的颜色无所谓，我们关心的只是图形覆盖的范围。“点击点击”帧的文字效果和时间轴如图帧的文字效果和时间轴如图8-4所示。所示。图8-4“点击”帧的图形范围和时间轴项目任务上一页下一页三、创建按钮对象三、

12、创建按钮对象 返回场景返回场景1,1,然后从库中将定义的按钮元件拖入到舞台然后从库中将定义的按钮元件拖入到舞台中，就创建了一个按钮对象。在编辑状态下是无法显示按中，就创建了一个按钮对象。在编辑状态下是无法显示按钮的动态变化的，要测试影片后才能通过鼠标的移动和点钮的动态变化的，要测试影片后才能通过鼠标的移动和点击来测试按钮的各种状态。但是此时的按钮只是在外观上击来测试按钮的各种状态。但是此时的按钮只是在外观上发生了变化，并不能实现交互控制功能。只有为按钮实例发生了变化，并不能实现交互控制功能。只有为按钮实例对象添加上脚本代码，才能完成各种控制功能。上面设计对象添加上脚本代码，才能完成各种控制功能

13、。上面设计的重播按钮元件，拖入舞台后，生成一个实例对象，测试的重播按钮元件，拖入舞台后，生成一个实例对象，测试影片后按钮在不同状态下的显示效果如图影片后按钮在不同状态下的显示效果如图8-58-5所示。所示。项目任务上一页下一页(a)鼠标未经过状态(b)鼠标经过状态(c)鼠标按下状态图8-5 按钮对象在不同状态下的显示效果 项目任务上一页 本任务目标本任务目标:制作播放器音效按钮 本任务重点本任务重点:掌握按钮元件的使用项目任务上一页下一页一、新建一、新建FlashFlash文件文件新建一个名为儿童网站按钮的新建一个名为儿童网站按钮的flashflash（ActionScript ActionS

14、cript 2.0)2.0)文件，执行文件，执行【修改修改】【文档文档】命令修改文档尺命令修改文档尺寸。设置文档宽度为寸。设置文档宽度为600600像素，长度为像素，长度为400400像素，背景像素，背景颜色为深灰色（颜色为深灰色（#333333#333333），帧频为），帧频为30fps30fps，如图，如图8-68-6所所示。示。图 8-6 修改文档属性项目任务上一页下一页二、导入网站背景素材二、导入网站背景素材1 1导入背景图片素材导入背景图片素材将新建文件的默认图层改名为将新建文件的默认图层改名为“背景背景”，把光盘中，把光盘中“素材与实例素材与实例project08project08

15、素材素材儿童网站素材儿童网站素材”目录下的目录下的“背景背景.jpg”.jpg”图片导入到舞台。选中图片，图片导入到舞台。选中图片，在在【属性面板属性面板】中修改图片尺寸同样为中修改图片尺寸同样为600*400600*400，调，调整与舞台对齐，在第整与舞台对齐，在第2121帧处插入帧来延长画面。背帧处插入帧来延长画面。背景图片与时间轴如图景图片与时间轴如图8-78-7所示。所示。项目任务上一页下一页图 8-7 背景图片与时间轴 项目任务上一页下一页2 2导入屏幕图片素材导入屏幕图片素材 新建一个名为新建一个名为“屏幕屏幕”的图层，将光盘中的图层，将光盘中“素材与素材与实例实例project0

16、8project08素材素材儿童网站素材儿童网站素材”目录下的目录下的“屏屏幕幕.png”.png”图片导入到舞台。选中图片，设置它的位置为图片导入到舞台。选中图片，设置它的位置为x:69.5,y:49.1,x:69.5,y:49.1,宽度为宽度为346346，高度为，高度为340340。添加屏幕后的。添加屏幕后的效果和时间轴如图效果和时间轴如图8-88-8所示。所示。项目任务上一页下一页图 8-8 添加屏幕的效果和时间轴项目任务上一页下一页3 3导入显示内容图片素材导入显示内容图片素材在屏幕图层上新建一个名为在屏幕图层上新建一个名为“显示内容显示内容”的图层，将的图层，将光盘中光盘中“素材与

17、实例素材与实例project08project08素材素材儿童网站儿童网站素材素材”目录下的目录下的“显示内容显示内容.jpg”.jpg”图片导入到舞台。图片导入到舞台。设置它的位置设置它的位置x:118.9,y:126,x:118.9,y:126,宽度为宽度为255255，高度为，高度为171171。添加了显示内容的效果和时间轴如图添加了显示内容的效果和时间轴如图8-98-9所示。所示。项目任务上一页下一页图 8-9 添加显示内容的效果和时间轴项目任务上一页下一页三、制作播放器按钮三、制作播放器按钮1 1制作播放按钮元件制作播放按钮元件 （1 1）执行）执行【插入插入】【新建元件新建元件】命

18、令，设置名称为命令，设置名称为“播放播放”，类型为，类型为“按钮按钮”，单击，单击“确定确定”进入元件编辑界面。将默认图进入元件编辑界面。将默认图层改名为层改名为“外圆外圆”，选中，选中“弹起弹起”帧，选择帧，选择【用椭圆工具用椭圆工具】，在，在【颜色面板颜色面板】中设置线条颜色颜色为浅灰色（中设置线条颜色颜色为浅灰色（#CCCCCC#CCCCCC），填充颜色），填充颜色为无。在为无。在【颜色面板颜色面板】中设置笔触为大小中设置笔触为大小1 1，样式为实线。按住，样式为实线。按住【ShiftShift】键在舞台绘制一个正圆，然后选中圆形边框线，在键在舞台绘制一个正圆，然后选中圆形边框线，在【属

19、性属性面板面板】中设置外圆的位置为中设置外圆的位置为x:-12.5,y:-12.5,x:-12.5,y:-12.5,宽度为宽度为2525，高度为，高度为2525。在在“指针经过指针经过”帧上插入关键帧，选中圆，修改外圆的笔触颜色为帧上插入关键帧，选中圆，修改外圆的笔触颜色为浅绿色（浅绿色（#CADF89#CADF89）。在）。在“按下按下”帧上插入关键帧，修改笔触颜色帧上插入关键帧，修改笔触颜色为灰色（为灰色（#6F6F6F#6F6F6F）。在）。在“点击点击”帧上插入关键帧，利用油漆桶工帧上插入关键帧，利用油漆桶工具将圆圈内部填充颜色为灰白色（具将圆圈内部填充颜色为灰白色（#E7F2F6#E

20、7F2F6）。外圆图层各帧的显）。外圆图层各帧的显示效果和时间轴如图示效果和时间轴如图8-108-10所示。所示。项目任务上一页下一页图 8-10 外圆图层在四个帧中的显示效果和时间轴项目任务上一页下一页（2 2）在在“外外圆圆”图图层层上上新新建建一一个个名名为为“内内圆圆”的的图图层层，选选中中“弹弹起起”帧帧，用用椭椭圆圆工工具具绘绘制制一一个个笔笔触触为为无无，填填充充颜颜色色为为灰灰白白色色（#EEEEEE#EEEEEE），的的正正圆圆。设设内内圆圆的的位位置置为为x:-10,y:-10,x:-10,y:-10,宽宽度度为为2020，高高度度为为2020。在在“指指针针经经过过”帧帧

21、上上插插入入关关键键帧帧，修修改改填填充充颜颜色色为为浅浅绿绿色色（#CADF89#CADF89）。在在“按按下下”帧帧上上插插入入关关键键帧帧，修修改改填填充充颜颜色色为为灰灰色色（#6F6F6F#6F6F6F）。删删除除“点点击击”帧帧，“内内圆圆”图图层层各各帧帧的的显显示示效效果果和时间轴如图和时间轴如图8-118-11所示。所示。图 8-11 内圆图层在三个帧中的显示效果和时间轴项目任务上一页下一页（3 3）在在“内内圆圆”图图层层上上新新建建一一个个名名为为“内内圆圆边边”的的图图层层，在在“按按下下”帧帧上上插插入入关关键键帧帧，用用椭椭圆圆工工具具绘绘制制一一个个正正圆圆，设设

22、置置它它的的笔笔触触大大小小为为1 1，颜颜色色为为灰灰白白色色（#E7F2F6#E7F2F6），样样式式为为实实线线，填填充充颜颜色色为为无无。再再设设置置它它的的位位置置为为x:-10,y:-10,x:-10,y:-10,宽宽度度为为2020，高高度度为为2020。删删除除“点点击击”帧帧，“内内圆圆边边”图图层层在在“按按下下”帧帧中中的的显显示示效效果果和和时时间间轴轴如如图图8-128-12所示。所示。图 8-12 内圆边图层在“按下”帧中的显示效果和时间轴项目任务上一页下一页（4 4）在在“内内圆圆边边”图图层层上上新新建建一一个个名名为为“符符号号”的的图图层层，选选中中“弹弹起

23、起”帧帧，用用线线条条工工具具绘绘制制一一个个填填充充色色为为深深灰灰色色（#484848#484848）的的无无边边线线三三角角形形。设设三三角角形形的的位位置置为为x:-3,y:-5,x:-3,y:-5,宽宽度度为为8 8，高高度度为为1010。在在“按按下下”帧帧上上插插入入关关键键帧帧，修修改改三三角角形形的的填填充充色色为为白白色色。删删除除“点点击击”帧帧，符符号号图图层层在在“弹弹起起”和和“按按下下”帧帧中中的的显显示示效效果果和和时时间间轴轴如如图图8-138-13所示。所示。图 8-12 符号图层在“弹起”和“按下”帧中的显示效果和时间轴项目任务上一页下一页（5 5）在在“

24、符符号号”图图层层上上新新建建一一个个名名为为“声声音音”的的图图层层，在在“指指针针经经过过”帧帧处处插插入入关关键键帧帧，执执行行【窗窗口口】【公公用用库库】【声声音音】命命令令打打开开公公用用库库面面板板，从从公公用用库库中中选选择择Sports Sports Ball Ball Basketball Basketball Caught Caught With With Hands Hands 01.mp301.mp3音音效效文文件件拖拖入入舞舞台台，为为按按钮钮在在鼠鼠标标经经过过时添加特殊音效，声音图层的时间轴如图时添加特殊音效，声音图层的时间轴如图8-138-13所示。所示。图 8

25、-13 声音图层的时间轴项目任务上一页下一页2 2制作停止和暂停按钮元件制作停止和暂停按钮元件在在【库面板库面板】中右键点击中右键点击“播放播放”按钮元件，选择按钮元件，选择“直接复制直接复制”，输入名称为，输入名称为“停止停止”，单击，单击“确定确定”按钮制作按钮制作“停止停止”按钮元按钮元件。在按照相同的方法，制作出件。在按照相同的方法，制作出“暂停暂停”按钮元件。分别更改按钮元件。分别更改“停止停止”、“暂停暂停”中的中的“符号符号”图层按钮效果，如图图层按钮效果，如图8-148-14所示。所示。图 8-14 停止和暂停按钮元件的显示效果项目任务上一页下一页3 3添加按钮对象添加按钮对象

26、返回场景1，在“显示内容”图层上新建一个名为“播放器”按钮的图层，将库中的“播放”、“停止”和“暂停”按钮元件依次拖入舞台并置于屏幕下面。显示效果和时间轴如图8-15所示。图 8-15 添加播放器按钮的显示效果和时间轴项目任务上一页 本任务目标本任务目标:制作风车动态按钮 本任务重点本任务重点:1、利用以前动作补间的知识，制作风车旋转动画2、熟练运用动作按钮制作风车动态按钮项目任务上一页下一页一、制作风车按钮元件一、制作风车按钮元件1制作风车旋转动画制作风车旋转动画新建一个名为新建一个名为“风车转风车转”的影片剪辑元件，将光盘中的影片剪辑元件，将光盘中“素材与实例素材与实例project08素

27、材素材儿童网站素材儿童网站素材”目录下的目录下的“风车风车.png”图片导入到图片导入到舞台，并将它转换为图形元件，命名为舞台，并将它转换为图形元件，命名为“风车风车”。在第。在第20帧上插入帧并帧上插入帧并创建补间动画。选中第创建补间动画。选中第20帧，打开属性面板，设置补间动画的旋转方向帧，打开属性面板，设置补间动画的旋转方向为为“顺时针顺时针”。旋转补间动画的效果、属性设置和时间轴如图。旋转补间动画的效果、属性设置和时间轴如图8-16所示。所示。图 8-16 风车动画效果、属性设置和时间轴项目任务上一页下一页2 2制作风车按钮元件制作风车按钮元件新建一个名为新建一个名为“风车按钮风车按钮

28、”的按钮元件，选中的按钮元件，选中“弹起弹起”帧，将库帧，将库中的中的“风车转影片剪辑风车转影片剪辑”元件拖入到舞台。在元件拖入到舞台。在“指针经过指针经过”帧上帧上插入关键帧，在插入关键帧，在【属性面板属性面板】查看元件的位置后将元件删除，将查看元件的位置后将元件删除，将库中的库中的“风车风车“元件拖入到舞台，使它与被删除的元件位置相同。元件拖入到舞台，使它与被删除的元件位置相同。生成一个正常显示时风车旋转，鼠标经过按钮时风车停止旋转的生成一个正常显示时风车旋转，鼠标经过按钮时风车停止旋转的动态按钮效果。按钮的时间轴如图动态按钮效果。按钮的时间轴如图8-178-17所示。所示。图 8-17

29、风车按钮的时间轴项目任务上一页下一页二、添加风车按钮对象二、添加风车按钮对象返回场景返回场景1，在，在“播放器按钮播放器按钮”图层上新建一个名为图层上新建一个名为“风车动态按钮风车动态按钮”的图层，将库中的的图层，将库中的“风车按钮风车按钮”元件拖入舞台并置于屏幕左侧，再复制元件拖入舞台并置于屏幕左侧，再复制一个一个“风车按钮风车按钮”元件置于一边，调整两个元件置于一边，调整两个“风车按钮风车按钮”元件的大小和元件的大小和位置。再利用线条工具为两个风车添加手柄，设置线条的笔触大小为位置。再利用线条工具为两个风车添加手柄，设置线条的笔触大小为2，颜色为绿色（，颜色为绿色（#66B323）。风车的

30、显示效果和时间轴如图）。风车的显示效果和时间轴如图8-18所示。所示。图 8-18 风车的显示效果和时间轴项目任务上一页 本任务目标本任务目标:制作网站导航条 本任务重点本任务重点:1制作下拉菜单效果 2添加帧控制代码 3添加按钮控制代码项目任务上一页下一页一、制作导航栏一、制作导航栏 在在“风车动态按钮风车动态按钮”图层上方新建一个名为图层上方新建一个名为“导航栏导航栏”的图层，分别将光盘中的图层，分别将光盘中“素材与实例素材与实例project08project08素材素材儿儿童网站素材童网站素材”目录下的目录下的“橙色橙色.png”.png”、“蓝色蓝色.png”.png”、“绿绿色色.

31、png”.png”和和“粉色粉色.png”.png”导入到舞台。设置四个图片的宽度导入到舞台。设置四个图片的宽度均为均为110110，高度均为，高度均为2525，位置排列和时间轴如图，位置排列和时间轴如图8-198-19所示。所示。图 8-19 导航栏显示效果和时间轴 项目任务上一页下一页二、制作导航按钮二、制作导航按钮1 1制作导航按钮元件制作导航按钮元件新建一个名为新建一个名为“电子贺卡电子贺卡”的按钮元件，选中的按钮元件，选中“弹起弹起”帧，用帧，用文本工具输入文字文本工具输入文字“电子贺卡电子贺卡”，设置字符系列为华康海报体，设置字符系列为华康海报体W12W12，大小为，大小为1515

32、点，颜色为白色。点，颜色为白色。“电子贺卡电子贺卡”按钮的文字效果按钮的文字效果和时间轴如图和时间轴如图8-208-20所示。再用同样的方法和参数创建所示。再用同样的方法和参数创建“电子相电子相册册”、“益智园益智园”和和“学习课件学习课件”三个按钮元件。三个按钮元件。图 8-20 电子贺卡按钮的文字效果和时间轴项目任务上一页下一页2 2添加导航按钮对象添加导航按钮对象返回场景返回场景1 1，在，在“导航栏导航栏”图层上新建一个名为图层上新建一个名为“按钮按钮”的的图层，将库中的图层，将库中的“电子贺卡电子贺卡”、“电子相册电子相册”、“益智园益智园”和和“学习课件学习课件”四个按钮元件拖入舞

33、台并置于导航栏上面，导航四个按钮元件拖入舞台并置于导航栏上面，导航按钮的显示效果和时间轴如图按钮的显示效果和时间轴如图8-218-21所示。所示。图 8-21导航按钮显示效果和时间轴 项目任务上一页下一页三、制作二级下拉菜单三、制作二级下拉菜单1 1制作二级菜单按钮元件制作二级菜单按钮元件新建一个名为新建一个名为“生日贺卡生日贺卡”的按钮元件，选中的按钮元件，选中“弹起弹起”帧，用文帧，用文本工具输入文字本工具输入文字“生日贺卡生日贺卡”，设置字符系列为微软雅黑，大小，设置字符系列为微软雅黑，大小为为1212点，颜色为白色。在点，颜色为白色。在“指针经过指针经过”帧上插入关键帧，修改文帧上插入

34、关键帧，修改文字的颜色为红色（字的颜色为红色（#FF0000#FF0000）。按钮的文字效果和时间轴如图）。按钮的文字效果和时间轴如图8-8-2222所示。再用同样的方法创建所示。再用同样的方法创建“母亲节贺卡母亲节贺卡”、“阳光宝贝阳光宝贝”、“猫咪物语猫咪物语”、“智力拼图智力拼图”、“砸仓鼠砸仓鼠”和和“英语课件英语课件”六个六个按钮元件。按钮元件。图 8-22生日贺卡按钮效果和时间轴项目任务上一页下一页2 2制作二级菜单影片剪辑元件制作二级菜单影片剪辑元件新建一个名为新建一个名为“下拉下拉01”01”的影片剪辑元件，将库中的影片剪辑元件，将库中“生日贺卡生日贺卡”和和“母亲节贺卡母亲节

35、贺卡”两个按钮元件拖入到舞台并上下排列放置位置两个按钮元件拖入到舞台并上下排列放置位置分别为分别为x:0.5,y:143x:0.5,y:143；x:39.2,y:145.4x:39.2,y:145.4。再利用。再利用【线条工具线条工具】在在两个按钮上方绘制一个边线和填充色均为蓝色（两个按钮上方绘制一个边线和填充色均为蓝色（#6FB8DB#6FB8DB）的三）的三角形，七位置为角形，七位置为x:-7.2,y:-18.3,x:-7.2,y:-18.3,生成生成“电子贺卡电子贺卡”导航按钮的导航按钮的下拉菜单。按照同样的方法，分别创建下拉菜单。按照同样的方法，分别创建“下拉下拉02”02”、“下拉下

36、拉03”03”和和“下拉下拉04”04”三个的影片剪辑元件。其中下拉三个的影片剪辑元件。其中下拉0202中添加中添加“阳光宝阳光宝贝贝”和和“猫咪物语猫咪物语”按钮，下拉按钮，下拉“0303中中”添加添加“智力拼图智力拼图”和和“砸仓鼠砸仓鼠”按钮，按钮，“下拉下拉04”04”中添加中添加“英语课件英语课件”按钮，四个下拉按钮，四个下拉菜单的显示效果如图菜单的显示效果如图8-238-23所示。所示。图 8-23 四个下拉菜单的显示效果项目任务上一页下一页3 3制作电子贺卡的下拉菜单效果制作电子贺卡的下拉菜单效果返回场景返回场景1 1，在，在“按钮按钮”图层上新建一个名为图层上新建一个名为“下拉

37、下拉01”01”的图层，的图层，在第在第2 2帧处插入关键帧，将库中帧处插入关键帧，将库中“下拉下拉01”01”元件拖入到舞台。在元件拖入到舞台。在第第6 6帧处插入关键帧，选中图层中的元件并设置它的位置为帧处插入关键帧，选中图层中的元件并设置它的位置为x:138,y:59,x:138,y:59,宽度为宽度为110110，高度为，高度为5050。再选中第。再选中第2 2帧图层中的元件帧图层中的元件并设置下拉菜单的位置为并设置下拉菜单的位置为x:138,y:44.5,x:138,y:44.5,宽度为宽度为110110，高度为，高度为1 1。然后在两帧之间创建传统补间，并删除掉第然后在两帧之间创建

38、传统补间，并删除掉第6 6帧之后的所有多余帧之后的所有多余帧。电子贺卡下拉菜单效果和时间轴如图帧。电子贺卡下拉菜单效果和时间轴如图8-248-24所示。所示。项目任务上一页下一页图 8-24 电子贺卡下拉菜单效果和时间轴项目任务上一页下一页4 4制作其它下拉菜单效果制作其它下拉菜单效果在在“下拉下拉01”01”图层上新建一个名为图层上新建一个名为“下拉下拉02”02”的图层，在第的图层，在第7 7帧帧处插入关键帧，将处插入关键帧，将“下拉下拉02”02”元件拖入到舞台。在第元件拖入到舞台。在第1111帧处插入帧处插入关键帧，选中图层中的元件并设置位置为关键帧，选中图层中的元件并设置位置为x:2

39、46,y:58,x:246,y:58,宽度为宽度为5353，高度为，高度为5050。再选中第。再选中第7 7帧图层中的元件并设置为帧图层中的元件并设置为x:246,y:44,x:246,y:44,宽宽度为度为5353，高度为，高度为1 1。然后在两帧之间创建传统补间，删除掉第。然后在两帧之间创建传统补间，删除掉第1111帧之后的所有帧。再新建一个名为帧之后的所有帧。再新建一个名为“下拉下拉03”03”的图层，在第的图层，在第1212帧帧处插入关键帧，拖入处插入关键帧，拖入“下拉下拉03”03”元件到舞台。在元件到舞台。在1616帧处插入关键帧处插入关键帧，创建第帧，创建第1212帧到第帧到第1

40、616帧间的传统补间动画，设置第帧间的传统补间动画，设置第1212帧的参数帧的参数为为x:352x:352，y:44,y:44,宽度为宽度为5353，高度为，高度为1 1，第，第1616帧参数为帧参数为x:352,y:59,x:352,y:59,宽度为宽度为5353，高度为，高度为5050。删除第。删除第1616帧之后的所有帧。再新建帧之后的所有帧。再新建“下拉下拉04”04”图层，在第图层，在第1717帧处插入关键帧，拖入帧处插入关键帧，拖入“下拉下拉04”04”元件到舞台。元件到舞台。创建第创建第1717帧到第帧到第2121帧间的传统补间动画，设置第帧间的传统补间动画，设置第1717帧的参

41、数为帧的参数为x:459x:459，y:44,y:44,宽度为宽度为5353，高度为，高度为1 1，第，第2121帧参数为帧参数为x:459,y:59,x:459,y:59,宽宽度为度为5353，高度为，高度为3030。其它三个下拉菜单的时间轴如图。其它三个下拉菜单的时间轴如图8-258-25所示。所示。项目任务上一页下一页图 8-25 其它三个下拉菜单的时间轴项目任务上一页下一页5 5添加帧控制代码添加帧控制代码上面设计好的下拉菜单动画会依次自动播放，要想实现单击哪上面设计好的下拉菜单动画会依次自动播放，要想实现单击哪个导航按钮显示哪个下拉菜单的效果，需要为按钮和帧添加脚个导航按钮显示哪个下

42、拉菜单的效果，需要为按钮和帧添加脚本代码。首先在本代码。首先在“下拉下拉04”04”图层上新建一个名为图层上新建一个名为“as”as”的图层，的图层，该图层无内容显示，仅仅是为时间轴添加一些控制命令。然后该图层无内容显示，仅仅是为时间轴添加一些控制命令。然后在第在第1 1帧上插入关键帧，单击鼠标右键执行帧上插入关键帧，单击鼠标右键执行【动作动作】命令，打开命令，打开脚本编辑器，输入控制代码脚本编辑器，输入控制代码“stop();”stop();”用来控制动画在第用来控制动画在第1 1帧帧停止播放，这样可以等待用户点击按钮，再根据点击的按钮来停止播放，这样可以等待用户点击按钮，再根据点击的按钮来

43、决定执行哪段动画。在第决定执行哪段动画。在第6 6帧上插入关键帧，也输入帧上插入关键帧，也输入“stop();”stop();”指令，用来控制动画从第指令，用来控制动画从第2 2帧开始播放后到第帧开始播放后到第6 6帧停帧停止，即止，即“下拉下拉01”01”元件完全显示后停止动画播放，等待用户再元件完全显示后停止动画播放，等待用户再次点击按钮来决定播放哪段动画。按照相同的方法为第次点击按钮来决定播放哪段动画。按照相同的方法为第1111帧，帧，第第1616帧和第帧和第2020帧加入帧加入“stop();”stop();”指令。指令。asas图层第图层第1 1帧的脚本代帧的脚本代码和时间轴如图码和

44、时间轴如图8-268-26所示。所示。项目任务上一页下一页图 8-26 as图层的时间轴项目任务上一页下一页 6 6添加按钮控制代码添加按钮控制代码在帧上添加的控制代码只是将主时间轴上的动画分成了几个在帧上添加的控制代码只是将主时间轴上的动画分成了几个独立播放的部分，但是具体播放哪段动画要由导航按钮来决独立播放的部分，但是具体播放哪段动画要由导航按钮来决定，具体的控制代码要添加在按钮对象上。选中定，具体的控制代码要添加在按钮对象上。选中“按钮按钮”图图层中的层中的“电子贺卡电子贺卡”按钮对象，单击鼠标右键执行按钮对象，单击鼠标右键执行【动作动作】命令，在脚本编辑器中输入如图命令，在脚本编辑器中

45、输入如图8-278-27所示的控制代码。所示的控制代码。图 8-27 电子贺卡按钮的脚本代码项目任务上一页下一页其中，on(rollOver)方法表示鼠标经过的时候要执行中的指令代码，“gotoAndPlay(2);”指令则表示要跳转到场景1的第2帧去播放动画，即开始播放“下拉01”菜单的动画。再按照相同的方法为其它三个导航按钮对象添加脚本代码，每个按钮对象上具体的脚本代码如图8-28所示。图 8-28 其它三个导航按钮的脚本代码项目任务上一页项目任务上一页下一页 在在FlashFlash中，用户除了可以使用自定义的按钮来实中，用户除了可以使用自定义的按钮来实现交互功能，也可以通过按钮、文本框

46、、单选按钮和现交互功能，也可以通过按钮、文本框、单选按钮和复选框等常用的组件来实现信息的交互。简单来说，复选框等常用的组件来实现信息的交互。简单来说，组件就是带有参数的影片剪辑，用户只需通过简单的组件就是带有参数的影片剪辑，用户只需通过简单的参数设置，以及编写参数设置，以及编写ActionScriptActionScript（3.03.0）代码，就能）代码，就能完成以前只有专业编程人员才能制作出的交互式动画完成以前只有专业编程人员才能制作出的交互式动画界面。下面我们就来认识几种制作用户交互界面中常界面。下面我们就来认识几种制作用户交互界面中常用的组件。用的组件。项目任务上一页下一页一、按钮组件

47、一、按钮组件ButtonButton Button组件为一个能够响应鼠标事件的标准按钮，它是许多表单和Web应用程序的基础部分。例如，要制作一个网页注册的表单，就可以使用Button组件来创建标准的“提交”按钮，而不必再自己创建按钮元件了。执行【窗口】【组件】命令打开组件面板，把组件面板中【User Interface】下的Button组件拖到舞台中，生成一个默认的Button按钮实例对象，如图8-29所示。图 8-29 组件面板和组件检查器面板 项目任务上一页下一页 执执行行【窗窗口口】【组组件件检检查查器器】命命令令打打开开【组组件件检检查查器器】面面板板，通通过过【参参数数】选选项项卡卡

48、可可以以设设置置”Button”Button”对对象象的的相相关关组组件件参参数数，此此外外通通过过属属性性面面板板可可以以设设置置按按钮钮的的大大小小、显显示示方方式式、外外观观样样式式等等参参数数。按按钮钮对对象象的的相相关关参参数数设设置置和和效效果如图果如图8-308-30所示。所示。图 8-30 按钮对象的参数设置和效果项目任务上一页下一页 按钮组件的参数选项功能如下按钮组件的参数选项功能如下：1 1emphasizedemphasized：设置当按钮处于弹起状态时，：设置当按钮处于弹起状态时，ButtonButton组件周围是组件周围是否绘有边框。否绘有边框。2 2enablede

49、nabled：用于设置按钮是否能够响应用户的点击操作，：用于设置按钮是否能够响应用户的点击操作，truetrue表表示按钮可以可用，示按钮可以可用，falsefalse表示按钮当前不可用。表示按钮当前不可用。3 3labellabel：用于设置按钮上的文本提示信息。：用于设置按钮上的文本提示信息。4 4labeIPlacementlabeIPlacement：用于设置按钮上的文本在按钮内的对齐方式。：用于设置按钮上的文本在按钮内的对齐方式。5 5selectedselected：:指定按钮是否处于选择状态，指定按钮是否处于选择状态，truetrue表示按钮按下，表示按钮按下，falsefals

50、e表示按钮未按下。表示按钮未按下。6 6toggletoggle：将按钮转变为切换开关。：将按钮转变为切换开关。truetrue表示按钮单击一次按下表示按钮单击一次按下后保持按下状态，再次单击才返回到弹起状态。后保持按下状态，再次单击才返回到弹起状态。falsefalse则表示与一则表示与一般按钮相同。般按钮相同。7.visible7.visible：设置按钮是否显示，：设置按钮是否显示，truetrue表示按钮可见，表示按钮可见，falsefalse表示表示按钮不可见。按钮不可见。项目任务上一页下一页 二、文本框组件二、文本框组件TextlnputTextlnput Textlnput Te