以下为《项目四 动画处理技术—— 交互动画》的无排版文字预览,完整格式请下载
下载前请仔细阅读文字预览以及下方图片预览。图片预览是什么样的,下载的文档就是什么样的。
交互动画初识动作脚本
动画的跳转控制
按钮交互的实现
创建链接
浏览器控制
声音的控制
影片剪辑的播放和控制
键盘控制本章重点: 与许多动画制作工具相比,Flash动画有一个最大的特点就是具有强大的交互性,浏览者在观赏动画的同时,可以自由控制动画的播放进程。通过本章学习应掌握一下内容:4.1初识动作脚本 动画脚本是Flash具有强大交互功能的灵魂所在。它是一种编程语言,Flash CS3有两种版本的动作脚本语言,分别是ActionScript 2.0和ActionScript 3.0,动画之所以具有交互性,是通过对按钮、关键帧和影片剪辑设置移动的“动作”来实现的,所谓“动作”指的是一套命令语句,当某事件发生或某条件成立时,就会发出命令来执行设置的动作。
执行菜单中的“窗口|动作”命令(快捷键〈F9〉),可以调出“动作”面板,如图4-1所示。 动作工具箱是浏览ActionScript语言元素(函数、类、类型等)的分类列表,包括全局函数、全局属性、运算符、语句、ActionScript 2.0类、编译器指令、常数、类型、否决的、数据组件、组件、屏幕和索引等,单击它们可以展开相关内容,如图4-2所示。双击要添加的动作脚本即可将它们添加到右侧的脚本窗口中,如图4-3所示。1.动作工具箱图4-2展开相关内容图4-3将动作脚本添加到右侧的脚本窗口中2.脚本导航器 脚本导航器用于显示包括脚本的Flash元素(影片剪辑、帧和按钮)的分层列表。使用脚本导航器可在Flash文档中的各个脚本之间快速移动。如果单击脚本导航器中的某一项目,则与该项目相关联的脚本将显示在脚本窗口中,并且播放头将移动到时间轴上的相关位置。如果双击脚本导航器中的某一项,则该脚本将被固定(就地锁定)。可以通过单击每个选项卡在脚本间移动。
脚本窗口用来输入动作语句,除了可以在动作工具箱中通过双击语句的方式在脚本窗口中添加动作脚本外,还可以在这里直接用键盘进行输入。3.脚本窗口
4.2 动画的跳转控制 关于动画的跳转控制,我们通过下面的实例进行讲解,具体操作步骤如下:
1)打开配套光盘中“素材及结果|4.2 动画的跳转控制|动画跳转控制-素材.fla”文件。
2)单击时间轴下方的(插入图层)按钮,新建“图层2”。然后在第20帧按快捷键〈F6〉,插入关键帧,如图4-4所示。
3)执行菜单中的“窗口|动作”面板,调出动作面板,然后双击“全局函数”下的stop,此时在右侧脚本窗口中显示出脚本“stop()”,结果如图4-5所示。 图4-4在“图层2”的第20帧插入关键帧 图4-5 右侧脚本窗口显示出“stop()”
4)执行菜单中的“控制|测试影片”命令,即可看到当动画播放到第20帧时,动画停止的效果。
5)测试完毕后,关闭动画播放窗口,此时会发现在“图层2”的第20帧多出了一个字母“a”,如图4-6所示,它表示在该帧设置了动作脚本。图4-6在“图层2”的第20帧多出了一个字母“a”6)制作动画播放到结尾再跳转到第1帧循环播放的效果。方法:在“图层2”的第20帧,打开动作面板,删除动作脚本“stop”,然后用鼠标双击左侧“时间轴控制”类别中的“gotoAndPlay”,再在右侧的括号中输入1,如图4-7所示。该段脚本表示当动画播放到结尾时,自动跳转到第1帧继续播放,如图4-7所示。图4-7设置动作脚本gotoAndPlay(1)7)制作动画播放到结尾再跳转到第1帧并停止播放的效果。方法:在“图层2”的第20帧,打开动作面板,删除动作脚本“gotoAndPlay(1)”,然后用鼠标双击左侧“时间轴控制”类别中的“gotoAndStop”,再在右侧的括号中输入1,如图4-8所示。该段脚本表示当动画播放到结尾时,自动跳转到第1帧并停止播放。图4-8设置动作脚本gotoAndStop(1) Flash中还有许多时间轴控制的动作脚本,它们的用法都是一样的,下面列出了一些常用时间轴控制脚本。gotoAndPlay
一般用法:gotoAndPlay(场景,帧数);
作用:跳转到指定场景的指定帧,并从该帧开始播放,如果要跳转的帧为当前场景,可以不输入“场景”参数。
参数介绍如下:
场景:跳转至场景的名称,如果是当前场景,就不用设置该项。
帧数:跳转到帧的名称(在“属性”面板中设置的帧标签)或帧数。
举例说明:当按下被添加了“gotoAndPlay”动作脚本的按钮时,动画跳转到当前场景的第15帧,并从该帧开始播放的动作脚本:
on (press) {
gotoAndPlay(15);
}
举例说明:当按下被添加了“gotoAndPlay”动作脚本的按钮时,动画跳转到名称为“动画1”的场景的第15帧,并从该帧开始播放的动作脚本:
on (press) {
gotoAndPlay(“动画1”,15);
} gotoAndStop
一般用法:gotoAndStop(场景,帧数);
作用:跳转到指定场景的指定帧并从该帧停止播放,如果没有指定场景,那么将跳转到当前场景的指定帧。
参数介绍如下:
场景:跳转至场景的名称,如果是当前场景,就不用设置该项。
帧数:跳转至帧的名称或数字。 nextFrame()
作用:跳转到下一帧并停止播放。
举例说明:按下一个按钮时,跳转到下一帧并停止播放的动作脚本:
on (press) {
nextFrame( );
}preFrame()
作用:跳转到前一帧并停止播放。
举例说明:按下一个按钮时,跳转到前一帧并停止播放的动作脚本:
on (press) {
preFrame( );
}nextScene()
作用:跳转到下一个场景并停止播放。
preScene()
作用:跳转到前一个场景并停止播放。play()
作用:使动画从当前帧开始继续播放。
在播放动画时,除非另外指定,否则从第1帧开始播放。如果动画播放进程被“跳转”或者“停止”,那么需要使用“play()”语句才能重新播放。
stop()
作用:停止当前播放的电影,该动作脚本常用于使用按钮控制影片剪辑。
举例说明:当需要某个影片剪辑在播放完毕后停止并不是循环播放,则可以在影片剪辑的最后一帧附加“stop()”动作脚本。这样,当影片剪辑中的动画播放到最后一帧时,播放将立即停止。stopAllSounds()
作用:是当前播放的所有声音停止播放,但是不停止动画的播放。需要注意的是,被设置的流式声音将会继续播放,在“4.6 声音的控制”中我们将会详细应用。
举例说明:当按下按钮时,影片中的所有声音将停止播放的动作脚本:
on (press) {
stopAllSounds( );
}4.3 按钮交互的实现 除了在关键帧中可以设置动作脚本外,在按钮中也可以设置动作脚本,从而实现按钮交互动画。下面我们通过一个实例进行讲解,具体操作步骤如下:
1)打开配套光盘中“素材及结果|4.3 按钮交互的实现|按钮交互的实现-素材.fla”文件。
提示:该素材的第1帧被添加了“stop()”动作脚本。因此为静止状态。
2)创建名称为“游戏室内场景”和“游戏室外场景”的两个按钮元件,如图4-9所示。 图4-9创建两个按钮元件3)单击时间轴下方的 (插入图层)按钮,新建“图层2”。然后将库面板中的“元件1”按钮拖入舞台,放置位置如图4-10所示。接着在“图层2”的第10帧按快捷键〈F7〉,插入空白关键帧,再将库面板中的“元件2”按钮拖入舞台,放置位置如图如图4-11所示。 图4-10将“元件1”按钮拖入舞台 图 4-11在第10帧将“元件2”按钮拖入舞台 4)设置按下“元件1”(即“游戏室外场景”)按钮的跳转到第10帧画面的效果。方法:右键单击第1帧舞台中的“元件1”按钮,从弹出的快捷菜单中选择“动作”命令,然后从弹出的“动作”面板中设置动作脚本为:
on (press) {
gotoAndStop(10);
}
5)设置按下“元件2”(即“游戏室内场景”)按钮的跳转到第1帧画面的效果。方法:单击第10帧舞台中的“元件2”按钮,然后在“动作”面板中设置动作脚本为:
on (press) {
gotoAndStop(1);6)执行菜单中的“控制|测试影片”命令,即可看到按下“游戏室外场景”按钮后跳转到第10帧的画面,按下“游戏室内场景”按钮后跳转到第1帧画面的效果。
按钮除了响应按钮事件,还可以响应以下8种按键事件:
press:事件发生于鼠标在位于按钮上方,并按下鼠标时。
lrelease:事件发生于鼠标位于按钮上方按下鼠标,然后松开鼠标时。
lreleaseOutside:事件发生于鼠标位于按钮上方并按下鼠标,然后将鼠标移到按钮以外区域,在松开鼠标时。
rollOver:事件放生于鼠标移到按钮上方时。
rollOut:事件放生于鼠标移出按钮区域时。
dragOver:事件发生于按住鼠标不松手,然后将鼠标移到按钮上方时。
dragOut:事件发生于按住鼠标不松手,然后将鼠标移出按钮区域时。
keyPress:事件发生于用户按钮键盘上某个键时,其格式为keyPress“”。触发事件列表中列举了常用的键名称,比如:keyPress“”,表示按下键盘上的向左方向按钮时触发事件。4.4 创建链接 在大多数网页中,我们常常看到“使用帮助”、“与我联系”等类的文字,单击这些文字可链接到指定的网页,如图4-12所示。本节将具体讲解网站中常见的多种链接的方法。图4-12链接页面效果4.4.1 创建文本链接 对于创建文本链接,我们将通过下面的实例来具体说明,具体操作步骤如下:
1)打开配套光盘中“素材及结果|4.4 创建链接|创建文本链接-素材.fla”文件。
2)单击时间轴下方的 (插入图层)按钮,新建“文本链接”层。然后选择工具箱中的 (文本工具),在舞台中单击鼠标,接着在属性面板中设置文本类型为“静态文本”、字体为“幼圆”、字体大小为12,颜色为#FF0000,再在舞台中分别输入文字“教学课堂”,如图4-13所示。图4-13输入文字“教学课堂” 3)同理,输入文字“使用帮助”和“联系我们”。
4)对齐三组文字文字。方法:利用 (选择工具),配合〈Shift〉键同时选择三组文字,然后按快捷键〈Ctrl+K〉,打开对齐面板,单击 (左对齐)和 (垂直居中对齐)按钮,如图4-14所示,结果如图4-15所示。 图4-14设置对齐参数 图4-15对齐后的文字效果5)创建文字“教学课堂”的文本链接。方法:在舞台中选择文字“教学课堂”,然后在属性面板后的文本框中输入链接地址,并在“目标”后的下拉列表框中选择“_blank”,如图4-16所示。图4-16创建文字“教学课堂”的文本链接提示:“目标”下拉列表框中有4个选项。“_blank”,表示在新的浏览器中加载链接的文档;“_parent”,表示在父业或包含该链接的窗口中加载链接的文档;“_self”,表示将链接的文档加载到自身的窗口中;“_top”,表示将在整个浏览器窗口中加载链接的文档。
6)同理,创建文字“使用帮助”的文本链接,并在“目标”后的下拉列表框中选择“_blank”,如图4-17所示。图4-17创建文字“使用帮助”的文本链接7)执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令,打开播放器,即可测试单击“教学课堂”和“使用帮助”文字后跳转到所链接的网站效果。4.4.2创建邮件链接创建邮件链接的具体操作步骤如下:
1)在舞台中选择文字“联系我们”,然后在属性面板 后的文本框中输入邮件链接地址,并在“目标”后的下拉列表框中选择“_self”,如图4-18所示。图4-18创建文字“联系我们”的邮件链接 2)执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令,打开播放器,此时单击文字“联系我们”后没有任何效果,这是因为在swf动画中,单击邮件链接是不会有相应的,但并不等于说邮件链接没有做好。下面使用浏览器来预览一下。方法:执行菜单中的“***HTML”命令,打开浏览器,然后单击文字“联系我们”,启动Outlook Express,如图4-19所示。接着就可以撰写邮件并发送,图4-19启动OutlookExpress4.4.3 创建按钮链接
在网站中,导航的对象不一定都是文字,有时候会是图形。在这种情况下就需要将图形转换为按钮,利用Flash提供的动作脚本完成网页或邮件的链接。
下面通过一个实例来具体讲解将文字转为按钮,并创建按钮链接的方法,具体操作步骤如下:
1)删除前面创建的文字“语音课堂”、“使用帮助”和“联系我们”三组文字的文本链接。
2)选择舞台中的文字“语音课堂”,然后执行菜单中的“修改|转换为元件”(快捷键〈F8〉)命令,在弹出的“转换为元件”对话框中设置如图4-20所示,单击“确定”按钮。
3)双击舞台中的“教学课堂”按钮元件,进入按钮编辑模式。然后选中“点击”帧,按快捷键〈F6〉,插入关键帧,接着利用 (矩形工具)绘制出按钮的相应区,如图4-21所示。 图4-20设置“转换为元件”参数 图4-21在“点击”帧绘制矩形作为相应区 4)创建“教学课堂”按钮的链接。方法:单击按钮,回到场景1,然后右键单击舞台中的“教学课堂”按钮,从弹出的快捷菜单中选择“动作”命令,接着在弹出的“动作”面板中设置动作脚本为:
on (release) {
getURL("http://doc.001pp.com","_blank");
}
5)同理,将文本“使用帮助”转换为“使用帮助”按钮。然后选择舞台中的“使用帮助”按钮,在“动作”面板中设置动作脚本为:
on (release) {
getURL("http://doc.001pp.com","_blank");
}
6)创建“联系我们”按钮的邮件链接。方法:将文本“联系我们”转换为“联系我们”按钮,然后选择舞台中的“联系我们”按钮,在“动作”面板中设置动作脚本为:
on (release) {
getURL("mailto:zfsucceed@163.com");
}7)执行菜单中的“***HTML”命令,打开浏览器,即可测试单击“教学课堂”、“使用帮助”后跳转到链接网站,单击“联系我们”按钮后启动Outlook Express的效果。4.5 浏览器控制 制作完成的动画通常都是在Flash播放器中播放的,控制播放器的播放环境及播放效果是我们经常要解决的问题。比如,如何退出动画、使动画全屏幕播放、如何在影片中调用外部程序等。
fscommand可以实现对动画播放器,也就是Flash Player的控制,它位于“浏览器/网络”类中,如图4-22所示。此外,它可配合JavaScript脚本语言,是Flash与外界沟通的桥梁。
facommand的语法格式为:facommand(命令,参数),前面的“命令”是可以执行的参数;后面的“参数”是被执行命令的参数,其说明如图4-23所示。 4.5.1 浏览器控制简介图4-22“浏览器/网络”类图4-23fscommand常用命令和参数说明4.5.2 退出动画 下面通过一个实例来具体讲解利用facommand语言脚本来退出动画的方法,具体操作步骤如下:
1)打开配套光盘中“素材及结果|4.5 浏览器控制|退出动画-素材.fla”文件。
2)执行菜单中的“***按钮”命令,调出库面板,如图4-24所示。然后将buttons bubble 2文件夹中的bubble 2 orange按钮拖入舞台的左下角。接着双击舞台中的bubble 2 orange按钮,进入按钮编辑模式后,将按钮中的文字改为“退出动画”,结果如图4-25所示。 图4-24调出公用库面板 图4-25更改按钮中的文字3)给按钮添加退出动画语言脚本。方法:右键单击舞台中的按钮,从弹出的快捷菜单中选择“动作”命令,接着在弹出的动作面板中设置动作脚本为:
on (release) {
fscommand("quit","");
}
4)执行菜单中的“文件|发布”命令,将动画发布。然后切换到文件保存的目录,用鼠标双击刚发布的swf动画文件,即可 内容过长,仅展示头部和尾部部分文字预览,全文请查看图片预览。 剪辑,在属性面板中删除影片剪辑的实例名,在适当缩小影片剪辑的大小,如图4-47所示。图4-47删除实例名称4)在库面板中,右键单击“元件1”影片剪辑,从弹出的快捷菜单中选择“链接”命令,接着在弹出的“链接属性”对话框中设置与类绑定,如图4-48所示,单击“确定”按钮。
5)在舞台外单击鼠标,使属性面板显示为文档的属性设置。然后在“文档类”文本框中输入刚刚创建的文档类名称“helfMCDocumentClass”,如图4-49所示。图4-48设置链接属性 图4-49设置文档类 4)执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令,即可看到画面上被复制除了10个大小不同,位置不同的影片剪辑,如图4-50所示。图4-50复制出的影片剪辑5)将配套光盘“素材及结果|4.7.3 类与绑定|helfMC.as” 文件复制到同一目录中,此时将可以用鼠标随意拖动舞台上的影片剪辑。[文章尾部最后500字内容到此结束,中间部分内容请查看底下的图片预览]请点击下方选择您需要的文档下载。
以上为《项目四 动画处理技术—— 交互动画》的无排版文字预览,完整格式请下载
下载前请仔细阅读上面文字预览以及下方图片预览。图片预览是什么样的,下载的文档就是什么样的。