《多媒体技术与应用 》课件第8章_第1页
《多媒体技术与应用 》课件第8章_第2页
《多媒体技术与应用 》课件第8章_第3页
《多媒体技术与应用 》课件第8章_第4页
《多媒体技术与应用 》课件第8章_第5页
已阅读5页,还剩103页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第8章用FlashMX制作多媒体动画8.1FlashMX软件介绍8.2FlashMX动画制作技术8.3FlashMX对声音的处理 8.1FlashMX软件介绍

8.1.1FlashMX概述

FlashMX是为网络站点设计的交互式动画制作软件。FlashMX以它先进的流技术、矢量图形系统和强大的设计功能而风靡全球。FlashMX还是专业化的Web创作工具。用FlashMX可以创建动态网站标志、Web站点的导航系统,甚至整个Flash站点。

FlashMX的ActionScript(动作脚本语言)现在已经发展成为完善的面向对象程序语言。用FlashMXActionScript可以开发出更神奇、绚丽的多媒体动画以及复杂的Web应用程序。

FlashMX具有以下特点:

(1) FlashMX的流媒体技术。流媒体是从英语StreamingMedia中翻译过来的,它是一种可以使音频、视频和其他多媒体在Internet上以实时的、无需下载等待的方式进行播放的技术。流媒体文件格式是支持采用流式传输及播放方式的媒体格式。流式传输方式将动画、音频、视频等多媒体文件经过特殊的压缩方式分成一个个压缩包,由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中,用户不必像非流式播放那样等到整个文件全部下载完毕后才能看到文件中的内容,而只需经过几秒或几十秒的启动延时即可在用户的计算机上对压缩的动画、视音频等流式多媒体文件解压后进行播放和观看,多媒体文件的剩余部分将从后台的服务器继续下载。

(2) FlashMX的矢量图形系统。Flash的核心部分就是基于矢量的绘图程序。基于矢量的绘图程序不依赖像素来组成图形,它通过坐标来定义点,由点组成图形。连接这些点的线称为路径,线上每个点处的矢量描绘了路径的曲率。这种用数学描述图形的方案有两个突出的优点:矢量图形文件比一般图形文件小得多;可以随意缩放而不影响图像的质量。这些优点对Web应用有特别重要的意义。

尽管Flash可以处理位图,但是它自身的文件格式是基于矢量的,使用Flash创建的元素都是用矢量来描绘的。Flash动画和Flash文档内容在用Web传播时有着巨大的优势。8.1.2FlashMX界面及常用工具介绍

FlashMX界面如图8-1所示。图8-1FlashMX界面

1.文档属性

FlashMX的源文件为FLA格式,输出文件为SWF格式。选择Modify(修改)菜单下的Document(文档)选项可以设置文档属性,如图8-2所示。文档属性中的常用参数如下:

Dimensions(尺寸):默认的文档尺寸为550像素×400像素,最小尺寸为18像素×18像素,最大尺寸为2880像素×2880像素。

FrameRate(帧频):默认帧频为12fps(每秒帧),最小帧频为0.01帧/每秒,最大帧频为120帧/每秒,即最慢可以每100秒播放1帧,最快可以每秒播放120帧。

Background(背景色):只能设置为纯色,不能设置为渐变色。图8-2文档属性设置对话框

2.舞台和工作区

舞台是为动画组织内容以及显示动画的地方。可以通过缩放工具来选择显示合适的舞台尺寸。

工作区是放置舞台以及舞台之外元素的地方。有时有些元素需要先放在舞台的外面,然后再移进舞台。比如制作蝴蝶飞进花园,可以把蝴蝶放在舞台的外面,然后当动画开始播放时,蝴蝶飞入画面。

3.时间轴和层

FlashMX动画按照时间(时间轴)和空间(层)的顺序进行排列、组织,如图8-3所示。

1)时间顺序的显示

FlashMX是沿时间轴顺序播放的。帧以它们在时间上出现的顺序从左到右依次排列。

2)空间顺序的显示

