网页中常用的Flash技术.ppt

《网页中常用的Flash技术.ppt》由会员分享，可在线阅读，更多相关《网页中常用的Flash技术.ppt（73页珍藏版）》请在三一办公上搜索。

1、第16章 网页中常用的Flash技术,1,第16章 网页中常用的Flash技术,第16章 网页中常用的Flash技术,2,Flash是Macromedia公司开发的面向Web的矢量图形和动画制作软件，它可以创建具有动感、交互、声音等特点的动画。Flash 8的推出，给网页设计带来了新的活力，它能够创建广告条、动画菜单、网站标志等动画，甚至整个网站。因为Flash文件体积非常小，可同步下载和播放，特别适用于创建网页上的动画和网上游戏。,第16章 网页中常用的Flash技术,3,16.1 Flash中的基本概念,启动中文版Macromedia Flash Professional 8后，可以看出，

2、Flash的工作区主要包含标题栏、菜单栏、常用工具栏、时间轴、工具箱、舞台、属性面板和其它控制面板等部分。,第16章 网页中常用的Flash技术,4,16.1 Flash中的基本概念,标题栏,菜单栏,工具箱,时间轴,舞台,属性面板,控制面板,第16章 网页中常用的Flash技术,5,16.1 Flash中的基本概念,标题栏：标题栏注明了程序的名称以及当前所编辑的文档名称。菜单栏：菜单栏中包含了Flash中的所有命令，通过在菜单栏中选择相应的菜单项，用户可以制作出精彩的动画。时间轴：时间轴是影片编排的主要场所，可以分层摆放各元素并规划它们的出场顺序，显示动画的运行效果，以及不同图层之间的关系。工

3、具箱：工具箱中包含了编辑矢量图形的工具，跟Photoshop的工具箱有点相似。使用这些工具，可以编辑动画元素而不需要调用其他外部程序。,第16章 网页中常用的Flash技术,6,16.1 Flash中的基本概念,舞台：舞台用于显示动画当前帧的状态，是编辑、制作动画的主要区域。属性面板：默认在界面最下方，当没有选中对象时，属性面板会显示当前动画文件的属性；当选中工作区中的对象后，属性面板中就会显示该对象的属性。控制面板：默认在界面的右边，跟它们在Dreamweaver中的位置和使用方法相似。这些控制面板包含了常用的动画编辑命令，可以根据需要设置面板的数量和类型，以方便动画的编辑。,第16章 网页

4、中常用的Flash技术,7,16.1 Flash中的基本概念,执行菜单【窗口】|【工具】命令，可打开或关闭工具箱。执行菜单【窗口】|【时间轴】命令，可打开或关闭时间轴面板。单击菜单【窗口】下其他命令可打开或关闭相应的其他面板。Flash动画也称为影片或电影。Flash动画的制作是以时间轴为主线，利用图层来组织和安排影片中的文字、图像等对象，在舞台区域编辑帧来完成的。,第16章 网页中常用的Flash技术,8,1舞台,舞台是创作对象的区域，也就是文件窗口，可以在里面绘制图形或编辑图像，也可以测试播放电影。动画最终只显示场景中舞台区域的内容。这就如同演出一样，无论在后台做多少准备工作，最后呈现给观

5、众的只能是舞台上的表演。,第16章 网页中常用的Flash技术,9,2时间轴,时间轴是Flash进行动画制作和内容编排的主要场所，用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。它就好像导演的剧本，决定了各个场景的切换、演员出场和退场以及表演的时间等。,第16章 网页中常用的Flash技术,10,3图层,图层可以理解为一摞透明的纸，每一张都保持独立，对当前图层进行编辑不会影响其他图层，同时又可以层层叠加合成一个完整的电影。每个层本身都是透明的，所以图像叠加到一起时仍感觉像在同一个层上。图层就相当于舞台中演员所处的前后位置。图层靠上，相当

6、于该图层的对象在舞台的前面。在同一个纵深位置处，前面的对象会挡住后面的对象。而在不同纵深位置处，可以透过前层看到后层的对象。新创建的影片只有一个图层，可以增加多个图层，利用图层来组织和安排影片中的对象。,第16章 网页中常用的Flash技术,11,4场景,场景就好比是舞台剧中的一幕，一幕完成后，再进行下一幕的表演，由于各个场景有先后顺序，因此各个场景彼此独立，互不干扰。当我们开始编辑电影时，都是在第一个场景“场景1”中开始，场景的数量没有限制。,第16章 网页中常用的Flash技术,12,5帧和关键帧,在时间轴上，每一个小方格就是一个帧，在Flash动画中，帧就是某个时间点上的图形，不同帧中对

