1
Flash动画设计项目教程
1.9 项目七 多媒体应用

项目七 多媒体应用

项目引入

Flash动画不同于传统的动画,它不仅可以使用文字、图像等元素,而且还整合了声音和视频等多媒体元素。其中,声音可以烘托动画的展现气氛,调动观看者的情绪,配合视频文件的使用,使得动画更加引人入胜。在Flash中不仅可以导入声音和视频,而且可以对其进行各项编辑操作。通过它们可以制作交互性、动感性更强的动画效果。

任务一 为动画添加声音

知识准备

1. 导入声音

Flash导入声音的格式有多种,不仅可以导入常用的mp3、wav格式的声音文件,如果系统安装了QuickTime4或更高版本,还可以导入AIFF、SunAU等附加的格式声音文件。首先单击菜单栏中【文件】|【导入】子菜单中的【导入到舞台】或【导入到库】命令,然后在弹出的【导入】或【导入到库】对话框中双击选择需要的声音文件,即可将选择的声音文件导入当前文档的【库】面板中。无论使用哪种方法导入声音,只能将声音导入Flash的【库】面板中,而不能直接导入舞台中,图7-1所示就是导入声音文件后的【库】面板。

如果想要将导入【库】面板的声音文件应用在Flash文档中,可以按住鼠标左键,将导入的声音文件从【库】面板拖曳到舞台中,即可将该声音文件添加到当前文档的工作层中;添加后,在【时间轴】面板当前图层中会出现声音的音轨,并以波形的形式显示。在为文档添加声音时需要注意以下几点。

(1) 建议在一个单独的图层上放置声音,并将声音与动画内容分开,便于对动画进行管理。

(2) 声音必须添加在关键帧或空白关键帧上。

(3) 如果要在一个动画文档中添加多个声音文件,建议将每个声音文件都放置在一个独立的图层上,以便于管理。

在Flash CS5软件中,除了可以导入声音文件外,还提供一个声音公用【库】面板,其中包含很多声音特效文件。单击菜单栏中的【窗口】|【公用库】|【声音】命令可以打开该声音公用【库】,如图7-2所示。其中声音的使用与【库】面板中的声音文件相同,按住鼠标左键将其拖曳到舞台中即可。

图7-1 导入声音到【库】面板

图7-2 声音公用【库】

2. 编辑声音

为动画添加声音后,Flash还提供对导入声音的各项编辑操作,通过在【属性】面板的“声音”选项进行各项编辑,包括添加声音、删除声音、切换声音、声音淡入和淡出、声音音量大小、声音同步、声音循环等,以使其更加符合动画的要求。

1) 删除或切换声音

在为当前文档添加声音文件时,除了可以使用前面介绍的按住鼠标左键将其从【库】面板中拖曳到当前文档中之外,还可以对【属性】面板的“声音”选项进行设置。首先选择声音图层的任意一帧,然后在“声音”选项中单击“名称”右侧的按钮,在弹出的下拉列表中即可进行声音的添加、删除和切换操作,如图7-3所示,其中各参数说明如下。

(1) 删除声音:在弹出的下拉列表中选择“无”,可以删除该帧处添加的声音。

(2) 添加声音:在弹出的下拉列表中选择所要添加的声音文件即可将该声音文件添加到当前文档中。

(3) 切换声音:如果该文档中包含多个声音,在下拉列表中选择不同的声音文件,可以进行各声音的切换。

2) 套用声音效果

为Flash文档添加声音文件后,还可以在【属性】面板中为声音套用不同的声音效果,包括淡入、淡出、左右声道的不同播放等,使之更符合动画的要求。首先选择声音的任意一帧,然后在【属性】面板的“声音”选项中,单击“效果”右侧的按钮,在弹出的下拉列表中即可套用内建的声音特效,如图7-4所示,其中各参数说明如下。

图7-3 进行声音的添加、删除和切换操作

图7-4 套用声音效果

(1) 无:不对声音应用效果,如果以前的声音添加了特效,还可以删除以前添加的特效。

(2) 左声道/右声道:用于只在左声道或右声道中播放声音。

(3) 向右淡出/向左淡出:用于将一个声音从一个声道切换到另一个声道。