利用层可以把内容组织在独立的透明工作面上,这样即使某一元素和另一元素在时间轴上或帧上占用同一空间,也可以对其单独进行编辑。层从底部到顶部垂直排列,上面层中的内容在显示时会盖住下面层中的内容。图8-3时间轴和层

4.线条工具

线条工具包括直线工具、铅笔工具、钢笔和白箭头工具等4种,如图8-4所示。线条类型可以是实线或虚线,共七种线型。图8-4绘图工具直线工具:用于画直线。单击直线工具按钮同时按住Shift键可以限制直线的倾斜角度,只能以45°角  为单位。

铅笔工具:用于画线条、几何形状。通过设置选项,可以对线条进行更笔直或更圆滑的自动调整。按住Shift键可以绘制水平或垂直的直线。

钢笔工具:用于画精细的线条(直线或曲线)。按住Shift键将限制线条方向为45°角的倍数。

白箭头工具:白箭头工具与钢笔工具结合使用,用于对曲线进行更精确的调整。

5.形状工具

形状工具包括矩形工具和椭圆工具。

矩形工具:拖动鼠标可以画矩形。单击矩形工具按钮同时按下Shift键可以绘制正方形。利用它可以绘制无描绘色(无边框)的矩形,或无填充色的矩形边框,还可以绘制圆角矩形。默认的圆角半径为0,即直角矩形。利用矩形工具设置圆角如图8-5所示。

椭圆工具:拖动鼠标可以画椭圆,同时按下Shift键可以绘制正圆。与矩形工具相似,它可以绘制无描绘色(无边框)的椭圆,或绘制无填充色的椭圆边框。

6.笔刷工具和橡皮擦工具

笔刷工具也是绘制图形的常用工具之一。可以选择不同的笔刷尺寸和形状为图形着色。当用它为图形着色时有五种填涂模式,分别为一般填涂模式(PaintNormal)、填充区域填涂模式(PaintFills)、底层填涂模式(PaintBehind)、填涂所选区域模式(PaintSelection)、填涂封闭区域模式(PaintInside),如图8-6所示。图8-5矩形工具圆角设置

图8-6笔刷工具填涂模式注意:用笔刷工具、线条工具和铅笔工具绘制的图像虽然在外观上没有明显的差异,但是当选择显示轮廓时可以看出它们之间的差别:笔刷工具用的是填充颜色,而铅笔和线条用的是描绘色。

执行“Modify(修改)/Shape(形状)ConvertLinestoFills(转换为填充)”菜单命令可以将线条转换为笔刷(即将描绘色转换为填充色)。

7.选取工具

选取工具包括黑箭头(ArrowTool)工具和套索工具(LassoTool)。黑箭头工具的作用是选取对象,改变线条或对象的造型,移动对象。用箭头工具改变对象造型时,可以将直线修改为曲线,将形状修改为更窄或更宽、更高或更扁。

套索工具主要用于成组选择图形中不规则形状的区域。区域被选中后,可以作为一个单元移动、缩放、旋转或改变形状。

8.颜色工具

颜色工具包括墨水瓶(InkBottle)、油漆桶(PaintBucket)、调色板(ColorSwatches)和混色器(ColorMixer)。

在Flash中最常用的选择颜色的工具是调色板,按描绘色或填充色按钮都可以弹出调色板,如图8-7所示。选择“Window(窗口)/ColorMixer(混色器)”选项时,会弹出混色器面板,如图8-8所示。在混色器面板中,选择了描绘色或填充色按钮后也会弹出调色板。图8-7调色板

图8-8混色器面板墨水瓶的颜色取决于描绘色,它用于为线条、铅笔、钢笔以及矩形、椭圆图形的边框着色。油漆桶的颜色取决于填充色,它为笔刷、矩形和椭圆的填充区域以及任何封闭区域着色。填充色包括纯色(Solid)、线性渐变(Linear)、放射渐变(Radial),还可以用位图图像(Bitmap)对填充区域进行填充,如图8-9和8-10所示。图8-9填充色图8-10用位图填充对于填充的位图,可以利用FreeTransferTool(填充变形工具)将其扭曲、缩放。移动控制手柄可以对称或非对称地缩放填充的位图,也可以沿水平或垂直方向扭曲填充的位图,效果如图8-11所示。图8-11填充变形