7、象的变化就产生了动画效果。任何动画都是由一个个帧连接而成的，帧是动画的最小单位。动画播放的内容即帧的内容，动画中帧的数量及其放映速度决定了动画的整个长度。时间轴上的栅格表示空帧。空帧不是真正的帧，而是些矩形框，框里可以放帧。在设计Flash动画时，没有内容的帧占了时间轴的大部分。只有有了帧后动画才能播放，如果在播放时遇到所有图层均为空帧时，就会停止播放。,第16章 网页中常用的Flash技术,13,5帧和关键帧,关键帧是指动画中定义的可以更改的帧，它通常显示动画的开始与结束的决定画面。当你希望动画发生改变，或者希望发生某种动作时，必须使用关键帧。虽然大多数关键帧都包含有内容，但是关键帧也可以为

8、空，这常常出现在将对象移出动画之后的情形中。在Flash中开始新项目设计时，通常以“图层1”的第一个空关键帧开始。一个常规的关键帧以一个实心的圆点为标志，一个空关键帧以一个空心的圆点为标志；一个带有附加动作的关键帧以一个小“a”表示。,第16章 网页中常用的Flash技术,14,5帧和关键帧,普通帧也称为静态帧，显示同一层上最后一个关键帧的内容。在时间轴上，关键帧总是在普通帧的前面，前置关键帧的内容显示在随后的每个普通帧中，直到到达另一个关键帧为止。在已经有内容的关键帧后面的普通帧为银灰色，在空关键帧后的普通帧为白色。Flash渐变动画帧序列由起始帧和结束帧这两个关键帧以及它们之间的过渡帧组成

9、。过渡帧是起始关键帧动作向结束关键帧动作变化的过渡部分，表示了对象在过渡点的外观。这部分的延续时间越长，整个动作变化越流畅，动作前后的联系越自然。,第16章 网页中常用的Flash技术,15,16.2 动画的三种基本类型,Flash能够制作的动画类型很多，根据生成原理和制作方法的不同，Flash动画可分为三种基本类型：逐帧动画、移动动画和形变动画。一种类型的动画也可以构成一个简单动画，为了使Flash作品更加形象、生动，往往需要在一个Flash作品中综合应用不同类型的动画。,第16章 网页中常用的Flash技术,16,16.2.1 逐帧动画的制作,逐帧动画也叫帧帧动画，是由若干个连续关键帧组成

10、的动画序列，是和传统的动画制作方式类似的最为基础的动画制作方式。其原理是在“连续的关键帧”中分解动画动作。在制作这种动画时，需要对每一帧的内容进行逐个绘制，也就是在不同帧上设置不同内容，使其连续播放而生成动画。逐帧动画适合于每一帧的图像都有复杂变化，不能用补间动画完成的动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担，而且最终输出的文件容量也很大。,第16章 网页中常用的Flash技术,17,1逐帧动画的制作步骤,单击某个图层使其成为当前层；在该层上选择起始帧；把起始帧设置为关键帧；设置背景图；在起始帧建立动画内容；设置起始帧后的第2帧，将该帧设置为关键帧，然后编辑内容；重复第6步，

11、设计其他的每一帧；执行【控制】|【测试影片】命令，观看设计效果。关闭播放窗口，回到编辑舞台，如不满意重新编辑，直到设计出满意的效果为止。,第16章 网页中常用的Flash技术,18,2创建逐帧动画的常用方法,用导入的静态图片建立逐帧动画。用JPG等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。绘制矢量逐帧动画。用绘图工具在场景中一帧一帧的画出帧的内容。文字逐帧动画。用文字作帧中的内容，实现文字跳跃、旋转等特效。导入序列图像。可以导入Gif序列图像、Swf动画文件或者Swish、Swift 3d等第3方软件产生的动画序列。动作脚本逐帧动画。在时间轴面板上，逐帧写入动作脚本语句来完成

12、元件的变化。,第16章 网页中常用的Flash技术,19,【例16.1】制作书写汉字动画。,“书写汉字”动画播放后，一个“汉”字慢慢按笔画顺序书写呈现。图16.3“书写汉字”动画的时间轴 图16.4“书写汉字”动画的两个画面,第16章 网页中常用的Flash技术,20,16.2.2 移动动画的制作,移动动画是Flash动画中最常用的动画形式，它是创建物体随时间移动、缩放或旋转等动画的一种有效方法，并且最大程度地减小所生成文件的大小。,第16章 网页中常用的Flash技术,21,1.移动动画的特点,移动动画就是改变两帧之间物体的位置，令物体从一个位置移动到另一个位置的动画。移动动画的对象是组、元

