网页制作教程第11章.

交互与动画发布（时间：4次课，8学时）教学目标：ActionScript是Flash的脚本撰写语言，通过它可以为动画添加交互。当动画制作完之后，可以合成声音，并对其进行优化、输出和发布。本章将要重点学习如何为动画添加交互、合成声音，在此基础上还将学习动画的优化与发布，通过学习希望读者掌握按钮的制作方法和ActionScript行为语言的基本命令，了解动画的优化与发布设置，对Flash制作动画的整个过程有一个全面的认识。本章要点：1、按钮2、ActionScript3、动画控制4、动画声音效果5、动画的测试与发布第11章创建Flash交互与动画发布11.1创建基本交互动画11.2创建高级交互动画11.3合成动画声音效果11.4动画的发布11.5上机实训第11章创建Flash交互与动画发布创建基本交互动画使用【按钮元件】按钮可以创建用于响应鼠标单击、滑过或其他动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。11.1.1创建按钮11.1.2制作图形按钮11.1.3制作文字按钮11.1.4设定交互按钮是用来控制动画中的电影片段实现交互的一种特殊的符号，可以改变动画的播放顺序，控制动画的播放时间和速度，并可以随时进行控制。在Flash中，按钮的种类主要分两种，一种是普通按钮，通过鼠标单击来实现交互；另一种是隐形按钮，隐形按钮显示不出来，它只是一个可以被响应交互的区域，可以实现一些特殊的交互效果。11.1.1创建按钮按钮是3种元件类型之一，它不同于其他两种类型的元件，按钮实际上是四帧的交互影片剪辑。在菜单栏中选择【插入】→【新建元件】命令，在打开的对话框的【类型】选项区中点选【按钮】单选钮，单击【确定】按钮，创建一个【按钮】元件，Flash会创建一个包含四帧的时间轴，如图11-1所示。前3帧显示按钮的3种可能状态；第4帧定义按钮的活动区域。时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳转到相应的帧。要制作一个交互式按钮，可把该按钮元件的一个实例放在舞台上，然后给该实例指定动作。必须将动作分配给文档中按钮的实例，而不是分配给按钮时间轴中的帧。按钮元件时间轴上的每一帧都有一个特定的功能：1、第1帧是弹起状态，代表指针没有经过按钮时该按钮的状态；2、第2帧是指针经过状态，代表指针滑过按钮时该按钮的外观；3、第3帧是按下状态，代表单击按钮时该按钮的外观；4、第4帧是单击状态，定义响应鼠标单击的区域。此区域在输出的动画文件中是不可见的，它是制作隐形按钮的关键。图11-1按钮的四帧时间轴11.1.1创建按钮下面通过一个图形按钮的创建来了解按钮的制作方法，立体图形按钮的3种状态如图11-2所示，在弹起时为红色，鼠标经过时变成绿色，按下时变成蓝色。11.1.2制作图形按钮图11-2图形按钮的3种状态(1)新建一个按钮元件，进入按钮元件的编辑状态。(2)单击第1帧，单击工具箱中的【椭圆工具】按钮，在【属性】面板中设定边框颜色为“黑色”，大小为“1”，填充为“红色到黑色的放射状渐变”。按Shift键，绘制一个正圆，双击选中，单击工具栏中的【对齐】按钮，打开【对齐】面板。依次单击【相对于舞台】按钮、【水平中齐】按钮和【垂直中齐】按钮,使圆放置在舞台中央，如图11-3所示。图11-3在舞台中央绘制一个正圆11.1.2制作图形按钮(3)单击工具箱中的【渐变变形工具】按钮，选中正圆，将渐变的中心移动到右下角，如图11-4所示。(4)单击时间轴左下角的【插入图层】按钮，新建一个图层，将图层1的正圆复制、粘贴到新图层上。单击工具箱中的【任意变形工具】按钮，选中正圆，同时按Shift+Alt组合键，将图层2的正圆以中心等比例缩小，选择工具箱中的【填充变形工具】按钮，选中小圆，将渐变的中心移动到左上角，如图11-5所示。图11-4移动渐变中心11.1.2制作图形按钮图11-5移动小圆渐变中心(5)分别在图层1和图层2的第2帧上按F6键插入关键帧，分别将大圆和小圆的填充颜色改为“绿色到黑色的放射状渐变”。(6)分别在图层1和图层2的第3帧和第4帧上按F6键插入关键帧，分别将第3帧中大圆和小圆的填充颜色改为“蓝色到黑色的放射状渐变”。按Ctrl键同时选中图层1和图层2的第3帧，单击工具箱中的【任意变形工具】按钮，同时按Shift+Alt组合键，将按钮以中心等比例缩小，如图11-6所示。(7)单击工作区左上角的“场景1”，回到场景中。在菜单栏中选择【窗口】→【库】命令，打开【库】面板，将库面板中已创建的按钮元件拖入舞台中，按Ctrl+Enter组合键即可测试按钮。11.1.2制作图形按钮图11-6将按钮等比例缩小图11-6将按钮等比例缩小加入文字的按钮在前面制作的图形按钮上加入文字，如图11-7所示，在鼠标经过时文字变色，再按下时文字改为“GO”。通过本实例，可以使读者在制作中进一步熟悉按钮的修改编辑方法。(1)双击【库】面板中的按钮元件，进入按钮元件的编辑状态。(2)单击时间轴左下角的【插入图层】按钮，新建一个图层，单击工具箱中的【文本工具】按钮，在【属性】面板中设定文字大小为“16”，字体为“ArialBlack”，颜色为“白色”，输入文字“PLAY”。打开【对齐】面板，依次单击【相对于舞台】按钮、【水平中齐】按钮和【垂直中齐】按钮，使文字放置在图形元件的中间。(3)单击新图层的第2帧，按F6键创建一个关键帧，将文字的颜色改为“黄色”。(4)单击新图层的第3帧，按F6键创建一个关键帧，单击【文本工具】按钮，单击文字，将文字改为“GO”。(5)单击工作区左上角的“场景1”，回到场景中，按Ctrl+Enter组合键即可测试加入文字的图形按钮效果。11.1.3制作文字按钮作为一种脚本撰写语言，是Flash的重要功能之一，可以通过它给动画添加复杂的交互性、回放控制和数据显示等。ActionScript遵循自身的语法规则和保留关键字，并且允许使用变量存储和检索信息。ActionScript含有一个很大的内置类库，使用户可以通过创建对象来执行许多有用的任务。用户不需要了解每个ActionScript元素就可以开始撰写脚本，如果用户有明确的目标，则可通过简单的动作构建脚本。11.1.4设定交互(1)在菜单栏中选择【文件】→【打开】命令，打开方圆形变的动画。(2)选中第1帧，在菜单栏中选择【窗口】→【动作】命令，打开【动作-帧】面板，在面板中的下拉列表框中选择“ActionScript1.0&2.0”选项，双击【全局函数】→【时间轴控制】→【stop】选项，这时“停止”行为将添加到第1帧上，如图11-8所示，在右侧的编写视窗中就会显示出标准的脚本语句。11.1.4设定交互图11-8【动作-帧】面板(3)单击时间轴左下角的【插入图层】按钮，新建一个图层，在【库】面板的下拉列表框中选择按钮的源文件，这时就可以打开按钮的【库】面板，如图11-9所示。将按钮元件拖放到舞台的右下角，这样就可以在现在的动画中使用另一个已打开动画的元件了。(4)单击按钮，在【属性】面板中将按钮实例命名为“button”，如图11-10所示。图11-9打开按钮的【库】面板11.1.4设定交互图11-10给按钮实例命名(5)右击带有“a”标示的第1帧，在菜单栏中选择【窗口】→【动作】命令，打开【动作-帧】面板，在右侧脚本区中输入如图11-11所示语句。11.1.4设定交互图11-11在动作脚本区中输入语句(6)按Ctrl+Enter组合键测试动画，动画停在第1帧。当鼠标进入按钮时，按钮变色，单击按钮时播放动画。如果要给按钮加上一个链接网址的交互行为，上述脚本应改为：functionGoToURL(event:MouseEvent){varurl=newURLRequest(*.com/)navigateToURL(url)}button.addEventListener(MouseEvent.MOUSE_DOWN,GoToURL)11.1.4设定交互的编程方法，可以在菜单栏中选择【文件】→【发布设置】命令，弹出【发布设置】对话框。将【Flash】选项卡的ActionScript版本设定为“ActionScript2.0”，单击【确定】按钮，这样就可以直接给按钮添加语句了。给按钮添加的语句如图11-12所示。单击按钮语句的第一行，打开【脚本助手】，如图11-13所示，按钮有8种状态，分别是鼠标按下(Press)、释放鼠标(Release)、在外部释放鼠标(ReleaseOutside)、键盘按键(KeyPress)、鼠标滑过(RollOver)、鼠标滑离(RollOut)、鼠标拖过(DragOver)和鼠标脱离(DragOut)。11.1.4设定交互图11-13按钮的8种状态图11-12给按钮添加的语句动作脚本中提供了一些诸如动作、运算符以及对象等元素，可将这些元素组织到脚本中，指示影片要执行什么操作，控制影片剪辑、按钮等。大多数动作只需要少量的编程经验，对于初学者而言并不难掌握，而有些动作可能需要对编程语言比较熟悉之后才能达到预期的效果，需要经过长期的学习和摸索才行。为了方便初学者学习，作者在发布设置中选择ActionScript2.0版本。11.2创建高级交互动画11.2.1影片剪辑控制脚本11.2.2浏览器/网络控制脚本通过影片剪辑控制脚本可以对影片剪辑进行各种操作控制，下面以第10章讲过的“探照灯”蒙版动画为例，通过脚本使蒙版可以随鼠标任意移动，如图11-14所示。11.2.1影片剪辑控制脚本图11-14蒙版随鼠标移动效果(1)在菜单栏中选择【文件】→【打开】命令，打开“探照灯”动画文件。右击蒙版层，在弹出的右键快捷菜单中取消【遮罩层】选项。单击【锁】按钮，进行解锁。分别右击第15帧和第30帧的关键帧，在弹出的右键快捷菜单中选择【清除关键帧】命令，取消两个关键帧。在任一帧上右击，在弹出的右键快捷菜单中选择【删除补间】命令，删除蒙版层的动画，时间轴如图11-15所示。(2)单击椭圆蒙版,在【属性】面板中将元件的类型改为【影片剪辑】，将实例命名为“mask”，如图11-16所示。11.2.1影片剪辑控制脚本图11-15删除补间之后的时间轴图11-16【属性】面板(4)在图层3的名称上右击，在弹出的右键快捷菜单中选择【遮罩层】命令，使椭圆变成遮罩层。(5)按下Ctrl+Enter组合键测试动画，拖动鼠标蒙版随之移动，鼠标始终保持在蒙版椭圆的中央，如图11-14所示。11.2.1影片剪辑控制脚本图11-14蒙版随鼠标移动效果通过这个鼠标拖动蒙版的动画实例可以了解影片剪辑控制的基本