9.变形工具

选择“Windows/Transfer(窗口/变形)”菜单选项,可以弹出变形面板,如图8-12所示。

利用变形工具可以精确地缩放、 旋转和扭曲图形。选中约束比例按钮,可以等比例地缩放形状;不选约束比例按钮,则可以只缩放宽度或只缩放高度,其他参数见图8-12。

变形工具与填充变形工具不同,变形工具对整个图形或形状变形,变形后对象的外形更改了;而填充变形工具只对对象内部的填充位图进行变形处理,变形后对象的外部形状不发生改变。图8-12变形面板

10.文字工具

选择文字工具后会启动默认的静态文本输入方式。Flash为文字处理提供了三种文本类型:静态文本(SlaticText)、动态文本(DynamicText)和输入文本(InputText)。静态文本用于显示动画运行时不需要改动的文字;动态文本用于显示需要动态显示的文本,例如天气预报、体育新闻、股市行情等;输入文本区域用于在运行时由用户输入文本,例如输入用户名和密码、回答问题等。文本类型可以通过文本属性面板更改。

静态文本可以显示的格式类型如图8-13所示。图8-13静态文本的显示格式类型对静态文本可以进行缩放、旋转、移动和扭曲变形。和Flash中的其他图形元素一样,利用静态文本也可以制作动画。利用静态文本还可以直接设置超链接而不必写任何代码。

动态文本可以是水平的,宽度可以是固定的或可扩展的,但是没有垂直文本格式。

静态文本与动态文本设置见图8-14。图8-14静态文本和动态文本设置

8.2FlashMX动画制作技术

8.2.1逐帧动画

动画是利用人的视觉暂留原理,快速播放连续的、具有细微差别的图像,使原来静止的图像“运动”起来。人眼所看到的影像大约可以暂存在脑海中1/16秒,如果在暂存的影像消失之前观看另一张与上一张影像有细微差别的影像,便感觉到影像中的对象动起来了。如果观看一系列连续动作的影像,就能产生活动画面的感觉。电影胶卷的拍摄和播放速度是24帧每秒,比视觉暂存的1/16秒短,因此我们看到的是活动的画面,而实际上这些活动的、生动的画面是由一系列静止的图像组成的,如图8-15所示。图8-15连续动作的静止图像逐帧动画就是利用原始动画的原理制作的动画,它将静态图像分布在每一帧中,从而连缀成动画。如果将上面的每张图片放入Flash的每一个关键帧中,则生成了一个简单的Flash逐帧动画。FlashMX默认的动画播放速度(即帧频)是12帧每秒。我们可以调整帧频以满足需要。帧频越高,动画效果越流畅。

利用逐帧动画技术可以制作很多独特的动画效果。

例1

妙笔生花。

此动画的制作步骤如下:

(1)新建一Flash文档,尺寸为550像素宽,200像素高。选择文字工具,在属性面板设置字体为黑体,字号为72。在第一帧舞台上输入“神奇的FLASHMX”,将文字相对于舞台水平、垂直居中对齐。

(2)两次选择“修改”/“分解”菜单项,或执行两次Ctrl+B组合键,将文字分解为形状,这时选中文字,其表面有网状点阵。

(3)按F6键在第一帧的后面添加一个关键帧,将该帧舞台上的文字的最后的笔画用橡皮擦工具擦去,如图8-16左图所示。图8-16妙笔生花

(4)再按F6键在该帧的后面添加一个关键帧,将文字的倒数第二笔画用橡皮擦工具擦去。依此类推,按书写的逆顺序擦去所有的笔画。

(5)选中所有关键帧,在选中的帧的快捷菜单(单击鼠标右键可弹出快捷菜单)中选择“翻转帧”项,使原来的第一帧变成现在的最后一帧。拖动时间轴上的播放头,会看到文字逐渐显示出来的动画。

(6)新建一个图形符号,命名为pencil,绘制一个铅笔图形。

