华中师范大学多媒体CAI课件制作技术第7章FlashCS3使用方法7.1FlashCS3简介7.2FlashCS3基本操作7.3范例网页制作综合实例华中师范大学多媒体CAI课件制作技术你预期的收获掌握FlashCS3的工作环境(期望值:★★★)了解和掌握FlashCS3的操作界面(期望值:★★)熟练使用FlashCS3的基本操作和调试方法(期望值:★★★★)使用FlashCS3制作交互式的Flash作品(期望值:★★★)华中师范大学多媒体CAI课件制作技术7.1FlashCS3简介Flash是是Macromedia公司出品的动态可交互二维动画制作软件,目前已被Adobe公司收购。从简单的动画到复杂的交互式Web应用程序,它都可以创建。通过添加图片、声音和视频,Flash可以生成丰富多彩的多媒体图形和界面。在Flash中创作时,是在Flash文档(即保存时扩展名为FLA的文件)中工作。在准备部署Flash内容时发布它,同时会创建一个扩展名为.swf的动画播放文件。Flash也支持很多其他输出格式,如MP3、wav等。华中师范大学多媒体CAI课件制作技术在CAI课件中,使用设计合理的动画,不仅有助于学科知识的表达和传播,使学习者加深对所学知识的理解,提高学习兴趣和教学效率,同时也能为课件增加生动的艺术效果,特别对于以抽象教学内容为主的课程更具有特殊的应用意义。华中师范大学多媒体CAI课件制作技术7.1.1FlashCS3操作界面简介启动FlashCS3以后,首先显示的是开始界面。在开始页中用户可以随意选择要开始的工作项目,还可以通过其获得产品介绍或教程。开始页面分为以下3栏:打开最近的项目新建从模板创建华中师范大学多媒体CAI课件制作技术在开始页面中选择【新建】→【Flash文件】命令项,就会新建一个空白的Flash文档,同时进入操作界面华中师范大学多媒体CAI课件制作技术FlashCS3操作界面标题栏菜单栏时间轴工具栏属性面板浮动面板组华中师范大学多媒体CAI课件制作技术7.2FlashCS3基本操作高超的技艺,是扎实、纯熟的基本功的积累。华中师范大学多媒体CAI课件制作技术基本术语元件实例库图层关键帧场景时间线元件是一种可重复使用的对象。而实例是元件在舞台上的一次具体使用。Flash包括三种元件:图形按钮影片剪辑。图形元件可用于静态图像,并可用来创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。按钮元件可以创建响应鼠标点击、滑过或其他动作的交互式按钮,可以定义与各种按钮状态关联的图形,然后将动作指定给按钮实例。影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有它们自己的独立于主时间轴的多帧时间轴。可以将影片剪辑看作是主时间轴内的嵌套时间轴,它们可以包含交互式控件、声音甚至其他影片剪辑实例,也可以将影片剪辑实例放在按钮元件的时间轴内以创建动画按钮。实例指位于舞台上或嵌套在另一个元件内的元件副本。实例可以与它的元件在颜色、大小和功能上有差别。编辑元件会更新它的所有实例,但对元件的一个实例应用效果则只更新该实例。库面板是存储和组织在Flash中创建的各种元件的地方,它还用于存储和组织导入的文件,包括位图图形、声音文件和视频剪辑。库面板可以组织文件夹中的库项目,查看项目在文档中使用的频率,并按类型对项目排序。在库中的元件可以重复使用,但一旦删除库中的文件,所有的引用都将失效。图层类似于堆叠在一起的透明纤维纸。在一个图层上创建和编辑对象,而不会影响另一个图层中的对象。关键帧指在动画中定义的更改所在的帧,或包含帧动作的帧。Flash可以在关键帧之间补间或填充帧,从而生成流畅的画面。可以通过在时间轴中拖动关键帧来更改补间动画的长度。帧和关键帧在时间轴中出现的顺序决定他们在Flash应用程序中显示的顺序。可以在时间轴中排列关键帧,以便编辑动画中事件的顺序。场景的顺序和动画播放的顺序有关。一个场景就好像话剧中的一幕,一个出色的Flash动画就是由这一幕幕场景组成的。在播放时,场景与场景之间可以通过交互响应进行切换。通过Flash的场景面板可以对场景进行新建、编辑和删除。时间线分为左右两个区域:层控制区和时间线控制区,时间线控制区主要由若干行与层对应的动画轨道、轨道中的帧序列、时间标尺、信息提示栏和一些用于控制动画轨道显示和操作的工具按钮组成。其中,动画轨道用于放置对应层中的图形帧、动画帧序列或音频序列;动画帧序列是一组按时间顺序排列的图形帧,在播放时,按照预定的顺序和速度交替出现在屏幕上,产生动画效果。华中师范大学多媒体CAI课件制作技术7.2.2Flash制作实例(1)逐帧动画实例:奔跑的豹子逐帧动画:利用导入连续位图而创建。本实例是一只矫健的豹子在奔跑跳跃,制作该flash动画时,先准备好八幅豹子奔跑时不同姿势的图片。如下所示:华中师范大学多媒体CAI课件制作技术(1)逐帧动画实例:奔跑的豹子①新建一个flash文档,【文件】→【新建文档】,弹出“新建文档”对话框,直接单击确定。如下图所示。②保存文件,起名为“奔跑的豹子”。(以下各步骤完成时都要求保存文件,养成良好的操作习惯将使你的学习事半功倍)③点击菜单【修改】→【文档】,弹出“文档属性”对话框,将尺寸中的宽改为180、高改为120。④点击菜单【文件】→【导入】→【导入到库】,弹出“导入到库”对话框,浏览文件找到豹子所在图片文件夹并选中八张豹子的图片,单击【打开】即可。八张豹子的图片就导入到了库中,可按F11将库面板调出,查看其中的图片或其它素材。如下图所示:华中师范大学多媒体CAI课件制作技术(1)逐帧动画实例:奔跑的豹子(续)⑤将库中的图01.jpg拖入到舞台,【单击】舞台上的01.jpg图,在属性中查看01.jpg图的X和Y的坐标值(如图7-10)。在时间轴第二帧处单击右按钮,从弹出的菜单中选择【插入空白关键帧】⑥在时间轴上选择第二帧,由于插入的是空白关键帧,所以第二帧处舞台上是空白的,没有任何内容,将库中的02.jpg图拖入到舞台中,单击选中舞台上的02.jpg图,将其属性中的X和Y的坐标值分别设置为:18和36(坐标值与第一帧中图片坐标值相同)。同理制作好第三帧、第四帧……、第八帧的动画。此时时间轴如下图所示:⑦预览并生成动画。按【Ctrl】+【Enter】键可预览并生成动画。生成的动画文件名为:奔跑的豹子.swf,文件所在文件夹和源文件所在文件夹相同。华中师范大学多媒体CAI课件制作技术(2)补间形状动画实例:公鸡变山羊①创建新文档。启动flash,新建flash文档,大小为默认值并设置背景颜色为蓝色。③在时间轴第45帧处单击右按钮,从弹出的菜单中选择【插入空白关键帧】插入空白关键帧。⑤点击时间轴1-45帧任意一帧,在【属性】面板中的【补间】列表中选择【形状】,如下图所示:④选择笔刷工具【】,笔触颜色设置为黑色,绘制一只羊的图形。②单击第一帧,选择笔刷工具【】,笔触颜色为黑色,绘制一个公鸡的图形。华中师范大学多媒体CAI课件制作技术(2)补间形状动画实例(续)⑥使用形状提示。形状补间动画看似简单,实则不然,Flash在“计算”2个关键帧中图形的差异时,远不如我们想象中的“聪明”,尤其前后图形差异较大时,变形结果会显得乱七八糟,这时,“形状提示”功能会大大改善这一情况。使用形状提示后的各种状态如下图所示。插入形状提示的方法如下图所示:⑦调整形状提示的位置,如下面左、右图所示⑧测试存盘执行【控制】→【测试影片】,观察本例swf文件生成的动画有无问题,若满意,执行【文件】→【保存】,将文件保存成“形状补间.fla”文件存盘,若要导出Flash的播放文件,执行【导出】→【导出影片】命令,保存成“形状补间.swf”文件。华中师范大学多媒体CAI课件制作技术(3)引导路径动画本例通过制作“太阳的运动”来介绍引导层的用法。①新建一个flash文档,单击菜单【文件】→【新建文档】,弹出“新建文档”对话框,直接单击确定(如下图)。②单击【文件】→【导入】→【导入到库】,弹出“导入到库”对话框,浏览文件找到所需图片,单击【打开】,操作结果如下图所示。③将库中的图zrzs_05.jpg拖入到舞台,调整图片的大小(可使用变形工具和【Shift】键实现图片的等比例缩放),并将调整后的图片移至舞台适当的位置上。将“图层一”命名为“背景”(双击“图层”然后输入“背景”),并在70帧处插入帧,以引导动画背景到第70帧,如下图所示。华中师范大学多媒体CAI课件制作技术(3)引导路径动画(续)④在“背景”图层上单击右键,并在快捷菜单中选择【插入图层】,或者单击插入图层按钮,实现添加图层,并将该层命名为“太阳”,如下图所示:⑤单击“太阳”层的第1帧,绘制太阳。首先选择工具栏中【椭圆工具】,打开混色器选择填充样式为“放射状”(如图),调整颜色后在场景中使用【椭圆工具】和【Shift】键绘制一个正圆(如图)⑥单击【添加运动引导层】按钮,添加一个引导层。华中师范大学多媒体CAI课件制作技术(3)引导路径动画(再续)⑦选择引导层第一帧,使用工具栏中的【线条工具】在场景中绘制一条直线(如下图)。单击【选择工具】,将直线拉出一定的弧度,如下图所示,此弧线就是太阳运动的轨迹。⑧单击“太阳层”第1帧,将绘制的太阳拉至曲线左端,如下:同样在第70帧处插入关键帧【F6】,将太阳移至曲线的右端,如下图所示。注意在两个关键帧中一定要将太阳的中心置于曲线上,这样太阳才能沿着所绘制的曲线运动。⑨在“太阳”层任意帧处单击右键,并在快捷菜单中选择【创建补间动画】,如上图所示。⑩预览并生成动画。快捷键为【Ctrl】+【Enter】。华中师范大学多媒体CAI课件制作技术(4)遮罩动画实例遮罩动画实例:别样的风景①新建flash文档:【文件】→【新建文档】,弹出“新建文档对话框,单击确定。②保存文件,起名为“别样的风景”。③【修改】→【文档】,弹出“文档属性”对话框,将尺寸中的宽改为550,高改为400。④【文件】→【导入】→【导入到库】,弹出“导入到库”对话框,浏览文件找到风景所在图片文件夹并选中图片,单击【打开】即可。图片导入到库中,可查看库面板,如左图所示。华中师范大学多媒体CAI课件制作技术(4)遮罩动画实例(续)⑤将库中的“风景.jpg”拖入到舞台,单击舞台上的“风景.jpg”,在属性中更改“风景.jpg”的X和Y的坐标值(如下图所示)。选择图层1的第180帧,按F5插入帧。⑥【插入】→【新建元件】,弹出对话框(如下图),选择【图形】后点击【确定】按钮,即进入元件编辑状态,选择工具栏的椭圆工具并结合【shift】键画一正圆,然后点击回到场景1。华中师范大学多媒体CAI课件制作技术(4)遮罩动画实例(再续)⑦在场景1中,新建图层2,并选中第一帧,然后将元件1从库中拖到场景中(如下图),分别在第60帧,100帧,180帧处右击鼠标分别插入关键帧,并选择这些帧将元件1移到不同的位置(如图),然后在第180帧选中元件1,右击选择【属性】,将宽、高设置成800,800,并移到相应位置使元件1能盖住风景.jpg。⑧然后分别在第1帧、60帧和100帧处右击鼠标,选择【创建补间动画】。⑨在图层2上单击鼠标右键选择【遮照层】。⑩预览并生成动画。按【Ctrl】+【Enter】键可预览并生成动画。生成的动画文件名为:别样的风景.swf,文件所在文件夹和源文件所在文件夹一致。华中师范大学多媒体CAI课件制作技术(5)动态按钮实例本实例主要是应用flash按钮制作网站导航,使网站更加富有动态效果。制作该flash之前需准备几张图片文件。①新建一个flash文档,保存文件,命名为“网站导航”。②将文档尺寸改为500×150像素,背景色设为白色。③将准备的图片导入flash库内,分别命名为:bj、pic1、pic2、pic3、pic4,按【F11】即可查看,如下图所示。④单击【插入】→【新建元件】,在弹出的对话框【名称】中输入“btn1”,【类