计算机图形图像与网页制作第8章.ppt

第8章Flash精彩实例,8.1查看完成的影片8.2分析Stiletto.fla文件8.3定义新文档属性和创建渐变背景8.4创建矢量图并为其添加遮罩8.5在影片剪辑中补间位图效果8.6向按钮添加动画和导航8.7添加声音流和事件声音8.8组织“库”面板8.9测试下载性能并发布影片8.10思考与练习,8.1查看完成的影片,在本节中，我们将完成以下任务：使用属性检查器和影片浏览器分析完成的影片。检查影片剪辑，并认识它与主影片的关系。查看影片中包括的资产类型。,查看完成的影片的步骤如下：(1)在FlashMX应用程序文件夹中，浏览到Tutorials/FlashIntro并双击stiletto.swf，可以在单独的FlashPlayer中打开完成的影片。注意：已发布的Flash影片的扩展名为SWF，创作环境中的文档的扩展名为FLA。(2)当影片打开时，观察汽车的三个淡入淡出的视图。可以在影片剪辑中通过补间位图效果来创建此动画。(3)聆听影片放映时连续播放的声音，这就是声音流的范例。,(4)将指针沿着窗口的右下沿滑过三个按钮，查看指针滑过的效果，并倾听每个按钮中包含事件的声音。(5)单击一个按钮，查看它所链接的位置，然后关闭打开的浏览器并返回到SWF文件。(6)查看完影片之后，单击其关闭框。,8.2分析Stiletto.fla文件,分析完成的FLA文件有助于查看作者是如何设计文档的。要分析该文件，可以通过查看对象的属性、查看时间轴和舞台、查看库资产，以及使用影片浏览器来确定。具体步骤如下：(1)在Flash中，选择“文件”“打开”。定位到Flash应用程序文件夹，打开Tutorials/FlashIntro/stiletto.fla，此时便可以在创作环境中查看完成的教程影片了(如图8-1所示)。,图8-1完成的教程影片,(2)要查看主时间轴中的所有图层，请向下拖动分隔舞台和时间轴的栏。(3)在时间轴上，解除锁定Copy图层和Images图层。,8.2.1查看文档属性使用属性检查器可以查看所选对象的规格，其规格取决于所选对象的类型。例如，如果选择了文本对象，将会显示查看和修改文本属性的设置。具体查看步骤如下：(1)如果属性检查器没有打开，请选择“窗口”“属性”。(2)如果需要，可在舞台中向下滚动显示的内容，然后在完成的SWF文件中选择显示描述性文本的矩形块(如图8-2所示)。文本不会出现在FLA文件中，因为它是从外部TXT文件载入到动态文本字段中的。,图8-2显示描述性文本的矩形块,(3)在属性检查器中，可以查看文本的大小、样式和颜色，以及其他属性(如图8-3所示)。如果属性检查器没有完全展开，请单击右下角的白色三角图标。,图8-3“文本工具”属性检查器,(4)在舞台中选择汽车。影片剪辑设置将代替文本设置(影片剪辑是带有各自时间轴的元件，可以将它们看作是影片中的影片)。,8.2.2查看影片剪辑现在，我们将打开元件编辑模式，查看影片剪辑的时间轴。具体步骤如下：(1)在舞台上，双击汽车的影片剪辑。就像“创建补间动画”一样，可以在关键帧中定义动画中的更改。在滚动时间轴时，请注意哪些图层中有关键帧，以及哪些帧是关键帧。包括内容的起始关键帧和中间关键帧在时间轴中以实心圆表示，结束关键帧则显示为小矩形框。,(2)在时间轴中选择播放头，然后沿着帧慢慢拖动它。随着时间轴中的更改，观察舞台中动作的相应变化。随着播放头的移动，影片也就顺序播放。可以向影片中添加动作脚本(Flash脚本撰写语言)，以使播放头跳到特定的帧。(3)看完影片剪辑后，执行以下任一操作即可回到主影片：选择“编辑”“编辑文档”。单击“返回”按钮。单击舞台上的“场景1”。,8.2.3查看库资产“库”面板包含文档中的元件以及导入对象。查看库资产的步骤如下：(1)如果“库”面板没有打开，请选择“窗口”“库”。(2)如果需要，拖动“库”面板将其放大，以便查看库中的对象。(3)如果Artwork文件夹没有展开，请双击它并查看该文件夹中的对象。(4)单击view1.png，在“库”面板的顶部预览区域中查看该图像。(5)展开“库”面板中的其他文件夹，查看文档中包括的资产，例如按钮和影片剪辑(如图8-4所示)。(6)看完资产之后关闭“库”面板。,图8-4“库”面板中的按钮和影片剪辑资产,8.2.4用影片浏览器分析影片结构影片浏览器有助于排列、定位和编辑媒体。影片浏览器通过分层树结构提供有关影片的组织和流的信息，这在分析别人创作的影片时特别有用。具体步骤如下：(1)如果影片浏览器还没有打开，请选择“窗口”“影片浏览器”。(2)如果需要，可扩大影片浏览器，以便查看窗格中的树形结构。影片浏览器的过滤按钮用于显示或隐藏信息。(3)单击影片浏览器标题栏中的弹出菜单，确认显示影片元素按钮和显示元件定义按钮处于选中状态(如图8-5所示)。,图8-5影片游览器界面,(4)在影片浏览器的顶部，取消选择“显示帧和图层”按钮。确认选中的过滤按钮只有“显示文本”、“显示按钮、影片剪辑和图形”、“显示动作脚本”和“显示视频、声音和位图”按钮(如图8-6所示)。,图8-6影片浏览器的顶部,(5)检查该列表，以便查看影片中包括的一些资产，并了解它们与其他资产之间的关系。(6)要展开一个对象或类别，请单击其名称左边的加号按钮。(7)选择“显示帧和图层”过滤按钮，向下滚动到“元件定义”类别，并展开该类别，双击CarAnimation影片剪辑。现在，已经进入影片剪辑的元件编辑模式。,(8)在影片浏览器中，选择并展开CarAnimation类别，展开View3Fade图标(如图8-7所示)，然后双击“帧60”。在影片剪辑的时间轴中，播放头会移动到View3Fade图层的第60帧处。要查看分层结构树中列出的项目，请单击相应的图标。如果单击帧图标，在时间轴中播放头将移动到该帧处；如果单击资产，例如位图图像，则属性检查器将显示该图像的设置；如果双击代表元件的图标，将打开元件编辑模式。(9)关闭影片浏览器。要关闭文档，请选择“文件”“关闭”。如果对文件进行了更改，请不要保存这些更改。,图8-7展开View3Fade图标,8.3定义新文档属性和创建渐变背景,8.3.1打开新文件现在，我们将创建自己的教程影片。首先，打开一个新文件，具体步骤如下：(1)选择“文件”“新建”。(2)选择“文件”“另存为”。(3)将该文件命名为mystiletto.fla，并将其保存在FlashMX应用程序文件夹的Tutorials/FlashIntro/My_Stiletto子文件夹中。注意：在完成教程的过程中，及时保存所做的工作。,8.3.2定义文档属性定义文档属性是各类创作中的第一步。可以使用属性检查器和“文档属性”对话框来指定影响整个影片的设置，例如播放速度，以及舞台大小和背景色等。具体步骤如下：(1)如果属性检查器没有打开，请选择“窗口”“属性”。在属性检查器中，确认帧频文本框中的数值为12。影片的播放速度一般为每秒12帧，这是在Web上播放动画的最佳帧频。注意：如果属性检查器没有完全展开，单击右下角的白色三角。,(2)“背景色”框指示舞台的颜色。单击“背景色”框上的向下箭头，然后在颜色样本上选取“移动滴管工具”，以便在十六进制文本框中查看它们的十六进制值。(3)找到并单击灰色样本，其十六进制值为999999(如图8-8所示)。(4)如果要调整舞台的大小，请单击“大小”按钮，它用于指示舞台的大小。在“文档属性”对话框中(如图8-9所示)，在第一个“尺寸”文本框中键入640px，在第二个“尺寸”文本框中键入290px。确认在弹出菜单中选择的是“像素”，然后单击“确定”。这样，舞台尺寸将被更改，以反映640290像素的新设置。,图8-8选择“背景色”,图8-9文档属性,8.3.3指定网格设置在舞台中，可以沿着水平和垂直网格线对齐对象。即使在网格不可见时，也可以将对象与网格对齐。现在，要修改水平网格线之间和垂直网格线之间的距离，并创建与舞台边界对齐的网格。具体步骤如下：(1)选择“查看”“网格”“编辑网格”。(2)在“网格”对话框的网格宽度文本框中键入10px，在网格高度文本框中键入10px。(3)选择“对齐网格”，并确认没有选择“显示网格”。这样，即使网格是不可见的，对象也将与网格对齐。(4)确认“对齐精确度”选择的是“正常”(如图8-10所示)，然后单击“确定”。对齐精确度决定对象与网格线之间对齐的必需精度。,图8-10编辑网格,8.3.4创建渐变背景渐变能显示颜色的细微变化，或是两种或多种颜色之间的过渡。在完成的教程文件中，背景从黑色渐变为深蓝色，其中包含透明区域，可以显示部分灰色舞台。可使用混色器得到这种效果。注意：尽管渐变可以在影片中实现有趣的效果，但是过度使用将会影响计算机处理器的速度，并降低动画的播放速度。在设计影片时，要同时考虑艺术效果和性能要求，这样才能最合理地使用渐变。,1绘制矩形在本章的开始，我们已经创建了与舞台对齐的网格，并允许将对象与网格线对齐。现在要绘制一个矩形，使其与舞台边的网格区域对齐。具体步骤如下：(1)在舞台右侧上方的弹出菜单中，输入75%，以便查看整个舞台。此设置指示舞台的放大或缩小视图，它不会影响影片中舞台的实际大小。实际大小是在“文档属性”对话框中指定的。(2)在工具箱中，选择“矩形工具”。,(3)在工具箱中，单击“笔触颜色”控件。选择“没有笔触”，如图8-11所示(调色板上带有红色对角线的按钮)。所选的形状填充颜色并不重要，可以随时更改该颜色。,图8-11笔触颜色,(4)从舞台的左上角到舞台的右下角，拖出一个覆盖整个舞台的矩形。释放指针后，该矩形将沿着隐藏的网格与舞台的边界对齐(如图8-12所示)。,图8-12覆盖整个舞台的矩形,注意：在完成本章实例的过程中，我们会发现能够撤消所做的更改非常有用。Flash可以撤消刚才所做的几次更改，这取决于在“首选参数”中设置的撤消级别数。要进行撤消，请选择“编辑”“撤消”，或者按下Ctrl+Z组合键；反之，可以重做已经撤消的动作，方法是选择“编辑”“重做”，或者按下Ctrl+Y组合键。,2指定渐变的颜色深蓝色是第一种要添加到渐变中的颜色。具体步骤如下：(1)在工具箱中，选择“箭头工具”。在舞台中，单击矩形内部以选择填充。在画矩形时，属性检查器会显示“矩形工具”的属性。当我们选择已经创建的形状时，属性检查器会显示该形状的属性。(2)如果混色器没有打开，请选择“窗口”“混色器”。(3)要展开混色器，请单击面板标题栏中的白色箭头(如图8-13所示)。,图8-13混色器,(4)如果混色器没有完全展开，请单击面板右下角的箭头(如图8-14所示)。,图8-14展开的“混色器”面板,(5)在“填充样式”弹出菜单中，选择“放射状”。(6)单击渐变栏左侧的渐变滑块将它选中。(7)单击窗口左上角中的颜色框，打开调色板。使用以下方法之一选择深蓝色：在十六进制值文本框中键入000066，然后按下Enter或Return键。将滴管在颜色样本上移动，找到深蓝色(十六进制值为000066)，然后单击该样本以选择它(如图8-15所示)。,图8-15选择深蓝色,3更改Alpha值在混色器中，“Alpha”文本框指示颜色的透明度，0%表示颜色是完全透明的，而100%则表示颜色是完全不透明的。将Alpha值设定为0%，从而创建一个从深蓝色到黑色的渐变，在渐变的透明区域中显示灰色舞台。其过程是，在混色器中，在“Alpha”文本框中键入0%后按下Enter或Return键，或者将Alpha滑块移动到0(如图8-16所示)。,图8-16更改Alpha值,4添加第二种渐变色现在，向渐变中添加黑色，具体步骤如下：(1)在混色器中，单击渐变栏右侧的渐变滑块以选中它。(2)单击颜色框，打开调色板，选择黑色(十六进制值为000000)，如图8-17所示。可以在十六进制文本框中键入十六进制值，然后按下Enter或Return键，也可以查找并选择具有相同十六进制值的颜色样本。,图8-17添加第二种渐变色,8.3.5使渐变填充变形如果要使对象变形，可以旋转、缩放或倾斜它，也可以使用“填充变形工具”使对象变形。具体步骤如下：(1)在工具箱中，选择“填充变形工具”。在舞台中，单击该矩形内的任意位置。舞台周围会显示一个椭圆，指示渐变的形状和位置。该椭圆有用于控制放射状渐变的位置、宽度、缩放和旋转的控件(如图8-18所示)。,图8-18填充变形工具,(2)将中心控件拖到舞台的左部，使其距舞台左侧边界的距离大约为1/3，如图8-19所示。在更改椭圆的形状和位置时，舞台中颜色过渡的形状和位置也随之更改。(3)向左拖动椭圆上的方形手柄(它控制渐变的宽度)，使椭圆变窄，椭圆的形状如图8-20所示。(4)向右拖动中间的环形手柄(它控制着渐变大小)，使椭圆变大，如图8-21所示。(5)向左拖动下面的环形手柄(它控制椭圆的旋转)，使椭圆旋转成一定的角度，如图8-22所示。,图8-19将中心控件拖到舞台的左部,图8-20使椭圆变窄,图8-21使椭圆变大,图8-22向左拖动下面的环形手柄,8.3.6命名和锁定图层在时间轴中，渐变形状显示在图层1上，当前它是文档中惟一的图层。在准备向舞台中添加和移动其他对象之前，要重命名该图层，并将其锁定。正如在“理解图层”一课中学习的一样，通过锁定图层，可以确保您或其他用户不会意外地更改该图层上的对象。锁定图层的操作步骤如下：(1)在时间轴上，双击图层1的名称，然后键入Background以重命名该图层。(2)在图层名称之外单击，然后单击挂锁图标锁定该图层。,8.4创建矢量图并为其添加遮罩,我们可以添加一个新图层，然后在该图层上绘制形状，而不用在背景图层上创建形状。具体步骤如下：(1)要添加新图层，请选择“插入”“图层”，或单击“插入图层”按钮(如图8-23所示)。将新图层命名为Shapes。(2)在工具箱中，选择“椭圆工具”。(3)在属性检查器中，从“笔触样式”弹出菜单中选择“极细”，单击“笔触颜色”控件。在调色板中，选择灰色，十六进制值为999999。,(4)如果混色器没有打开，请选择“窗口”“混色器”。在“填充样式”弹出菜单中，选择“纯色”。单击“填充颜色”控件以选择它。在“红”文本框中，键入109。在“绿”和“蓝”文本框中，键入45，然后按下Enter或Return键。这样就指定了一个颜色中红色、绿色和蓝色所占的值。(5)在时间轴中，确认选择了Shapes图层。在舞台中，按住Shift键拖画，强制“椭圆工具”画出一个圆，该圆从舞台上的画布区域开始，一直扩展到舞台下的画布区域(如图8-24所示)。,图8-23添加新图层,图8-24画出一个圆,注意：如果操作失误，选择“编辑”“撤消”，然后重试。(6)在工具箱中选择“箭头工具”，然后双击舞台上的圆，以便选择填充和笔触。(7)如果“变形”面板没有打开，选择“窗口”“变形”。(8)要展开“变形”面板，则单击左上角的白色箭头。选择“倾斜”，并在“水平倾斜”文本框中键入20.0(如图8-25所示)，然后按下Enter或Return键。所画的圆将更改为一个倾斜的椭圆(如图8-26所示)。,图8-25“变形”面板,图8-26倾斜的椭圆,8.4.2创建相同形状并使之变形现在将创建一个与8.4.1中实例相同的椭圆并使之变形。具体步骤如下：(1)在舞台中椭圆的填充和笔触仍都处于选中状态的情况下，选择“编辑”“复制”(如图8-27所示)。,图8-27复制椭圆,(2)在属性检查器中，使用“填充颜色”控件选择黑色(如图8-28所示)。,图8-28填充黑色,(3)在工具箱中，选择“任意变形工具”。在复制的椭圆周围将出现一个带有手柄的辅助线(如图8-29所示)。,图8-29任意变形工具,(4)将指针移动到某个角的手柄上，直到出现一个双箭头指示器。将角手柄向内拖动，使椭圆变小，并确认内部椭圆的笔触没有接触到外部椭圆的笔触。(5)将指针移动到角手柄上，直到指针变为旋转指示器。将旋转指示器向左侧拖动，使该椭圆旋转到如图8-30所示的位置。,图8-30内部椭圆与外部椭圆,8.4.3创建副本的剪切图如果在同一图层的一个形状之上创建了另一个形状，这两个形状的颜色不同，而且没有组合在一起，则上面的形状可以从下面的形状中“剪切”出一个区域。我们可以删除复制的椭圆，从而得到该副本的剪切效果。具体步骤如下：(1)在复制的椭圆周围显示“任意变形工具”辅助线的情况下，单击舞台或画布上这两个形状之外的任何位置，然后单击内部椭圆的填充。按下键盘上的Delete键，删除该填充(如图8-31所示)。,图8-31删除内部椭圆填充,(2)现在的椭圆具有外部和内部两条笔触。使用“箭头工具”，单击椭圆最外围的笔触以选中它，然后按住Shift键单击选中最内围的笔触。把笔触向填充的右侧稍微拖动一下，如图8-32所示。,图8-32移动内外部两条笔触,(3)在由笔触分为两部分的区域中每块填充颜色现在都代表一个离散的片断，可以分别将它们着色。选择形状填充的一个区域，然后使用混色器将填充颜色更改为某个深度的棕色(红色值为117，绿色值为78，蓝色值为53)。如果愿意，可以重复此步骤将另一块填充区域更改为较浅的棕色，如图8-33所示。,图8-33区域分别着色,(4)选择“任意变形工具”。在椭圆背景形状四周拖动指针，选中所有形状，然后拖动辅助线的右角手柄扩大这些形状，如图8-34所示。,图8-34任意变形工具,(5)在舞台中拖动形状，以使部分曲线显示在舞台的左上角和右侧，如图8-35所示。,图8-35在舞台中拖动形状,8.4.4创建遮罩如果在Shapes图层创建的图形超出了舞台，扩展到了画布区域。尽管画布区域不会出现在发布的影片中，但是在创作环境中，超出舞台的图形会使人感到杂乱。因此，我们可以擦除进入画布的那部分形状，但是还有一个更好的办法，就是在舞台上应用遮罩，以使只有遮罩下的区域(在本例中为整个舞台)才是可见的。同时通过这种方法，如果想返回到Shapes图层来修改创建的图形，则它们还是完好的，并没有被遮罩分割。具体步骤如下：(1)当Shapes图层处于选中状态时，在时间轴中添加一个新图层，并将其命名为Mask。(2)在工具箱中，选择“矩形工具”，画一个矩形，范围从舞台的左上角扩展到右下角(如图8-36所示)。此矩形就是遮罩的形状，矩形下的任何内容都是可见的。,图8-36遮罩的矩形形状,(3)右击时间轴中Mask图层的名称，然后从上下文菜单中选择“遮罩层”。该图层将转换为遮罩层，由一个向下箭头图标表示。它下面紧挨的图层将链接到遮罩层，其内容会显示在遮罩的填充区域上。被蒙住的图层名将会缩进，其图标将更改为向右的箭头。画布上的图形不再显示在舞台中。必须锁定遮罩层，才能显示出遮罩效果。要编辑形状，可以解锁Mask和BackgroundShapes图层。编辑完图形后，再次锁定这些图层以调用遮罩(如图8-37所示)。,图8-37图层的上下文菜单,(4)保存文件，最终效果如图8-38所示。,图8-38矩形遮罩效果,8.5在影片剪辑中补间位图效果,8.5.1向库中导入图像在向Flash中导入文件时，可以直接将其导入库中，步骤如下：(1)在时间轴中，添加一个新图层，并将其命名为Images。(2)选择“文件”“导入到库”。当选择“导入到库”而不是“导入”时，必须先将图像放到舞台中，然后才会显示出来。,(3)浏览到FlashMX应用程序文件夹中的Tutorials/FlashIntro/Assets文件夹，选择view1.png，然后按住Shift键并单击view2.png和view3.png，从而选定这三幅图像，并单击“打开”。(4)在“FireworksPNG导入设置”对话框中，单击“作为单个扁平化的位图导入”，然后单击“确定”。这样，三幅图像就添加到库中了。,8.5.2修改位图压缩在导入图像时，可以检查和修改图像的压缩设置。尽管压缩图像可以减少影片文件的大小，但是也会影响图像的质量，我们的目标是要在压缩设置和图像质量之间取得最佳平衡。可以通过以下方法实现这一目标，步骤如下：(1)如果“库”面板没有打开，选择“窗口”“库”。如果需要，扩大该窗口，查看导入的三个文件(如图8-39所示)。(2)双击view1.png文件，其默认选择是JPEG压缩。,图8-39“库”中的三个位图文件,(3)在“压缩”弹出菜单中，选择“无损(PNG/GIF)”以获得较高的图像质量(如图8-40所示)。(4)要测试图像使用新设置的显示效果，则单击“测试”。如果需要，将该汽车图像拖到预览窗口的视图中。预览完图像后，单击“确定”。(5)返回到“库”面板。双击view2.png，重复第3步，然后单击“确定”。(6)在“库”面板中，双击view3.png，指定“无损(PNG/GIF)”，然后单击“确定”。,图8-40位图属性,8.5.3创建影片剪辑元件在完成的文件中，汽车的三个视图在打开的场景中会呈现淡入淡出效果。此效果可以通过创建影片剪辑元件来实现，该元件的时间轴必须与主时间轴无关。然后，需要补间这三个汽车视图之间的Alpha透明度，从而创造出淡入淡出的效果。要开始创造这种效果，需要创建影片剪辑，步骤如下：(1)在时间轴中Images图层仍处于选中状态的情况下，将view1.png对象从库面板中拖到舞台中，将汽车放在渐变背景最淡的区域中(如图8-41所示)。,图8-41将view1.png(汽车)对象从库面板中拖到舞台中,(2)选择“插入”“转换为元件”，或按下F8键。(3)在“转换为元件”对话框中，将该元件命名为CarAnimation。确认选择了“影片剪辑”，并且在“注册”指示符选择了中心方框(如图8-42所示)，然后单击“确定”。和其他Flash对象一样，位图也具有用于定位和变形的注册点。当我们在影片剪辑中对齐这三个汽车视图时，所有这三个视图都将相对于中心注册点的位置进行对齐。,图8-42转换为元件,8.5.4编辑元件要查看影片剪辑的时间轴，必须处于元件编辑模式。通过在舞台中或在库面板中双击元件，即可打开元件编辑模式。具体步骤如下：(1)在舞台中，双击汽车打开元件编辑模式。元件名称将显示在画布区域之上，还有一个可以返回到主影片的“场景1”链接。在元件编辑模式中，现在会看到影片剪辑的时间轴，而不是主影片的时间轴。(2)将Layer1重命名为View1Fade。,(3)在舞台中我们看到的汽车是CarAnimation元件中的位图，而不是其中的元件。通过在舞台中选择该汽车，然后按下F8键，可以使之成为元件。(4)在“转换为元件”对话框中，将该元件命名为View1Car，然后确认“影片剪辑”处于选中状态。(5)确认在“注册”指示符中选择了中心方块，然后单击“确定”。(6)在时间轴上水平滚动，一直到第105帧(如图8-43所示)。选择该帧，然后选择“插入”“关键帧”，或者按下F6键以添加关键帧。“当前帧”指示器会显示所选的帧。,图8-43选择第105帧,(7)向第25帧和第35帧添加关键帧。(8)向第34帧添加关键帧，然后在图层上单击第36帧和第104帧之间的任何地方，并按下键盘上的Delete键。在第35帧中将出现一个空的关键帧，并且从第35帧开始，汽车不会出现在舞台中(如图8-44所示)。,图8-44单击第36帧和第104帧之间的任何一帧,8.5.5补间位图效果创建补间位图效果类似于创建直接的动画补间：指定起始关键帧和结束关键帧的设置，然后为这两个帧和它们之间的帧指定补间。Flash在动画的第一个关键帧和最后一个关键帧之间创建过渡动画。下面我们将创建三辆汽车循序淡入淡出的效果。1淡出第一辆汽车首先进行淡出第一辆汽车的操作，具体步骤如下：(1)在CarAnimation时间轴中，选择第34帧，然后单击舞台上的View1Car，打开显示影片剪辑属性的属性检查器。,(2)在属性检查器的“颜色”弹出菜单中，选择“Alpha”。在“Alpha数量”弹出菜单中，可以在文本框中键入0%并按下Enter或Return键，或使用弹出滑块选择0%。(3)在时间轴中，选择第25帧和第34帧之间的任意帧。在属性检查器中，从补间弹出菜单中选择“动作”。此时会出现一个带有实线的箭头横跨补间的关键帧。关键帧之间的虚线表明没有正确地完成补间，这经常是由于缺少开始或结束关键帧引起的(如图8-45所示)。,图8-45缺少开始或结束关键帧,2淡入第二辆汽车当View1Car淡出时，汽车的另一个视图应该淡入。具体步骤如下：(1)向CarAnimation时间轴中添加新图层，并命名为View2Fade。(2)在View2Fade图层上，向第25帧添加一个关键帧。(3)在播放头仍位于第25帧的情况下，将view2.png从“库”面板拖到舞台中。(4)如果“信息”面板没有打开，请选择“窗口”“信息”。确认在“注册”指示符中选择了中心方框，然后在X坐标文本框中键入0，在Y坐标文本框中也键入0。按下Enter或Return键。(属性检查器也有X和Y文本框，但是，这些坐标是相对于影片剪辑左上角的注册点的。),(5)选择舞台上的view2.png(如图8-46所示)，然后按下F8键使它成为一个元件。在“转换为元件”对话框中，将该元件命名为View2Car。确认选中了该影片剪辑，然后单击“确定”。(6)在影片剪辑属性检查器中，从“颜色”弹出菜单中选择“Alpha”，并在“Alpha数量”文本框中键入0%。(7)向View2Fade图层的第35帧中添加一个关键帧。(8)在舞台上，单击透明汽车的边框矩形的内部。在影片剪辑属性检查器的“Alpha数量”文本框中输入100%。(9)在View2Fade图层上，选择第25帧和第34帧之间的任意帧。在属性检查器中，从“补间”弹出菜单中选择“动作”。,图8-46选择舞台上的view2.png,3淡出第二辆汽车(1)在View2Fade图层上，向第60帧添加一个关键帧。(2)在View2Fade图层上，向第70帧添加一个关键帧，再向第69帧添加一个关键帧。(3)选择View2Fade图层第69帧中的关键帧。在舞台上选择View2Car，并使用属性检查器选择0%的Alpha透明度。(4)在View2Fade图层上，选择第60帧和第68帧之间的任意帧。在属性检查器中，从“补间”弹出菜单中选择“动作”。(5)单击View2Fade图层上的第71帧和第105帧之间的任意帧，然后按下Delete键。注意：在完成实例的过程中，及时保存所做的工作。,4淡入第三辆汽车当第二辆汽车淡出时，第三辆汽车将会淡入。创建该动画的步骤如下：(1)在View2Fade图层处于选中状态时，向时间轴添加一个新图层，并将它命名为View3Fade。(2)在View3Fade图层上，向第60帧添加一个关键帧。(3)在第60帧仍处于选中状态时，将view3.png从“库”面板拖到舞台中。使用“信息”面板(如果该面板关闭，请选择“窗口”“信息”)将X和Y坐标都指定为0，然后确认注册点居中，处理方法和处理view2.png的方法一样。,(4)选择舞台上的view3.png，然后按下F8键使它成为一个元件。在“转换为元件”对话框中，将该元件命名为View3Car。确认选中了该影片剪辑(如图8-47所示)，然后单击“确定”。(5)在属性检查器中，从“颜色”弹出菜单中选择“Alpha”，并在“Alpha数量”文本框中键入0%。(6)向View3Fade图层的第70帧中添加一个关键帧。(7)在舞台上，选择“View3Car”的边框矩形的内部。在属性检查器的“Alpha数量”文本框中输入100%。(8)在View3Fade图层上，选择第60帧和第69帧之间的任意帧。在属性检查器中，从“补间”弹出菜单中选择“动作”。,图8-47确认选中影片剪辑,5淡出第三辆汽车现在将创建淡出第三辆汽车的动画，具体步骤如下：(1)在View3Fade图层上，向第95帧和第105帧添加一个关键帧。(2)在View3Fade图层的第105帧处于选中状态时，选择舞台上的View3Car，然后使用属性检查器选择0%的Alpha透明度。(3)在View3Fade图层上，选择第95帧和第104帧之间的任意帧。在属性检查器中，从“补间”弹出菜单中选择“动作”。,6淡入第一辆汽车当第三辆汽车淡出时，第一辆汽车必须淡入才能完成动画。淡入第一辆汽车的步骤如下：(1)在View1Fade图层上，向第95帧添加一个关键帧。(2)在第95帧仍处于选中状态时，将View1Car影片剪辑(不是view1.png)从“库”面板拖到舞台中。(3)在“信息”面板的X坐标文本框中键入0，在Y坐标文本框中也键入0。按下Enter或Return键。(4)在属性检查器中，从“颜色”弹出菜单中选择“Alpha”，并在“Alpha数量”文本框中输入0%。,(5)选择View1Fade图层的第104帧。(6)在舞台上，单击View1Car影片剪辑的边框矩形的内部。在属性检查器的“Alpha数量”文本框中输入100%。(7)在View1Fade图层上，选择第95帧和第104帧之间的任意帧。在属性检查器中，从“补间”弹出菜单中选择“动作”。注意：在完成本实例的过程中，及时保存所做的工作。,8.5.6测试影片在创作过程中，可以随时测试影片作为SWF文件播放时的效果，具体步骤如下：(1)保存影片，然后选择“控制”“测试影片”。Flash会导出影片的SWF拷贝。在SWF影片中，动画会自动循环播放。(2)当查看完影片之后，单击SWF文件的关闭框即可关闭它。在Flash文档中，选择“编辑”“编辑文档”或单击“场景1”返回到主时间轴。,8.6向按钮添加动画和导航,8.6.1导入其他FLA文件的库我们将在影片中使用的按钮位于其他FLA文件的库中。要使用按钮，就要将包含那些按钮的FLA文件以库的形式打开，即在“库”面板处于打开状态时，选择“文件”“作为库打开”。在FlashMX应用程序文件夹中，浏览到Tutorials/FlashIntro/Assets文件夹，然后双击buttons.fla。除了文档的库外，buttons.fla文件的库也会出现(如图8-48所示)。,图8-48在stiletto5.fla中导入buttons.fla文件的库,8.6.2对齐按钮可以使用“对齐”面板沿着水平轴和垂直轴对齐这三个按钮。具体步骤如下：(1)在时间轴的Copy图层处于选中状态时，添加一个新图层并将其命名为Buttons。锁定除了Buttons层之外的所有图层。(2)在舞台右上方的“舞台视图”弹出菜单中，输入150%，放大舞台的视图。然后滚动到舞台的右下侧。(3)将Button1从buttons.fla的“库”面板拖到动态文本字段右下角的下面。当我们从buttons.fla的“库”面板拖动按钮时，该按钮即成为文档库的一部分(如图8-49所示)。,图8-49拖放第一个按钮,(4)从buttons.fla“库”面板拖动Button2和Button3，将它们放置在Button1的左侧。所用间隔如图8-50所示。,图8-50三个按钮顺序排列,(5)使用“箭头工具”，选中这三个按钮(如图8-51所示)。(6)要打开“对齐”面板，选择“窗口”“对齐”，并确认未选择“相对舞台分布”。不需要根据舞台对齐按钮。单击“垂直中齐”，然后单击“水平中间分布”(如图8-52所示)。按钮即可在舞台上对齐。,图8-51选中三个按钮,图8-52对齐,8.6.3启用简单按钮当“启用简单按钮”功能处于活动状态时，我们可以听到Button2和Button3包含的声音，并且可以查看按钮状态所用的颜色。较复杂的按钮设计(例如动画)并不会播放。启用简单按钮的步骤如下：(1)选择“控制”“启用简单按钮”，然后滑过并单击每个按钮。右边的按钮Button1没有完成。将在下一步修改该按钮。(2)测试完这些按钮后，再次选择“控制”“启用简单按钮”来取消选择该功能。,8.6.4修改按钮状态我们将在Button1的指针经过状态中创建一个影片剪辑，然后在该影片剪辑中创建一个补间形状。该补间形状会创造一种效果，使颜色从灰色变为红色。具体步骤如下：(1)在舞台中，双击右侧的按钮Button1，打开元件编辑模式。(2)在Button1的时间轴中，隐藏除Color图层之外的所有图层。在Color图层中，选择“指针经过”关键帧。(3)在舞台上，选择右侧按钮的黑色椭圆形状。按下F8键，使该椭圆成为一个元件。在“转换为元件”对话框中，将该元件命名为ButtonAnimation。选择“影片剪辑”，然后单击“确定”。,(4)在舞台中，双击ButtonAnimation元件，打开元件编辑模式。(5)将Layer1重命名为ColorChange，并向第15帧添加一个关键帧。(6)在播放头仍处于第15帧时，选择舞台上的按钮形状，然后从工具箱的“填充颜色”弹出菜单中选择亮红色。(7)在时间轴中，单击第1帧和第13帧之间的任意帧。在属性检查器中，从“补间”弹出菜单中选择“形状”。将播放头从第1帧拖到第15帧来查看颜色变化。,8.6.5向按钮添加动作当用户单击按钮以播放补间动画时，需要播放头移动到ButtonAnimation时间轴的末尾，然后停止。可以使用Flash脚本语言撰写“动作脚本”，控制播放头在时间轴上的移动。(1)向ButtonAnimation时间轴添加新图层，并命名为Actions。(2)在Actions图层上，向第15帧添加一个关键帧。(3)如果动作面板没有打开，请选择“窗口”“动作”。根据需要放大面板，查看动作工具箱和脚本窗格。,(4)在Actions图层的第15帧处于选中状态时，转到动作工具箱的“动作”“影片控制”类别中，然后双击stop。stop动作可以指定播放头在达到第15帧时停止(如图8-53所示)。在ButtonAnimation时间轴中，Actions图层的第15帧现在显示一个小小的a，如图8-54所示，这表明有一个动作附加到该帧。,图8-53在第15帧上添加帧动作,图8-54帧动作的标志,8.6.6添加按钮导航可以用getURL动作向打开Web站点的按钮添加导航。具体步骤如下：(1)选择“编辑”“编辑文档”或单击“场景1”返回到主影片。(2)在舞台上，单击右侧的按钮Button1。(3)在“动作”面板中，选择“动作”“浏览器/网络”，然后双击getURL。(4)在URL文本框中，键入任何完整的URL，例如，如图8-55所示。,图8-55添加按钮动作,(5)在“窗口”弹出菜单中选择“_blank”，从而使用户在单击Button1时启动一个新的浏览器窗口。(6)保存文件，然后选择“控制”“测试影片”。单击Button1，转到在第(4)步中指定的Web站点。(7)选择浏览器和SWF文件，然后返回到Flash创作环境中。如果愿意，可以在舞台上选择Button2，然后重复第(3)步到第(7)步，从而将它链接到不同的Web站点，然后对Button3重复这些步骤。在完成这些按钮的链接后，关闭“动作”面板。,8.7添加声音流和事件声音,8.7.1添加声音流将声音拖到舞台中即可将其包含在影片中。我们可以添加背景音乐，使之按指定的次数演奏播放。具体步骤如下：(1)在时间轴中，选定Buttons图层后添加一个新图层，将其命名为Sounds。(2)选择“文件”“导入”。在FlashMX应用程序文件夹中，浏览到Tutorials/FlashIntro/Assets并单击track1.mp3。按住Control键(Windows)或按住Command键(Macintosh)单击ping.mp3，然后单击“打开”，即可将文件导入库中。,(3)在Sounds图层处于选中状态时，将track1.mp3声音从“库”面板拖到舞台中。在时间轴上，该帧上会出现一个表示声波的示意图。(4)在时间轴上，选择Sounds图层的第一帧。在属性检查器中，在“循环”文本框中键入999，指定声音连续播放的次数。,8.7.2测试影片完成了前面的内容后，我们可以对其进行测试，步骤如下：(1)保存文件，然后选择“控制”“测试影片”来试听声音。(2)播放完该影片之后，单击影片的关闭框。,8.7.3向按钮添加事件声音除了将声音拖到舞台，还可以从属性检查器中选择声音。下面我们将使用此方法向按钮添加事件声音。如同在“创建按钮”课程中学习的一样，在创建按钮元件时，Flash会为鼠标指针对应的不同按钮状态创建帧。例如，“指针经过”帧代表指针处于按钮之上时的按钮状态。其他按钮帧状态为“弹起”、“按下”和“点击”。现在将向按钮添加一个事件声音，它会使声音在指针经过状态期间播放。因为是向库中的按钮元件添加声音，不是只向该元件的实例添加声音，所以会为该按钮的每个实例播放声音。具体步骤如下：,(1)在“库”面板中，双击Button1实例打开元件编辑模式。(2)在Button1的时间轴中，添加一个新图层，并将该新图层命名为Sound。(3)选择Sound图层的“指针经过”帧(第2帧)，然后再选择“插入”“关键帧”或按下F6键。(4)要定义声音属性，单击Sound图层的第2帧。在属性检查器中，从“声音”弹出菜单中选择Ping.mp3。确认已经在“同步”弹出菜单中选择了“事件”。(5)保存文档，然后选择“控制”“测试影片”来试听该按钮声音。查看完SWF文件之后，关闭它的窗口以返回到该文档。,8.8组织“库”面板,目前“库”面板中已经有相当多的资产，要使这些资产组织有序、易于查找并按类型分类，可以创建文件夹，然后将资产移动到文件夹中。注意：对于所创作的任何影片，保持库面板的有序组织是一个好习惯，特别是可以使操作同一文件的其他用户能够轻松地找到资产。组织“库”面板的具体步骤如下：(1)如果“库”面板没有打开，请选择“窗口”“库”。,(2)根据需要扩展并放大该窗口，可以查看“库”面板中的所有资产。在“库”面板的底部，单击四次“新建文件夹”按钮，创建四个新文件夹(如图8-56所示)。(3)双击名称untitledfolder1，将其重命名为CarAnimationMovieClips。(4)将其他三个文件夹重命名为Sounds、Artwork和Buttons。(5)将View1Car、View2Car、View3Car和CarAnimation拖到CarAnimationMovieClips文件夹中。(6)将ping.mp3和track1.mp3拖到Sounds文件夹中。,(7)将view1.png、view2.png和view3.png拖到A