(7)返回场景1,新建一个图层,插入若干关键帧。选中第2帧,打开库,将库中的pencil符号拖到舞台上,将其放在笔画的末尾处。依此类推,将后面的各个关键帧都加入铅笔图形。在逐帧动画中也可以在关键帧后插入适当的普通帧,以延长画面的显示时间。

由于逐帧动画中每个关键帧中的画面都需要单独绘制,因而工作量将会很大。例如,Flash动画每秒播放12帧,那么制作一个播放5分钟的动画就需要5×60×12=3600幅画面,其工作量可想而知。逐帧动画的另一个缺点是生成的文件尺寸也比较大。8.2.2渐变动画

1.形状渐变动画

形状渐变动画正如它的名字一样,是产生形状变化即变形的动画,比如正方形变圆形、鸡变羊等。在形状渐变动画中,动画以某个形状出现,随着时间的推移,最开始的形状变成了另一个形状。FlashMX还可以对形状的位置、大小和颜色产生渐变效果。

制作形状渐变动画的对象必须是形状,即用Flash绘图工具(除文字工具外)绘制的线条(包括点)、矩形、圆形或不规则图形。辨别是否是形状的简单办法是:选中对象后,如果对象表面有网状点阵即是形状。如果用组合体、实例或位图图像制作形状渐变动画,则必须先将这些元素分解。如果用文字制作形状渐变动画,则应将文字两次分解,使文本转换为形状。

在制作形状渐变动画时,为了控制形状变化的对应点,可以在首帧和末帧的相应位置设置提示点,从而创建更为复杂和令人惊奇的变化效果。例2

位图变文字。

该动画的制作步骤如下:

(1)新建文件,尺寸为300像素宽,300像素高。

(2)在第1帧的舞台上导入一幅马的位图,将其分解(如果需要的话要多次分解)为形状。

(3)在第15帧的舞台上输入一个静态文字“马”,将文字两次分解,使其成为形状。

(4)选中第1帧,打开属性面板,在渐变(Tween)下拉列表框中选择“形状”(Shape),形状渐变就设置成功了。

动画效果如图8-17所示。图8-17图形变文字

2.运动渐变动画

1)符号和实例的概念

FlashMX可以创建三种符号:图形(Graphic)、按钮(Button)、影片剪辑(MovieClip),如图8-18所示。在FlashMX中,符号是可以重复利用的资源。使用符号创建动画的好处是使编辑动画更加简单,提高了效率,显著减小文件的尺寸并加快了影片的播放速度。实例是符号在舞台上的具体应用。比如,创建了一个符号后,将其拖到舞台上,则舞台上的这个符号就是一个实例。符号可以有很多实例,类似于一个演员可以扮演很多角色。图8-18符号的三种类型

2)运动渐变动画

如果用组合体、实例和文字形成动画,则要使用运动渐变动画技术。运动渐变动画用于将一个对象从一个地方移动到另一个地方,或对物体进行缩放、倾斜、旋转等变化,还可以使符号的透明度产生渐变,如产生淡入淡出的效果。

需要说明的是,形状必须转换为符号或组合成组合体后才能创建运动动画;要使组合体或文字产生颜色渐变,必须先将它们转换为符号。

和形变动画类似,创建运动渐变动画只需要创建起始帧和结束帧,设置好组合体、实例或文字的相应属性以及运动渐变动画属性即可,中间的过渡帧由FlashMX自动产生。

例3

滚动的球。

该动画的制作步骤如下:

(1)新建一文件,将图层1命名为球,在第1帧的舞台上用椭圆工具画一个圆球(shift+鼠标拖动),选择放射渐变填充色为球填色。将球转换为图形符号,命名为ball。

(2)绘制运动轨迹。点击图层下面的“添加引导图层”按钮(见图8-3),在球图层的上方加入一个图层,命名为运动轨迹。选择椭圆工具,将填充色设置为无色,描绘色任选,绘制一个圆。再用橡皮擦工具擦去上面的半个圆,剩下的半圆即为球的运动轨迹。