13、件(实例)、文本和位图图像等。除了实现对象位置的移动外，还可以使对象产生大小、旋转和颜色的渐变效果等。Flash 8创建移动动画时，自动将实例、图形、图像、文本、组合等转换成补间的实例，“库”面板中会自动增加元件，名字为“补间1”、“补间2”和“补间3”等。,第16章 网页中常用的Flash技术,22,2.移动动画的制作方法,移动动画的制作只需在一个时间点(关键帧)放置一个对象，然后在另一个时间点(关键帧)改变这个对象的大小、位置、透明度等属性，Flash根据二者自动完成移动动画的创建。Flash创建移动动画时，各种属性的变化可独立进行，也可合成复杂的动画，例如，一个对象在移动中还不断在旋转放

14、大等。,第16章 网页中常用的Flash技术,23,3.移动动画关键帧“属性”面板的使用,在“属性”面板内，选择了“补间”下拉列表框中的“动画”选项后，“属性”面板内还有另外两个重要的选项经常需要设置，即“缓动”和“旋转”选项。“缓动”选项调整过程帧变化速率的加速度，它的数值范围规定在-100到100之间。可以在后面直接输入数值，也可以单击“缓动”列表框的下拉按钮，调节滑块来设定数值。“缓动”选项默认值为“0”，这表示过程帧以匀速运动变化。当输入的数值是负值时，帧变化的速率逐渐加大，动画呈加速度(先慢后快)变化；当输入的数值是正值时，帧变化的速率逐渐减小，动画呈减速度变化。,第16章 网页中常

15、用的Flash技术,24,3.移动动画关键帧“属性”面板的使用,“旋转”选项设置可以选择“自动”、“顺时针”和“逆时针”等几种方式。如选择了“顺时针”或“逆时针”旋转，则可以在其后的文本框中输入旋转的次数。“旋转”选项默认值为“自动”，这表示Flash自动选择起始帧和结束帧对象变化最小的角度旋转。,第16章 网页中常用的Flash技术,25,【例16.2】制作小球跳动动画。,“小球跳动”动画播放时，一个小球上下跳动。新建一个Flash文档，在工具箱中单击椭圆工具，并将填充色设置为放射状渐变色。按住Shift键在舞台上端画一个圆形。在时间轴右击第1帧，在弹出的快捷菜单中选择【创建补间动画】命令。

16、即可将该帧创建为动作动画的第1帧，同时将小球转换为元件。在时间轴的第15、第30帧上单击鼠标右键，然后从弹出的快捷菜单中选择【插入关键帧】命令，在第15、第30帧插入关键帧。选中第15帧，将圆形移到舞台下端。至此动画完成。,第16章 网页中常用的Flash技术,26,16.2.3 形变动画的制作,形变动画也称为形状补间动画，就是使图形对象在一段时间内由一种形态变成另一种形态。形态包括图形对象的外观样式、位置、大小和颜色等。形状补间描述了在一段时间内将一个形状变形为另一个形状的过程。在Flash中，可以补间或过渡图形对象的形状、颜色、透明度、大小及位置等属性。形状渐变动画的对象只能是矢量图形。如

17、果要对实例、组、文字或者位图图像进行形状过渡，需要先将他们打散，让它们变成矢量图后设置形变过渡。虽然可以同时为同一层上的多个对象设置过渡，但将不同对象放置在各自的图层中进行过渡会好一些。,第16章 网页中常用的Flash技术,27,16.2.3 形变动画的制作,虽然Flash通常试图以最有逻辑的方式过渡两个形状，但Flash还没有智能到可以变形任何形状的地步，有时它也会产生令人不满意的效果。当你需要控制形状的过渡时，可以用形状提示来控制形状以什么方式渐变。形状提示会标识起始形状和结束形状中的相对应的点，这些点在过渡形状中将保持不变。,第16章 网页中常用的Flash技术,28,【例16.3】图

18、形变换为文字的制作。,动画播放时，一个矩形慢慢变化为文本“Flash”。新建一个Flash文档。在工具箱中单击矩形工具，并将填充色设置为红色，在舞台中画一个矩形。在第30帧上右击鼠标，从弹出的快捷菜单中选择插入空白关键帧命令，在第30帧插入一个空白关键帧。单击第30帧，选择文本工具，在舞台中输入文本“Flash”。执行【窗口】|【属性】命令，打开属性面板，设置文本的字体、字号和颜色。单击选择工具，刚才键入的字母将被自动选择。执行两次【修改】|【分离】命令将文本转化为图形。单击第1帧，打开属性面板，单击补间列表框的下拉按钮，在列表中选择“形状”。,第16章 网页中常用的Flash技术,29,16

