FlashCS3使用方法.ppt

多媒体CAI课件制作技术,第7章 Flash CS 3 使用方法,7.1 Flash CS 3 简介,7.2 Flash CS 3 基本操作,7.3 范例网页制作综合实例,多媒体CAI课件制作技术,你预期的收获,掌握Flash CS 3 的工作环境（期望值：）了解和掌握Flash CS 3的操作界面（期望值：）熟练使用Flash CS 3的基本操作和调试方法（期望值：）使用Flash CS 3制作交互式的Flash 作品（期望值：）,多媒体CAI课件制作技术,7.1 Flash CS 3 简介,Flash是是Macromedia公司出品的动态可交互二维动画制作软件，目前已被Adobe公司收购。从简单的动画到复杂的交互式Web应用程序，它都可以创建。通过添加图片、声音和视频，Flash可以生成丰富多彩的多媒体图形和界面。在Flash中创作时，是在Flash文档（即保存时扩展名为FLA的文件）中工作。在准备部署Flash内容时发布它，同时会创建一个扩展名为.swf的动画播放文件。Flash也支持很多其他输出格式，如MP3、wav等。,多媒体CAI课件制作技术,在CAI课件中，使用设计合理的动画，不仅有助于学科知识的表达和传播，使学习者加深对所学知识的理解，提高学习兴趣和教学效率，同时也能为课件增加生动的艺术效果，特别对于以抽象教学内容为主的课程更具有特殊的应用意义。,多媒体CAI课件制作技术,7.1.1 Flash CS 3操作界面简介,启动Flash CS 3以后，首先显示的是开始界面。在开始页中用户可以随意选择要开始的工作项目，还可以通过其获得产品介绍或教程。开始页面分为以下3栏：打开最近的项目新建从模板创建,多媒体CAI课件制作技术,在开始页面中选择【新建】【Flash文件】命令项，就会新建一个空白的Flash文档，同时进入操作界面,多媒体CAI课件制作技术,Flash CS 3 操作界面,标题栏,菜单栏,时 间 轴,工具栏,属性面板,浮动面板组,多媒体CAI课件制作技术,7.2 Flash CS 3 基本操作,高超的技艺，是扎实、纯熟的基本功的积累。,多媒体CAI课件制作技术,基本术语,元件实例库图层关键帧场景时间线,元件是一种可重复使用的对象。而实例是元件在舞台上的一次具体使用。,Flash包括三种元件：图形按钮影片剪辑。,图形元件可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。,按钮元件可以创建响应鼠标点击、滑过或其他动作的交互式按钮，可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。,影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有它们自己的独立于主时间轴的多帧时间轴。可以将影片剪辑看作是主时间轴内的嵌套时间轴，它们可以包含交互式控件、声音甚至其他影片剪辑实例，也可以将影片剪辑实例放在按钮元件的时间轴内以创建动画按钮。,实例指位于舞台上或嵌套在另一个元件内的元件副本。实例可以与它的元件在颜色、大小和功能上有差别。编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。,库面板是存储和组织在Flash中创建的各种元件的地方，它还用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑。库面板可以组织文件夹中的库项目，查看项目在文档中使用的频率，并按类型对项目排序。在库中的元件可以重复使用，但一旦删除库中的文件，所有的引用都将失效。,图层类似于堆叠在一起的透明纤维纸。在一个图层上创建和编辑对象，而不会影响另一个图层中的对象。,关键帧指在动画中定义的更改所在的帧，或包含帧动作的帧。Flash可以在关键帧之间补间或填充帧，从而生成流畅的画面。,可以通过在时间轴中拖动关键帧来更改补间动画的长度。帧和关键帧在时间轴中出现的顺序决定他们在Flash应用程序中显示的顺序。可以在时间轴中排列关键帧，以便编辑动画中事件的顺序。,场景的顺序和动画播放的顺序有关。一个场景就好像话剧中的一幕，一个出色的Flash动画就是由这一幕幕场景组成的。,在播放时，场景与场景之间可以通过交互响应进行切换。通过Flash的场景面板可以对场景进行新建、编辑和删除。,时间线分为左右两个区域：层控制区和时间线控制区，时间线控制区主要由若干行与层对应的动画轨道、轨道中的帧序列、时间标尺、信息提示栏和一些用于控制动画轨道显示和操作的工具按钮组成。其中，动画轨道用于放置对应层中的图形帧、动画帧序列或音频序列；动画帧序列是一组按时间顺序排列的图形帧，在播放时，按照预定的顺序和速度交替出现在屏幕上，产生动画效果。,多媒体CAI课件制作技术,7.2.2 Flash 制作实例,(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文档，保存文件，命名为“网站导航”。,将文档尺寸改为500150像素，背景色设为白色。,将准备的图片导入flash库内，分别命名为：bj、pic1、pic2、pic3、pic4，按【F11】即可查看，如下图所示。,单击【插入】【新建元件】,在弹出的对话框【名称】中输入“btn1”,【类型】选择按钮,单击【确定】按钮。,进入按钮编辑后台，新建两个图层，双击每个图层将三个图层分别命名为：bj、pic、wz。如下图所示。,多媒体CAI课件制作技术,（5）动态按钮实例（续）,单击图层bj的【弹起】帧,将bj元件拖入舞台中央，再单击【指针经过】，插入帧；单击图层pic的【弹起】帧,将pic_1元件拖入舞台中央，再单击【指针经过】，插入关键帧；单击图层wz的【指针经过】帧，输入文字“ahout”，文字大小为15，字体为黑体，颜色为红色。如下图所示。,单击图层pic的【指针经过】帧，再选定舞台上的pic_1图片，右击该图片，选择【转化为元件】。如下图所示。,在弹出对话框【名称】中输入pic_1，【类型】选择【影片剪辑】，单击确定。,在舞台中双击该元件，进入pic_1元件编辑后台。如上图所示。,多媒体CAI课件制作技术,（5）动态按钮实例（再续）,右击舞台中的图片将其转化为影片剪辑p1。如下图示。,分别在第5帧和第10帧插入关键帧，然后在他们之间插入补间，单击第10帧，在动作面板输入代码：stop();。如下图所示。,单击第5帧，再单击图片，按住【shift】键和鼠标左键拖动图片，将图片调大，但大小不超过bj图片。如下图所示。,应用同样的方法制作其他5个按钮。如下图所示。,单击场景1按钮 回到主场景，将制作的5个按钮拖入舞台，按【Ctrl】+【K】调出对齐面板，单击上对齐 和水平居中分布，将它们对齐。如下图所示。,多媒体CAI课件制作技术,（5）动态按钮实例（完）,按【Ctrl】+【A】全选舞台中的按钮，单击属性面板中的滤镜，单击【添加滤镜】【投影】。如下图所示。,将【距离】设置为0，【强度】设置为58%，其他不变。如下图所示。,按【Ctrl】+【S】保存文件，按【Shift】+【Enter】预览，最终效果如下图所示。,多媒体CAI课件制作技术,73 范例网页制作综合实例,本节介绍了制作CAI课件在网上可以发布的制作实例，并对每一步的操作步骤和过程进行了讲解。,多媒体CAI课件制作技术,（1）先用PhotoShop做好两幅图，分别为素材图一和素材图二，图片的大小均为宽：1023px、高：745px,（2）新建一Flash文档，将文档的宽设为1023px、高设为745px。将素材图一和素材图二导入到库中。并将素材图一拖到舞台中，使其布满整个舞台。,（3）单击【插入图层】，新建图层2，双击图层2，输入“章”，将图层2命名为“章”，如下图所示。,（4）中“章”图层的第1帧，在舞台上各按钮的对应位置分别输入第一章、第二章，在图的上部输入“多媒体技术与应用”（如上图左所示）。再新建一个图层，命名为“章内容介绍”。在第1帧处输入文字并调整文字的位置，如上右图所示。,多媒体CAI课件制作技术,（5）单击“章”图层，在图层的第4帧处单击右按钮，在弹出的菜单中选择【插入帧】，同理在图层1的第4帧处单击右按钮，在弹出的菜单中选择【插入帧】。此时的时间轴如下图所示。,（6）选择“章内容介绍”图层，在第2帧处单击右按钮，在弹出的菜单中选择【插入空白关键帧】，在此帧输入第二章的内容介绍，如下图左所示。同理做好第三章、第四章内容介绍的文字。此时，时间轴状态如下图右示。,（7）单击菜单【插入】【新建元件】，弹出【创建新元件】对话框，对话框的设置如上图所示。设置好后单击确定。,多媒体CAI课件制作技术,(8)用【矩形工具】在“覆盖按钮”的“弹起”帧处画一个大小适当的矩形，矩形的颜色可以为任何颜色。如下图左所示。在“点击”帧处单击右按钮，在弹出的菜单中选择【插入帧】，如下图右所示。,（9）单击场景一按钮 回到场景一。将库中的“覆盖按钮”拖入到场景一的舞台上，并用任意变形工具 调整“覆盖按钮”的大小，使其完全覆盖第一章按钮，如下图所示。,（10）单击选中“覆盖按钮”，并展开动作面板，在动作面板中输入如上图所示的代码。,多媒体CAI课件制作技术,（11）单击菜单【窗口】【其它面板】【场景】调出场景面板，单击添加一场景，命名为“第一章”，如下图左所示。双击“第一章”进入“第一章”场景，此时时间轴如下图右所示。,（12）将步骤1中的素材图片二（此图片在步骤1已导入到库中）拖入到舞台中（注意此时的场景是名为“第一章”的场景）并适当调整图的大小使其充满整个舞台。如下图所示。,（13）将上一步图所示的图层1改名为“内容背景”，并新增三个图层，分别命名为：“章内容”、“动作脚本”、“翻页按钮”，如上图所示。,多媒体CAI课件制作技术,（14）在“内容背景”图层的第5帧处插入帧。在“章内容”层的第一帧处输入第一页相应的内容到舞台，在第二帧插入关键帧，并在该帧处输入第二页相应的内容到舞台，同理在“章内容”层上做好第三帧、第四帧、第五帧的相应内容。如下图所示。,多媒体CAI课件制作技术,图1,图 2,图 3,（15）单击选中“翻页按钮”图层的第1帧，【窗口】【公用库】【按钮】调出公用库面板，找到公用库中的classic buttons文件夹下的Playback子文件夹，如图1所示。将Playback文件夹下的、和 按钮拖入到该帧的舞台中，位置如图2所示，选中其中的按钮，在属性中将其实例名称设为“retu”，如图3所示。,多媒体CAI课件制作技术,（16）选择文本工具，文本属性中选择动态文本，居中对齐，字号“22”，实例名称设为“tishi”，如图4所示。在“翻页按钮”层的第1帧舞台适当位置拖动创建文本框（位置如图4所示），在按钮 处于选中状态时，调出动作面板并在其中输入脚本，如图5所示。,图 4,图 5,多媒体CAI课件制作技术,（17）选中“翻页按钮”图层第1帧舞台上的 按钮，展开动作面板，在其中输入如图6所示脚本代码；选中“翻页按钮”图层第1帧舞台上的 按钮，展开动作面板，在其中输入如图7所示脚本代码。在“翻页按钮”图层的第2帧处“插入关键帧”，在第4帧处“插入帧”，第5帧处“插入关键帧”，此时的时间轴如图8所示。选中该图层的第1帧，将舞台上的 按钮删除（注：因为第一页不需要向上翻页，所以在第1帧处删除此按钮），同理在第五帧处将 按钮删除。,图6,图7,图8,多媒体CAI课件制作技术,（18）选择“动作脚本”层，在第1帧处输入如图9所示的脚本代码。在第1帧处单击右按钮，在弹出菜单中选择“复制帧”，分别在第2帧、第3帧、第4帧、第5帧处单击右按钮，在弹出菜单中选择“粘贴帧”，如图10所示。,图 9,图 10,（19）按【Ctrl】+【Enter】键预览并生成动画，发现动画并没有停留在场景1等待交互，而是从场景1直接运行到“第一章”的场景，这是因为场景1中没有设置“stop”命令，这样flash动画就会直接从上一个场景运行到下一个场景，因此需要做一些修改。回到场景1中，分别在图层“章内容介绍”的第1帧、第2帧、第3帧、第4帧的动作面板中输入“stop();”命令，如图11所示。,图11,多媒体CAI课件制作技术,（20）选中“章内容介绍”图层第1帧舞台上的“覆盖按钮”，将其颜色【alpha】属性设置成“100%”如图12所示，这样红色按钮就变成透明的了。,选中此透明“覆盖按钮”并按【Ctrl】+【C】复制，在“章内容介绍”层的第2、3、4帧的舞台中，按【Ctrl】+【Shift】+【V】“粘帖到当前位置”（也可点击菜单【编辑】【粘帖到当前位置】命令），此时按钮所处的位置与第一帧相同，即也是覆盖在上。第二章、第三章、第四章的内容制作方法和第一章相同，只是按钮上的代码稍作变化。将on(rollOver)gotoAndStop(1);on(press)gotoAndPlay(第一章,1);中的gotoAndStop(1)改为gotoAndStop(“相应章节介绍内容所处的帧“)即可，比如第二章就改为gotoAndStop(2)，本实例不再赘述。,图 11,(21)【Ctrl】+【Enter】，预览并生成动画。,多媒体CAI课件制作技术,本章小结,本章主要介绍了Flash CS.3的操作界面和使用方法，以实例分别讲述了逐帧动画、补间形状动画、引导路径动画、遮罩动画、动态按钮的操作方法，并给出了网页制作的综合范例。Flash具有优秀的媒体素材整合能力和强大的互动编程能力，需要在实际操练中强化各种交互多媒体开发应用。,多媒体CAI课件制作技术,思考与习题,一、单选题1.Flash CS3 是由哪家公司开发的？（）AAdobe 公司 BMacromedia 公司 CMicrosoft 公司2.下面的哪一个工具不属于线条工具？（）A“钢笔”工具 B“铅笔”工具 C“刷子”工具3.创建文本时，在“文本属性”面板中哪些属性不能设置？（）A字体 B段落 C首行缩进4.要对文本进行矢量编辑操作，首先应将其文本（）。A变形 B打散 C选择5.在Flash 的时间轴面板中，要快捷建立关键帧，其快捷键是（）。AF5 BF6 CF76.滤镜效果只适用文本、影片剪辑和（）。A图片 B 按钮 C 首行缩进7.一般默认的动画速度为（）。A12fps B24fps C 30fps 8.构成动作动画的元素是元件，但不能是（）。A位图 B 形状 C 对象9.要输入ActionScript 脚本语句，应在哪个面板中输入？（）A“属性”面板 B“动画”面板 C“行为”面板10.在使用Flash CS3 进行影片发布时，哪种格式是错误的？（）AHTML BSWF CFLA 11.要对影片进行测试，下面哪种方法是错误的？（）AEnter BCtrl+Enter CCtrl+Shift+Enter,多媒体CAI课件制作技术,思考与习题,二、填空题1.在对Flash CS3 文档进行保存时，可按_组合键进行保存。2.在Flash CS3 中有 3 种文本类型，即_、_和_。3.所导入的声音文件与位图、元件等一起保存在_面板中。4.在Flash CS3 中，图层可分为普通图层、遮罩层和_3 种。5.在Flash 中清除帧后，则该帧就会自动变为_帧。6.在Flash CS3 中有 3 种元件类型，即影片剪辑元件、图形元件和_。7.在Flash CS3 中有 3 种公用库，即学习交互、按钮和_。8.在进行影片控制过程中，播放影片的语句是_，停止影片的句语是_。9.在ActionScript 结构语句中主要包括 3 种结构语句，即顺序执行、_和循环控制。10.通过_和_命令可以生成.swf 文件，他们将放置在与编辑文件相同的目录中。11.创建扩展名为_的文件是发布 Flash 动画的最佳途径，它也是为了从 Web 获取用户制作动画的第一步。12.通过_和_命令可以生成.swf 文件，他们将放置在与编辑文件相同的目录中。13.创建扩展名为_的文件是发布 Flash 动画的最佳途径，它也是为了从 Web 获取用户制作动画的第一步。,多媒体CAI课件制作技术,思考与习题,三、问答题1.试简述动画的基本原理，并列举常见的计算机动画文件格式。2.试述flash的几种常见动画方式。3.参考相关书籍，利用flash设计制作一个动画网页,