(3)创建运动的球。拖动球到运动轨迹上,将球调整到运动轨迹,使球中出现的中心小圆圈与运动轨迹左端点对齐、锁定,如图8-19所示。在球图层的第20帧处插入关键帧,将该帧中的球用鼠标沿运动轨迹向右拖动,直到中心圆圈与运动轨迹右端点(即球运动的终点)对齐、锁定。注意,在拖动的过程中应该始终使球中心的小圆圈与运动轨迹重叠。在第1~19帧处设定运动渐变(Motion)。拖动时间轴上的播放头,可以看到球沿半圆型轨迹运动的效果。图8-19球的中心小圆圈应与引导线端点对齐

(4)设置滚动速度。在第10帧处(此时球滚到坑底)插入关键帧,选中第1~9帧中的任一帧,打开属性面板,在ease下拉列表中调整值为-100;选中第11~19帧中的任一帧,调整ease值为+100。

说明:ease值是设置运动加速度的,负值为加速度,正值为减速度。因为球在滚下圆坑时应该是越滚越快,故应该为加速度;而从坑底向上滚时应该是越滚越慢,应设置为减速度。

(5)现在已经完成了小球从左边滚到右边的动画。如果让小球做往返运动,则还应进行如下操作:选中图层球的所有帧,将其复制到该层现有帧的后面,方法是利用Edit(编辑)/CopyFrames(复制帧)和PasteFrames(粘贴帧)菜单项。然后选中复制过来的所有帧,在其快捷菜单中选中ReverseFrames(翻转帧)。用同样的方法将运动轨迹的所有帧也进行复制、粘贴、翻转操作。

(6)为了完善动画,再制作圆坑的形状。完成的动画如图8-20所示。图8-20滚动的小球

例4

随风飘动的文字。

该动画的制作步骤如下:

(1)新建一文件,尺寸为550像素宽、300像素高。导入一幅同样尺寸(可以用Photoshop修改其尺寸)的风景图片作为背景。在当前层上新建一个层,输入文字“随风飘动的文字”,字体为方正舒体,72号字,颜色选与背景图片协调的颜色。打开“Window(窗口)/Align(对齐)”菜单项,将文字与舞台水平、垂直居中对齐。

(2)选中文字,选择“Modify(修改)/BreakApart(分解)”菜单项,或按Ctrl+B组合键,将文字分解为单个字。注意,此次只需一次分解即可。

(3)将所有文字全部选中,选择“Modify(修改)/DistributetoLayers(分布到层)”菜单项,将7个文字分布到7个图层,如图8-21所示。图8-21分解为单个字并被分布到各个层的文字

(4)将每个文字分别转换为图形符号,方法是用“Insert(插入)/CoverttoSymbol(转换为符号)”菜单项,或按F8键。

注意:为了创建文字向右、向后飘的效果,转换时注册点(Registration)应选择为左下角(默认为中心注册点)。如图8-22所示,黑色方点即为注册点。图8-22符号的注册点

(5)在所有层的第10帧处按F6键添加关键帧;在除背景层外的所有层的第5帧处按F6键插入关键帧。

(6)将除“随”层以外的其他层锁定,选中第5帧处的“随”字图形,打开属性面板,在颜色下拉列表框中设置Alpha值为50%;按Ctrl+T组合键打开变形面板(见图8-12),将水平扭曲值(Skew)设置为30,如图8-23所示。将第1~4帧和第5~9帧处设置渐变(Tween)为运动渐变(Motion)。图8-23图形文字的变形和透明度的设置

(7)用同样的方法对所有文字层的文字图形设置变形和透明度以及渐变。

(8)为了创造文字依次飘动的效果,可以依次将后面文字的帧整体向后移动1帧,再将渐变帧前后的普通帧补齐,最终效果如图8-24所示。图8-24最终效果8.2.3蒙板动画

1.蒙板的概念

在现实世界中,蒙板是用来有选择地隐藏它后面的东西的,我们看不见蒙板后面的东西。但在FlashMX中,蒙板用来显示它下面的内容。蒙板图层用来定义紧挨在它下面的图层中的可见区域,即我们可以看到蒙板图层中形状覆盖的内容,而这个形状外的东西我们就看不见了,如图8-25所示。现实世界中的蒙板遮罩效果FlashMX中的蒙板遮罩效果图8-25蒙板遮罩效果