19、.3 三种基本元件类型,元件和实例是制作动画的基础。在Flash中，无论是简单的渐变动画，还是复杂的动作脚本，都是基于元件的。元件是在元件库中存放的各种图形、图像、动画、按钮或者导入的声音和电影文件等。常用的元件有图形、按钮和影片剪辑三种基本类型。制作动画时，会遇到某个对象在舞台中多处出现的情况。如果把每个对象都分别制作，这样既费事又会增加动画文件的大小。可以将重复使用的对象建立成元件，一个元件的多个实例只占一个元件的空间。这样不仅能方便地重复调用同一个元件，还有利于减少文件的大小、缩短文件下载的时间，加快动画播放的速度。,第16章 网页中常用的Flash技术,30,16.3 三种基本元件类型

20、,在Flash中设置了一个“库”面板，用来存放各种元件。在需要元件对象上场时，只需用鼠标将元件从库面板拖曳到舞台中即可。此时舞台中该元件的复制品称为实例。舞台中可以放置多个相同元件复制的实例，但在“库”面板中与之对应的元件只有一个。当元件的属性(如大小、颜色等)改变时，由它生成的实例也会随之改变。当实例的属性改变时，与它相应的元件和由该元件复制的其他实例不会随之改变。应用元件可以使动画的编辑更简单化。,第16章 网页中常用的Flash技术,31,16.3.1 图形元件,图形元件主要用来制作动画中的静态图形，也可以是动画，但不能产生交互效果。1.图形元件的特点 图形元件具有相对独立的编辑区域和播

21、放时间，当应用到场景中时，会受到当前场景中帧序列和其他交互式设置的影响。图形元件所制作的动画依赖于主影片时间轴，会随主影片运转而运转，如果主影片停止，图形元件的动作也会停止。2.图形元件的创建建立元件有两种方式，使用工作区上的对象，将其转换为元件；使用元件编辑模式，在元件编辑窗口编辑。,第16章 网页中常用的Flash技术,32,16.3.1 图形元件,3.图形元件的颜色属性元件在场景中实例都具备颜色属性，可以通过属性面板来改变实例的色调、明亮度与透明度等颜色属性。元件实例颜色属性各选项含义如下：无，表示不执行任何的颜色转换工作。亮度，用于设置实例的明亮度。明亮度的设置值从-100到100之间

22、，数值越小则越暗，可以拖动滑块来改变这项设置。色调，用于调整实例的色调，可以从色盘中选择颜色，并调整颜色亮度。Alpha(透明度)，用来设置实例的透明度，数值越高则越不透明(预设值)。高级，提供了RGB三原色的调整、亮度调整与透明度调整。,第16章 网页中常用的Flash技术,33,【例16.4】渐渐消失的气球。,“渐渐消失的气球”动画播放后，一个气球飞向天空越来越小，越来越模糊渐渐消失在视线之外。具体制作过程见教材208页。,第16章 网页中常用的Flash技术,34,按钮元件,按钮元件是一个只含有4帧的特殊影片剪辑。主要用于创建在影片中对标准的鼠标或键盘事件(如点击、滑过或按键等)做出响应

23、的交互性按钮。在Flash中，首先要为按钮设计不同形状的外观，然后为按钮的实例分配对事件产生的动作。可以在电影中创建交互按钮，当产生事件(如鼠标单击等)时，按钮会改变它的外观。,第16章 网页中常用的Flash技术,35,1按钮的4个状态,在编辑按钮元件时，时间轴上显示了四个帧即按钮的4个状态：“弹起”帧是默认的关键帧，表示的是按钮处在一般状态，也就是鼠标指针没有移到按钮之上时，按钮所呈现的状态。“指针经过”帧表示鼠标移动到按钮上时，按钮所呈现的状态。“按下”帧表示用鼠标单击按钮时，按钮所呈现的状态。“点击”帧通常用来设置鼠标敏感区域的。如果没有设置“点击”状态的区域，则鼠标事件的响应范围由按

