网页设计与制作第12章Flash基础.ppt

《网页设计与制作第12章Flash基础.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第12章Flash基础.ppt（51页珍藏版）》请在三一办公上搜索。

1、第12章 Flash基础,12.1 使用Flash资源12.2 使用库12.3 绘图12.4 颜色处理12.5 文本处理12.6 实例的创建12.7 本章小结,本章主要围绕Flash的各种可用资源进行，从库面板，到各种设计制图工具，从绘制线到绘制复杂图形，这些都是Flash创作动画的基础知识。本章重点是使用户可以掌握各种绘图技巧和”工具”面板中的绘图和文字工具的使用方法。,第12章 Flash基础,12.1 使用Flash资源,Flash自带有丰富的资源。从设计开始到设计的每一个细节，可以使用Flash的自带资源来实现，也可以使用外部的资源实现。这里的资源是构成动画所需要的资料和素材。素材可以

2、被导入到Flash中保存，也可以保留在Flash之外，通过命令来动态添加。资源的种类可以是图片、动画、影片、声音等Flash支持的格式，也可以是Flash制作的中间元件，如影片剪辑元件、按钮元件、图片元件。,12.2 使用库,12.2.1 库的种类 Flash包括2种库：用户导入和设计的资源库、公用库。其中“公用库”是Flash供所有用户共享的库资源，包括了Flash公司提供给用户的许多素材和资料，方便用户设计动画。用户导入和设计的素材库是设计时使用的最多的库，该库开始时是空的，但随着设计人员不断的导入图片、声音、视频资源到库中，库内将非常丰富，并且库中的资源将是构成Flash动画的各种元件资

3、源。,12.2 使用库,“库”面板可以通过执行【窗口】|【库】菜单命令打开或关闭，一般情况下“库”面板都要打开。效果如图所示。公用库则通过选择【窗口】|【公用库】菜单命令，然后在弹出的子菜单中选择公用库的类型来打开或关闭某一种公用库资源。展开后的库面板如下图所示。,12.2 使用库,12.2.2 元件的创建,库中保存了用户导入的声音、视频和图片资源，同时还保存着用户设计Flash时的中间产物“元件”。1什么是元件 元件（有时被翻译成“符号”）是指在 Macromedia Flash中创建的图形、按钮或影片剪辑，元件可以自始至终在影片或其它影片中重复使用。元件可以是从导入的图像、影片资源产生，也

4、可以在Flash中设计产生。任何创建的元件都会自动变为当前文档的库的一部分。根据以上的定义可以了解到元件包括的种类有三种：图形、按钮、影片剪辑。,12.2 使用库,2元件的三种类型（1）图形 就是一张静止的图片资源，导入的图片默认为图形，该元件类型不能支持Action脚本的编程和复杂的交互。（2）按钮 包括4种状态：鼠标未在按钮上的状态、鼠标在按钮中的状态、鼠标点击的状态、按钮起作用的范围区域。（3）影片剪辑 是一段小的影片，包括在整个Flash影片中，每个影片剪辑都有着独立的时间轴，影片剪辑还可以包括其他的影片剪辑，并且可以进行复杂的ACTION动作程序设计。,12.2 使用库,12.2.3

5、 库面板中使用文件夹,用户可以像在windows中的“资源管理器”一样，方便的使用文件夹来组织“库”面板中的资源，默认情况下资源创建在“库”面板的根文件夹下，选中资源后，使用鼠标拖拽方法可以将资源移动到指定的子文件夹下。这样做可以有效管理资源，使Flash资源的层次更加明显，分类更加清晰。,12.2 使用库,12.2.4 实例的使用,元件是保存在库中的有用资源，是设计者为了达到Flash的要求必须设计和制作的中间资源，使用元件，可以直接打开库面板，选中相应的元件，然后将其拖拽到舞台，这时在舞台上就产生了该元件的一个实例。实例是指位于舞台上或嵌套在另一个元件内的元件副本。实例可以与它的元件在颜色

6、、大小和功能上差别很大。编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更改该实例。,12.2 使用库,12.3 绘图,绘图是Flash设计的基本能力之一，Flash提供了许多绘图工具，如线条、铅笔、钢笔、刷子、椭圆、矩形工具等，所有绘图工具都在”工具”面板中存放，可以通过”工具”面板来选择相应的工具进行绘制。每种绘图工具都具有“属性”检查器，通过“属性”检查器可以设置每种绘图的详细参数和效果，“属性”检查器可设置的内容根据工具不同而稍有不同,12.3.1 线条工具,单击“工具”面板中的“线条工具”，“属性”检查器如下图所示。,12.3 绘图,通过“属性”检查器，可以对直线进行详细的