(4) 淡入:在声音的持续时间内逐渐增大音量。

(5) 淡出:在声音的持续时间内逐渐减小音量。

(6) 自定义:选择该项,或者单击右侧的按钮,可弹出如图7-5所示的【编辑封套】对话框,可以根据自己的需要定义编辑声音的效果,其中上面的编辑窗口为左声道,下面的编辑窗口为右声道。

图7-5 【编辑封套】对话框

3) 声音同步效果

将声音添加到Flash文档后,有时会遇到声音不同步的问题。声音同步效果就是指对声音与动画进行同步播放,可以通过【属性】面板的“声音”选项进行设置,如图7-6所示。

图7-6 【属性】面板的声音同步选项

单击图7-6中的“同步”选项,在弹出的下拉列表中有4种设置声音同步的类型。

(1) 事件:为系统默认时的类型,声音信息将全部集中在设定的起始帧中。下载及播放声音时,由于声音信息全集中在一个帧里,所以要等到声音全部下载完毕才能播放,如果声音文件比较大,则会导致动画播放不流畅。由于“事件”类型的声音是一次下载完毕,所以播放声音时,也是一次播放完整个声音。“事件”类型的声音和动画是相互独立的。

(2) 开始:此选项和“事件”选项一样,只是如果正在播放声音,就不会播放新的声音实例。

(3) 停止:该选项将使指定的声音静音。需要指出的是,“停止”类型只能指定停止一个声音文件的播放,若想要停止动画中的所有声音,则需要使用ActionScript脚本命令控制。

(4) 数据流:选择此项,则Flash会强制动画和音频流同步。如果Flash不能足够快地绘制动画帧,就跳过帧。与事件声音不同,音频流随着动画的停止而停止,而且音频流的播放时间绝对不会比帧的播放时间长。数据流声音通常用于动画的背景音乐。

单击图7-6中的“循环”选项,在弹出的下拉列表中设置声音是进行重复还是进行循环。

(1) 重复:用于设置声音的重复,并在右侧进行重复次数的设置。

(2) 循环:用于设置声音的不断循环。

任务实施

任务目标:在Flash中导入声音的应用有多种,可以将声音作为动画的背景音乐,渲染动画的气氛;也可以为按钮添加声音,使其具有更强的交互性。下面给一只小狗添加狗吠的声音效果。

具体操作步骤如下。

(1) 启动Flash CS5程序,按【Ctrl+O】键打开文档“小狗.fla”,在文档中已经准备了利用逐帧动画制作的小狗动画,如图7-7所示。

(2) 单击菜单栏中的【文件】|【导入】|【导入到库】命令,将音频素材“Sound_Dog.wav”导入【库】面板,如图7-8所示。

(3) 新建图层“声音”,从【库】面板中将音频拖动到舞台,此时在图层“声音”的【时间轴】面板上可以看到波形图,如图7-9所示。

图7-7 打开小狗动画素材

图7-8 导入声音文件到【库】面板

图7-9 音频拖动到舞台

(4) 按【Enter】键测试效果。

(5) 发现小狗的动作与声音不同步,需要调节音频位置使声音与小狗的口形匹配。单击图层“音频”第1帧,将其拖动到第10帧上,如图7-10所示。

图7-10 调整音频位置

(6) 选中第1帧,按【Enter】键再次确认音频与动画画面是否匹配。

(7) 设置音频属性,单击音频所在的帧,打开【属性】面板,选择“效果”中的“自定义”选项,打开【编辑封套】对话框。

(8) 放大声音时间轴,鼠标单击左声道音量控制节点,将其从第30帧开始向右下角拖曳,然后使用同样的方式将右声道的音量控制节点向右下方拖曳,使音频逐渐变小,如图7-11所示。

(9) 单击【播放】按钮,确认音频后,再单击【确认】按钮。

图7-11 设置声音时间轴

(10) 在【属性】面板中设置“同步”选项为“数据流”。

(11) 按【Ctrl+S】键保存文档。

任务二 制作电影节宣传视频

知识准备

1. 导入Flash视频

Flash CS5可将视频素材应用于动画创作中。根据视频导入的方式不同,它所支持的视频格式也略有不同,如果是通过连接外部视频文件的方式来播放视频,那么支持的视频格式比较多,包括FLV、F4V(H.264) 、MP4、MOV与3GP等格式;如果是将视频文件导入Flash文件内播放,那么只能支持FLV视频格式。

