《网页动画设计与制作FlashMX2004 项目9-Actions行为的使用.ppt》由会员分享，可在线阅读，更多相关《网页动画设计与制作FlashMX2004 项目9-Actions行为的使用.ppt（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页动画设计与制作Flash项目九项目九 Actions行为的使用行为的使用项目九项目九 Actions行为的使用行为的使用【项目背景项目背景项目背景项目背景】公司经理要求小张为一家电子商务网站制作一些具有动感的菜单。一种菜单要求先显示“一级菜单”，当“一级菜单”被按下时，“二级菜单”呈下拉式状态显示出来；再一次按下“一级菜单”时，二级菜单被拉回。还有一种菜单要求先显示若干个按钮，当鼠标经过按钮时，菜单以动感的方式出现。【项目分析项目分析】1有动感的菜单一般利用什么方法来设计？2Flash动作脚本的学习该如何下手？3Flash动作脚本的综合利用必须从什么地方开始？【任务分解任务分解】任务1：设
2、置按钮动作。任务2：设置帧动作。任务3：使用常用Actions语句。任务任务1 设置按钮动作设置按钮动作 了解为按钮设置动作的方法。了解常用的鼠标对应事件。利用按钮制作一级菜单。利用按钮制作二级菜单。选择配合动画设计涉及的函数与事件。为按钮添加动作。1了解为按钮设置动作的方法了解为按钮设置动作的方法（1 1）选中舞台上需要设置动作的按钮。）选中舞台上需要设置动作的按钮。（2 2）打开）打开“动作动作”面板。面板。（3 3）在）在“动作动作”面板的面板的“动作工具箱动作工具箱”中，中，双击双击“全句函数全句函数”“”“影片剪辑控制影片剪辑控制”“”“on”on”项，此时在脚本窗口中将会出现一项，
3、此时在脚本窗口中将会出现一条语句：条语句：on()on()同时有一个下拉菜单，内有鼠标所对应的事件，同时有一个下拉菜单，内有鼠标所对应的事件，可进行选择与填写可进行选择与填写 2了解常用的鼠标对应事件了解常用的鼠标对应事件 （1 1）presspress：当用户单击按钮时响应事件。：当用户单击按钮时响应事件。（2 2）releaserelease：当用户单击按钮后释放鼠标时响应事：当用户单击按钮后释放鼠标时响应事件。件。（3 3）releaseOutsidereleaseOutside：当用户单击按钮后在按钮外释：当用户单击按钮后在按钮外释放鼠标时响应事件。放鼠标时响应事件。（4 4）roll
4、OverrollOver：当用户鼠标从按钮外滑入按钮内时响：当用户鼠标从按钮外滑入按钮内时响应事件。应事件。（5 5）rollOutrollOut：当用户鼠标从按钮内滑出按钮外时响应：当用户鼠标从按钮内滑出按钮外时响应事件。事件。（6 6）dragOverdragOver：当用户鼠标在按钮内时按下鼠标，然：当用户鼠标在按钮内时按下鼠标，然后滑出此按钮，再滑回此按钮时响应事件。后滑出此按钮，再滑回此按钮时响应事件。（7 7）dragOutdragOut：当用户鼠标在按钮内时按下鼠标，然：当用户鼠标在按钮内时按下鼠标，然后滑出此按钮时响应事件。后滑出此按钮时响应事件。3利用按钮制作一级菜单利用按钮
5、制作一级菜单 （1 1）单击工具栏上的）单击工具栏上的“新建新建”按钮，新建一个按钮，新建一个FLAFLA文件。文件。（2 2）执行）执行“插入插入”“”“新建元件新建元件”命令，打开命令，打开“创建新元件创建新元件”对话框，在对话框中设置名称为对话框，在对话框中设置名称为“first”first”，行为为，行为为“按钮按钮”，单，单击击“确定确定”按钮，进入按钮，进入firstfirst按钮元件的编辑环境。按钮元件的编辑环境。（3 3）单击工具箱中的）单击工具箱中的“矩形工具矩形工具”，依次单击颜色区的，依次单击颜色区的“笔触笔触式式”工具按钮和工具按钮和“无色无色”钮，设置笔触颜色为无色。
6、钮，设置笔触颜色为无色。（4 4）打开）打开“混色器混色器”面板，进行相关的设置。面板，进行相关的设置。（5 5）单击工具箱选项区中的）单击工具箱选项区中的“圆角矩形半径圆角矩形半径”按钮，弹出按钮，弹出“矩矩形设置形设置”对话框，在对话框中设置边角半径为对话框，在对话框中设置边角半径为1010点。点。（6 6）单击）单击“确定确定”按钮回到舞台，在舞台上绘制一个大小合适按钮回到舞台，在舞台上绘制一个大小合适的圆角矩形。的圆角矩形。（7 7）执行）执行“窗口窗口”“”“设计面板设计面板”“”“对齐对齐”命令，打开命令，打开“对对齐齐”面板。面板。（8 8）选中圆角矩形，分别单击）选中圆角矩形，
7、分别单击“对齐对齐”面板上的面板上的“相对于舞台相对于舞台”按钮、按钮、“水平中齐水平中齐”按钮和按钮和“垂直中齐垂直中齐”按钮，使圆角矩形对按钮，使圆角矩形对齐至舞台中心点。齐至舞台中心点。（9 9）单击工具箱中的文本工具，在属性面板中进行相关的字体、）单击工具箱中的文本工具，在属性面板中进行相关的字体、字号等的设置。字号等的设置。（1010）在圆角矩形合适的位置输入）在圆角矩形合适的位置输入“一级菜单一级菜单”。（1111）最后在时间轴上分别插入关键帧）最后在时间轴上分别插入关键帧 4利用按钮制作二级菜单利用按钮制作二级菜单（1 1）执行）执行“插入插入”“”“新建元件新建元件”命令，打开
8、命令，打开“创建新元创建新元件件”对话框，在对话框中设置名称为对话框，在对话框中设置名称为“second”second”，行为为，行为为“按钮按钮”。（2 2）单击）单击“确定确定”按钮，进入按钮，进入secondsecond按钮元件的编辑环境。按钮元件的编辑环境。（3 3）单击工具箱中的）单击工具箱中的“矩形工具矩形工具”，依次单击颜色区的，依次单击颜色区的“笔触式笔触式”工具按钮和工具按钮和“无色无色”钮，设置笔触颜色为无色。钮，设置笔触颜色为无色。（4 4）打开）打开“混色器混色器”面板，进行相关设置。面板，进行相关设置。（5 5）在舞台上绘制一个大小合适的矩形。执行）在舞台上绘制一个大
9、小合适的矩形。执行“窗口窗口”“”“设计面板设计面板”“”“对齐对齐”命令，打开命令，打开“对齐对齐”面板，如面板，如图图9-69-6所示。所示。（6 6）选中矩形，分别单击）选中矩形，分别单击“对齐对齐”面板上的面板上的“相对于舞台相对于舞台”按钮、按钮、“水平中齐水平中齐”按钮和按钮和“垂直中齐垂直中齐”按钮，则矩形对按钮，则矩形对齐至舞台中心点。齐至舞台中心点。（7 7）单击工具箱中的文本工具，在属性面板中设置文字大）单击工具箱中的文本工具，在属性面板中设置文字大小略小于小略小于“一级菜单一级菜单”，在矩形合适的位置输入文本，在矩形合适的位置输入文本“二级二级菜单菜单”。（8 8）最后在
10、时间轴上分别在）最后在时间轴上分别在“弹起弹起”、“指针经过指针经过”、“按下按下”插入关键帧。插入关键帧。5选择配合动画设计涉及的函数选择配合动画设计涉及的函数与事件与事件（1 1）执行）执行“插入插入”“”“新建元件新建元件”命令，打开命令，打开“创建新元件创建新元件”对话对话框，在对话框中设置行为为框，在对话框中设置行为为“影片剪辑影片剪辑”，名称为，名称为“menu”menu”。（2 2）单击）单击“确定确定”按钮进入按钮进入menumenu影片剪辑的编辑环境。影片剪辑的编辑环境。（3 3）在时间轴上建立四个图层，名称分别为）在时间轴上建立四个图层，名称分别为firstfirst、se
11、condsecond、maskmask、actionaction。（4 4）选中）选中firstfirst图层第图层第1 1帧，插入按钮元件帧，插入按钮元件firstfirst，并使其延续，并使其延续4040帧。帧。（5 5）选中）选中secondsecond图层第图层第1 1帧插入四个按钮元件帧插入四个按钮元件secondsecond，并将其组合，并将其组合，同样延续同样延续4040帧。帧。（6 6）选中）选中maskmask图层第一帧，单击工具箱中的图层第一帧，单击工具箱中的“矩形工具矩形工具”，依次，依次单击颜色区的单击颜色区的“笔触式笔触式”工具按钮和无色钮，设置笔触颜色为无色。工具按
12、钮和无色钮，设置笔触颜色为无色。在舞台上绘制一个大小合适的矩形。在舞台上绘制一个大小合适的矩形。（7 7）在）在maskmask图层的第图层的第2020帧插入关键帧，将矩形覆盖在帧插入关键帧，将矩形覆盖在“二级菜单二级菜单”上，将第上，将第2020帧复制到第帧复制到第2121帧，在第帧，在第4040帧插入关键帧。帧插入关键帧。（8 8）单击）单击actionaction图层的第一帧，为其添加帧动作脚本语句：图层的第一帧，为其添加帧动作脚本语句：stop();stop();（9 9）在第）在第2020帧插入关键帧，单击此帧，同样添加帧动作脚本语句：帧插入关键帧，单击此帧，同样添加帧动作脚本语句：
13、stop();stop();（1010）在第）在第4040帧插入关键帧帧插入关键帧6为按钮添加动作为按钮添加动作（1 1）选中）选中firstfirst按钮图层，在第按钮图层，在第2020帧插入关键帧。帧插入关键帧。（2 2）选中第）选中第1 1帧，打开帧，打开“动作动作”面板，单击面板，单击firstfirst按钮，按钮，并为其添加动作脚本语句：并为其添加动作脚本语句：on(releaseon(release)goAndPlay(2);goAndPlay(2);（3 3）选中第）选中第2020帧，单击帧，单击firstfirst按钮，同样为其添加动作按钮，同样为其添加动作脚本语句：脚本语句：
14、on(releaseon(release)goAndPlay(20);goAndPlay(20);（4 4）选中第）选中第4040帧，为其添加帧动作脚本语句帧，为其添加帧动作脚本语句goAndPlay(1);goAndPlay(1);任务任务2 设置帧动作设置帧动作 熟悉添加帧动作脚本的方法。利用帧动作设计基本的动感菜单。改进动感菜单的设计。1熟悉添加帧动作脚本的方法熟悉添加帧动作脚本的方法（1）单击某一关键帧。（2）打开“动作”面板。（3）在“动作”面板的动作工具箱中，选择需要的动作（或方法）或者直接在“动作”面板右边的脚本窗口中输入脚本。设置好动作的关键帧上将有一个字母标记“a”，2利用帧
15、动作设计基本的动感菜利用帧动作设计基本的动感菜单单1（1 1）单击工具栏上的）单击工具栏上的“新建新建”按钮，新建一个按钮，新建一个FLAFLA文件。文件。（2 2）设置背景颜色为深灰色。）设置背景颜色为深灰色。（3 3）执行）执行“插入插入”“”“新建元件新建元件”命令，打开命令，打开“创建新元件创建新元件”对话框，对话框，在对话框中设置名称为在对话框中设置名称为“menu1”menu1”，行为为，行为为“按钮按钮”。（4 4）单击）单击“确定确定”按钮，进入按钮，进入menu1menu1按钮元件的编辑环境。按钮元件的编辑环境。（5 5）单击工具箱中的）单击工具箱中的“文字工具文字工具”，单
16、击颜色区的，单击颜色区的“笔触式笔触式”工具按工具按钮，设置笔触颜色为白色，宋体，钮，设置笔触颜色为白色，宋体，1818磅。磅。（6 6）在舞台区域输入文字）在舞台区域输入文字“MENU1”MENU1”，并选中将其对齐设置为水平、，并选中将其对齐设置为水平、垂直居中。垂直居中。（7 7）分别在）分别在“指针经过指针经过”、“按下按下”、“点击点击”处插入关键帧，并修处插入关键帧，并修改这些帧，使文字改为红色。改这些帧，使文字改为红色。（8 8）重复上述步骤，分别制作）重复上述步骤，分别制作menu2menu2、menu3menu3、menu4menu4按钮元件。按钮元件。（9 9）执行）执行“
17、插入插入”“”“新建元件新建元件”命令，打开命令，打开“创建新元件创建新元件”对话框，对话框，在对话框中设置名称（动感文字）与行为（影片剪辑）。在对话框中设置名称（动感文字）与行为（影片剪辑）。（1010）单击）单击“确定确定”按钮，进入按钮，进入“动感文字动感文字”影片的编辑环境。影片的编辑环境。2利用帧动作设计基本的动感菜利用帧动作设计基本的动感菜单单2（1111）在时间轴窗口分别创建四个图层，将按钮元件）在时间轴窗口分别创建四个图层，将按钮元件放置在对应的图层中，并在舞台上设置各按钮元件。放置在对应的图层中，并在舞台上设置各按钮元件。（1212）分别选中相应图层的第）分别选中相应图层的第
18、1010帧，插入关键帧。帧，插入关键帧。（1313）选中）选中menu1menu1图层的第图层的第1010帧，将按钮元件帧，将按钮元件menu1menu1向上移动向上移动8080个单位。个单位。（1414）重复本步骤将另三个按钮相应向上移动，并分）重复本步骤将另三个按钮相应向上移动，并分别在四个图层上创建补间动画。别在四个图层上创建补间动画。（1515）将各个图层的补间按图所示设置。）将各个图层的补间按图所示设置。（1616）新建图层）新建图层“action”action”，选中第，选中第2323帧，插入空白帧，插入空白关键帧。关键帧。（1717）选择图层）选择图层“action”action
19、”的第的第2323帧，打开帧，打开“动作动作”面板，为其添加帧动作脚本语句面板，为其添加帧动作脚本语句:stop();stop();（1818）将制作完成的影片剪辑保存。）将制作完成的影片剪辑保存。3改进动感菜单的设计改进动感菜单的设计1（1 1）执行）执行“窗口窗口”“”“其他面板其他面板”“”“公用库公用库”“”“按钮按钮”命命令，打开公用库中令，打开公用库中“按钮库按钮库”，展开，展开“arcade buttons”arcade buttons”，选中，选中blueblue按钮。按钮。（2 2）在时间轴上，选中图层）在时间轴上，选中图层1 1的第的第1 1帧，将蓝色按钮拖动到舞台帧，将蓝
20、色按钮拖动到舞台上。上。（3 3）选中第）选中第2 2帧，插入关键帧，将橘色按钮拖到舞台上。帧，插入关键帧，将橘色按钮拖到舞台上。（4 4）如上所述，选中第）如上所述，选中第3 3帧，插入关键帧，将绿色按钮拖到舞台；帧，插入关键帧，将绿色按钮拖到舞台；选中第选中第4 4帧，插入关键帧，将红色按钮拖进舞台。帧，插入关键帧，将红色按钮拖进舞台。（5 5）在第）在第4 4帧插入帧动作脚本：帧插入帧动作脚本：stop();stop();（6 6）插入新图层，选中图层）插入新图层，选中图层2 2的第的第5 5帧，插入空白关键帧，将已帧，插入空白关键帧，将已制作完成的动感菜单的影片剪辑拖动到舞台，将其放置
21、在蓝色按制作完成的动感菜单的影片剪辑拖动到舞台，将其放置在蓝色按钮下方。钮下方。（7 7）在下方的）在下方的“属性属性”面板内，设置影片剪辑名为面板内，设置影片剪辑名为“aaaa”。（8 8）重复上述步骤，分别在图层）重复上述步骤，分别在图层2 2的第的第6 6、7 7、8 8帧处插入关键帧，帧处插入关键帧，将影片剪辑调整至各自按钮下方，分别命名为：将影片剪辑调整至各自按钮下方，分别命名为：“bb”bb”、“cc”cc”、“dddd”。（9 9）选中图层）选中图层2 2的第的第5 5帧，为其添加帧动作脚本：帧，为其添加帧动作脚本：aa.playaa.play();();3改进动感菜单的设计改进
22、动感菜单的设计2（1010）重复上述步骤，分别为第）重复上述步骤，分别为第6 6、7 7、8 8帧，添加帧动作脚本：帧，添加帧动作脚本：bb.playbb.play();();cc.playcc.play();();dd.playdd.play();();（1111）选中图层）选中图层1 1的第的第4 4帧，为蓝色按钮添加按钮动作：帧，为蓝色按钮添加按钮动作：on(rollOver,rollOuton(rollOver,rollOut)goAndStop(5);goAndStop(5);（1212）同理，选中图层）同理，选中图层1 1的第的第4 4帧，为橘色按钮添加按钮动作：帧，为橘色按钮添加
23、按钮动作：on(rollOver,rollOuton(rollOver,rollOut)goAndStop(6);goAndStop(6);（1313）选中图层）选中图层1 1的第的第4 4帧，为绿色按钮添加按钮动作：帧，为绿色按钮添加按钮动作：on(rollOver,rollOuton(rollOver,rollOut)goAndStop(7);goAndStop(7);（1414）选中图层）选中图层1 1的第的第4 4帧，为红色按钮添加按钮动作：帧，为红色按钮添加按钮动作：on(rollOver,rollOuton(rollOver,rollOut)goAndStop(8);goAndSt
24、op(8);（1515）保存动画并测试、播放。）保存动画并测试、播放。任务任务3 使用常用使用常用Actions语句语句 了解“动作”面板。了解常用时间轴控制函数。了解作用于影片剪辑的Actions语句。了解影片剪辑常用的设置动作。1了解了解“动作动作”面板面板 动作工具箱、脚本导航器和语句输入区（脚本窗格）2了解常用时间轴控制函数了解常用时间轴控制函数（1 1）play()play()：移动播放头播放动画。：移动播放头播放动画。（2 2）stop()stop()：停止播放头移动，停止动画播放。：停止播放头移动，停止动画播放。（3 3）gotoAndPlaygotoAndPlay()()：跳到
25、（某场景）某帧并播放。：跳到（某场景）某帧并播放。（4 4）gotoAndStopgotoAndStop()()：跳到（某场景）某帧并在该帧停：跳到（某场景）某帧并在该帧停止。止。（5 5）nextFramenextFrame()()：跳到当前帧的下一帧。：跳到当前帧的下一帧。（6 6）prevFrameprevFrame()()：跳到当前帧的上一帧。：跳到当前帧的上一帧。（7 7）nextScenenextScene()()：跳到当前场景的下一个场景。：跳到当前场景的下一个场景。（8 8）prevSceneprevScene()()：跳到当前场景的上一个场景。：跳到当前场景的上一个场景。（9
26、 9）stopAllSoundsstopAllSounds()()：停止当前正在播放的所有声音。：停止当前正在播放的所有声音。3了解作用于影片剪辑的了解作用于影片剪辑的Actions语句语句 例如，可以选择一个影片剪辑，然后打开动作脚本窗格，在例如，可以选择一个影片剪辑，然后打开动作脚本窗格，在语句输入区输入如下语句：语句输入区输入如下语句：on(presson(press)startDrag(this,truestartDrag(this,true););on(releaseon(release)stopDragstopDrag();();上述语句的作用是，当用户在影片剪辑（上述语句的作用是
27、，当用户在影片剪辑（thisthis）上按下鼠标）上按下鼠标时，触发时，触发on(presson(press)事件，事件处理函数事件，事件处理函数startDrag(this,truestartDrag(this,true)；使影片剪辑中心捕捉到鼠标中心，然后随鼠标一起移动，；使影片剪辑中心捕捉到鼠标中心，然后随鼠标一起移动，当释放鼠标时，触发当释放鼠标时，触发on(releaseon(release)事件，事件处理函数事件，事件处理函数stopDragstopDrag()()；使影片停止随鼠标的移动。；使影片停止随鼠标的移动。4了解影片剪辑常用的设置动作了解影片剪辑常用的设置动作1（1 1）
28、选中舞台上需要设置动作的影片剪辑。）选中舞台上需要设置动作的影片剪辑。（2 2）打开）打开“动作动作”面板。在面板。在“动作动作”面板的面板的“动作工具箱动作工具箱”中，双击中，双击“全局函数全局函数”“”“影影片剪辑控制片剪辑控制”“”“onClipEventonClipEvent”，此时在脚，此时在脚本窗格中将出现一语句：本窗格中将出现一语句：onClipEventonClipEvent()()同时，会出现一下拉菜单，内有影片剪辑所对同时，会出现一下拉菜单，内有影片剪辑所对应的事件应的事件4了解影片剪辑常用的设置动作了解影片剪辑常用的设置动作2影片剪辑事件主要有以下几种。影片剪辑事件主要有
29、以下几种。loadload：当影片剪辑被实例化并出再见在时间轴中时响：当影片剪辑被实例化并出再见在时间轴中时响应事件。应事件。unloadunload：当影片剪辑被从时间轴删除后响应事件。：当影片剪辑被从时间轴删除后响应事件。enterframeenterframe：以影片的帧不断地响应事件。：以影片的帧不断地响应事件。mouseDownmouseDown：当按下鼠标左键时响应事件。：当按下鼠标左键时响应事件。mouseMovemouseMove：当移动鼠标时响应事件。：当移动鼠标时响应事件。mouseUpmouseUp：当释放鼠标左键时响应事件。：当释放鼠标左键时响应事件。keyDownke
30、yDown：当按下某全键时响应事件。：当按下某全键时响应事件。keyUpkeyUp：当释放某个键时响应鼠标。：当释放某个键时响应鼠标。项目小结项目小结 在在FlashFlash动画设计中，为帧添加动作和为按钮元件添加动画设计中，为帧添加动作和为按钮元件添加动作是不同的。如果要为帧添加动作，只要选中该帧，动作是不同的。如果要为帧添加动作，只要选中该帧，然后打开然后打开“动作动作”面板，面板，“动作动作”面板的标题栏上显面板的标题栏上显示示“动作动作-帧帧”，即可在动作脚本窗格中添加相应的动，即可在动作脚本窗格中添加相应的动作。如果要在按钮中设置动作，可先用鼠标单击该按作。如果要在按钮中设置动作，
31、可先用鼠标单击该按钮，然后打开钮，然后打开“动作动作”面板，面板，“动作动作”面板的标题栏面板的标题栏上显示上显示“动作动作-按钮按钮”，即可在动作脚本窗格中添加相，即可在动作脚本窗格中添加相应的动作。应的动作。有一些更复杂的动画，如游戏动画中在画面上进行计有一些更复杂的动画，如游戏动画中在画面上进行计分、智力游戏的计算、分、智力游戏的计算、“思考思考”等功能，还需要更复等功能，还需要更复杂的杂的ActionsActions运用及程序设计。如果有兴趣，应该在这运用及程序设计。如果有兴趣，应该在这些方面继续学习并提高动画设计的水平。复杂的动画些方面继续学习并提高动画设计的水平。复杂的动画是在简单的动画的基础上设计出来的，要有足够的耐是在简单的动画的基础上设计出来的，要有足够的耐心，多练习，多动脑，才能不断提高动画的设计水平。心，多练习，多动脑，才能不断提高动画的设计水平。