24、钮图形本身大小作为敏感区域。,第16章 网页中常用的Flash技术,36,2按钮的创建方法,执行【插入】|【新建元件】命令，调出“创建新元件”对话框。在该对话框内输入元件的名字，选择“按钮”类型。单击“确定”按钮，切换到按钮元件编辑模式。用鼠标选中第l帧(弹起)，编辑图形或导入影片剪辑或图形元件实例等，作为按钮“弹起”状态的外观。右击“指针经过”帧，选择插入关键帧。第l帧的按钮图像仍出现在工作区中。改变图形，作为鼠标指针经过时的按钮外观；或者按F7键，使指针经过帧成为空白关键帧，重新创建一个对象。,第16章 网页中常用的Flash技术,37,2按钮的创建方法,按照上述方法，制作鼠标“按下”、“

25、点击”时的按钮外观。单击元件编辑窗口中的场景名称图标，回到主场景。可以看到“库”面板中已有了刚刚制作的按钮元件。从“库”面板中将它拖曳到工作区中，即可创建按钮实例。执行【控制】|【测试影片】命令，测试按钮的动作效果。【例16.5】制作鼠标滑过效果。,第16章 网页中常用的Flash技术,38,影片剪辑元件,影片剪辑元件又称为影片片段，是可单独重复使用的动画片段。1影片剪辑元件的特点 影片剪辑元件有自己的时间线，主要用来制作独立于主影片时间轴的动画，可以包括交互性控制、声音甚至其他影片的部分剪辑，也可以把影片剪辑实例加载到按钮的时间轴中，从而实现动画按钮。有时候为了实现动画的交互性，还可以将单独

26、的图象制作成影片剪辑元件。影片剪辑元件是组成动画的基础。为了避免反复创建相同的动画片段，可以将很多小动画创建为影片剪辑元件。,第16章 网页中常用的Flash技术,39,影片剪辑元件,2影片剪辑元件和图形元件的区别影片剪辑元件和图形元件均可以是一个动画，但是在播放时是有区别的，影片剪辑实例只需要一个关键帧就可以播放，它是完全独立于主场景的。如果主场景播放已经结束，但它的时间轴还是继续向前播放，直到影片剪辑播放完，然后它将返回到影片剪辑的第1帧。而图形实例必须放在需要它的每一帧里，所以图形实例动画可以设置其播放的具体位置。,第16章 网页中常用的Flash技术,40,影片剪辑元件,3影片剪辑元件

27、的测试在编辑时，执行【控制】|【播放】命令后，不能看到由影片剪辑元件和按钮元件产生的实例组成的动画和交互性效果，必须执行【控制】|【测试影片】或执行【控制】|【测试场景】命令，才能在播放器窗口内演示它的动画和交互效果。,第16章 网页中常用的Flash技术,41,【例16.6】变色的彩灯效果。,“变色的彩灯”动画播放时，一个圆形彩灯会不停的变换颜色。具体制作过程，见教材210页。,第16章 网页中常用的Flash技术,42,16.4 文本动画的制作实例,Flash文本动画能产生强烈的视觉冲击，唤起读者的兴趣，在视觉上留下深刻印象。【例16.7】风吹文字动画的制作。【例16.8】光线文字的制作。

28、,第16章 网页中常用的Flash技术,43,16.5 图形动画的制作实例,图片切换是网页中常见的效果，网页广告条很多是通过图片切换制作的。常见的图片切换方式有百叶窗式、开门式、翻页式、渐隐渐现式等图片切换效果。,第16章 网页中常用的Flash技术,44,【例16.9】图片切换效果的制作。,本例通过移动、变形和元件的alpha属性改变来制作图片的切换展示效果。“图片切换”动画播放后，首先显示一副图片，随后第二副图片从左向右展开显示，逐渐将第一副图片覆盖；接着第二副图片慢慢模糊，逐渐显示出第一副图片。具体操作步骤见教材213页。,第16章 网页中常用的Flash技术,45,【例16.10】书本

29、翻页效果,本例通过简单的“形状渐变”和“移动渐变”动画制作方法，来实现比较逼真的书本翻页效果。具体操作步骤见教材214页。,第16章 网页中常用的Flash技术,46,16.6 Flash中的两种特殊图层,运动引导层和遮罩层是两种特殊的图层，借助于它们能制作出非常神奇的动画效果。利用遮罩层可以创建遮罩动画，制作出“探照灯”、“放大镜”等动画效果；利用运动引导层可以创建运动引导层动画，制作出使对象沿任意路径运动的移动动画。遮罩动画和运动引导层动画是Flash中不可或缺的常用动画制作方法。,第16章 网页中常用的Flash技术,47,16.6.1 运动引导层,前面所讲的移动动画只能实现对象从一点直