7、设置（如果看不到“属性”检查器，请选择【窗口】|【属性】菜单命令），其中包括：,笔触颜色的设置：设置画线的颜色。笔触粗细的设置：设置画线的粗细大小。笔触样式的选择：设置线条的风格。端点的设置：设定路径终点的样式，无论是绘制直线还是曲线，开始和结束端点的样式：无对齐路径终点、圆角、方型。,无 圆角 方型,12.3 绘图,接合处的设置：定义两个路径片段的相接方式：尖角、圆角或斜角。如下图所示。,尖角 圆角 斜角,12.3 绘图,(a)未受限制的尖角(b)受限制的尖角,尖角限制：使用尖角限制可以避免尖角接合倾斜。超过这个值的线条部分将被切成方型，而不形成尖角。例如，如果一个 3 磅笔触的尖角限制为

8、2，则该点长度是该笔触粗细的两倍时，Flash 就删除限制点。,12.3 绘图,缩放设置：该选项设置笔触线条粗细的比例是否随着舞台图像的缩放而缩放，如果设置缩放为“无”即使使用缩放工具对舞台中的线条进行缩放，粗细也不会发生变化。（但是长度会随着比例变化），如果设置成其他则粗细和长度都随着缩放的比例而变化。默认设置为“一般”。笔触提示：笔触提示可在全像素下调整直线锚记点和曲线锚记点，防止出现模糊的垂直或水平线。,12.3 绘图,12.3.2 铅笔工具,铅笔工具的效果类似于线条工具，“属性”检查器与线条工具一致，但铅笔工具可以绘制更加复杂的线条。在绘画时平滑或伸直线条和形状，可以给铅笔工具选择一种

9、绘画模式。如下图所示。,12.3 绘图,在“工具”面板的【选项】下选择一种绘画模式：选择“伸直”可以绘制直线并将接近三角形、椭圆、矩形和正方形的形状转换为这些常见的几何形状。选择“平滑”可以绘制平滑曲线。选择“墨水”可以绘制任意而又不用修改的线条。这样在绘制的过程中将尽可能的靠近用户需要的效果。,12.3 绘图,单击工具框上的“椭圆工具”或者“矩形工具”，可以绘制圆形和矩形。选择椭圆或者矩形工具，两者的“属性”检查器设置内容相同，效果如下图所示。,12.3.3 椭圆和矩形工具,12.3 绘图,选择“矩形工具”按下鼠标后，可以选择“多角星形工具”，该工具可以绘制多边形和星形，其“属性”检查器比“

10、矩形工具”多了“选项”按钮。如下图所示。,12.3 绘图,单击“选项”按钮则弹出多边形“工具设置”对话框，如下图所示，其设置内容如下：,在“工具设置”对话框中，可以设置绘制的图形样式（星形或者多边形），设置星形或者多边形的边数，以及设置星形顶点的大小。,12.3 绘图,例如：绘制一个五角星的设置方法：选择“多边星形工具”，在“多边星形工具”的“属性”检查器中设置笔触颜色为“空”，填充色为“红色”，单击“选项”按钮，在“工具设置”对话框中设置样式为：星形，边数为：5，星形顶点大小为：0.35。然后在舞台中按下鼠标来绘制五角星。,12.3 绘图,在“混色器”中可以设置颜色属性，还可以在“属性”检查

11、器中设置笔触的粗细和样式，如果按住“shift”键可以画出正圆或正方形。,12.3.4 钢笔工具,“钢笔”工具可以绘制各种直线和曲线，其“属性”检查器与“线条工具”的属性类似。使用“钢笔”工具绘制直线段，先要创建锚记点，也就是线条上确定每条线段长度的点。1绘制线段步骤步骤1：将指针定位在舞台上想要直线开始的地方，然后进行单击以定义第一个锚记点。,12.3 绘图,步骤2：在想要直线的第一条线段结束的位置再次进行单击。按住 Shift 键进行单击可以将线条限制为倾斜 45 度的倍数。,要完成一条开放路径，双击最后一个点，单击工具箱中的“钢笔工具”。要闭合路径，请将“钢笔工具”放置到第一个锚记点上。