在Flash CS5中,导入视频的操作通过【导入视频】对话框完成。单击菜单栏中的【文件】|【导入】|【导入视频】命令,即可弹出【导入视频】对话框,如图7-12所示。

图7-12 【导入视频】对话框1

【导入视频】对话框中各参数说明如下。

(1) 在您的计算机上:勾选此项,可以通过单击右侧的按钮,在弹出的【打开】对话框中选择本地计算机上的视频文件。

① 使用回放组件加载外部视频:通过FLVPlayback组件播放外部的视频文件。在网络上播放视频时,需要将SWF文件与视频文件一起上传到服务器上。

② 在SWF中嵌入FLV并在时间轴中播放:将FLV嵌入Flash文档中。这样导入视频时,该视频放置于时间轴中可以看到时间轴帧所表示的各个视频帧的位置。嵌入的FLV视频文件成为Flash文档的一部分。

③ 作为捆绑在SWF中的移动设备视频导入:与在Flash文档中嵌入视频类似,将视频绑定到Flash Lite文档中并在移动设备中播放。

(2) 已经部署到Web服务器、Flash Video Streaming Service或Flash Media Server:勾选此项并输入URL,可以直接导入存储在Web服务器、Flash Media Server或FVSS上的视频。

在平时的应用中,主要以选择本地计算机上视频文件为主。“在您的计算机上”选项中根据导入视频的应用不同,导入视频时会有一系列不同的向导对话框;“使用回放组件加载外部视频”选项用到的FLVPlayback组件将在“项目九 组件的应用”做专门介绍,这里就以“在SWF中嵌入FLV并在时间轴中播放”导入视频的方法为例进行介绍。

具体操作步骤如下。

(1) 启动Flash CS5,按【Ctrl+N】键新建一个Flash文档。

(2) 单击菜单栏中的【文件】|【导入】|【导入视频】命令,在弹出的【导入视频】对话框的“选择视频”窗口单击【浏览】按钮,在弹出的【打开】对话框中选择视频素材“视频1.flv”。

(3) 在“选择视频”中勾选“在SWF中嵌入FLV并在时间轴中播放”选项,如图7-13所示。

图7-13 【导入视频】对话框2

(4) 单击【导入视频】对话框中的【下一步】按钮,弹出【导入视频】对话框的“嵌入”窗口,如图7-14所示。

(5) 在此使用系统默认设置,单击“嵌入”窗口中的【下一步】按钮,弹出【导入视频】对话框“完成视频导入”窗口,如图7-15所示。

图7-14 “嵌入”窗口

图7-15 “完成视频导入”窗口

(6) 单击“完成视频导入”中的【完成】按钮,此时会弹出一个“正在处理”进度条,开始导入视频文件。

(7) 在“正在处理”进度条结束后,将视频文件导入当前的舞台中,并且存放在【库】面板中。

任务实施

任务目标:制作一个电影节宣传动画,在画面中嵌入若干视频。

具体操作步骤如下。

(1) 启动Flash CS5程序,按【Ctrl+O】键打开文件“素材.FLV”,在舞台上出现背景图像,如图7-16所示。

图7-16 素材背景

(2) 新建图层“电影”,从【库】面板中将预先准备的元件“film”拖动到舞台右侧,如图7-17所示。

图7-17 将“film”元件拖动到舞台

(3) 使用任意变形工具打开【变形】面板,设置元件“film”旋转角度为“10.3”,如图7-18所示。

图7-18 设置元件“film”旋转角度

(4) 由于胶片超出了舞台,为了不显示向外超出的部分,所以以舞台的区域大小应用遮罩。首先,新建图层“矩形”,使用矩形工具绘制与舞台同等大小的矩形,并调整到与舞台位置重合。单击鼠标右键,在弹出的快捷菜单中选择【遮罩层】命令,将图层“矩形”转换成遮罩层,如图7-19所示。

图7-19 制作遮罩层

(5) 新建图层“视频”,从【库】面板中将视频“水下.AVI”两次拖动到舞台上,如图7-20所示。