30、接到另一点的运动，无法实现一些复杂的运动。使用运动引导层可以控制对象沿任意自定义的路径运动，制作出类似“月亮围绕地球旋转”、“鱼儿在大海里遨游”等运动动画效果。,第16章 网页中常用的Flash技术,48,1运动引导层动画的概念,如果想让物体沿着自定义的路径运动，就需要添加一个运动引导层，在引导层里画出运动路径，做一定的设置，对象就能沿着自定义的路径运动。将一个或多个层链接到一个引导层，使一个或多个对象沿引导层里运动路径运动的动画形式被称为“运动引导层动画”。在引导层内可以用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出曲线、图形等，这可以起到对象运动时的导向作用。引导层的内容只能在舞

31、台工作区内看到，不会输出到动画，在发布后的影片中不会出现。,第16章 网页中常用的Flash技术,49,2创建运动引导层动画的方法,运动引导层动画至少需要两个图层，即引导层和被引导层。选中一个图层，单击时间轴面板的“添加引导层”按钮，可以为该图层创建引导层。,第16章 网页中常用的Flash技术,50,2创建运动引导层动画的方法（跳动的小球）,新建一个Flash文档，在舞台工作区绘制一个圆形，单击填充色工具，在填充色面板选择中心渐变填充。选中关键帧，右击鼠标在弹出的快捷菜单中选择“创建补间动画”项，即可将该帧创建为动作动画的第1帧。选中时间轴中的第30帧，按F6键，创建一个关键帧并选中该关键帧

32、，改变其位置。点击时间轴面板的“添加引导层”按钮，在新建引导层内用铅笔绘制出一条曲线。单击图层1，按住鼠标左键拖动起始帧圆形的中心到路径起点处，当路径起点处出现圆圈融合标志时(如图16.29中a所示)，松开鼠标左键，圆形与路径就结合起来了。按照同样的方法，把结束帧上的圆形中心与路径结束点结合起来。至此，整个动画制作完成。,第16章 网页中常用的Flash技术,51,2创建运动引导层动画的方法（跳动的小球）,a 圆圈标志 b 动画时间轴 c 引导线,第16章 网页中常用的Flash技术,52,3应用运动引导层动画的技巧,引导层内引导线不能组合成组，否则引导动画失败。如果想让对象作闭合路径运动，可

33、以在“引导层”画一个闭合曲线，再用橡皮擦去一小段，使闭合曲线出现2个端点，再把对象的起始、终止点分别对准端点。按下工具栏上的“对齐对象”功能按钮，可以使“对象附着于引导线”的操作更容易成功。过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。如果被引导对象为不规则形，可以按下工具栏上的任意变形工具，会显示对象中心点，这样调整中心点后更容易成功。,第16章 网页中常用的Flash技术,53,16.6.2 遮照层,在Flash的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如“探照灯”、“水波”、“万花筒”、“百页窗”、“放大镜”、“淡入淡

34、出”等。,第16章 网页中常用的Flash技术,54,1遮罩动画的概念,“遮罩”，顾名思义就是遮挡住下面的对象。当遮罩层作用于某个普通层时，普通层上内容会透过遮罩层上有内容的部分(即不是空白的部分)而显示出来。这里普通层也就是被遮罩层，被遮罩层中的项目可以是任意Flash允许的动画元素，如填充的形状、文字对象、图形元件等。遮罩层中的对象只有形状，许多属性，如颜色、透明度和渐变色等却是被忽略的。遮罩动画是通过“遮罩层”有选择地显示“被遮罩层”中的内容，从而实现一些特殊的效果。在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意多个。,第16章 网页中常用的Flash技术,55,2遮罩层的

35、创建,在Flash中没有一个专门的按钮来创建遮罩层，遮罩层是由普通图层转化的。在某个图层上单击鼠标右键，在弹出的图层快捷菜单中执行【遮罩层】命令，该图层就会成为遮罩层，层图标就会从普通层图标 变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为。如果想关联更多层被遮罩，只要把这些层拖到遮罩层下面就可以了。,第16章 网页中常用的Flash技术,56,2遮罩层的创建,遮罩动画，通常是先创建了被遮罩的图层后，再创建遮罩层中的具体项目及其动态效果，最后右击遮罩层执行【遮罩层】命令，完成遮罩操作。通常应用遮罩层时，都将遮罩项目运动起来，使其遮罩效果更加逼真。对于用作遮罩

