Flash CS3网站商业设计从入门到精通PPT教学课件（第一部分）.ppt

第1章初识FlashCS3,Flash技术发展到今天，已经成为网页动画和多媒体交互技术的标准，并在全世界范围内得到了广泛的应用和推广。使用Flash不仅可以快速地创建应用于网络的各种内容和交互程序，并且其创建的文件具有不可比拟的优点，能够以很小的数据量实现更多更好的效果。这使得Flash成为网页设计的首选工具，并在网页动画、网络游戏、网络广告等多种领域获得了广泛的应用。本章将简要介绍FlashCS3的新增功能及界面的构成，并讲解一些Flash的基本知识。,1.1FlashCS3的新增功能,AdobeFlashCS3Professional是Adobe公司开发的Flash设计软件，是Flash8的升级产品，该版本在原有版本的基础上对软件功能进行了改进，并增加了许多新的功能。改进和新增的功能使用户可以更轻松地进行绘图创作以及各种交互应用程序的开发。本节将简要介绍FlashCS3新增的主要功能。,1.1FlashCS3的新增功能,如图:,1.1.1增强的集成功能,增强了与Adobe软件的集成，用户可以享受到Flash与其他Adobe软件集成带来的便捷，轻松地在AdobeCreativeSuiteCS3的各组件应用程序之间交换资源。1界面的改变2AdobeBridge3AdobePhotoshop导入4AdobeIllustrator导入,1.1.2增强绘图、动画和视频功能,丰富并增强了各种绘图、动画制作和视频处理工具的功能。用户可以更方便地创造出自己需要的图形和动画效果，并能更有效地导入和编辑视频。1增强的钢笔工具2增强的基本矩形和椭圆绘制工具3滤镜复制和粘贴4复制和粘贴动画5增强了QuickTime视频支持6为Flash视频保存和加载提示点,1.1.3全新的ActionScript开发环境,在FlashCS3中，用户可以选择使用新的ActionScript3.0语言创建和编辑代码。对于Flash开发人员来说，FlashCS3使其可以使用真实的开发环境高效地工作。1增加了新的ActionScript3.0语言:FlashCS3提供了一个新的改进版ActionScript。ActionScript3.0提供了一个可靠的编程模型，掌握了面向对象编程基本知识的开发人员对该模型会很熟悉。2将动画复制为ActionScript3.0:在使用了ActionScript3.0的Flash文档中，可以即时将时间线动画转换为可由开发人员轻松编辑、再次使用和利用的ActionScript3.0代码，将动画从一个对象复制到另一个对象。,1.2FlashCS3的工作环境,FlashCS3的界面较之以往的版本有了很大的改变。FlashCS3的工作环境主要由菜单栏、主工具栏、工具面板、时间轴、编辑栏、舞台、创作面板以及右键快捷菜单组成。,1.2FlashCS3的工作环境,默认情况下，其工作环境界面如图所示,1.2.1菜单栏,菜单栏由“文件”、“编辑”、“视图”、“插入”、“修改”、“文本”、“命令”、“控制”、“测试”、“窗口”和“帮助”等11个菜单项组成。单击每个菜单项，会显示出相应的下拉菜单，如图所示。执行菜单上的命令，可以完成对文件及各种对象的操作。,1.2.1菜单栏,执行菜单上的命令如图:,1.2.2主工具栏,主工具栏在默认工作界面中是不显示的，可以通过单击“窗口”|“工具栏”|“主工具栏”命令将其调出显示。主工具栏上是一些标准菜单中的命令按钮，将Flash中的常用功能以按钮的形式集中在一起，如图所示。,1.2.2主工具栏,如图所示:,1.2.3工具栏,工具栏提供了绘制、编辑图形的所有工具，使用这些工具，可以在当前工作区轻松绘制出各种图形对象，并能方便地对所绘制对象进行编辑、修改。工具栏分为4个部分。,1.2.4时间轴,时间轴用于组织和控制一定时间内的图层和帧中的文档内容，如图所示。与胶片一样，Flash也将时长分为帧。图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。,1.2.5编辑栏,编辑栏位于舞台的顶部，其包含的控件和信息可用于编辑场景和元件，并更改舞台的缩放比率，如图所示。通过使用编辑栏，可以方便地在场景和元件的编辑界面之间进行切换。隐藏时间轴：单击该按钮可以将时间轴隐藏，从而扩展舞台。返回上一级：单击该“箭头”按钮可以返回到上一级的编辑界面。,1.2.6舞台,舞台是用户在创建Flash文档时放置图形内容的矩形区域，该区域中的内容即为当前帧的内容，如图所示。在实际播放影片文件时，舞台矩形区域以内的图形对象是可见的，而区域外的图形对象是不可见的。在工作时，如果需要更改舞台的视图，可以使用放大和缩小功能。,1.2.7创作面板,Flash的创作面板包括“属性”面板、“库”面板、“动作”面板以及其他集成了各种功能的面板等。1“属性”面板:使用“属性”面板可以设置并编辑舞台或时间轴上当前选中内容的最常用属性.2“库”面板:“库”面板是存储和管理在Flash中创建的各种元件的地方，并用于存储和管理导入的文件，包括位图图形、声音文件和视频剪辑.3“动作”面板:使用“动作”面板可以创建并编辑对象或帧的ActionScript代码.4其他创作面板:除了“属性”面板、“库”面板和“动作”面板以外，Flash还将其他各种功能集合在相应的面板上，以方便使用这些功能。,1.2.8右键快捷菜单,右键快捷菜单包含与当前选择内容相关的命令。,1.2.9自定义工作环境,由于FlashCS3是一个人性化的创作软件，用户可以根据自己的喜好和使用习惯来自定义工作环境。小到各种工具的排列和显示，大到面板的组合、工作区的布局，都可以通过相应的操作进行自定义设置。1自定义工作区布局:最简单的自定义工作区的方法是单击编辑栏中的“选择工作区布局”按钮，在该按钮的下拉菜单中选择相应的工作区布局。2自定义工具栏:单击“编辑”|“自定义工具面板”命令，将会弹出“自定义工具栏”对话框，3自定义快捷键:FlashCS3允许用户自定义快捷键。用户可以使用默认的快捷键，也可以根据自己的使用习惯自定义快捷键。,1.3Flash的基本知识,在学习制作Flash影片之前，需要掌握一些Flash的基本知识以及常用的术语，这些是Flash操作的基础。掌握好这些知识，可以更轻松地理解以后章节中将要学习的内容。,1.3.1位图图像和矢量图像,计算机图像主要分为位图图像和矢量图像两大类。1位图图像位图图像在技术上称为栅格图像，是使用像素为单位来表现图像的。2矢量图像矢量图像也称为面向对象的图形或绘图图形。,1.3.2帧和图层,Flash动画是通过更改连续帧的内容，并以图层的方式对不同的动画内容进行编辑和组合来完成的。1帧:帧是Flash影片的最小单位。在Flash中，动画是由许多独立的帧组成的。在每一帧中放置不同的图像，2图层:图层是一种按顺序堆积的透明窗口，具有方便管理对象和组织重叠对象的功能。位于不同图层上的对象，其互相之间是独立的。把对象放置在不同的图层，可以通过改变图层的排列顺序方便地实现对各对象堆叠顺序的控制和重置。,1.3.3元件、实例和库,如果一个对象需要在影片中重复使用，则可以将其保存为元件。创建的元件被自动存放在Flash的“库”面板中，当需要使用某一元件时，可以将该元件从“库”面板中拖动到舞台上。拖动到舞台上的元件称为该元件的实例，如图所示。,1.4制作一个简单的影片,了解了关于Flash的一些基本知识后，可以开始尝试制作Flash影片了。本节中将提供制作一个简单Flash影片的详细步骤。通过本节的学习，读者可以熟悉一下Flash的工作环境，并掌握Flash最基本的操作方法。测试影片如下：,第2章Flash绘图与动画,Flash提供了丰富易用的绘图工具和强大便捷的动画制作系统，可以帮助用户制作出丰富多彩的Flash动画。然而工欲善其事，必先利其器，要想真正制作出好的动画，必须对Flash中的各种工具有充分的认识，并能熟练地使用。本章主要介绍如何使用Flash提供的各种工具进行图形的创作和编辑，并讲解Flash动画的基本原理和制作方法。,2.1绘制图形对象,使用工具栏中的绘图工具，可以方便地创建各种基本形态的对象，如图：,2.1.1Flash绘图基础,1轮廓和填充:在Flash中绘制的图形基本上是由轮廓和填充构成的，在绘制各种图形时，应当设置图形的轮廓颜色、填充颜色以及轮廓的粗细、样式等属性。在工具栏的颜色区可以设置图形的轮廓颜色和填充颜色，如图：,2.1.1Flash绘图基础,2绘制模式：Flash提供了两种绘制模式合并绘制模式和对象绘制模式，为绘制图形提供了极大的灵活性。3重叠形状:绘制一条线，使之与另一条线或填充区域交叉，此时，线条会在交叉点处被分割，填充区域则会被线条分割，,2.1.2线条工具,线条工具用于绘制各种笔触样式的矢量直线。单击选择工具栏中的线条工具，将鼠标光标移动到舞台上，此时的鼠标光标变为形状。在舞台上单击并向一定方向拖动，可以绘制出一条直线。如图：,2.1.3铅笔工具,铅笔工具可用于绘制简单的矢量线条。其绘图方式与使用真实铅笔大致相同。如图:,2.1.4钢笔工具,使用钢笔工具可以创建贝塞尔曲线。在绘制过程中，可以通过对路径锚点进行相应的调整，绘制出精确的路径（如直线或平滑流畅的曲线）。1设置钢笔工具在使用钢笔工具之前，设置钢笔工具的指针外观、所选锚点的外观以及画线段时是否预览等属性。可以单击“编辑”|“首选参数”命令，在弹出的“首选参数”对话框中的“类别”,2.1.4钢笔工具,2绘制直线使用钢笔工具可以绘制的最简单路径是直线，方法是通过单击钢笔工具创建直线的两个锚点。继续单击可创建由转角点连接的直线段组成的路径。使用钢笔工具绘制直线的具体步骤如下：,2.1.4钢笔工具,3绘制曲线如果使用钢笔工具创建曲线，可以在曲线改变方向的位置处添加锚点，并拖动构成曲线的方向线。方向线的长度和斜率决定了曲线的形状。在绘制曲线时应当尽可能减少构成曲线的锚点，从而使创建的曲线更易于编辑，并减少系统资源的浪费。使用钢笔工具绘制曲线的如下：,2.1.4钢笔工具,4调整锚点在使用钢笔工具绘制线段时，不可能一次就将线段绘制好。需要结合各种工具对所绘制的直线或曲线进行调整，从而使所绘制的线段达到预期的效果。这一过程是通过对线段的锚点进行转换、移动、添加或删除等调整工作来完成的。如下：,2.1.5矩形工具和基本矩形工具,Flash提供了两种绘制矩形的工具，即矩形工具和基本矩形工具。1矩形工具,2.1.5矩形工具和基本矩形工具,2基本矩形工具使用基本矩形工具，可以绘制图元矩形。,2.1.6椭圆工具和基本椭圆工具,Flash提供了两种绘制椭圆的工具，椭圆工具和基本椭圆工具。1椭圆工具如下：,2.1.6椭圆工具和基本椭圆工具,2基本椭圆工具使用基本椭圆工具，可以绘制图元椭圆。,2.1.7多角星形工具,使用多角星形工具，可以创建多边形或星形。,2.1.8刷子工具,刷子工具可用于绘制自由形状的矢量填充。使用该工具能绘制出刷子般的笔触，可以用来创建一些特殊效果，例如书法效果。,2.1.9文本工具,使用文本工具可以用来创建文本。在创建文本后，可以对文本进行分离，从而将多字符文本的每一个文本都放置在单独的文本框中。也可以将文本转换为图形，从而使文本可以像图形一样被编辑。,2.1.9文本工具,在使用文本工具创建文本之前，在“属性”面板中可以设置文本的字体和段落属性。,2.2填充图形对象,Flash工具栏中提供了一些用于填充图形的工具本来如下：,2.2.1墨水瓶工具,使用墨水瓶工具可以更改线条或图形轮廓的笔触颜色、宽度和样式。,2.2.2颜料桶工具,使用颜料桶工具可以对封闭区域进行填充。,2.2.3滴管工具,滴管工具用于从一个对象复制填充和笔触属性，然后立即将这些属性应用到其他对象。该工具还允许从位图图像取样用作填充。在工具栏中选择滴管工具后，将其移动到舞台上需要抽取属性的线条或填充区域上。如果是对线条操作，滴管工具指针旁边会出现一个铅笔形状，指针变为。此时单击该线条，滴管工具会转变为墨水瓶工具，同时，墨水瓶工具的属性被指定为该线条的属性。,2.2.4橡皮擦工具,使用橡皮擦工具进行擦除可删除指定位置的线条和填充。双击工具栏中的“橡皮擦工具”图标，可以快速将舞台上的所有内容删除。,2.2.5“颜色”面板,使用“颜色”面板，可以更改线条和填充的颜色。,2.2.6渐变变形工具,渐变变形工具用于调整填充的大小、方向或者中心，从而可以改变渐变填充或位图填充。,2.2.6渐变变形工具,拖动具有相应功能的手柄，可以改变渐变或位图填充的形状。,2.3处理图形对象,在Flash中创建好各种图形对象后，可以对这些图形对象进行进一步的加工。例如可以通过移动、复制、删除、变形、层叠、对齐和分组等操作来编辑处理图形对象，使其达到预期的效果。利用Flash提供的相应工具和创作面板，可以方便快捷的完成对各种图形对象进行处理的工作。,2.3.1选择和修饰对象,在修改某一图形对象之前，需要先选择该对象。,2.3.1选择和修饰对象,1选择工具,2.3.1选择和修饰对象,2部分选取工具使用部分选取工具，可以显示并调整图形对象中的路径点,2.3.1选择和修饰对象,3套索工具使用套索工具，可以创建不规则的选框轮廓线，用于选择特殊形状的图形对象。其选择模式包括不规则选择模式和直边选择模式两种。,2.3.2变形对象,在Flash中，使用任意变形工具、“变形”面板或者单击“修改”|“变形”菜单命令，可以对图形对象、组、文本块和实例进行变形操作。根据所选元素的类型，可以变形、旋转、倾斜、缩放或扭曲该元素。1任意变形工具使用任意变形工具可以单独执行某个变形操作，也可以将诸如移动、旋转、缩放、倾斜和扭曲等多个变形操作组合在一起执行。,2.3.2变形对象,2“变形”面板对选定对象的变形操作也可以通过“变形”面板来实现。,2.3.2变形对象,3“修改”|“变形”菜单命令通过选择“修改”|“变形”菜单中的命令，除了可以对选定对象进行缩放、旋转、扭曲等各种操作外，还可以将对象翻转。,2.3.3移动、复制和删除对象,在制作Flash影片时，常常需要移动对象。对于需要重复创建的图形对象，可以通过复制功能来创建该对象的副本。而对于不需要的图形对象，则可以将其删除。1移动对象：如果需要移动对象，可以通过多种方式实现。2复制、粘贴对象：使用按住Alt键拖动对象的方式可以快速地复制对象。另外，选取某一对象后，按下快捷键Ctrl+D也可以直接复制出对象的副本。但是这两种复制只能在同一图层同一帧的舞台上进行。3删除对象：如果需要将对象从文件中删除，,2.3.4排列对象,在制作Flash影片时，有时需要将多个对象按照一定的上下顺序层叠，或者按照一定位置对齐。在对这些对象进行层叠或对齐时，也需要先将其中一些对象组成一个整体，再与其他对象层叠或对齐。可以通过使用“对齐”面板以及执行相应的菜单命令来实现这些操作。,2.3.4排列对象,1层叠对象,2.3.4排列对象,2对齐对象使用“对齐”面板可以沿水平或垂直轴对齐所选对象。,2.3.4排列对象,3组合对象如果需要要将多个元素作为一个对象来处理，可以将这些元素组合为一个整体。,2.4使用元件,对于创建好的图形对象，可以将其转换为元件，以便在制作Flash动画时使用。第1章已经涉及了关于元件的一些基本知识，本节将对其进行补充，具体讲解一下关于元件的创建及编辑方法。,2.4.1元件的类型,根据使用目的和用途的不同，元件可分为三种不同的类型：图形元件、按钮元件和影片剪辑元件。1图形元件：图形元件是最基础的元件类型，用于静态图像。2影片剪辑元件：影片剪辑元件用于创建可重复使用的动画片段。3按钮元件：按钮元件用于创建可响应鼠标单击、滑过或其他动作的交互式按钮，从而实现动画的交互性。,2.4.2创建元件,Flash创建元件的方法有两种：一种是可以通过舞台上选定的对象来创建元件；另一种是可以创建一个空元件，然后为该元件添加相应的内容。1将选定对象转换为元件,2.4.2创建元件,2创建空元件,2.4.2创建元件,3直接复制元件,2.4.3编辑元件和实例,创建元件后，可以随时对元件进行编辑修改操作。一个元件被修改后，其在舞台上的实例也将相应地发生改变。也可以对元件的各个实例进行某些编辑，但对实例的编辑不会影响元件本身。1编辑元件在元件的各种编辑模式中，舞台上元件的注册中心点显示为一个十字光标。,2.4.3编辑元件和实例,2修改实例属性每个元件实例都各有独立于该元件的属性，如实例的色调、透明度和亮度等。,2.5创建动画,在Flash中，动画的创建方式主要有两种：逐帧动画和补间动画。补间动画又包括两种类型，即动画补间和形状补间。通过结合使用这些动画创建方法，可以制作出丰富多彩的动画效果。,2.5.1逐帧动画,逐帧动画就是对每一帧的内容都逐个进行绘制，然后将这些帧按照一定的速度顺序进行播放而形成的动画。这种动画方式最适合于创建图像在每一帧中都在变化而不是在舞台上移动的复杂动画。使用逐帧动画生成的文件要比补间动画大得多。,2.5.1逐帧动画,在创建逐帧动画时，需要将动画中的每个帧都定义为关键帧，然后为每个帧创建不同的图像。,2.5.2补间动画,创建随时间移动或更改的动画，可以选择采用Flash提供的补间动画方法。,2.5.2补间动画,1动画补间动画：动画补间动画主要用于创建使实例、组或文本对象发生位移、大小改变、旋转等与运动相关的动画，以及颜色、亮度、透明度等发生变化的动画。,2.5.2补间动画,2形状补间动画形状补间动画可用于创建动画对象形状发生变化的动画。,2.5.2补间动画,3使用形状提示如果需要制作更加复杂或罕见的形状变化，可以使用Flash的形状提示功能。,2.5.3运动引导动画,在Flash中，除了可以使对象沿直线运动外，还能够使其沿某种特定的轨迹运动，,2.5.3运动引导动画,这种使对象沿指定路径运动的动画可以通过添加运动引导层来实现。,2.5.4遮罩动画,对于一些特殊的动画效果，如聚光灯、淡入淡出效果、水波等，都可以通过Flash的遮罩功能来实现。,第3章ActionScript基础,Flash动画最有趣的地方在于其交互性和各种绚烂缤纷的复杂效果。这些都是通过Flash内置的脚本语言ActionScript完成的。本章主要介绍关于ActionScript的一些基础知识。在后面的章节中，将通过各种实例具体介绍ActionScript的编程方法。,3.1ActionScript概述,在深入学习ActionScript之前，首先需要了解ActionScript的一些基础知识，并掌握用于编写ActionScript的“动作”面板的使用方法。掌握了这些，读者可以对后面将要学习的内容有更好的理解。,3.1.1什么是ActionScript,ActionScript是从Flash5开始引入的一种脚本撰写语言。由于FlashCS3提供了多个版本的ActionScript，可以满足各类用户的需求。相比之下，3.0版本更着重于满足程序开发人员的设计需求。而对于普通用户来说，2.0版本则可以更容易地被理解和掌握。,3.1.2ActionScript的编写环境,在编写ActionScript之前，可以首先对其编写环境进行一些设置。,3.1.2ActionScript的编写环境,“动作”面板是Flash提供的用于编写ActionScript脚本的工具。,3.2ActionScript编程基础,与其他语言一样，ActionScript拥有自己的语法和术语。在使用ActionScript编程时，必须清楚地了解ActionScript中各种术语的概念所指，并遵循各种约定的语法规则。这样，才能够编写出清楚易懂、简洁高效的脚本。,3.2.1ActionScript基本语法,要使所编写的代码在Flash中能够正确地编译和运行，必须使用正确的ActionScript语法来构成语句。1区分大小写：ActionScript是区分大小写的。,3.2.1ActionScript基本语法,2点语法：在ActionScript中，可以使用点语法访问舞台中对象或实例的属性或方法，或确定实例（例如影片剪辑）、变量、函数或对象的目标路径。3目标路径：FLA文件具有一种层次结构。,3.2.1ActionScript基本语法,4分号：ActionScript语句以分号（;）字符结束，5冒号：在代码中可以使用冒号（:）为变量指定数据类型，6大括号：使用大括号（）可以将ActionScript事件、类定义和函数组合成块。7小括号：在ActionScript中定义函数时，可以将参数放在小括号（()）里面，,3.2.1ActionScript基本语法,8注释：注释是一种使用简单易懂的句子对代码进行注解的方法，Flash不会将注释视为脚本的计算内容。9常数：常数是具有固定值的属性，是在整个应用程序中都不发生改变的值。与可以大小写字母混写的变量不同，常数应为大写字母，并应使用下划线分隔单词。10关键字：关键字是ActionScript中用于执行一项特定操作的单词，是具有特定含义的保留字。,3.2.2ActionScript相关术语,本节中，将介绍一些ActionScript中常用的术语。1动作：动作是指定Flash动画在播放时执行某些操作的语句。2事件：事件是SWF文件播放时发生的动作。3事件处理函数：为使应用程序能够对事件做出反应，必须使用事件处理函数。事件处理函数是用于与特定对象和事件关联的ActionScript代码。4实例：实例是属于某些类的对象。每个类的实例都包含该类的所有属性和方法。,3.2.2ActionScript相关术语,5实例名：实例名是在脚本中用于指向影片中实例的惟一名称。,3.2.2ActionScript相关术语,6数据类型：数据类型可用于描述一个数据片段，以及可以对其执行的各种操作。7变量：变量是保存信息的容器，可用于保存不同类型的数据。8运算符：运算符是指定如何组合、比较或更改表达式中的值的字符。9表达式：表达式是Flash可以计算并返回值的任何语句，由运算符和操作数组成。,3.2.2ActionScript相关术语,10类：ActionScript是一种面向对象的语言。在面向对象的编程中，包括对象、对象的属性以及对象的方法等概念。11函数：函数是一些可以在SWF文件中的任意位置重复使用的ActionScript代码块，可以向其传递参数并能返回值。12方法：属于一个类的函数称作该类的方法。例如，loadMovie()是一个与MovieClip类关联的内置方法（loadMovie()是Flash中内置的预定义MovieClip类的一个函数）。,第4章Flash组件应用,随着Flash技术的发展，Flash组件技术也日趋成熟，功能得到了进一步地加强和扩展。通过使用Flash组件，Flash设计者们可以方便地重复使用和共享代码，不需要编写ActionScript也可以方便地实现各种动态网站和应用程序中常见的交互功能。这无疑能够极大地提高Flash用户的工作效率。本章将介绍几种常见的Flash组件应用技术。通过本章的学习，读者可以了解一些常用组件的功能，并掌握这些组件的使用方法和技巧。,4.1Flash组件概述,组件是预先构建的Flash元素，是带有参数的影片剪辑，其外观和行为可以通过设置相应的参数进行修改。对于Flash开发人员来说，使用组件可以极大地提高工作效率。Flash开发人员可以将开发过程中常用的功能封装在组件中。,4.1.1组件的添加,用户可以通过使用“组件”面板将组件添加到Flash文档中，然后通过使用“库”面板向文档添加该组件的更多实例。在“属性”面板的“参数”选项卡或“组件检查器”面板的“参数”选项卡中可以设置组件实例的属性。,4.1.1组件的添加,“组件”面板向舞台上添加组件,4.1.1组件的添加,设置组件的实例名称和参数“库”面板中的组件,4.1.2组件参数设置,每个组件都带有参数，通过设置这些参数可以更改组件的外观和行为。最常用的属性显示为创作参数，其他参数则必须使用ActionScript来设置。,4.1.2组件参数设置,输入组件实例名称设置组件参数,4.1.3组件类别,Flash在“组件”面板中提供的组件分为以下4类。（1）数据（Data）组件。使用数据组件可加载和处理数据源中的信息。（2）媒体（Media）组件。使用媒体组件能够很方便地将流媒体加入到Flash中，并对其进行控制。（3）用户界面（UI）组件。利用用户界面组件可以方便地创建复杂的交互界面，实现与应用程序之间的交互。（4）FLVPlayback组件。通过FLVPlayback组件，可以轻松地将视频播放器嵌入Flash应用程序，以便播放通过HTTP渐进式下载的Flash视频（FLV）文件，或者播放来自FlashMediaServer（FMS）或FlashVideoStreamingService（FVSS）的FLV文件流。,4.2滚动文本,4.2滚动文本,4.2.1文本滚动组件UIScrollBar,使用UIScrollBar组件可以将滚动条添加至文本字段。该组件的功能与其他所有滚动条类似，两端各有一个“箭头”按钮，按钮之间有一个滚动轨道和滚动滑块。,4.2.2实例制作,本例是一个在背景图上放置滚动文本的介绍性页面。页面元素至少由三部分组成，即背景图、滚动文本和滚动条。,4.2.2实例制作,本例是一个在背景图上放置滚动文本的介绍性页面。,4.2.2实例制作,本例是一个在背景图上放置滚动文本的介绍性页面。,4.3日历,4.3日历,4.3.1日历组件DateChooser,DateChooser组件是一个允许用户选择日期的日历。该组件包含一些按钮，这些按钮允许用户在月份之间来回翻动并单击选中某个日期。可以设置指定月份和日期、星期的第一天、任何禁用日期以及加亮显示当前日期的参数。,4.3.2对组件使用样式,Flash为每个UI组件都准备了可供用户编辑的样式属性。对于一个组件实例，可以通过使用setStyle()和getStyle()方法来设置和获取样式属性值。为组件实例指定属性和属性值的语法为：组件实例名称.setStyle(属性名称,属性值);属性名称：一个字符串，指示样式属性的名称。不同的组件支持不同的样式。每个组件都有一个可供用户设置的不同的样式集。属性值：属性的值。如果该值是字符串，它必须括在引号中。,4.3.3实例制作,本例主要由一个DateChooser组件和一个背景图组成。在制作时，应当根据用户的阅读习惯，对日历中各元素的显示方法进行相应的设置。步骤如下:,4.3.3实例制作,本例主要由一个DateChooser组件和一个背景图组成。步骤如下:,4.3.3实例制作,本例主要由一个DateChooser组件和一个背景图组成。步骤如下:,4.4层叠窗口,4.4层叠窗口,4.4.1窗口组件Window,使用Window组件可以在一个具有标题栏、边框和“关闭”按钮（可选）的窗口内显示影片剪辑的内容。该组件可以是模式的，也可以是非模式的。模式窗口会防止鼠标和键盘输入转至该窗口之外的其他组件。Window组件还支持拖动操作，用户可以单击标题栏并将窗口及其内容拖动到另一个位置。拖动边框不会更改窗口的大小。,4.4.2实例制作,本例中包含三个图片窗口，这三个图片窗口将分别从外部读取不同的图片文件。,4.5加载进度,4.5加载进度,4.5.1加载器组件Loader,Loader组件是一个容器，可以显示SWF或JPEG文件（渐进式JPEG文件除外）。用户可以缩放加载器的内容，或者调整加载器自身的大小来匹配内容的大小。默认情况下，该组件会自动调整内容的大小以适应加载器。运行时也可以加载内容，并监控加载进度（不过内容加载一次后会被缓存，所以进度会快速跳进到100%）。,4.5.2进度条组件ProgressBar,ProgressBar组件能显示加载内容的进度，可用于显示加载图像和应用程序各部分的状态。加载进程可以是确定的也可以是不确定的。当要加载的内容量已知时，使用确定的进度栏。确定的进度栏是一段时间内任务进度的线性表示。当要加载的内容量未知时，使用不确定的进度栏。可以通过添加标签来显示加载内容的进度。,4.5.3实例制作,本例中，加载外部图片的任务是由两个组件协同完成的。因此，正确处理好两个组件之间的关系是完成任务的关键.步骤如下:,4.5.3实例制作,步骤如下:设置下载速率,4.6折叠菜单,4.6折叠菜单,4.6.1折叠组件Accordion,Accordion组件是包含一系列子项的浏览器，可用来显示多部分表单。该组件呈纵向布局，其标题按钮横跨整个组件。一个子项与一个标题按钮关联，且每个标题按钮均从属于Accordion组件而不从属于子项。当用户单击某个标题按钮时，关联的子项即会显示在该标题按钮下方，并且在过渡到新的子项的过程中将使用过渡动画。用户可以通过单击各子项的标题按钮在子项之间进行浏览。,4.6.2屏幕功能,Flash的屏幕功能为用户提供了一个带有结构构造块的创作界面，使用户可以轻松构建复杂的应用程序（例如，幻灯片演示文稿或基于表单的应用程序等），而无需在时间轴中使用多个帧和图层，也无需查看时间轴。在创作基于屏幕的文档时，屏幕排列在用户创建的结构化层次结构中。用户可以通过在分支树中嵌套屏幕来创建文档的结构，也可以轻松地预览和修改基于屏幕的文档结构。基于屏幕的文档分为两种类型，即针对顺序演示文稿设计的幻灯片屏幕和针对基于表单的非线性应用程序设计的表单屏幕。在使用时，应当根据具体情况选择合适的屏幕类型。,4.6.3实例制作,本例是通过直接在FLA文档中放置图片来实现图片的显示的。在实际应用时，也可以通过外部载入的方式实现图片的显示。另外，相应地设置各表单的内容，也可以轻松实现诸如网站导航、文档目录等实用功能。,4.7视频播放器,4.7视频播放器,4.7.1视频回放组件FLVPlayback,通过FLVPlayback组件，可以轻松地将视频播放器嵌入Flash应用程序，以便播放通过HTTP渐进式下载的Flash视频（FLV）文件，或者播放来自FlashMediaServer（FMS）或FlashVideoStreamingService（FVSS）的FLV文件流。,4.7.2实例制作,本例中所要加载的视频是存储在远程服务器上的。根据具体的需要（诸如制作课件、演示产品等），也可以将视频文件放置在本地，或直接导入到FLA文档中。然后对组件的参数进行相应的设置即可。,4.7.2实例制作,保持该组件的选中状态，打开“参数”面板。,4.8MP3播放器,4.8MP3播放器,4.8.1下拉列表组合文本框组件ComboBox,ComboBox组件由Button组件、TextInput组件和List组件三个子组件组成。通过使用该组件，用户可以从下拉列表中做出一项选择。例如，可以在客户地址表单中提供一个包括各省市名称的下拉列表。该组件可以是静态的，也可以是可编辑的。通过使用可编辑的ComboBox组件，用户可以在列表顶部的文本字段中直接输入文本，也可以从下拉列表中选择一项。如果下拉列表到达文档底部，该列表将会向上打开，而不是向下打开。,4.8.2媒体回放组件MediaPlayback,MediaPlayback组件由MediaDisplay组件和MediaController组件两个子组件组成。该组件提供对媒体内容进行流式处理的方法，使媒体可以流入到Flash内容中，并为媒体回放提供标准的用户界面控件（播放、暂停等）。该组件的参数必须在“组件检查器”面板中进行设置，,4.8.3实例制作,本例中由于需要实现两个组件的协同工作，组件之间将通过相应的ActionScript脚本实现联系。因此，对脚本的编写是实现播放列表效果的关键。读者如果还不清楚ActionScript的具体编写方法，可以先不必研究脚本的具体含义。等学习完以后的章节，可以再回过头来参考这些脚本。,4.8.3实例制作,步骤如下:,4.9导航菜单,4.9导航菜单,4.9.1菜单栏组件MenuBar,使用MenuBar组件可以创建带有弹出菜单和命令的水平菜单栏，就像常见的软件应用程序中包含“文件”菜单和“编辑”菜单的菜单栏一样。其常用参数有如下几种。,4.9.2滚动窗口组件ScrollPane,使用ScrollPane组件可以将影片剪辑、JPEG文件和SWF文件限定在一个可滚动区域中显示。通过使用该组件，可以限制这些媒体类型所占用的屏幕区域的大小。例如，如果有一幅大尺寸的图像，而在应用程序中只有很小的空间可用于该图像的显示，则可以将该图像加载到ScrollPane组件中。,4.9.3实例制作,本例中对MenuBar组件内容的添加主要依靠ActionScript代码来实现。与上例同样，读者可以先学会使用这两种组件的方法，而不必细究其中的脚本。掌握一定的ActionScript编程方法后，可以再回到本节进行深入学习。,4.10注册表单,4.10注册表单,4.10.1表单常用组件,1文本输入组件TextInput：TextInput组件是单行文本组件，可以使用该组件来输入单行文本字段。2单选按钮组件RadioButton：使用RadioButton组件可以强制用户只能选择一组选项中的一项。3数字选择器组件NumericStepper：NumericStepper组件允许用户逐个通过一组经过排序的数字。4复选框组件CheckBox：CheckBox组件是一个可以选中或取消选中的复选框。5多行文本输入组件TextArea：TextArea组件是多行文本组件，可以使用该组件来输入多行文本字段。6按钮组件Button：Button组件是一个可调整大小的矩形用户界面按钮。,4.10.2实例制作,在制作表单时，需要设置的内容比较多，应用到的组件也比较多。因此，事先应当对表单做一个整体的规划和布局，并对涉及到的各种元素进行正确的分类和命名。步骤如下:,4.10.2实例制作,步骤如下:,第5章Flash常用交互技术影片控制,Flash最令人称道的一方面就是其具有强大的交互功能。从本章开始，将通过对大量Flash网页应用实例的列举及其制作过程的展示，向读者展示网页设计中常见的Flash高级动画效果和交互技术。,5.1影片播放控制,实例效果:,5.1影片播放控制,实例效果:,5.1.1时间轴控制函数,时间轴控制函数主要用来控制帧和场景的播放、停止及跳转等，这类函数包括如下几种。play()：在时间轴中向前移动播放头，使动画对象从当前位置开始播放。stop()：停止当前正在播放的影片。此动作最通常的用法是用按钮控制影片剪辑。gotoAndPlay()：将播放头转到场景中指定的帧并从该帧开始播放。其一般用法为：gotoAndPlay(场景名称,帧数或帧标签);,5.1.2实例制作,本例中包含1个正方形移动的动画和5个按钮。将通过为这5个按钮实例添加相应的ActionScript语句来实现按钮对动画播放的各种控制。步骤如下:,修改文档属性,创建box图形元件,5.1.2实例制作,步骤如下:,设置旋转方式和次数,放置flatblueplay按钮,为按钮添加动作,5.2按钮链接,实例效果:,5.2按钮链接,实例效果:,5.2.1on()事件处理函数,on()事件处理函数函数一般直接作用于按钮实例，也可以作用于影片剪辑实例，用于指定触发动作的鼠标事件或按键。其用法为：on(鼠标事件)/此处是需要响应鼠标事件或按键的程序,5.2.2getURL()函数,getURL()函数的作用是将来自特定URL的文档加载到窗口中，或将变量传递到位于所定义URL的另一个应用程序。其一般用法为：getURL(URL,窗口);,5.2.3实例制作,本例中共包含8个按钮，这8个按钮并不需要各自制作成单独的按钮元件，那样会增加SWF文件的体积。实际上只要制作好一个按钮元件，然后在舞台上相应位置放置8个该元件的实例，并为各实例添加相应ActionScript语句即可。,5.3影片剪辑属性控制,实例效果,5.3影片剪辑属性控制,实例效果,5.3.1影片剪辑的属性,影片剪辑具有很多属性，例如透明度、颜色、大小等。这些属性大部分可以随意设定，但也有一部分不允许更改。调用影片剪辑属性的方法一般为：影片剪辑的实例名.属性,5.3.2实例制作,本例制作的关键在于，需要对舞台上的影片剪辑实例设置正确的实例名称。这样，才能通过为按钮添加相应的ActionScript语句实现对该实例属性的控制。绘制图形添加文本,5.4键盘控制影片剪辑,实例效果:,5.4键盘控制影片剪辑,实例效果:,5.4.1onClipEvent()事件处理函数,onClipEvent()事件处理函数用于触发为特定影片剪辑实例定义的动作。该函数只能作用于影片剪辑实例，而不能作用于按钮实例。其用法为：onClipEvent(影片剪辑事件)/事件发生时需要执行的动作,5.4.2按键检测的方法,1Key.isDown()方法:Key.isDown()方法是属于Key类的一个方法。该方法可用于返回一个布尔值。2Key类的其他方法:除Key.isDown()方法外，关于Key类的方法还包括以下几种。addListener()：注册一个对象，以便接收onKeyDown和onKeyUp通知。removeListener()：删除使用Key.addListener()方法注册的对象。isToggled()：当激活NumLock键或CapsLock键时返回true，否则返回false。getCode()：返回按下的最后一个键的键控代码值。getAscii()：返回按下或释放的最后一个键的ASCII码。3Key类的属性:Key类的属性是一些常数，这些常数表示用于控制应用程序的常用键（如箭头键、PageUp和PageDown等）。,5.4.3if语句,if语句用于对条件进行判断，以确定影片中的下一个动作。如果条件为true，则Flash将运行条件后面花括号内的语句；如果条件为false，则Flash将跳过花括号内的语句而运行花括号后面的语句。其一般形式为：if(条件)/条件成立时执行的内容,5.4.4实例制作,在本例中，涉及到了使用动态文本显示变量值的问题。因此，应当为动态文本指定相应的变量，并通过按键而修改动态文本的变量值。步骤如下:填充背景图形绘制飞机图形,5.4.4实例制作,步骤如下:对齐实例创建动态文本框,第6章Flash常用交互技术加载方法,本章中将介绍使用ActionScript实现各种加载的方法，包括从外部加载图像、声音和SWF影片的方法以及加载过程的进度提示等。这些方法一般用于Flash网站、游戏以及其他一些网络应用程序的制作。,6.1加载影片,6.1加载影片,6.1.1用于加载的函数,1loadMovie()函数和unloadMovie()函数loadMovie()函数的作用是在播放原始SWF影片时，将SWF影片文件或JPEG、GIF、PNG等图像文件加载到FlashPlayer中的影片剪辑中。其一般用法为：loadMovie(URL,目标);,6.1.1用于加载的函数,2loadMovieNum()函数和unloadMovieNum()函数loadMovieNum()函数的作用是在播放原始SWF文件时，将SWF、JPEG、GIF或PNG文件加载到FlashPlayer的一个级别中。其一般用法为：loadMovieNum(URL,级别);,6.1.2实例制作,本例中，使用loadMovie()函数加载的外部SWF影片应当被限定在主影片中特定的屏幕区域内。因此，在制作之前应当规划好主影片和各加载影片的尺寸。本例的具体制作步骤如下：,6.1.2实例制作,步骤如下：导入图片生成的三个载入影片,6.1.2实例制作,步骤如下：单击按钮载入影片单击按钮卸载影片,6.2加载MP3流文件,6.2加载MP3流文件,6.2.1关于行为,行为是预先编写的ActionScript脚本，用户无需自己编写脚本就可以使用行为来控制文档中的影片剪辑、图形实例、视频及声音等内容，为Flash影片添加交互性。常用的行为一般包括对影片剪辑实例、声音以及视频文件的控制。,6.2.2实例制作,本例将使用行为来为各按钮实例添加相应的代码，步骤如下:绘制图形更该图形填充色,6.2.2实例制作,步骤如下:测试当前加载MP3效果调整行为的顺序,6.3预载进度,6.3预载进度,6.3.1获取影片剪辑大小的方法,1MovieClip.getBytesLoaded()方法MovieClip.getBytesLoaded()方法用于返回已加载（流处理）的影片剪辑的字节数。可以将该方法返回的值与MovieClip.getBytesTotal()返回的值进行比较，以确定已加载影片剪辑的百分比。,6.3.1获取影片剪辑大小的方法,2MovieClip.getBytesTotal()方法MovieClip.getBytesTotal()方法可用于以字节为单位返回影片剪辑的大小。,6.3.2获取整数值的方法,1Math.floor()方法Math.floor(x)方法返回由参数x指定的数字或表达式的下限值。下限值是小于等于指定数字或表达式的最接近的整数。,6.3.2获取整数值的方法,2Math.ceil()方法Math.ceil(x)方法返回由x指定数字或表达式的上限值。数字的上限值是大于等于该数字的最接近的整数。,6.3.2获取整数值的方法,3Math.round()方法Math.round(x)方法将参数x的值向上或向下舍入为最接近的整数并返回该值。如果参数x与最接近的两个整数等距离（即该数字以.5结尾），则该值向上舍入为下一个较高的整数。,6.3.2获取整数值的方法,4String.length属性String.length属性可用于统计获取指定字符串中的字符数，该字符数为一个整数。,6.3.3实例制作,实现进度条长度的增加有多种方法。可以通过改变进度条的宽度属性来实现进度条的增长，也可以在相应的帧中显示相应的长度。本例中，将通过改变进度条在X坐标方向上的比例大小来增加进度条的长度。步骤如下:绘制矩形绘制长条矩形,6.3.3实例制作,步骤如下:设置模拟下载的速率,6.4其他形式的预载进度,6.4其他形式的预载进度,6.4.1用于获取播放时间的函数,使用getTimer()函数可以获取自影片开始播放时起已经经过的毫秒数。,6.4.2影片剪辑的播放控制方法,1MovieClip.goto