图7-20 拖动视频到舞台

(6) 为了使视频的倾斜角度与胶片的倾斜角度一致,同时选中两个视频,打开【变形】面板,设置倾斜角度为“10.3”。通过拖动,将舞台上的两个视频位置与胶片位置对齐,如图7-21所示。

(7) 新建图层“文字”,输入如图7-22所示的文字。

图7-21 调整视频位置

图7-22 输入文字

(8) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。

深入解析

通常情况下,声音文件的体积都很大,在Flash中使用声音后,生成的动画文件体积也要相应增大,所以就需要对声音文件进行压缩。

在Flash中,声音的压缩操作通过【声音属性】对话框完成,在该对话框中可以设置压缩格式、采样率、比特率、品质等属性。

将视频文件直接嵌入Flash文件中会显著增加发布文件的大小,因此在Flash内部应尽量导入短的视频文件。如果在使用Flash文档中嵌入较长的视频文件,则容易发生音频与视频不同步的现象。

综合实训——制作宝宝动感相册

任务目标:制作“宝宝动感相册”,包含图片切换动画、导入声音,添加并设置音效。

具体操作步骤如下。

(1) 启动Flash CS5程序,按【Ctrl+N】键新建一个Flash文档,设置舞台大小为“814×600”像素、帧频率为“24.00”fps。

(2) 将所需的素材导入【库】面板,如图7-23所示。

(3) 制作“图1”遮罩动画,新建影片剪辑,命名为“photo1”。

(4) 在【库】面板中将“图1”拖入影片剪辑“photo1”的场景中,在窗口显示【对齐】面板,按【水平中齐】、【垂直中齐】。选中“图1”所在的帧,单击鼠标右键,复制帧;再新建“图层2”,在“图层2”的第1帧单击鼠标右键,粘贴帧。

(5) 选中“图层2”第1帧中的图片,将其转换为影片剪辑元件,命名为“遮罩1”,如图7-24所示。

图7-23 导入素材到【库】面板

图7-24 转换为元件

(6) 双击该元件,按【Ctrl+B】键将“图1”打散。在窗口显示标尺,从标尺上拖出两条水平线,使其将图片在垂直方向分割成相等的三等份。使用线条工具沿辅助线画出两条水平线分割图片,然后新建两个图层,使分割的三块图片在不同的图层上,如图7-25所示。

(7) 在图层3的第15帧处插入关键帧。使用任意变形工具分别调整图层1、图层2、图层3的第1帧,使图块分别向左向右压缩成一条线,并在三个图层中创建补间形状,如图7-26所示。

图7-25 分割三块图片在不同图层

图7-26 创建补间形状

(8) 新建“图层4”,在第15帧处插入关键帧,在【动作】面板中添加脚本“stop();”。

(9) 返回影片剪辑“photo1”,选择“图层2”,单击鼠标右键,选择【遮罩层】命令将其转换成遮罩层,这样就完成了“图1”的遮罩效果。

(10) 采用同样的方式制作图2至图5的遮罩动画。

(11) 制作歌词动画。新建影片剪辑元件,命名为“歌词1进入”。在第1帧处放入“歌词1”图形元件,如图7-27所示,对齐到舞台中央;在第20帧处插入关键帧,选中第20帧的元件向上移动位置,并设置其透明度为“0”。在第1帧和第20帧之间添加传统补间动画,新建图层,在第20帧处插入关键帧,在【动作】面板中添加脚本“stop();”。

(12) 重复上述的步骤制作第2、3、4句歌词的效果。

图7-27 在第1帧处放入“歌词1”图形元件

(13) 新建一个影片剪辑,命名为“照片切换”,在第1帧处拖入“photo1”影片剪辑,对齐到舞台中央;在第56帧处插入空白关键帧,拖入“photo2”影片剪辑,对齐到舞台中央;分别在第120帧、第161帧、第206帧处插入空白关键帧,并分别拖入“photo3”“photo4”“photo5”影片剪辑对齐到舞台中央;在第260帧处插入普通帧。

(14) 新建图层,选中该图层将声音元件拖入舞台,在【属性】面板中编辑声音同步选项选择“数据流”,如图7-28所示。

图7-28 【属性】面板

(15) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。