《件和交互动画》PPT课件.ppt
《《件和交互动画》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《件和交互动画》PPT课件.ppt(56页珍藏版)》请在三一办公上搜索。
1、第5章 元件和交互动画,本章要点 5.1 图形元件和影片剪辑元件 5.2 创建和测试按钮元件 5.3“动作”面板、事件和全局函数1 5.4 ActinScript基本语法 5.5 全局函数2 5.6 层次结构和全局函数3 5.7 全局函数4,5.1 图形元件和影片剪辑元件,5.1.1 创建图形元件和影片剪辑元件1将舞台工作区中的对象转换为元件(1)单击选中舞台工作区中的对象。单击“修改”“转换为元件”菜单命令或按F8键,调出“转换为元件”对话框,如图5-1-1所示。图5-1-1“转换为元件”对话框(2)在“名称”文本框内输入元件的名称(例如:元件1);在“行为”栏内选择元件类型;单击中的小方块
2、,调整元件的中心(黑色小方块所在处表示是元件的中心坐标位置),单击“确定”按钮,即将选中的对象转换为元件。“库”面板内会增加一个名字为“元件1”的元件,同时选中的对象会自动变为该元件的实例。,5.1 图形元件和影片剪辑元件,图5-1-1“转换为元件”对话框,5.1 图形元件和影片剪辑元件,2将外部的GIF动画转换为图形或影片剪辑元件(1)单击“插入”“新建元件”菜单命令,调出“创建新元件”对话框。(2)在“创建新元件”对话框的“名称”文本框内输入元件的名字(如输入“元件1”),选择元件类型。此处选择“影片剪辑”。再单击“确定”按钮,即可进入元件编辑窗口。(3)单击“文件”“导入”“导入到舞台”
3、菜单命令,调出“导入”对话框,选择一个GIF或AVI动画,导入元件编辑区中。此时,时间轴上会在前几个帧单元格内出现黑点(关键帧)和灰色帧单元格。导入一个GIF动画后的时间轴与舞台工作区如图5-1-2所示。4)如果需要,应调整各帧的位置,使它们的中心与元件编辑窗口内的十字标记对齐。操作方法如下。,5.1 图形元件和影片剪辑元件,图5-1-2 在元件编辑窗口中导入GIF动画 图5-1-3“信息”面板设置,5.1 图形元件和影片剪辑元件,3将舞台工作区中的动画转换为图形或影片剪辑元件(1)选取动画的所有帧。单击鼠标右键,调出帧快捷菜单,单击帧快捷菜单内的“复制帧”菜单命令,将选中的所有帧复制到剪贴板
4、中。(2)单击“插入”“新建元件”菜单命令,调出“创建新元件”对话框。(3)在该对话框内,输入元件名字(例如“动画1”),选择元件类型,再单击“确定”按钮。此时,“库”面板中增加了一个名字为“动画1”的元件,但它还是一个空元件,没有内容。同时舞台工作区切换到元件编辑窗口。(4)单击选中帧控制区域内第1帧,再单击鼠标右键,调出帧快捷菜单。单击该菜单内的“粘贴帧”菜单命令,将剪贴板内的所有帧粘贴到元件编辑窗口内。(5)单击元件编辑窗口中的场景名称图标,回到主场景。,5.1 图形元件和影片剪辑元件,5.1.2 编辑元件和编辑实例1编辑元件在创建了若干元件实例后,可能需要编辑修改。元件经过编辑后,F1
5、ash会自动更新它在影片中的所有实例。编辑元件可以采用许多方法,介绍如下。(1)双击“库”面板中的一个元件,即可调出元件编辑窗口。在舞台工作区内,将鼠标指针移到要编辑的元件实例处,单击鼠标右键,调出实例快捷菜单,单击该菜单内的“编辑”菜单命令,也可以调出元件编辑窗口。进行元件编辑后,单击元件编辑窗口中的场景名称图标,回到主场景。(2)在舞台工作区内,将鼠标指针移到要编辑的元件实例(例如:按钮元件实例)处,单击鼠标右键,调出实例快捷菜单,单击该菜单内的“在当前位置编辑”菜单命令,此时,仍在原舞台工作区中,而且保留原工作区的其他对象(不可编辑,只供参考)。进行元件编辑后,双击舞台工作区的空白处,即
6、可退出编辑状态,回到原状态。双击舞台工作区内的元件实例也可进入这种元件编辑状态。(3)单击实例快捷菜单中的“在新窗口中编辑”菜单命令,打开一个新的舞台工作区窗口,可在该窗口内编辑元件。单击该工作区右上角的按钮,即可回到原舞台工作区。,5.1 图形元件和影片剪辑元件,2编辑实例编辑实例,可以采用前面介绍过的编辑修改一般对象的方法。此外,每个实例都有自己的属性,利用它的“属性”面板可以改变实例的位置、大小、颜色、亮度、透明度等属性,还可以改变实例的类型,设置图形实例中动画的播放模式等。实例属性的编辑修改,不会造成对相应元件和其他由同一元件创建的其他实例的影响。对于舞台工作区内元件的实例,其“属性”
7、面板中会增加一个“颜色”下拉列表框等。利用它们可以设置实例的颜色、亮度、色调和透明度等。实例“属性”面板中的“颜色”下拉列表框内有五个选项。如果选中“没有”选项,则表示不进行实例颜色的设置。选择其他选项后的颜色设置方法如下。(1)亮度的设置:在实例“属性”面板中“颜色”下拉列表框内选择“亮度”选项后,会在“颜色”下拉列表框右边增加一个带滑动条的文本框,如图5-1-4所示。用鼠标拖曳文本框的滑块或在文本框内输入数据(从100%到+100%),均可调整实例的亮度。图5-1-5左图所示实例图像按照图5-1-4所示改变亮度后的效果如图5-1-5右图所示。,5.1 图形元件和影片剪辑元件,图5-1-4
8、选择“亮度”选项 图5-1-5 改变亮度后的实例图像,5.1 图形元件和影片剪辑元件,(2)透明度的设置:在实例“属性”面板中的“颜色”下拉列表框内选择“Alpha”选项后,会在“颜色”下拉列表框右边增加一个带滑动条的文本框,如图5-1-6所示。用鼠标拖曳文本框的滑块或在文本框内输入数据,可以改变实例的透明度,如图5-1-7所示(可以通过七彩矩形图形实例图像可以看到下面的图像)。,图5-1-6 选择“Alpha”选项,图5-1-7 改变实例的透明度,5.1 图形元件和影片剪辑元件,(3)色调的设置:在实例“属性”面板中的“颜色”下拉列表框内选择“色调”选项后,会在“颜色”下拉列表框右边增加几个
9、带滑动条的文本框和一个按钮,如图5-1-8所示。单击按钮,会调出“颜色”面板,利用它可以改变实例的色调。用鼠标拖曳按钮右边文本框的滑块或在文本框内输入百分比数据,可用来调整着色(即掺色)比例(0%到100%)。用鼠标拖曳RGB栏内文本框的滑块或在文本框内输入数据,也可以改变实例的色调。“R、G、B”后面的三个文本框分别代表红、绿、蓝三原色的值。(4)高级设置:在实例“属性”面板中的“颜色”下拉列表框内选择“高级”选项后,会在“颜色”下拉列表框右边增加一个“设置”按钮。单击“设置”按钮,即可调出“高级效果”面板,如图5-1-9所示。利用该面板可以调整实例的色调和透明度等。,5.1 图形元件和影片
10、剪辑元件,图5-1-8 选择“色调”选项 图5-1-9“高级效果”面板,5.1 图形元件和影片剪辑元件,5.1.3 实例“属性”面板的其他作用图形实例和影片剪辑实例的特性在许多方面是一样的,例如前面提到的编辑实例的方法,不但适用于影片剪辑实例,而且适用于图形实例,它们“属性”面板内有一些共同的选项,也有一些不同的选项。当选择“影片剪辑”选项时,该面板如图5-1-10所示。当选择“图形”选项时,该面板如图5-1-11所示。,图5-1-10 影片剪辑实例的“属性”面板 图5-1-11 图形实例的“属性”面板,5.1 图形元件和影片剪辑元件,1共同部分的选项它们都有“元件行为”下拉列表框、“颜色”下
11、拉列表框、左下角的四个用来精确确定实例大小与位置的四个文本框和“交换”按钮。利用它们可以改变实例的类型、调整实例的颜色和透明度、调整实例的大小和位置、调出“交换元件”对话框。(1)“元件行为”下拉列表框:该下拉列表框中有三个选项:影片剪辑、图形和按钮,选择不同选项,可以实现实例类型的转换,实例的“属性”面板也会随之改变。(2)“实例名称”文本框:用来输入影片剪辑或按钮实例的名称,这个名称可以在程序中使用。只有影片剪辑和按钮实例才有此文本框。(3)“交换”按钮:单击它,可调出“交换元件”对话框,如图5-1-12所示。在对话框中间的列表框中会显示出动画的所有元件的名称和图标,其左边有一个小黑点的元
12、件是当前选中的元件实例。单击这些元件的名称或图标,即可在对话框内左上角显示出相应元件的外形。,5.1 图形元件和影片剪辑元件,图5-1-12“交换元件”面板 图5-1-13“辅助选项”面板,5.1 图形元件和影片剪辑元件,2图形实例特有的选项(1)“图形选项”下拉列表框:只有在图形元件实例的“属性”面板中才有“图形选项”下拉列表框,它在“交换”按钮的右边,用来选择动画的播放模式。它有“循环”(循环播放)、“播放一次”(只播放一次)和“单帧”(只显示第1帧)三个选项。(2)“第一帧”文本框:用来输入动画首先从第几帧开始播放。只有图形实例才有它。,5.2创建和测试按钮元件,5.2.1 创建按钮1按
13、钮元件的四个状态在Flash影片中可以有按钮,按钮也是对象,当鼠标指针移到按钮之上或单击按钮时,即产生交互事件,按钮会改变它的外观。要使一个按钮在影片中具有交互性,需要先制作按钮元件,再由按钮元件创建按钮实例,并在制作按钮实例时为它分配对交互事件产生的动作。在Flash MX 2004中,按钮有四个状态,这四个状态的特点如下。(1)“弹起”(即Up)状态:鼠标指针没有移到按钮之上时的按钮状态。(2)“指针经过”(即Over)状态:鼠标指针移到按钮上面,但没有单击时的按钮状态。(3)“按下”(即Down)状态:用鼠标单击按下按钮时的按钮状态。(4)“点击”(即Hit)状态:在此状态下可以定义鼠标
14、事件的响应范围和鼠标事件的动作。如果没有设置“点击”状态的区域,则鼠标事件的响应范围由“弹起”状态的按钮外观区域决定。“点击”帧的图形在影片中是不显示的。,5.2创建和测试按钮元件,2创建按钮(1)单击“插入”“新建元件”菜单命令,调出“创建新元件”对话框。在该对话框内,输入元件的名字(例如:“按钮1”),选择“按钮”类型。单击“确定”按钮,切换到按钮元件编辑状态,时间轴的“图层1”图层中显示4个连续的帧,如图5-2-1所示。用户需要在这四个帧中分别创建相应的按钮外观,可以导入图形、图像、文字,影片剪辑或图形元件实例等,但不能在一个按钮中再使用按钮元件。最好使用“信息”面板将按钮图形精确定位,
15、使图形的中心与十字标记对齐,并记下它的坐标值。要制作动画按钮,可以使用动画的影片剪辑或图形元件。(2)用鼠标单击选中第l帧(弹起),再制作按钮“弹起”状态的外观。(3)单击选中第2帧(指针经过),再按F6键,使第2帧成为关键帧并复制了第l帧的按钮外观,改变第2帧的对象,作为鼠标指针经过时的按钮外观。另外,可以按F7键,使第2帧成为空白关键帧,重新创建一个新对象,作为鼠标指针经过时的按钮外观。(4)单击选中第3帧,按照上述方法,制作鼠标按下状态的按钮外观。然后,单击选中第4帧,绘制一个图形,用来确定鼠标事件的响应范围。(5)单击元件编辑窗口中的场景名称图标,回到主场景。可以看到“库”面板中已有了
16、刚刚制作的按钮元件。从“库”面板中将它拖曳到工作区中,即可创建按钮实例。按钮各种状态不但可以是图形,还可以是图像、文字和动画(影片剪辑或图形实例)等。还可以在按钮中插入声音。按钮的每一帧可以由多个图层组成。,5.2创建和测试按钮元件,图5-2-1 按钮元件编辑窗口,5.2创建和测试按钮元件,2按钮实例的“属性”面板按钮实例的“属性”面板如图5-2-2所示。“属性”面板内主要选项的作用前面已经介绍了。该“属性”面板中特有的选项是“按钮选项”下拉列表框。它是用来选择按钮的跟踪模式。它有“音轨作为按钮”和“音轨作为菜单项”两个选项。只有按钮实例才有此下拉列表框。,5.2创建和测试按钮元件,图5-2-
17、2 按钮元件实例的“属性”面板,5.3“动作”面板、事件和全局函数1,5.3.1“动作”面板 1“动作”面板特点“动作”面板有三个区域:命令列表区、程序编辑区和位置列表区。下面以帧的“动作-帧”面板为例(参看图5-3-1),介绍其中一些按钮的作用。图5-3-1“动作-帧”面板(1)“收缩/展开面板”按钮:单击它或它所在的栏,可以使“动作”面板收缩或展开。(2)位置列表区:它给出了当前选择的关键帧、按钮或影片剪辑实例的有关信息(所在图层、关键帧名称、按钮和影片剪辑元件名称及实例名称等)。在加入脚本程序后,还可以在该列表区中选择帧、按钮或实例对象,同时在程序编辑区内显示相应的脚本程序。(3)命令列
18、表区:其内有12个文件夹,和一个索引文件夹,单击可以展开文件夹。文件夹内有下一级的文件夹或命令,双击命令或用鼠标拖曳命令到程序编辑区内,都可以在程序区内导入相应的命令。这里所说的命令是指程序中的运算符号、函数、语句、属性等的统称。将鼠标指针移到命令之上,单击鼠标右键,调出它的快捷菜单,再单击该菜单中的“查看帮助”菜单命令,即可调出该命令的帮助信息。,5.3“动作”面板、事件和全局函数1,图5-3-1“动作-帧”面板,5.3“动作”面板、事件和全局函数1,2辅助按钮的作用(1)“将新项目添加到脚本中”按钮:单击它,可以弹出如图5-3-2所示的菜单,再单击该菜单命令,即可将相应的命令添加到程序编辑
19、区内。,图5-3-2 命令菜单 图5-3-3“查找”对话框,5.3“动作”面板、事件和全局函数1,(2)“查找”按钮:单击它,可以调出“查找”对话框,如图5-3-3所示。在“查找到”文本框内输入要查找的字符串,再单击“查找下一个”按钮,即可选中程序中要查找的字符串。单击选中“区分大小写”复选框,则在查找时区分大小写。(3)“替换”按钮:单击它,可以调出“替换”对话框,如图5-3-4所示。在“查找到”文本框内输入要查找的字符串,在“替换为”文本框内输入要替换的字符串。然后,单击“继续查找”按钮,即可选中程序中的该字符串;单击“替换”按钮,即可进行一个字符串的替换;单击“全部替换”按钮,即可进行所
20、有查找到的字符串的替换。(4)“插入目标路径”按钮:单击它,可以调出“插入目标路径”对话框,如图5-3-5所示。在该对话框中可以选择路径的方式、路径的符号和对象的路径。,5.3“动作”面板、事件和全局函数1,图5-3-4“替换”对话框 图5-3-5“插入目标路径”对话框,5.3“动作”面板、事件和全局函数1,3“动作”面板快捷菜单单击“动作”面板的快捷菜单按钮,可调出“动作”面板的快捷菜单。其中一些菜单命令的作用与辅助按钮栏按钮的作用一样,其他菜单命令的作用如下。(1)“自动套用格式选项”:单击它,可调出“自动格式选项”对话框,如图5-3-10所示。利用该对话框,可以设置程序的格式。(2)“首
21、选项”:单击它,可调出“首选参数”(动作脚本)对话框,如图5-3-11所示。利用它可以进行动作脚本的默认状态和参数的设置。,5.3“动作”面板、事件和全局函数1,图5-3-10“自动格式设置”对话框 图5-3-11“首选参数”(动作脚本)对话框,5.3“动作”面板、事件和全局函数1,5.3.2 设置事件与动作1什么是事件与动作交互式动画的一个行为包含了两个内容,一个是事件,一个是事件产生时所执行的动作。事件是触发动作的信号,动作是事件的结果。在Flash MX 2004中,播放指针到达某个指定的关键帧、用户单击按钮或影片剪辑元件、用户按下了键盘按键等操作,都可以触发事件。动作可以有很多,可由读
22、者发挥创造。可以认为动作是由一系列的语句组成的程序。最简单的动作是使播放的动画停止播放,使停止播放的动画重新播放等。事件的设置与动作的设计是通过“动作”面板来完成的。,5.3“动作”面板、事件和全局函数1,2设置帧事件与设计动作帧事件就是当影片或影片剪辑播放到某一帧时的事件。注意:只有关键帧才能设置事件。例如,如果要求上述的动画播放到第20帧时停止播放,那么就可以在第20帧创建一个关键帧,再设置一个帧事件,它的响应动作是停止动画的播放。操作的方法如下。(1)在时间轴中,单击选中第20帧单元格,按F6键,将该帧设置为关键帧。(2)单击选中该关键帧单元格,单击“窗口”“开发面板”“动作”菜单命令,
23、调出“动作-帧”面板。(3)用鼠标将“动作-帧”面板左边命令列表区内“全局函数”“时间轴控制”目录下的stop命令选项拖曳到右边程序编辑区内。这时面板右边程序编辑区内会显示出相应的程序:“stop()”。也可以单击按钮,调出一个菜单,再单击“全局函数”“时间轴控制”“stop”菜单命令。,5.3“动作”面板、事件和全局函数1,5.3.3 按钮事件和按键事件1设置按钮事件、按键事件与动作单击选中舞台工作区内的一个按钮实例对象,“动作”面板即可变为“动作-按钮”面板。可以看出它与“动作-帧”面板(如图5-3-1所示)基本一样。用鼠标将“动作-按钮”面板左边命令列表区内“全局函数”“影片剪辑控制”目
24、录下的on命令拖曳到右边程序编辑区内。这时面板右边程序编辑区内会弹出如图5-3-12所示的按钮和按键事件命令菜单。双击该菜单中的选项,可以在on命令的括号内加入按钮事件与按键事件命令。例如:双击press命令后,程序编辑区内的程序如图5-3-13所示。在press命令右边输入英文字符“,”后,单击辅助按钮栏内的“显示代码提示”按钮,即可调出如图5-3-12的按钮和按键事件命令菜单,双击该菜单中的keyPress 命令,即可再加入按键事件命令。此时,程序编辑区内的程序如图5-3-14所示。可见该按钮可以响应两个或多个事件命令。,5.3“动作”面板、事件和全局函数1,图5-3-12 加入on命令效
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 件和交互动画 交互 动画 PPT 课件
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-5627532.html