FlashMX中的蒙板在遮罩层上用来显示被遮罩层上相应的内容,它可以是静态填充形状、图形元件、文字,也可以是动态的影片剪辑。

蒙板动画技术是FlashMX动画制作技术中最受人青睐的的技术之一,运用得当并有好的创意,常常会做出很多特殊的、神奇的效果。

很多初学者不太理解蒙板层(遮罩层)(MaskLayer)的作用,常常不明白到底谁遮罩了谁,对遮罩层与被遮罩层的关系产生混淆。实际上,遮罩层提供显示外形,被遮罩层提供显示内容。下面的例子可以帮助我们搞清楚它们之间的关系。

例5

遮罩层与被遮罩层。

该动画的制作步骤如下:

(1)新建一文件,尺寸为450像素×200像素。在舞台的中央输入文字“茉莉”,黑色、96号隶书字。

(2)添加图层,在该图层上相对于文字左边的位置绘制一个无描绘色、填充色为黄色与深棕色放射渐变的圆。方法是:选择工具面板上的填充色工具,先选择一种默认的渐变颜色,比如黑色与白色放射渐变色;然后在混色器中分别选中左、右边的油漆桶,再分别调整填充色的颜色为黄色和深棕色,如图8-26所示。图8-26更改渐变色

(3)确定球图层在文字图层的上面。如果不是,则将球图层拖到上面,并将该层设置为遮罩层,文字图层设置为被遮罩层。方法是:在图层名称处单击鼠标右键显示图层快捷菜单,在菜单中选择“属性”,设置该层为遮罩层或被遮罩层。按回车键观看效果。

我们再调换两个层的位置,将文字图层拖到球图层的上面,然后将文字图层设置为遮罩层。实际效果见图8-27图。图8-27遮罩与被遮罩的关系在将球作为蒙板的这个例子中,球的渐变色没有显示出来,而显示了下层的字。而在将文字作为蒙板的动画中,显示的颜色是球的渐变色,作为蒙板的文字的黑色并没有显示出来。由此可以看出,蒙板的任何其他设置都被忽略,有意义的仅仅是它的外形。再强调一下:遮罩层提供显示外形,被遮罩层提供显示内容。

2.蒙板实例

例6放大镜。

此动画的制作步骤如下:

(1)将图层1命名为back,导入一幅风景图片到库中,将图片从库中拖到舞台上,并将图片缩小为原来的70%。调整图片位置,使其相对于舞台左上角对齐;打开文档属性(DocumentProperties)对话框,点击“匹配内容”(Contents)按钮,调整文档尺寸,使其与图片大小相等。

(2)在back层的上面新建一图层,命名为picture,将库中的风景图片拖到picture层第1帧的舞台上。图片保持原尺寸。调整图片的位置,使其与舞台水平、垂直方向居中。

(3)制作放大镜镜片。在picture层的上面新建一图层,命名为mask,在第1帧画一个圆形,并将其转换为符号,为圆形设置运动渐变,使其在舞台上移动。

(4)将图层mask设为蒙板层(遮罩层),将图层back设为普通层。

到此为止,放大镜的放大效果就制作出来了。因为mask层是遮罩层,picture层是被遮罩层,而back层是普通层,所以放大镜中显示的是picture层的图片,即原尺寸的图片;放大镜以外的图片是back层的图片,即缩小了尺寸的图片。显然,back层图片缩得越小,动画中放大镜的放大效果越明显。

(5)制作放大镜手柄。在mask层之上再新建一图层,命名为magnifier,将mask层上的圆形原位复制到magnifier层的第一帧。原位复制的方法是:选中图形,按Ctrl+C组合键,然后选中要复制到的帧,再按Ctrl+Shift+V组合键进行粘贴。复制的图形不仅与原来的图形尺寸相同,x、y坐标也完全一致。