36、的填充形状，可以使用形状动画；对于文字对象、图形实例或影片剪辑，可以使用移动动画。【例16.11】缤纷文字【例16.12】百叶窗式图片切换效果,第16章 网页中常用的Flash技术,57,16.7 Flash中的交互功能,交互是动画和观众之间的纽带，更是flash动画的迷人之处。动画观看者可以通过鼠标或按键操作与交互式动画进行交流，参与到动画的控制中，或者以一种更高级的方式来创建游戏、表单、调查表和实时交互性的网站。Flash中的交互功能通过ActionScript编程技术来实现。ActionScript，直译成中文是“动作脚本”的意思，是Flash专用的一种面向对象的编程语言，与JavaSc

37、ript非常类似。通过ActionScript编写的脚本程序，可以对关键帧、影片剪辑和按钮等对象进行控制，实现非常精彩的交互式动画效果。,第16章 网页中常用的Flash技术,58,16.7.1 动作面板的使用,在Flash中，动作脚本的编写，都是在“动作”面板的编辑环境中进行。使用菜单【窗口】|【动作】命令，调出“动作”面板(如图16.34所示)，可以看到“动作”面板的编辑环境由命令列表区、位置列表区、程序编辑区等组成。,第16章 网页中常用的Flash技术,59,16.7.1 动作面板的使用,位置列表区,命令列表区,命令提示行,程序编辑区,辅助按钮栏,图 16.34“动作-帧”面板,第16

38、章 网页中常用的Flash技术,60,16.7.2 向Flash中添加代码,在Flash中添加动作脚本可以分为两种方式，一是为“帧”添加动作脚本，二是向“对象”添加动作脚本。“帧”动作脚本，是指在时间轴的“关键帧”上添加的动作脚本。“对象”动作脚本，是指在“按钮”元件和“影片剪辑”元件的实例上添加的动作脚本。,第16章 网页中常用的Flash技术,61,1事件与动作,交互式动画的每个行为包含了两个部分：事件和事件产生时所执行的动作。事件是触发动作的信号，动作是事件的反应结果，用于控制在动画播放过程中相应的程序流程和播放状态。动作由用户自己设计，是由连续的语句、命令组成的程序。在Flash中事件

39、有两种触发方式，一种是基于用户操作的，如通过单击鼠标激发一个事件；一种是基于时间的，当到达一定的时间时自动激发事件。这两种方式分别称为“鼠标/键盘”事件和“帧”事件。事件的设置与动作的设计是通过“动作”或“行为”面板来完成的。,第16章 网页中常用的Flash技术,62,2ActionScript,ActionScript是一种面向对象的编程语言。最早出现在Flash 5中，发展到Flash 7中的ActionScript 2.0，已经趋于成熟，是一种非常简单而有效的交互式动画创作工具。它的语法类似于Javascript设计语言。,第16章 网页中常用的Flash技术,63,(1)基本语法,“

40、.”语法(点语法)_root、_parent和this关键字“”语法(大括号语法)注释语法 分号语法 关键字,第16章 网页中常用的Flash技术,64,(2)基本动作语句,gotoAndPlay语句 gotoAndStop语句 Stop语句 play语句 stopAllSounds语句,第16章 网页中常用的Flash技术,65,(3)高级动作语句,duplicateMovieClip语句，通过复制，动态创建“影片剪辑”实例。removeMovieClip语句，删除指定的影片剪辑。setProperty语句，更改影片剪辑的属性值。startDrag语句，使影片剪辑实例可拖动。stopDrag

41、语句，停止影片剪辑实例拖动操作。fscommand语句，可以使SWF文件与Flash Player或承载Flash Player的程序(如IE浏览器)进行通讯。getURL语句，将来自特定URL的文档加载到窗口中，或将变量传递到位于所定义URL的另一个应用程序。loadMovie语句，在播放原始SWF文件的同时将SWF文件或JPEG文件加载到Flash Player中。unloadMovie语句，删除通过loadMovie()加载的影片剪辑。,第16章 网页中常用的Flash技术,66,3设置帧事件与动作,帧事件就是当影片或影片剪辑播放到某一帧时的事件，只有关键帧才能设置事件。选中需要添加动作

42、脚本的关键帧，这时“动作”面板的标题栏上显示的标题是“动作-帧”，然后单击动作面板程序编辑区左上角按钮，在弹出菜单上找到相关条目里面的语句，双击即添加到了“脚本编辑”窗口中。也可以直接在“脚本编辑”窗口中输入语句。,第16章 网页中常用的Flash技术,67,4设置按钮元件事件与动作,为按钮添加动作的方法是，首先选中场景上要为其添加动作的按钮，这时“动作”面板标题栏上显示的标题是“动作-按钮”，这表明当前要为其添加脚本的对象是按钮。然后在脚本编辑窗口中添加编辑动作。为按钮添加动作要使用on()事件处理函数，指定触发动作的鼠标事件。on()函数语法格式为on(mouseEvent)，其中“()”

