版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、第4章 动画制作软件Flash2022/8/71网页设计与制作(第二版)第4章 动画制作软件Flash 网页作为一种新兴的媒体,正成为当今人们获取信息的重要方式。随着网络技术的发展,单调的页面及布局已经能做得像其他媒体一样丰富多彩了。就目前而言,要想改变静态页面呆板的面貌,并且突破网络传输速度的限制,相信每一个网络设计人员都会说,使用Flash。的确,目前Flash在网络设计上的应用正像它的名字一样光彩照人、势不可挡。 2022/8/72网页设计与制作(第二版)第4章 动画制作软件Flash4.1 Flash 8概述 4.2 Flash基本操作4.3 图形操作4.4 动画制作4.5 声音处理4
2、.6 动画的交互控制4.7 使用组件4.8 优化和发布 4.9 综合实例思考与练习4.1 Flash 8概述 Flash是由美国Macromedia公司出品的一款矢量图形编辑和动画制作软件。因为这款软件在基于矢量图形压缩方面有着惊人的能力,并且可以在Web上发布,所以很快便在互联网世界中流行起来。用户除了可以利用它制作普通动画外,还可以在动画中加入背景音乐。更重要的是,用户还可以利用它制作交互动画及动态网页。 2022/8/74网页设计与制作(第二版)4.1.1 Flash 8的功能特点 导入功能的扩展。Flash 8 可以非常容易地通过导入功能将AVI、MPEG或GIF等视频文件导入到Fla
3、sh文件中,还可导入Flash发布后的SWF文件。 工具箱中新增加了两个工具。自由转换工具,可以对绘制内容进行任意的缩放或旋转等变化;填充转换工具,主要用来调整填充颜色。 图层可做成文件夹。在时间轴中,新增了图层文件夹,使得管理图层更加方便。 2022/8/75网页设计与制作(第二版)4.1.1 Flash 8的功能特点 利用文本工具设定超级链接。在Flash 8 中可以直接通过文本工具设定超级链接,这与设计网页时的操作一样简单。 增强了Actions编辑器的功能。改进的ActionScript(动作脚本)编辑面板使得用户可以方便地访问、查找所有的(包括潜在的)动作语句。 新增了属性面板。Fl
4、ash 8进一步向面向对象的技术靠拢,提供了独立的属性面板。 支持组件功能。组件是面向对象技术的一个重要特征,Flash 8开始支持组件。 2022/8/76网页设计与制作(第二版)4.1.2 动画知识简介2022/8/77网页设计与制作(第二版)与我们平时看到的电影和录像一样,Flash动画也是基于帧构成的,也就是通过若干个静止的画面连续播放来产生动作效果,我们把这些静止的画面称为帧。通常的电脑动画大部分都是基于这种原理来创建的。对于这种以帧的连续播放产生的电影,一般来说,每一秒钟的电影至少包含24帧,或者更多,而且帧数越多,电影画面就越连贯。例如我们看的电视每秒钟包含25帧。为了降低网络流
5、量,Flash 通常将动画一秒钟播放的帧数设置为12。如果就以每秒钟12帧来计算,要生成1小时的Flash动画,它将包含43200帧。如果对每一帧的画面都进2022/8/78网页设计与制作(第二版)行绘制,那将是不现实的。于是在设计Flash动画时,引进了关键帧这个概念。所谓关键帧就是指用来描述动画中关键画面的帧。在制作Flash 动画时,只要将动画中的关键帧画面制作好后,两个关键帧之间的各帧则可以通过插值的方法来自动产生,这将大大提高动画制作的效率,同时也大大减少了动画中的冗余数据。有时一个帧中的内容非常复杂,为了减少每一帧中内容的复杂程度,Flash又引入了图层的概念,我们可以将帧中复杂的
6、内容分别绘制到不同的图层,以减少每一帧动画的复杂程度。Flash就这样将时间线、帧和图层分别用在横纵结构上以构成动画。2022/8/79网页设计与制作(第二版) 选择“开始程序MacromediaMacromedia Flash 8”菜单选项,启动Flash 8应用程序,打开的程序窗口,布局如图5-1所示。在Flash 8程序窗口中,根据功能的不同,可以将Flash 8的操作界面分成7个部分,它们分别是菜单栏、工具栏、工具箱、属性面板、面板容器、时间线和动画设计窗体。 4.1.3 Flash 8工作界面2022/8/710网页设计与制作(第二版)图2022/8/711网页设计与制作(第二版)
7、4.2.1 参数设置 4.2.2 文件的建立、保存 4.2.3 时间轴的操作 4.2.4 场景操作 4.2.5 动画播放4.2 Flash基本操作2022/8/712网页设计与制作(第二版)Flash允许用户根据需要设置常用参数,如设置应用程序的常规操作、编辑操作和剪贴板操作等。选择“编辑参数选择”菜单选项,打开“参数选择”对话框,可对常用参数进行设置,如图5-2所示。 4.2.1 参数设置2022/8/713网页设计与制作(第二版)图2022/8/714网页设计与制作(第二版)1. 文件的建立选择“文件新建”菜单选项,就可以新建一个Flash文件。2. 文件的保存Flash电影创建完成后,可
8、以将其保存为当前使用的名称或所在位置,也可以保存为其他的名称或位置。 选择“文件保存”菜单选项,使用当前文件名保存当前文件。 如果选择“另存为”命令,或文件从来没有保存过,这时候将打开Save As(另存为)对话框,如图5-3所示。选择文件存储位置并输入文件名,单击保存按钮即可。4.2.2 文件的建立、保存2022/8/715网页设计与制作(第二版)图2022/8/716网页设计与制作(第二版)时间轴的组成部分有帧、层和播放指针,如图5-4所示。时间轴用于组织动画各帧的内容,并可以控制动画每帧每层的显示内容,还可以显示动画播放的速率等信息。单击“帧视图”按钮,在弹出的下拉菜单中包含许多对帧的操
9、作。 4.2.3 时间轴的操作2022/8/717网页设计与制作(第二版)一个动画可能包含多个场景,使用场景可以更好地组织动画。场景的顺序和动画的播放顺序有关。一个场景就好象话剧中的一幕,一个出色的Flash动画就是由这一幕幕场景组成的。有关场景的基本操作,包括场景的切换、添加、删除及调整顺序等,全部都可以在场景面板中进行,如图5-5所示。也可利用场景右上角的“编辑场景”按钮或查看、插入菜单的有关菜单选项对场景进行部分操作。4.2.4 场景操作2022/8/718网页设计与制作(第二版)图2022/8/719网页设计与制作(第二版)要播放当前的场景,可以选择“控制播放”菜单选项或选择“窗口工具
10、栏控制栏”菜单选项,打开“控制器”,然后单击“播放”按钮。4.2.5 动画播放2022/8/720网页设计与制作(第二版) 4.3.1 图形的复制与删除 4.3.2 图形的层次顺序 4.3.3 网格的使用 4.3.4 组合与分离操作 4.3.5 图形的显示模式 4.3.6 图形变形 4.3.7 使用位图 4.3 图形操作2022/8/721网页设计与制作(第二版)1. 复制图形在场景中选中图形后,选择“编辑拷贝”菜单选项,可以将选中的图形复制到Windows剪贴板上。这时,如果选择“编辑粘贴”菜单选项,复制的图形将被粘贴到场景中心。选择“编辑粘贴到当前位置”菜单选项,复制的图形将原位粘贴到场景
11、中。2. 删除图形选中场景中要删除的图形,然后选择“编辑/清除”菜单选项或选择“编辑/剪切”菜单选项即可删除图形。4.3.1 图形的复制与删除2022/8/722网页设计与制作(第二版)在Flash中创建图形对象时,创建对象的次序与对象的位置是有关系的。同一层上的对象,后创建的对象处于先创建对象的上面,即最先创建的对象位于其他对象的下面。对象的层次顺序决定对象覆盖时的显示方式。执行“修改排序”菜单选项,可以对当前活动图层中所选定的对象进行层次顺序的调整。 置于顶层: 将选中的对象移动到当前图层中所有对象的最上方。 上移一层: 将选中的对象在当前图层向上移动一级。 下移一层: 将选中的对象在当前
12、图层向下移动一级。 置于底层: 将选中的对象移动到当前图层中所有对象的最下方。 4.3.2 图形的层次顺序2022/8/723网页设计与制作(第二版)若在绘图时使用格线,可以准确定位对象。要显示或隐藏格线,可以通过“查看网格”下的选项来设置。还可以通过“编辑网格”子命令来打开“网格”对话框,以便设置格线的颜色、对齐网格的精确度以及是否显示格线。图5-6所示为网格设置对话框。4.3.3 网格的使用2022/8/724网页设计与制作(第二版)1. 群组对象所谓群组对象,就是将两个以上的对象组合成单个对象,以便于移动、缩放及旋转等操作。若要群组对象,只要选中了所有要群组的对象,然后选择“修改群组”菜
13、单选项或者按快捷键“Ctrl+G”即可。2. 分解对象分解对象可以将群组对象、文字对象、组件或点阵图分离成线条与填色区块,以后可以使用“墨水瓶”工具与“颜料桶”工具来编辑这些对象。选取对象后,只要执行“修改分解组件”命令,或者按快捷“Ctrl+B”即可分解对象。4.3.4 组合与分离操作2022/8/725网页设计与制作(第二版)Flash 8提供了4种图形显示模式,可以从查看下拉菜单中选择。 外边框模式只显示对象的外框,因此显示速度快。 高速显示模式会显示对象的框线与填充色,但不提供去锯齿功能,因此显示的品质较为粗糙,但显示速度快。 清除锯齿模式显示质量比较好,但速度稍慢些。 清除文字锯齿模
14、式显示质量最好,但在这4种模式中,显示速度最慢。4.3.5 图形的显示模式2022/8/726网页设计与制作(第二版)图形变形包括图形的缩放、旋转、倾斜和翻转等。1. 对图形进行缩放(1)首先,选取要进行处理的图形。(2)单击“工具箱”中的“自由转换”工具按钮,此时在图形的四周出现8个小黑方块。(3)将鼠标放在图形四周的8个小黑方块上,当鼠标出现双箭头状时,拖动鼠标即可对图形进行缩放操作,如图5-7所示。4.3.6 图形变形2022/8/727网页设计与制作(第二版)(1)首先,我们选取要进行处理的图形。(2)单击“工具箱”中的“自由转换”工具按钮,此时在图形的四周出现8个小黑方块。(3)将鼠
15、标指针移到图形的4个角落的任意一个小黑方块上,当鼠标变成状时,按住鼠标左键不放进行拖动,即可旋转图形,如图5-8所示。2. 对图形进行旋转2022/8/728网页设计与制作(第二版)(1)首先,我们选取要进行处理的图形。(2)单击“工具箱”中的“自由转换”工具按钮,此时在图形的四周出现8个小黑方块。(3)将鼠标指针移到4个边的边线上,当鼠标指针变成双箭头状时,按住鼠标不放进行拖动,则可以将图形进行倾斜,其效果如图5-9所示。3. 对图形进行倾斜2022/8/729网页设计与制作(第二版)(1)首先,我们选取要进行处理的图形。(2)选择“修改转换垂直翻转”菜单选项,即可将图形进行垂直翻转,如图5
16、-10所示。(3)选择“修改转换水平翻转”菜单选项,即可将图形进行水平翻转。4. 对图形进行翻转2022/8/730网页设计与制作(第二版)1. 打碎位图输入到Flash中的图像,经过打碎后生成多个独立的填充区域和线条,可以使用Flash中的绘图工具或填充工具对它进行修改。打碎图像的步骤如下:(1)首先要导入一张位图。(2)选择“修改分解组件”菜单选项,即可将位图打碎。2. 将位图转换成矢量图Flash 8允许从外部导入多种图形格式,并可将其转换为矢量图,其具体操作步骤如下:(1)首先要导入一张位图。(2)选定位图后,执行“修改描绘位图”命令,此时会出现如图5-11所示的对话框。(3)可以调整
17、各参数,最后单击“确定”按钮即可。4.3.7 使用位图2022/8/731网页设计与制作(第二版)2022/8/732网页设计与制作(第二版)在Flash 8中可以创建丰富多彩的动画效果,可使一个对象在场景上穿梭运动、放大或缩小、旋转、变色、淡入或淡出以及改变形状等。这些改变可以单独发生,也可以组合发生。4.4 动画制作2022/8/733网页设计与制作(第二版)4.4.1使用元件库 4.4.2图层操作 4.4.3帧的使用 4.4.4逐帧动画 4.4.5动作渐变式动画 4.4.6形状渐变式动画4.4.7淡出淡入式动画 4.4.8编辑动画 4.4 动画制作2022/8/734网页设计与制作(第二
18、版)4.4.1 使用元件库Flash中的元件包括3种,即图形元件、按钮元件和影片剪辑元件。1. 使用元件在动画中使用元件可以简化影片的编辑,缩减影片文件的尺寸,方便制作运动类型的过渡动画,加快影片的播放速度。下面说明元件的使用方法:2022/8/735网页设计与制作(第二版) 选择“窗口共享库Buttons”菜单选项,打开共享按钮库,通过双击目录名可以展开该目录下的内容,当单击任意一个按钮元件时,在预览窗口中将观察到它的效果,如图5-12所示。 选择“窗口共享库Learning Interactions”菜单选项,打开共享学习交互库,在该库中,多是影片剪辑元件,是Flash提供的、已经设计好的
19、、用于人机交互的一些表单元件,如图5-13所示。2022/8/736网页设计与制作(第二版) 选择“窗口共享库Sounds”菜单选项,打开共享声音库,单击任意一个声音元件时,在预览窗口中观察到它的波形效果,并可单击按钮播放声音,如图5-14所示。 在元件预览窗口中用鼠标将其拖放到场景中,它们就成为实例。2022/8/737网页设计与制作(第二版)2. 新建元件(1)将场景中的元素转换成元件在场景中,选中的任何图形对象都可以被转换成元件。其操作步骤为: 选取工具箱中的箭头工具,在场景中选中要转换为元件的图形元素。 选择“插入转换为元件”菜单选项,打开“转换为元件”对话框,如图5-15所示。202
20、2/8/738网页设计与制作(第二版) 选中需要转换的元件类型,然后单击“确定”按钮,这时选中的元素将被转换成了元件。如果选择“窗口库”菜单选项,在打开的元件库中将显示被转换成的元件。(2)创建新元件创建新元件是指直接创建一个空白元件,然后进入元件编辑模式创建和编辑元件内容。其操作步骤为: 选择“插入新建元件”菜单选项,打开“创建新元件”对话框,如图5-16所示。2022/8/739网页设计与制作(第二版) 在“名称”编辑框中输入元件名称,在“作用”选项区中选择所要创建的元件类型,然后单击“确定”按钮,工作区会自动从影片编辑模式转换为元件编辑模式。这时元件名称将显示在舞台的左上角,工作区中心位
21、置会出现元件的注册点,以“+”号表示。 选取工具箱中的绘图工具,在工作区中制作元件。制作完毕后,单击窗口左上角的“场景1”按钮,切换到场景编辑模式,打开元件库,可以看到新增加的元件。3. 创建按钮元件按钮是元件的一种重要类型,当使用鼠标与其交互时,它会显示出不同的外观。2022/8/740网页设计与制作(第二版)在Flash 8中,按钮有4种状态,每种状态都有特定的名称与之对应,它们可以在时间轴窗口中进行定义,这4种状态分别是:UP(弹起状态)、鼠标经过(触摸状态)、DOWN(按下状态)和反应区(点击状态)。下面通过一个实例来说明创建按钮元件的方法,其操作步骤如下:(1)选择“文件新建”菜单选
22、项,创建一个新文件。(2)选择“插入新建元件”菜单选项,在打开的“创建新元件”对话框中设置创建的元件名称和类型。2022/8/741网页设计与制作(第二版)(3)单击“确定”按钮,进入按钮元件编辑模式,在时间轴窗口中可以看到已有4帧:UP、鼠标经过、DOWN和反应区,如图5-17所示。2022/8/742网页设计与制作(第二版)(4)单击时间轴窗口中的UP帧,并选取工具箱中的椭圆工具,以按钮注册点为中心,按下Shift键的同时绘制一个红色填充圆,如图5-18所示。(5)在“鼠标经过”帧上单击鼠标右键,从弹出的快捷菜单中选择“插入白色关键帧”选项,插入一个空白关键帧。(6)单击时间轴窗口中的“洋
23、葱皮”按钮,使UP帧以较淡的形式显示出来。(7)选取工具箱中的椭圆工具,再绘制一个绿色渐变圆,并将绘制的圆稍微偏移注册点,如图5-19所示。2022/8/743网页设计与制作(第二版) (8)在DOWN帧上单击鼠标右键,从弹出的快捷菜单中选择“插入白色关键帧”选项,插入一个空白关键帧。(9)选取工具箱中的椭圆工具,再以注册点为中心绘制一个红色渐变圆,如图5-20所示。2022/8/744网页设计与制作(第二版)(10)选择“编辑编辑影片”菜单选项,回到场景中。(11)选择“窗口库”菜单选项,打开元件库,选中制作的按钮元件,并将其从预览窗口中拖放到场景中,创建它的一个实例。4. 创建动态元件影片
24、剪辑就好像一小段事先做好的影片,然后我们可以在舞台上调用它。它有一个独立于舞台中主时间轴的自己的时间轴。使用影片剪辑就可以实现组合的动画效果。下面我们通过实例来说明影片剪辑元件的制作过程,具体操作步骤如下:2022/8/745网页设计与制作(第二版)(1)单击“文件”菜单中的“新建”命令,创建一个新的文件。(2)单击“插入”菜单中的“创建新元件”命令,在弹出的“创建新元件”对话框中设定元件名称为Bird,设定元件作用为“影片剪辑”,如图5-21所示。完成后单击“确定”按钮,Flash将进入元件编辑模式。 2022/8/746网页设计与制作(第二版) (3)在影片剪辑元件的第2帧使用快捷键F6插
25、入关键帧,然后分别在第1帧和第2帧中绘制小鸟飞行的两个动作,如图5-22、图5-23所示。2022/8/747网页设计与制作(第二版)(4)单击工作区左上角的标签“场景1”切换到场景1,然后单击“窗口”菜单中的“库”命令,打开库面板,将元件Bird拖动到舞台中,创建它的一个实例。 2022/8/748网页设计与制作(第二版)4.4.2 图层操作Flash 提供的图层操作除了一般的可见性操作、锁定操作和隐藏操作外,还提供了两种特殊的图层:运动向导层和遮罩层。这两种图层提供了一般图层所不具有的属性和功能。1. 图层的创建和删除创建和删除图层既可通过菜单命令进行操作,也可通过时间线面板左下方的图形按
26、钮进行操作。在时间线面板的左下方有4个图形按钮,如图5-24所示。2022/8/749网页设计与制作(第二版)4个按钮的作用分别为:插入新图层、新建运动向导层、插入层文件夹和删除图层。2. 图层的选择和拷贝Flash 8中没有提供图层拷贝的功能,当我们希望获得两个内容完全相同的图层时,可以使用“复制帧”命令解决问题。操作步骤如下:(1)单击“图层1”的名称,以选择“图层1”中的全部内容。(2)单击“编辑”菜单中的“复制帧”命令,将“图层1”中的内容拷贝到剪贴板中。(3)单击空白图层“图层2”的名称,使其成为当前的活动图层。(4)单击“编辑”菜单中的“粘贴帧”命令,这样就将剪贴板中的内容拷贝到“
27、图层2”中去了。2022/8/750网页设计与制作(第二版)3. 图层的锁定与解除当在一个或多个图层上已经完成了许多工作,而这些内容在短时间内又不需要调整时,那么可以将这一个或多个图层锁定,以免因误操作而导致辛苦的工作付诸东流。图层锁定与解除的方法如下:只要在时间线面板上单击按钮下方每一个图层中的小圆点或按钮即可锁定或解锁相应的图层。如果只是单击按钮,那么可以锁定或解锁全部图层。图层被锁定以后,小圆点会变成形状。如图5-25所示,“层1”和“层2”是被锁定的图层,“层3”是没有被锁定的图层。2022/8/751网页设计与制作(第二版)4. 改变图层的次序图层被创建以后,您可以通过改变图层上下次
28、序来改变图层的可见性,在上面的图层会遮挡住下面的图层。改变图层的次序只需在时间线面板中拖动图层到希望的位置即可。5. 图层的隐藏与显示为了设计简单明了,可以隐藏掉设计中的一个、多个或所有图层。单击时间线面板中按钮下方每一个图层中的小圆点或图标即可隐藏或显示相应的图层。如果只单击按钮,那么可以隐藏或显示所有的图层。图层被隐藏以后,在按钮下方的圆点会变成形状。图5-26所示是单击按钮后隐藏掉所有图层的样子。2022/8/752网页设计与制作(第二版)6. 运动向导层在Flash动画设计过程中,运动向导层的主要功能是用来绘制物体运动的路径。在制作以元件为对象并沿着路径运动的动画中,运动向导层的应用是
29、最为普遍、也是最好的方法。其实例操作可参见“5.4.5 动作渐变式动画”。7. 遮罩层遮罩层就好像是一块不透明的布,它可以将自己下面的图层挡住,只有在遮罩层的填充色下,才可以看到下面的图层,而遮罩层中的填充颜色是不可见的。其实例操作可参见“5.9 综合实例”。2022/8/753网页设计与制作(第二版)4.4.3 帧的使用关键帧在制作动画的过程中是非常重要的,它用于定义动画中对象的变化。只有定义了关键帧,才可能定义动画中每一个图像。关键帧可以是一个过程的起始或终结,还可以是另一个过程的开始。在创建逐帧动画时,每一帧都是关键帧。在过渡动画中,只要在重要的地方定义关键帧,Flash 8会自动创建关
30、键帧之间的内容。1. 创建帧要在时间线中添加关键帧,可以通过3种方法实现。 在时间线面板中选择一个关键帧的位置,然后单击“插入”菜单中的“插入关键帧”命令。2022/8/754网页设计与制作(第二版) 在时间线面板中要插入关键帧的位置右击,在弹出的快捷菜单中单击“插入关键帧”命令。 在时间线面板中选择一个关键帧的位置,然后按快捷键 F6。2. 复制帧在制作动画时,为了方便操作,有时需要复制一些帧。其操作步骤如下: 选定需要拷贝的帧,可以是一个帧,也可以是多个帧,然后单击鼠标右键,从弹出的快捷菜单中选择“拷贝帧”选项,需要拷贝的帧就复制到了剪帖板上。 选择要粘贴帧的位置,然后单击鼠标右键,从弹出
31、的快捷菜单中选择“粘帖帧”选项,这样就完成了复制帧的工作。2022/8/755网页设计与制作(第二版)3. 翻转帧 翻转帧功能可以将选定的一组帧按照顺序翻转过来,最后一个帧变为第一个帧,第一个帧成为最后一个帧,播放顺序也刚好掉转。其操作步骤如下: 要选择所有图层上的所有帧,可以在任意帧上单击鼠标右键,然后从弹出的快捷菜单上选择“全部选择”选项;要选择某一图层上的所有帧,可以单击图层名称;要选择某一段帧,可以先单击所需选取的第1 帧,然后按下Shift键单击所需选取的最后一帧。 在被选帧上单击鼠标右键,从弹出的快捷菜单中选择“翻转帧”选项,这时,所选定的帧就被翻转了。2022/8/756网页设计
32、与制作(第二版)4.4.4 逐帧动画逐帧动画是最传统的动画创建形式,也是Flash动画的一个重要类型。逐帧动画适用于非常复杂的动画,它的每一帧都是关键帧,每一帧都由制作者确定,而不是由Flash通过计算得到关键帧。与过渡动画相比,逐帧动画的体积较大。下面通过一个实例来介绍创建逐帧动画的方法。其步骤如下:(1)选择“文件新建”菜单选项,新建一个影片。(2)选取工具箱中的文本工具,然后在“属性”面板中设置文字大小为150,颜色为红色。2022/8/757网页设计与制作(第二版)(3)在场景中单击鼠标,并输入文字F,如图6-27所示。(4)单击第2帧,然后选择“插入关键帧”菜单选项,插入一个关键帧,
33、并输入文字L,如图5-28所示。(5)重复步骤(4),输入其他的文字,如A、S、H,第5帧的结果如图5-29所示。 (6)选择“控制测试影片”菜单选项测试影片播放效果,如图5-30所示为影片中的一帧。2022/8/758网页设计与制作(第二版)4.4.5 动作渐变式动画动作渐变动画是在影视、卡通动画作品中最常用的一种动画形式,在使用组合、元件和可编辑文本等对象进行动画制作时经常要用到。动作渐变主要用于将对象从一个地方移动到另一个地方,也可以用于制作缩放、扭曲或旋转对象的动画,或用于制作元件的颜色和透明度的动画。制作动作渐变动画,只需要制作好若干关键帧的画面,其余中间各帧由计算机自动生成。下面通
34、过一个实例来介绍创建动作渐变动画的方法。其步骤如下:(1)单击“文件”菜单中的“新建”命令,创建一个新的文件。2022/8/759网页设计与制作(第二版)(5)在工作区中拖动元件Bird的实例,将实例的中心点和运动向导层中曲线的起点对齐,如图5-33所示。(2)单击时间线面板左下方的按钮,创建一个运动向导层。(3)在新建的运动向导层中使用铅笔工具绘制一条曲线,这条曲线将作为小鸟飞翔的路径,如图5-31所示。(4)选中图层“层1”,将“5.4.1使用元件库”“4. 创建动态元件”中创建的影片剪辑元件“Bird”拖曳到工作区中,如图5-32所示。 2022/8/760网页设计与制作(第二版)(6)
35、在时间线面板中同时选中图层“层1”和运动向导层的第20帧,并使用快捷键F6在这里插入关键帧。然后拖动元件Bird的实例,将实例的中点和运动向导层中曲线的终点对齐,如图5-34所示。(7)选中图层“层1”的第1帧,然后在属性面板中的“中间”下拉列表框中选择“移动”,设置完成后如图5-35所示。 (8)单击“控制”菜单中的“测试影片”命令,对影片进行测试,可以发现,在运动向导中绘制的曲线是不可见的,而元件Bird 的实例仍然按照这条曲线的路径在运动,如图5-36所示。2022/8/761网页设计与制作(第二版)4.4.6 形状渐变式动画形状渐变动画也称形变动画,用户只需要创建关键帧上的不同形状的对
36、象,就可以设置形变动画了。需要注意的是形变动画中的关键帧上的对象不能是元件、组合对象和位图。所以对于各关键帧中创建的对象,除了直接在工作区中绘制的图形外,如果是使用别的元件在场景中创建形变动画,一定要将元件对象打散。下面通过一个实例来介绍创建形状渐变动画的方法。其步骤如下:(1)选择“文件新建”菜单选项,新建一个影片。(2)选择“修改影片”菜单选项,打开影片“属性”对话框,设定动画尺寸为500px 400px,背景颜色2022/8/762网页设计与制作(第二版)为浅黄色(#FFFFCC),然后单击“确定”按钮。(3)选取工具箱中的文本工具,在“属性”面板中设置字体为“幼圆”,字号为300,颜色
37、为黑色(或其他颜色)。(4)在场景上单击鼠标,然后输入字母F。(5)选取工具箱中的箭头工具,然后选择“修改分解组件”菜单选项,打散字母,可以看到字母变形为打散的颜色方块,如图5-37所示。(6)在时间轴的第5帧上单击鼠标,然后选择 “插入白色关键帧”菜单选项,插入一个空白的关键帧,此时输入的字符将会消失。(7)单击时间轴下方的“绘图纸外观”(洋葱皮)按钮,可以看见字母F以较淡的颜色显示出来。2022/8/763网页设计与制作(第二版)(8)再次选择文本工具在场景上继续输入字母L,覆盖在字母F上,然后选择“修改分解组件”菜单选项,将其打碎,如图5-38所示。(9)用同样的方法,分别在时间轴的第1
38、0、15、20帧处输入字母A、S、H,并将它们打散,这时的时间轴如图5-39所示。(10)在第1 帧上单击鼠标,然后在帧“属性”面板的“中间”下拉列表框中选择“形状”选项,如图5-40所示。(11)设置完毕后,可以看到时间轴的第1帧到第5帧之间产生了一条绿色箭头线。(12)用同样的方法,单击第5帧、10帧和15帧,并在帧“属性”面板的“中间”下拉列表框中选择“形状”选项,这时时间轴变为如图5-41所示。2022/8/764网页设计与制作(第二版)(13)选择“控制测试影片”菜单选项,观看影片播放效果,如图5-42所示为影片中的一帧。4.4.7 淡出淡入式动画淡出淡入式动画属于变形动画的一种,只
39、不过是颜色的变化而已。下面通过一个实例来说明淡出淡入动画的制作方法,其步骤如下:(1)选择“文件新建”菜单选项,新建一个影片。(2)选择“修改影片”菜单选项,打开“影片属性”对话框,设定动画尺寸为500px400px,背景颜色为浅黄色(#FFFFCC),然后单击“确定”按钮。(3)设置填充颜色为淡绿色,选取工具箱中的椭圆工具,在场景上画一个椭圆,如图5-43所示。(4)在时间轴的第5帧上单击鼠标,然后选择 “2022/8/765网页设计与制作(第二版)“插入白色关键帧”菜单选项,插入一个空白的关键帧。(5)单击时间轴下方的“绘图纸外观”(洋葱皮)按钮,可以看见椭圆以较淡的颜色显示出来。(6)再
40、次选择椭圆工具在场景上继续画一个椭圆,覆盖在前一个椭圆上,其填充颜色为深绿色,如图5-44所示。(7)用同样的方法,在时间轴的第10帧处画一个椭圆,其颜色为淡绿色,这时的时间轴如图5-45所示。(8)在第1帧上单击鼠标,然后在帧“属性”面板的“中间”下拉列表框中选择“形状”选项。(9)设置完毕后,可以看到时间轴的第1帧到第5帧之间产生了一条绿色箭头线。2022/8/766网页设计与制作(第二版)(10)用同样的方法,单击第5帧,并在帧“属性”面板的“中间”下拉列表中框中选择“形状”选项,这时时间轴变为如图5-46所示。(11)选择“控制测试影片”菜单选项,观看影片播放效果。如图5-47所示为影
41、片中的一帧。4.4.8 编辑动画创建完动画后,可以对动画进行编辑。但是,只有关键帧是可编辑的。普通帧只看得见,不能直接进行编辑。通过改变普通帧前面的关键帧的属性,或在渐变动画的首尾关键帧之间新建一个关键帧,就可以改变普通帧的属性。2022/8/767网页设计与制作(第二版)通常,Flash动画只能显示1帧的画面,而当制作逐帧动画需要给每帧定位时,就需要用到位于时间轴下部的洋葱皮工具。洋葱皮工具具有填充模式显示、线框模式显示、多帧编辑和游标设置等功能。利用洋葱皮工具,可以同时显示或编辑多个帧。 填充模式显示单击按钮,位于时间轴标尺上的起始游标和终止游标之间的帧在面板上就由深到浅显示出来。当前帧的
42、颜色最深,其他帧的颜色依次变浅。但只能对当前帧或当前关键帧进行编辑。 线框模式显示单击按钮,位于时间轴标尺上的起始游标和终止游标之间的帧以线框模式显示。2022/8/768网页设计与制作(第二版) 多帧编辑多帧编辑的功能在制作复杂的动画时非常有用。例如,在制作动画的时候,需要查看动画在各个帧中内容的相对位置,这时,使用多帧编辑功能可以同时选择多个帧的内容,然后利用对齐面板调整它们的相对位置。单击按钮,位于显示游标之间的帧以正常模式显示出来,虽然不是所有帧,但显示出来的帧都能进行编辑。 游标设置要改变所显示的帧的范围,可以移动时间轴标尺上的显示游标,一般情况下,移动播放指针时,游标会跟着指针移动
43、。单击按钮,弹出下拉菜单,可对游标进行设置。2022/8/769网页设计与制作(第二版)4.5 声音处理Flash 8中,可以使用多种方法在影片中添加声音。这些声音既可以独立于时间轴连续播放,也可以和影片保持同步。当给按钮添加声音后,如果按钮被触摸或按下,则可以发出特定的声音。此外,使用声音淡入淡出可以创造出优美的音效。4.5.1 导入音频文件4.5.2 声音的设置4.5.3 声音的编辑2022/8/770网页设计与制作(第二版)2022/8/771网页设计与制作(第二版)4.5.1 导入音频文件要在Flash 8中导入声音文件,可按如下步骤操作:(1)首先选取要导入声音的图层,执行“文件导入
44、”菜单下的命令,打开如图5-48所示的对话框。 (2)可以从中选择想要导入的声音,单击“打开”按钮即可。4.5.2 声音的设置当声音导入Flash 8后,就会成为组件库中的一员,因此,可以从组件库中修改声音的基本设定。只要在组件库中选取要修改的声音组件,并单击下侧的“属性”按钮,就会打开声音属性对话框,如图5-49所示。2022/8/772网页设计与制作(第二版)2022/8/773网页设计与制作(第二版)在这个对话框中,上方显示了声音文件的详细资料,例如文件来源、建立日期、播放长度及文件大小等等。下方的导出设置选项可以设置输入动画时,其中的声音要用何种方式压缩,以减少文件体积。而Flash
45、8最大的特色之一,就是支持MP3的压缩算法,可以很有效地将声音文件压缩为原来大小的1/10,同时仍然保持CD水准的音质。在下拉列表框中可以选择不同的压缩格式。 默认值 该选项在影片发布时,一般在“发布设置”对话框中的设置。 ACPCM 该选项用来设置8位或16位的声音数据。一般应用在比较短的声音事件中。 MP3 这种压缩格式是现在非常流行的音乐文件压缩格式,使用于比较长的音乐文件中。 Raw 对输出的声音不做任何压缩。 2022/8/774网页设计与制作(第二版)4.5.3 声音的编辑编辑声音文件时,首先需要在时间线中选中声音文件的实例,然后单击属性面板上的按钮,会弹出“编辑封套”对话框,如图
46、5-50所示。2022/8/775网页设计与制作(第二版)在“编辑封套”对话框最上方的“效果”设置选项中,可以设置声音播放的特效。拖动“编辑封套”对话框中间的滚动条,可以设定声音播放的起始位置和结束位置。在两个波形预览窗口中,可以手动设定声音的特效。在“编辑封套”对话框的最下方,有一排图形按钮,其功能如下: (播放) 对声音编辑对话框中的声音文件进行播放,可以对起始点、结束点和波形线的设定进行测试。 (停止) 停止当前正在播放的声音。 (放大) 对预览窗口中的内容进行放大显示。 (缩小) 对预览窗口中的内容进行缩小显示。 2022/8/776网页设计与制作(第二版) (以秒为单位) 设定“编辑
47、封套”对话框中的声音单位以秒为单位。 (以帧为单位) 设定“编辑封套”对话框中的声音单位以帧为单位。2022/8/777网页设计与制作(第二版)4.6 动画的交互控制创建交互性动画的关键是设置在指定的事件发生时执行某个特定的动作。事件既可以在播放指针到达某帧时触发动作,也可以在用户单击按钮或按键时触发动作。用户可通过创建相应的说明,告诉Flash当事件发生时应该执行的动作。动作的设置是在动作脚本编辑面板中进行的。4.6.1 Flash 8程序设计基本知识4.6.2 Actions编程环境4.6.3 设置按钮动作4.6.4 设置帧动作4.6.5 设置动画和电影剪辑动作2022/8/778网页设计
48、与制作(第二版)4.6.1 Flash 8程序设计基本知识与所有的其他编程语言一样,Flash 8的Action Script也是由变量、函数和表达式等一些基本元素构成的。下面将对这些元素做简要介绍。1. 变量变量是存储信息的容器。在首次定义一个变量时,最好赋给它一个初值。 命名变量变量名必须是一个标识符,不能是一个关键字或逻辑常量,在它的作用范围内必须是惟一的。 变量的类型在Flash中,无需显式定义一个变量的类型,在给变量赋值时自动确定变量的数据类型。2022/8/779网页设计与制作(第二版) 变量的作用范围变量的作用范围是指能够识别和引用该变量的区域。在Action Script中,变
49、量可以是全局的或局部的。全局变量可以在所有时间线中共享;局部变量仅在它所在的代码块中有效。 声明变量使用setVariables动作或赋值操作符可以声明全局变量,而在函数体内使用var语句可以声明局部变量。 在脚本中使用变量在表达式中使用变量前,必须声明这个变量。否则将产生错误。2. 常量我们可以将常量理解为一种特殊的变量,它的值在表达式中永远保持不变。按照数值的类型我们可以2022/8/780网页设计与制作(第二版)将常量分为3种类型,它们分别是数值型、字符型和逻辑型。3. 运算符和表达式在Flash中,可使用的表达式有3种:算术表达式、字符串表达式或逻辑表达式。不同的表达式,参与运算的参数
50、、运算符、运算法则和运算结果不相同。 算术表达式算术表达式由数值、以数值为结果的函数、算术运算符组成,运算结果是数值或逻辑值。 字符串表达式字符串表达式是由字符串如“BlueFox”、以字符串为结果的函数以及字符运算符组成的,其运算结果为字符串或逻辑值。 逻辑表达式 2022/8/781网页设计与制作(第二版)逻辑表达式由逻辑值、以逻辑值为结果的函数、以逻辑值为结果的字符串表达式、算术表达式和逻辑运算符组成,其运算结果为逻辑值。4. 函数由一个变量按照一定的法则决定另一个变量的值,这种对应关系被称为函数。在Flash 8中也使用了函数,如通用类型函数、数值类函数、字符串类函数、属性类函数和多字
51、节字符串函数等。4.6.2 Actions编程环境在互联网上,操作者在很多时候都需要和浏览的动画进行交互,而Flash 8正好是完成这种功能的巨匠。在Flash 8中,交互功能是通过Action Script来实现的。用户可以使用键盘或鼠标来控制动画播放、停止、移动等众多交互功能。2022/8/782网页设计与制作(第二版) Action Script列表动作编辑器是我们用来编写Action Script的主要工具。Flash 8为动作编辑器扩展了许多功能,可用的Action Script命令已经接近了1000条。任何一个人希望全部记住这些Action Script命令都是比较困难的。好在动作
52、编辑器为我们提供了Action Script列表,图5-51所示为动作编辑器,操作时我们只需双击Action Script列表中的命令即可将其添加到右侧的编辑框中。 普通模式单击动作编辑器右上角的按钮,可以弹出一个菜单,我们可以通过菜单将动作编辑器设定为普通模式或专家模式。 2022/8/783网页设计与制作(第二版)动作编辑器的普通模式适合于没有任何编程背景的初学者,它允许用户使用对话的方式编写Action Script命令。图5-51所示为动作编辑器的普通模式。 2022/8/784网页设计与制作(第二版)图4-51 动作编辑器(普通模式) 2022/8/785网页设计与制作(第二版) 专
53、家模式专家模式是为那些有一定编程基础,或是已经熟练掌握Action Script的用户提供的编辑模式。专家模式略去了Action Script命令参数的对话机制,我们只能通过手工编写的方式设定Action Script命令的参数。图5-52所示为动作编辑器的专家模式。2022/8/786网页设计与制作(第二版)图4-52 动作编辑器(专家模式)2022/8/787网页设计与制作(第二版)4.6.3 设置按钮动作按钮在分配动作后,就会影响鼠标的单击或触摸事件,执行相应的动作。在Flash 8中,按钮动作的分配是在动作脚本编辑面板中进行设置的。下面通过一个实例来说明给按钮分配动作的方法,其操作步骤
54、如下:(1)选择“文件新建”菜单选项,新建一个影片。(2)选择“窗口共享库Buttons”菜单选项,打开共享按钮元件库,选择Push Buttons目录中的Push Button-Blue按钮,并在场景中创建它的实例。(3)选择“插入图层”菜单选项,在“图层1”之上新建 “图层2”。选择工具箱中的椭圆工具,设置描绘颜色为黑色,填充颜色为无,在“图层2”第1帧对应的舞台上绘制椭圆,如图5-53所示。 2022/8/788网页设计与制作(第二版)(4)用鼠标右键单击“图层2”的第20帧,从弹出的快捷菜单中选择“插入白色关键帧”选项。选取工具箱中的矩形工具,设置描绘颜色为黑色,填充颜色为无,在舞台上
55、绘制一个矩形。用鼠标右键单击“图层1”的第20帧,从弹出的快捷菜单中选择“插入帧”选项,扩展该图层。2022/8/789网页设计与制作(第二版)(5)单击“图层2”的第1帧,在“属性”面板的“中间”下拉列表框中选择“形状”选项,创建从第1帧到第20帧之间的形状变形动画,如图5-54 所示。2022/8/790网页设计与制作(第二版)(6)用鼠标右键单击舞台上的按钮元件实例,从弹出的快捷菜单中选择“动作”选项,打开动作脚本编辑面板。(7)在左侧窗格中依次展开Actions、Movie Control类,然后双击stop语句,将它添加到右侧窗格中,如图5-55所示。2022/8/791网页设计与制
56、作(第二版)2022/8/792网页设计与制作(第二版)(8)选择“控制测试影片”菜单选项,测试影片。当单击图5-56所示按钮时,测试停止,如图5-56所示。 2022/8/793网页设计与制作(第二版)4.6.4 设置帧动作在Flash 8中,也可以为图形元件、影片和影片剪辑实例分配动作,只有通过帧动作脚本编辑面板为关键帧分配动作,才能控制事件的发生。下面对上节中的影片进行以下修改,为第1帧添加Stop动作,其操作步骤如下:(1)在时间轴窗口的第1帧(任意图层)上单击鼠标右键,从弹出的快捷菜单中选择“动作”选项,打开帧动作脚本编辑面板。(2)在左侧“语句”列表框中依次展开Actions、Mo
57、vie Control类,双击stop语句,并将其添加到右侧“动作语句”列表框中,如图5-57所示。2022/8/794网页设计与制作(第二版)图4-57 为关键帧添加动作语句2022/8/795网页设计与制作(第二版)(3)设置完毕后,时间轴窗口中的第1个关键帧上将出现一个字母,表示该关键帧有动作发生,如图5-58所示。2022/8/796网页设计与制作(第二版)(4)在场景中单击按钮实例,这时将由帧动作脚本编辑面板切换到该按钮实例的动作脚本编辑面板。(5)在“动作语句”列表框中选中起初添加的stop语句,然后单击“动作语句”列表左上角的按钮,将其删除。(6)再从左侧的“语句”列表框中选择p
58、lay 语句,双击该语句,将其添加到右侧的“动作语句“列表框中,如图5-59所示。 2022/8/797网页设计与制作(第二版)图4-59 修改按钮实例的动作语句2022/8/798网页设计与制作(第二版)(7)选择“控制测试影片”菜单选项,测试影片。开始时,椭圆变矩形的动画效果不开始,单击图5-56所示按钮,开始运动。当一个循环完成后,又停了下来,这是因为在第1帧处添加了动作,当影片每次播放到该帧时,就会触发Stop事件。4.6.5 设置动画和电影剪辑动作在动作脚本编辑面板中可以为对象或动画关键帧添加动作语句。在Flash 8中添加了多种动作语句,使用它们可以创建出各种交互式影片。下面对较常
59、用的几种动作语句做一下简要介绍。2022/8/799网页设计与制作(第二版)1. play(播放)和stop(停止播放)语句使用play(播放)和stop(停止播放)语句可以使影片在指定时刻播放和停止播放。经常用来与按钮配合,控制影片剪辑的播放。2. toggleHighQuality(切换高质量)语句使用toggleHighQuality语句可以控制影片是否在消除锯齿模式下显示。如果不消除锯齿,则可以使影片播放得更快。如果将toggleHighQuality语句分配给按钮,就可以允许观众调整播放质量。3. stopALLSounds(停止所有声音)语句使用stopALLSounds语句可以停
60、止所有声音的播放而不打断影片播放。2022/8/7100网页设计与制作(第二版)如果将stopALLSounds语句分配给按钮,那么观众在播放影片时可以选择是否播放声音。4. goto(跳转到)语句使用goto 语句可以使影片跳转到一个指定的场景或指定帧,当影片跳转到指定的新帧时,可以选择是停止在该帧还是从该帧开始播放。5. getURL(获得URL)语句使用getURL语句可将某个URL中的文档载入到指定的窗口,或者将变量传递给其他已经定义URL的应用程序。6. ifFrameLoaded(是否载入帧)语句使用ifFrameLoaded语句可以检查某一帧的内容是否已经被载入完毕。常用来在影片
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 四川乐山市2025届物理高一上期末达标检测模拟试题含解析
- 2025届黑龙江龙江二中物理高二第一学期期末检测模拟试题含解析
- 2025届江西省九江市第一中学物理高二第一学期期中考试模拟试题含解析
- 2025届广东省东莞市清溪晨光英才培训中心物理高三第一学期期末教学质量检测试题含解析
- 甘肃省白银市平川区中恒学校2025届物理高二上期中学业质量监测试题含解析
- 2025届新疆和田地区物理高二上期中监测试题含解析
- 2025届安徽省铜陵市义安区铜都双语学校物理高二上期末联考模拟试题含解析
- 2025届吴淞中学物理高一第一学期期末调研试题含解析
- 吉林省“五地六校”合作体2025届物理高三上期中调研试题含解析
- 2025届四川省成都龙泉第二中学物理高二上期中达标检测模拟试题含解析
- 蒲城清洁能源化工有限责任公司70万吨年煤制烯烃项目脱盐水
- 个人理财-形考作业3(第6-7章)-国开(ZJ)-参考资料
- GB/T 44340-2024粮食储藏玉米安全储藏技术规范
- 点亮文明 课件 2024-2025学年苏少版(2024)初中美术七年级上册
- 建设用地土壤污染风险筛选值和管制值(基本项目)
- 2024年政府采购评审专家考试题库含答案
- 2024届广西南宁市三中高三第一次适应性考试历史试题及答案
- 八年级地理上册《交通运输》-新人教版市公开课一等奖省赛课获奖课件
- 前程无忧行测题库
- 人教版2024年新版七年级上册英语Unit 3 模拟测试卷(含答案)
- 电力电子技术(广东工业大学)智慧树知到期末考试答案章节答案2024年广东工业大学
评论
0/150
提交评论