12、如果定位准确，就会在靠近钢笔尖的地方出现一个小圆圈。单击或拖动以闭合路径。如图所示。,12.3 绘图,2绘制弧线步骤步骤1：将“钢笔工具”放置在舞台上想要曲线开始的地方，然后按下鼠标按钮。此时出现第一个锚记点，并且钢笔尖变为箭头。,12.3 绘图,步骤2：向想要绘制曲线段的方向拖动鼠标。随着的拖动，将会出现曲线的切线手柄。,12.3 绘图,步骤3：释放鼠标按钮。切线手柄的长度和斜率决定了曲线段的形状。可以在以后移动切线手柄来调整曲线。步骤4：将指针放在想要结束曲线段的地方，按下鼠标按钮，然后朝相反的方向拖动来完成线段。按下 Shift 键拖动会将该线段限制为倾斜 45 度的倍数。步骤5：要绘制

13、曲线的下一段，将指针放置在想要下一线段结束的位置上，然后拖离该曲线。,若想修改已经绘制好的图形，可以将某些画笔笔触区域看作轮廓，用鼠标按在轮廓上的某一点，拖动鼠标就可以修改图形的外形。如下图所示。,12.3 绘图,12.4 颜色处理,Flash提供了丰富的颜色处理功能，最常用的就是“颜色”面板，“颜色”面板又包括“混色器”选项卡和“颜色样本”选项卡，其效果如下图所示。,在“混色器”选项卡中，可以设置熟悉的笔触颜色、填充颜色，还可以设置笔触颜色和填充颜色的类型。混色器类型包括种类有：无、纯色、线性、放射性、位图，五种选择，其中：“纯色”是单一颜色，“无”则是删除填充，“线性”和“放射性”则是渐变

14、色，而“位图”则是使用图片来填充。除“无”选项之外的四种色彩类型的效果如下图所示。,纯色 线性渐变 放射性渐变 位图填充,12.4 颜色处理,当选择混色器“类型”为线性、或者放射性时，“混色器”面板将增加“溢出”设置，其功能是允许控制超出线性或放射状渐变限制的颜色。溢出模式有扩展（默认模式）、镜像和重复模式。其中：扩展：将所指定的颜色应用于渐变末端之外。镜像渐变颜色：以反射镜像效果来填充形状。指定的渐变色以下面的模式重复：从渐变的开始到结束，再以相反的顺序从渐变的结束到开始，再从渐变的开始到结束，直到选定的形状填充完毕。重复：从渐变的开始到结束重复渐变，直到选定的形状填充完毕。,12.4 颜色

15、处理,12.4 颜色处理,修改颜色工具,1墨水瓶工具“墨水瓶工具”是用来修改笔触颜色的颜色、宽度和样式，对直线或形状轮廓只能应用纯色，而不能应用渐变或位图。使用“墨水瓶工具”而不是选择个别的线条，可以更容易地一次更改多个对象的笔触属性。,12.4 颜色处理,使用“墨水瓶工具“，点击五角星的边缘，效果如下图所示。,12.4 颜色处理,2.颜料桶工具,“颜料桶工具”功能是负责填充笔触内部的颜色区域，可以将内部填充为纯色也可以填充为渐变色或者使用位图填充，这些取决于对颜色面板的设置。利用“颜料桶工具”来将五角星填充为渐变色。,12.4 颜色处理,允许的空隙大小主要是帮助设计者在遇到非密封的填充对象应

16、如何填充。根据设定的允许空隙大小来进行封闭填充，该选项中给出了四种级别的封闭模式，如图所示。根据设定允许的空隙大小来完成填充。此功能是填充的容差处理。,12.4 颜色处理,在舞台中按下鼠标确定渐变的起点，然后拖动鼠标确定渐变的方向和大小，释放鼠标。如果效果不理想可以反复的设置此处。设定后的效果如图所示。,12.4 颜色处理,3填充变形,“填充变形”工具可以更加详细的设置线性渐变色、放射性的渐变色、位图填充的内容。,（1）修改线性渐变时，填充变形工具可以设置渐变的缩放、旋转，以及设定渐变的中心。设置效果如图所示。,12.4 颜色处理,（2）修改放射性渐变时，填充变形工具可以设置渐变的宽度、大小、