(6)将magnifier层的圆形分解,选择墨水瓶工具,设置线条尺寸为6,在圆形边缘处点一下,为圆形添加描绘色,然后删除圆形,只剩下环形形状。选中环形形状,选择“修改/形状/转换线条为填充”菜单项,将环形转换为填充色。选择一种渐变填充色为其填充。为了美观,可以再为其添加描绘色,也可以添加一个手柄。最后的效果如图8-28所示。图8-28放大镜8.2.4行为动画

行为动画又称为交互式动画,即具有交互功能的动画。行为动画是用行为脚本语言(ActionScript)创建的。

FlashMX的ActionScript是基于ECMA-262规范的。欧洲计算机制造者协会编写的ECMA-262是JavaScript语言的国际标准,因此ActionScript与JavaScript的语法和对象很相似。发展到今天的ActionScript有如下一些特点:

(1) ActionScript是以时间轴为基础的程序。

(2) ActionScript是事件驱动的程序,是面向对象的程序。用ActionScript可以创建更为复杂、更加绚丽多彩的交互式动画。在简单动画中,FlashMX将按时间顺序播放场景和帧的动画。在用ActionScript创建的交互式动画中,浏览者可以使用键盘、鼠标控制动画的播放,可以跳转到动画的不同部分,可以用很小尺寸的文件表现很复杂的动画。

限于篇幅,这里不可能详细讲解行为动画的基本概念、语法和实现方法。我们只能通过下面几个实例体会一下ActionScript的强大功能。

例7

神奇的鼠标。

该动画的制作步骤如下:

(1)新建一个550像素×350像素、背景色为白色的动画文件。

(2)新建一个按钮符号btn_clear,在其点击(Hit)帧处插入关键帧,画一个无边线的圆形,颜色任意。这个按钮是不可见按钮,很有用,如图8-29所示。

(3)新建一个影片剪辑mv_color,在其第1帧画一个放射性渐变的圆,选择自己喜欢的颜色,比如黄色、白色渐变色。在第10帧插入关键帧,改变其颜色为暗红色、白色渐变色,并将图形稍稍放大。在第20帧插入关键帧,改变其颜色为紫色、白色渐变色,将图形缩小。在第1、10帧处设置形变动画。变色的球的效果如图8-30所示。图8-29不可见按钮图8-30变色的球

(4)新建影片剪辑mv_drop,将按钮btn_clear拖入到mv_drop的第1帧。在mv_drop的第2帧插入空白关键帧,将mv_color拖入到第2帧。在第45帧插入关键帧,并将图形向下移动一段距离,在第2帧处设置运动动画,如图8-31所示。不可见按钮无论设置时是什么颜色,在舞台上显示的都是浅蓝色。图8-31mv_drop的第1帧为不可见按钮;第2帧为变色的球

(5)在mv_drop的第1帧加入stop()语句,即动画在第1帧处停下来。

单击第1帧的btn_clear按钮,为按钮加入以下动作语句:

  on(rollOver){

gotoAndPlay(2); //当鼠标滑过不可见按钮时,跳到第2帧播放

  }

选中第45帧,为该帧加入以下动作语句:

  gotoAndPlay(2); //跳转到第2帧处循环

(6)返回场景,在第1帧的舞台上拖入若干个影片剪辑mv_drop,使其布满舞台,如图8-32和图8-33所示。图8-32用mv_drop布满舞台图8-33当鼠标滑过舞台时的效果通过修改可以得到各种不同效果。比如,可以创建多个具有不同渐变的影片剪辑mv_color1,mv_color2等;在mv_drop中的新建图层上建立多个运动动画;将mv_drop在场景中布得尽可能满,使显示的球更稠密,效果更绚丽;还可以用其他动画取代mv_color等等。发挥想像,就可以做出更好的富有创意的作品。例8

飞舞的花。

此动画的制作步骤如下:

(1)新建文件,背景色为E7D5FF。新建一个影片剪辑flower,并在flower中画一朵花,为其设置一段旋转的形变动画,如图8-34左图所示。

(2)新建影片剪辑flowermov,将做好的flower拖入到flowermov中,并为flower创建一个沿路径运动的动画,如图8-34中图所示。