43、中的mouseEvent参数是鼠标事件，常用的鼠标事件有“release”等；“”用来放置结合在一起依次执行的语句块。,第16章 网页中常用的Flash技术,68,4设置按钮元件事件与动作,press：当鼠标指针移到按钮之上，并按下鼠标左键时触发事件。release：当鼠标指针移到按钮之上，并按下鼠标左键，再松开鼠标左键时触发事件。Release Outside：当用户在按钮上按住鼠标左键，而在按钮外面释放鼠标时触发事件。Roll Over：当用户将鼠标指针放置在按钮上时触发事件。Roll Out：当用户将鼠标指针从按钮上移出时触发事件。Drag Over：当用户将鼠标指针从按钮上拖出(依然按

44、住鼠标左键)，最后再将鼠标指针放回按钮上时触发事件。Drag Out：当用户将鼠标指针放置在按钮后，按住鼠标左键，然后将鼠标指针从按钮上拖出(依然按住鼠标左键)时触发事件。Keypress(“”)：当键盘的指定键被按下时，触发事件。,第16章 网页中常用的Flash技术,69,5设置影片剪辑元件的事件与动作,为影片剪辑添加动作的方法是，选中场景上要为其添加动作的影片剪辑，这时“动作”面板标题栏上显示的标题是“动作-影片剪辑”，这表明当前要为其添加脚本的对象是影片剪辑，然后在脚本编辑窗口中添加动作。为影片剪辑实例添加动作时要使用onClipEvent()事件处理函数，指定触发动作的影片剪辑事件。

45、OnClipEvent()函数语法格式为onClipEvent()，其中“()”用来放置影片剪辑事件，常用的影片剪辑事件有“load”、“enterFrame”等。,第16章 网页中常用的Flash技术,70,5设置影片剪辑元件的事件与动作,常用影片剪辑事件的含义如下:load：影片剪辑一旦出现在时间轴中，即启动此动作。unload：在从时间轴中删除影片剪辑之后，此动作即在第1帧中启动。enterFrame：以影片剪辑的帧频连续触发该动作。mouseMove：每次移动鼠标时启动此动作。mouseDown：当按下鼠标左键时启动此动作。mouseUp：当释放鼠标左键时启动此动作。keyDown：当

46、按下某个键时启动此动作。keyUp：当释放某个键时启动此动作。data：在loadVariables()或loadMovie()动作中接收到数据时启动该动作。,第16章 网页中常用的Flash技术,71,【例16.14】按键控制动画的播放。,本例通过为影片剪辑添加动作，制作“按键控制动画的播放”动画。动画播放时如果按下“”键，则播放头会转到下一帧；如果按下“”键，则播放头会转到上一帧。其具体操作步骤如下：新建一影片剪辑元件，从“库”中拖曳到主场景，选中该影片剪辑。单击【窗口】|【动作】命令，调出“动作-影片剪辑”面板。在右边的程序编辑区内，输入下面的代码：onClipEvent(keyDown

47、)if(Key.getCode()=Key.RIGHT)this._paballt.nextFrame();else if(Key.getCode()=Key.LEFT)this._paballt.prevFrame();至此，影片剪辑事件与动作完成。,第16章 网页中常用的Flash技术,72,【例16.15】文本对象跟踪鼠标。,本例在运行时创建一个文本字段并将鼠标位置显示在文本字段中的动画效果，其具体操作步骤如下：新建一影片剪辑元件，并把它从“库”面板拖曳到工作区内。选中该影片剪辑。单击【窗口】|【动作】命令，调出“动作-影片剪辑”面板。在右边的程序编辑区内，输入下面的程序：onClipE

48、vent(load)this.createTextField(ntext,this.getNextHighestDepth(),0,0,100,22);ntext.autoSize=true;ntext.selectable=false;onClipEvent(mouseMove)ntext.text=X:+_root._xmouse+Y:+_root._ymouse;,第16章 网页中常用的Flash技术,73,16.7.3 交互动画实例,Flash可以做出千变万化，多姿多彩的动画效果，其中很大一部分是编写ActionScript程序控制电影剪辑元件的属性和使用电影剪辑元件的方法来达到的。【例16.16】按钮控制动画的制作。【例16.17】运动轨迹动画的制作。【例16.18】拖动菜单的制作。,