17、旋转的角度，焦点和中心。,12.4 颜色处理,中心点选择和移动中心点手柄可以更改渐变的中心点。中心点手柄的变换图标是一个四向箭头。焦点选择焦点手柄可以改变放射状渐变的焦点。仅当选择放射状渐变时，才显示焦点手柄；焦点手柄的变换图标是一个倒三角形。大小单击并移动边框边缘中间的手柄图标可以调整渐变的大小。大小手柄的变换图标是内部有一个箭头的圆。旋转单击并移动边框边缘底部的手柄可以调整渐变的旋转。旋转手柄的变换图标是四个圆形箭头。宽度单击并移动方形手柄可以调整渐变的宽度。宽度手柄的变换图标是一个双头箭头。,12.4 颜色处理,4.刷子工具,“刷子工具”能绘制出刷子般的笔触，就像在涂色一样。它可以创建特

18、殊效果，包括书法效果。可以使用“刷子工具”功能键选择刷子大小和形状。,12.4 颜色处理,除了可以设置刷子的填充色之外，还包括一个平滑度的设置，从0100，平滑度越高，则绘制的平滑过渡效果越明显，如下图所示比较效果。,平滑=0 平滑=86,12.4 颜色处理,刷子的显示模式 包括5种类型，其功能分别是：（1）“标准绘画”模式：可以在同一层的线条和填充上涂色。（2）“颜料填充”模式：可以对填充区域和空白区域涂色，不影响线条。（3）“后面绘画”模式：可以在同层舞台的空白区域涂色，不影响线条和填充。（4）“颜料选择”模式：可以将新的填充应用到选择区中，当在“填充”功能键或“属性”检查器的填充盒中选择

19、填充时（此选项就跟简单地选择一个填充区域并应用新填充一样）。（5）“内部绘画”模式：可以对画笔笔触开始的填充内部进行涂色，但从不对线条涂色。如果在空白区域开始涂色，该填充不会影响任何现有填充区域。,12.4 颜色处理,12.4 颜色处理,12.5 文本处理,Macromedia Flash可以设置三种类型的文本：静态文本，动态文本，输入文本。动态文本是指可以变化显示的文本，它可以由程序控制动态显示内容，输入文本则可以由用户输入数据带入程序执行。,在“工具”面板中选择“字体工具”，展开的字体“属性”检查器如下图所示。,12.5 文本处理,12.6 实例的创建,12.6.1 资源的导入,Macro

20、media Flash 制作时用到的资源，一般情况下都需要导入到库中，当然有些也可以将资源放在Flash的外面，在需要的时候再加载到Flash中，这取决于使用那种方式更加适合Flash的要求。例如视频文件一般较大，故放在库外比较适合。导入Flash资源只需要选择【文件】|【导入】菜单命令，在导入的过程中可以选择四种导入方式：导入到舞台、导入到库、打开外部库、导入视频。,导入到舞台：将资源导入到库，并自动创建该资源的实例在舞台中。导入到库：则只将资源导入到库。打开外部库：是将另一个Flash 文件作为当前项目的库资源来使用。导入视频：是导入视频媒体的高级方式，可以对媒体进行Flash格式的编码，

21、这样便于网络的传输。帮助部署视频内容，以供嵌入、渐进下载和流视频传输。可以通过它导入存储在本地计算机上的视频，或导入已部署到 Web 服务器或 Flash Communication Server 上的视频。,12.6 实例的创建,12.6.2 实例的生成,为了方便操作和使用Flash的各种功能，一般都要将外部导入的资源和内部制作设计的资源转换成元件，再将生成的元件拖拽到舞台生成实例。,12.6 实例的创建,有二种方式可以将资源转成元件。（1）选择【修改】|【转换为元件】菜单命令可将舞台中的资源转换成元件。（2）选择菜单【插入】|【新建元件】菜单命令可直接进入该元件的编辑状态，进行元件的设计。

22、,12.6 实例的创建,根据元件的不同，在“转换为元件”对话框中可以选择“影片剪辑”，“按钮”或“图形”，并可以选择注册元件的中心点。中心点就是元件的中心，无论是变形还是旋转都是以中心点进行的，故中心点的选择很重要。,12.6 实例的创建,12.7 本章小结,本章主要介绍了“库”面板的使用，以及资源在Flash中的导入和使用，包括外部资源和内部资源，内部资源的设计是通过“工具”面板的各种工具来实现，使用这些工具就可以设计出各种特殊的效果来实现Flash的各种需要，因此掌握”工具”面板的工具和导入外部资源是开发Flash动画最基础的部分。对于每种工具都应该反复使用，直到得心应手才能进入下一章进行学习。,