(3)再新建影片剪辑drag,将图层1命名为flower,将flowermov放入drag中。打开属性面板,在实例名称(InstantName)处输入flower,即设置drag的实例名称为flower。增加一个新层,命名为actions,插入2个关键帧,共3个关键帧。在flower图层第3帧插入普通帧,如图8-34右图所示。旋转的小花沿轨迹运动的旋转小花插入帧图8-34飞舞的花动画制作

(4)编写脚本语言。在actions层的3帧分别输入如下语句:

第1帧:

startDrag("flower",true);

第2帧:

number=number+1;

if(number<5)

duplicateMovieClip("flower","flower"addnumber,number);

setProperty("flower"addnumber,_alpha,100-number*5);

setProperty("flower"addnumber,_rotate,30*number+5);

setProperty("flower"addnumber,_x,_xmouse+random(20)*number);

setProperty("flower"addnumber,_y,_ymouse+random(20)*number);说明:

①startDrag:拖动实例名称为flower的符号。

②duplicateMovieClip: 复制影片剪辑,该句含义是当number小于5时,复制实例flower,新实例名字为flower1、flower2等。

③setProperty:重新设置实例属性,设置的第1个属性alpha(透明度)为100-number*5。alpha=100为不透明,0为完全透明。设置第2个属性_rotate为旋转的角度,第3、4个属性x、y坐标值为鼠标的坐标值加上一个0~19之间的数与number相乘的值。

第3帧:

  gotoAndPlay(2);

即跳转到第2帧播放。

(5)返回到场景1,将drag拖动到舞台上并复制两个,选中其中一个,选择属性面板的颜色下拉列表中的高级,点击“设置”按钮,改变其颜色。用同样的方法将其他两个实例也改变颜色。

(6)测试影片,其动画效果如图8-35所示。图8-35飞舞的花的动画效果在这个例子中,更换flower符号的形状或flowermov影片剪辑的运动轨迹,或更改场景1中drag的数量、颜色,都可以制作出各种完全不同的动画效果。

在用FlashMX制作动画效果时,常常通过使用多层嵌套的影片剪辑以及用ActionScript改变影片剪辑实例的属性值等技巧来制作完成绚丽多彩、视觉冲击力很强的动画效果。

8.3FlashMX对声音的处理

8.3.1声音处理概述声音在多媒体动画中起着重要的作用。FlashMX提供了多种方法来处理声音:可以为按钮添加声音;可以将声音导入动画作为动画的背景音乐;可以调整声音使其淡入或淡出;可以让音乐独立于时间轴播放;也可以使声音和动画画面保持同步。在FlashMX中有两类声音:事件声音和流式声音。事件声音在播放前必须完全下载,事件声音与它所在的关键帧同时发生,即它所在的关键帧开始播放时它就播放。之后,声音的播放与时间线无关,即使时间线已经播放结束,它仍会继续播放。根据这个特点,音乐播放可以通过播放动画实现。如果要停止播放事件声音,则用stopAllSounds命令。

流式声音与事件声音不同,在下载若干帧后,只要数据足够,流式声音就可以开始播放。它会随着动画的结束而结束,无论声音是否播放完毕。它还可以做到与时间轴上的动画同步。8.3.2声音处理实例

通过下面的实例,我们简单了解一下事件声音和流式声音的实现方法。

例9

音乐控制按钮。

此动画的制作步骤如下:

(1)新建一个文件,尺寸为100像素×100像素,背景色为白色。新建一个按钮符号,命名为btn-laba。

(2)绘制喇叭。在弹出(Up)关键帧处利用直线工具、椭圆工具、油漆桶工具绘制一个喇叭图形;分别在其他各帧处插入关键帧,将指针经过(Over)帧处的喇叭外框改为紫色,如图8-36所示。图8-36喇叭按钮

(3)新建一个影片剪辑符号,命名为mc-playing。在mc-playing的第3帧处插入关键帧,用铅笔画一弧线,或画一空心圆,然后擦去半边;在第5帧插入关键帧,将弧线复制并放大为150%,向右移动一段距离;在第7帧插入关键帧,将右边弧线复制并放大为150%,向右移动一段距离;结果如图8-37所示。图8-37声波

(4)新建一个影片剪辑,命名

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论