网页设计与制作(flash入门).ppt

1、第一章Flash8基础入门,第一章Flash8基础入门,Flash是Macromedia公司推出的一种矢量动化编辑软件，利用该软件制作的动画尺寸要比位图动画文件（如GIF动画）尺寸小的多，我们可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站。,1.1初识Flash8,1.1.1什么是FlashFlash是一种动画编辑软件，用它制作出的应用程序可以包含简单的动画、视频、复杂演示文稿和应用程序及介于它们之间的任何内容。在Flash中创作内容时，要在Flash文档文件中工作，Flash文档的文件扩展名为.fla。完成Flash文档创作后，可以用“文件”“发布”命令发

2、布，创建文件的压缩版本，其扩展名为.swf，即我们在网络上可以看到的大部分动画（MTV，游戏，搞笑短片）的格式。该格式的文档可以使用FlashPlayer在浏览器中播放。,1.1初识Flash8,1.1.2Flash8的安装与启动1.1.3认识Flash的工作界面Flash8的工作界面主要由时间轴，工具箱，舞台和各种功能面板等几部分组成。,1.1初识Flash8,3、时间轴时间轴的主要组件是图层、帧和播放头，它主要用于组织和控制文档内容在一定时间内播放的图层数和帧数。文档中的图层列在时间轴左侧。每个图层中包含的帧显示在该图层名右侧的一行中。时间轴顶部的时间轴标题指示帧编号。播放头指示当前在舞台

3、中显示的帧。播放Flash文档时，播放头从左向右通过时间轴。时间轴状态显示在时间轴的底部，它指示所选的帧编号、当前帧频及到当前帧为止的运行时间。,1.1初识Flash8,1.1初识Flash8,4、工具箱工具箱可分为工具区、查看区、颜色区和选项区4个部分。,工具区颜色区查看区选项区,1.1初识Flash8,5、舞台舞台是用户在创建Flash文档时放置图形内容的矩形区域，这些图形内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑等。6、属性面板当在舞台上执行某一项操作时，可以在属性面板上对舞台上的项目进行必要的设置和修改。7、功能面板功能面板也称为活动面板，各种面板有着各自的独特功能，可帮

4、助用户完成各种不同的操作。,1.1初识Flash8,8、“滤镜”面板“滤镜”面板是Flash8的新增功能，其大大增强了Flash8设计方面的能力。这项新特性对制作Flash动画产生了便利和巨大影响。它们几乎颠覆了长期以来，对Flash设计能力欠缺的固有偏见，使大家不得不对其刮目相。默认情况下，“滤镜”面板和“属性”检查器、“参数”面板组成一个面板组。在打开一个“属性”检查器时，对应的“滤镜”面板也随之打开，只需要鼠标单击相应的“滤镜”选项卡即可打开相应的“滤镜”面板。,1.1初识Flash8,1.1.4Flash8的基本术语1位图与矢量图计算机可以显示两种格式的图形：位图和矢量图。（1）位图位

5、图图像（也称为栅格图像）使用颜色网格（像素）来表示图像，每个像素都有自己特定的位置和颜色值。位图图像和分辨率有关，编辑位图图像可改变其外观质量。如果在屏幕上对它们进行缩放，或者以低于创建时的分辨率来打印它们，将会失真。,1.1初识Flash8,（2）矢量图矢量图形实际上是由穿过许多点的线条组成的，这些线条可以构成图形的外框轮廓。图形的颜色是由外框的颜色和外框所封闭区域的颜色决定的。矢量图形与分辨率无关，它们可以被缩放到任意尺寸，按任意分辨率打印，而不会丢失细节或降低清晰度。,1.1初识Flash8,2图层（Layer）的概念图层有助于用户组织文档中的内容，例如，您可以将背景画放置在一个图层上，

6、而将导航按钮放置在另一个图层上。此外，用户可以在一个图层上创建和编辑对象，而不会影响另一个图层中的对象。Flash文件中的每一个场景都可以包含任意数量的图层，而在每个元件中，也可以包含任意数量的图层。,1.1初识Flash8,3帧（Frame）的概念Flash动画是以时间轴为主线的帧动画，帧是构成动画的基本单位，时间轴上的帧分为关键帧、空白关键帧和普通帧3种。,1.1初识Flash8,4场景（Scene）的概念构成Flash影片的所有元素都被包含在场景中。所以，每个Flash作品至少要有一个场景。在默认状态下，动画中只有一个场景，被命名为“场景1”，如需在动画中添加场景，可以执行如下操作：选择

7、“插入”“场景”命令或单击“场景”面板上的“添加场景”按钮。,1.1初识Flash8,5元件和库使用Flash制作动画影片的一般流程是：先制作动画中所需的各种元件，再在场景中引用元件，并对实例化的元件进行适当的组织与编排，最终完成影片的制作，而元件产生后将被保存在库中。（1）元件元件是Flash影片中一种比较特殊的对象，Flash中包括创建的图形、按钮或影片剪辑这3种元件。它在Flash中只需创建一次，它都会自动成为当前文件的库的一部分。然后可以在整部影片中反复使用而不会显著增加文件的大小。元件可以是任何静态的图形，也可以是连续的动画，甚至还能将动作脚本添加到元件中。,1.1初识Flash8,

8、（2）库Flash8的库包括两种：一种是当前编辑文件的专用库；另一种是Flash8中自带的公用库，包括学习交互、按钮和类3种库元素。使用库可以省去许多重复的操作和其他一些不必要的麻烦。此外，使用库对最大限度上减小动画文件的体积也具有决定性的意义，充分利用库中包含的元素可以有效地控制动画文件的大小，以便于动态文件的传输与下载。,1.1初识Flash8,1.1.5文档的基本操作1创建或打开文档及其属性设置要创建一个Flash文档可使用下述方法之一。单击“开始”页中“创建新项目”栏中的“Flash文档”选项。选择“文件”“新建”命令，在弹出的“新建文档”对话框中的“常规”选项卡的列表框中选择“Fla

9、sh文档”选项。,1.1初识Flash8,要打开一个Flash文档可使用下述方法之一。选择一个Flash文档（扩展名为.fla）双击打开。启动Flash8，在“开始”页中选择“打开最近项目”栏中的“打开”选项，在弹出的“打开”对话框中找到要打开的Flash文档，单击“打开”按钮。启动Flash8，选择“文件”菜单中的“打开”命令，在弹出的“打开”对话框中找到要打开的Flash文档，单击“打开”按钮。,1.1初识Flash8,另外，若要设置Flash文档的属性，可选择“编辑”菜单中的“首选参数”命令，在弹出的“首选参数”对话框中，可进行常规、ActionScript、自动套用格式、剪贴板、绘画、

10、文本及警告几方面的设置。,1.1初识Flash8,2保存Flash文档Flash文档创建完成后，要对该文档进行保存。Flash文档的保存格式分为保存（.fla）和导出（.swf）两种形式。选择“文件”“保存”命令进行保存，保存的是.fla文件形式，这种形式的文件双击后可启动Flash运行环境，对文档进行重新编辑，是Flash的源文件；而选择“文件”“导出”命令，并选择导出形式后，保存的是.swf文件形式。该形式的文件双击后会打开FlashPlayer（播放器），播放相应的Flash影片。,1.2绘图工具的基本操作,1.2.1工具箱的介绍工具箱按照各种工具的功能还可分为绘图工具、选择工具、编辑工

11、具和辅助绘图工具等。1.2.2工具箱中工具的使用,1.2绘图工具的基本操作,1绘图工具（1）线条工具（LineTool）线条工具主要用来绘制直线，在工作区下的属性面板中可设置直线的属性。,1.2绘图工具的基本操作,笔触颜色的设置：设置画线的颜色。笔触粗细的设置：设置画线的粗细大小。笔触样式的选择：设置线条的风格。端点的设置：设定路径终点的样式，无论是绘制直线还是曲线，开始和结束端点的样式：无对齐路径终点、圆角、方型。,1.2绘图工具的基本操作,接合处的设置：定义两个路径片段的相接方式：尖角、圆角或斜角。如下图所示。（当笔触高度小时无明显区别）,1.2绘图工具的基本操作,缩放设置：该选项设置笔触

12、线条粗细的比例是否随着舞台图像的缩放而缩放，如果设置缩放为“无”即使使用缩放工具对舞台中的线条进行缩放，粗细也不会发生变化。（但是长度会随着比例变化），如果设置成其他则粗细和长度都随着缩放的比例而变化。默认设置为“一般”。,1.2绘图工具的基本操作,注意：在使用线条工具绘制直线时，如果在拖曳鼠标的同时按下Shift键，则可绘制出水平、垂直或45度的斜线。,1.2绘图工具的基本操作,（2）椭圆工具主要用来绘制椭圆或圆形，可以在相应的属性面板中设置椭圆的轮廓色、填充色、轮廓的粗细及类型等。注意：如果在绘制椭圆的过程中按下Shift键，则可在工作区中绘制一个正圆。,1.2绘图工具的基本操作,（3）矩

13、形工具利用矩形工具除了可以绘制出普通的矩形外，还可以绘制出圆角矩形。矩形的属性面板和椭圆类似。注意：如果在绘制矩形的过程中按下Shift键，则可在工作区中绘制一个正方形。,1.2绘图工具的基本操作,若要利用矩形工具绘制圆角矩形，可单击工具箱最下方的“边角半径设置”按钮，此时将弹出“矩形设置”对话框。默认的边角半径为0，以像素为单位，范围在0999之间，选取的数值越大，圆角的弧度就越大。设置好矩形的属性后，便可开始绘制设置好的矩形了。,1.2绘图工具的基本操作,（4）多角星形工具单击矩形工具右下方的黑色小三角按钮稍做停留，会出现一个下拉菜单，选中多角星形工具后，会出现相关的属性面板。在默认的设置

14、下，绘制出的多边形是正五边形。若要绘制其他形状的多边形，可单击“选项”按钮，在弹出的“工具设置”对话框中进行相应的设置。,1.2绘图工具的基本操作,其中，在“样式”下拉列表中可以选择绘制的是多边形还是星形；在“边数”文本框中可以输入多边形的边数，在“星形顶点大小”文本框中可以输入星形顶角的度数。注意：在设置多边形和星形的边数和顶点数时，Flash是不进行限制的，但实际绘制出的图形，边数在332之间，顶点大小在0.001.00之间。,1.2绘图工具的基本操作,例如：绘制一个五角星的设置方法：选择“多边星形工具”，在“多边星形工具”的“属性”检查器中设置笔触颜色为“空”，填充色为“红色”，单击“选

15、项”按钮，在“工具设置”对话框中设置样式为：星形，边数为：5，星形顶点大小为：0.5。然后在舞台中按下鼠标来绘制五角星。,1.2绘图工具的基本操作,（5）铅笔工具用来绘制线条和形状的工具，可自由绘制图形。选中铅笔工具后，在工具箱最下方的选项区域内会出现铅笔工具的绘图模式工具选项，铅笔工具的绘图模式工具有伸直、平滑、墨水3种选项。,1.2绘图工具的基本操作,在“工具”面板的【选项】下选择一种绘画模式：选择“伸直”可以绘制直线并将接近三角形、椭圆、矩形和正方形的形状转换为这些常见的几何形状。选择“平滑”可以绘制平滑曲线。选择“墨水”可以绘制任意而又不用修改的线条。这样在绘制的过程中将尽可能的靠近用

16、户需要的效果。,1.2绘图工具的基本操作,选中铅笔工具后，会出现相应的属性面板。在该属性面板中可以对要绘制的线条的颜色、粗细和类型等进行设置。注意：使用铅笔工具绘制线时按下Shift键，可绘制出水平或垂直的直线。,1.2绘图工具的基本操作,（6）刷子工具能绘制出刷子般的笔触效果，就像涂色一样，可创建出一些特殊效果。利用工具箱中的“选项”区域中的各个下拉列表来选择刷子的大小、形状和模式。除了可以设置刷子的填充色之外，还包括一个平滑度的设置，从0100，平滑度越高，则绘制的平滑过渡效果越明显，如下图所示比较效果。,1.2绘图工具的基本操作,平滑=0平滑=86,1.2绘图工具的基本操作,刷子的显示模

17、式包括5种类型，其功能分别是：“标准绘画”模式：可以在同一层的线条和填充上涂色。“颜料填充”模式：可以对填充区域和空白区域涂色，不影响线条。“后面绘画”模式：可以在同层舞台的空白区域涂色，不影响线条和填充。“颜料选择”模式：可以将新的填充应用到选择区中，当在“填充”功能键或“属性”检查器的填充盒中选择填充时（此选项就跟简单地选择一个填充区域并应用新填充一样）。“内部绘画”模式：可以对画笔笔触开始的填充内部进行涂色，但从不对线条涂色。如果在空白区域开始涂色，该填充不会影响任何现有填充区域。,1.2绘图工具的基本操作,1.2绘图工具的基本操作,（7）钢笔工具又称为贝塞尔曲线工具。用户可在钢笔工具属

18、性面板上设置钢笔绘制的线条样式，设置好钢笔工具的外观和属性后，便可使用它绘制图形了。,1.2绘图工具的基本操作,使用“钢笔”工具绘制直线段，先要创建锚记点，也就是线条上确定每条线段长度的点。1绘制线段步骤步骤1：将指针定位在舞台上想要直线开始的地方，然后进行单击以定义第一个锚记点。,1.2绘图工具的基本操作,步骤2：在想要直线的第一条线段结束的位置再次进行单击。按住Shift键进行单击可以将线条限制为倾斜45度的倍数。,要完成一条开放路径，双击最后一个点。否则在面板中没标记一个点，都会与上一个点像连。要闭合路径，请将“钢笔工具”放置到第一个锚记点上。如果定位准确，就会在靠近钢笔尖的地方出现一个

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

20、离该曲线。,1.2绘图工具的基本操作,（8）文本工具MacromediaFlash可以设置三种类型的文本：静态文本，动态文本，输入文本。动态文本是指可以变化显示的文本，它可以由程序控制动态显示内容，输入文本则可以由用户输入数据带入程序执行。,1.2绘图工具的基本操作,在“工具”面板中选择“字体工具”，展开的字体“属性”检查器如下图所示。,1.2绘图工具的基本操作,2选择工具（1）箭头工具（ArrowTool）用于选择对象的，箭头工具没有相应的属性面板，但在工具箱的选项区上有一些相应的附加选项，其中，“紧贴至对象”功能按钮主要是用来准确对齐线条上的点或对象的中心点。而“平滑”与“伸直”功能可以将

21、绘制出来的线条修饰的更加平滑或平整。选取对象时可分为点选和框选两种方式。使用点选可以选择对象的完整线条或区域，而框选则是部分选择某区域,1.2绘图工具的基本操作,注意：点选时要注意填充和边线，如果在填充中单击，则选中的是填充部分，否则是线条部分。若要同时选中多个对象，可在点选不同对象的同时按住Shift键。此外，使用箭头工具拖拽线条上的任何点都可以改变对的造型，指针外观的改变可以指示出在线条或填充区域上发生了何种类型的重塑。,1.2绘图工具的基本操作,（2）部分选取工具（SubSelectTool）主要用来选择和编辑线条或边的路径形状，该工具可以像箭头工具一样选取并移动对象。当某对象被部分选取

22、工具选中后，图像轮廓线将出现许多锚点，表示该对象已被选中。,1.2绘图工具的基本操作,用部分选取工具选中的对象，可以通过对锚点及其两侧的方向线句柄的移动修改来调整对象的形状。,1.2绘图工具的基本操作,注意：在移动锚点时，可以使用方向键来紧缺移动锚点。每按一下方向键，锚点向相应的方向移动一个像素；如果按住Shift键再按方向键，则每次移动10个像素。在拖动方向线句柄时按住Shift键，可以使句柄沿水平、垂直或45度角方向移动。,1.2绘图工具的基本操作,（3）套索工具（LassoTool）可以自由选定要选择的区域来选择对象。单击工具箱中的套索工具，便可直接按住鼠标左键拖动的方式选择任意形状的对

23、象了。套索工具也没有相应的属性面板，但在工具箱的选项区中也有一些相应的附加选项。,1.2绘图工具的基本操作,魔术棒：该选项可以在位图中快速选择颜色近似的所有区域，但它只对位图（即GIF、JPEG和PNG）起作用，而对矢量图无效。魔术棒设置：该选项将打开“魔术棒设置”对话框。其中，“阈值”用来设置所选颜色的近似程度，范围是一个在0200之间的整数；而“平滑”是所选颜色近似程度的单位。多边形：该选项可以通过鼠标的多次单击勾画出边为直线的多边形选择区域。,1.2绘图工具的基本操作,3编辑颜色工具（1）墨水瓶工具（InkBottleTool）用来修改笔触颜色的颜色、宽度和样式，对直线或形状轮廓只能应用

24、纯色，而不能应用渐变或位图。使用“墨水瓶工具”而不是选择个别的线条，可以更容易地一次更改多个对象的笔触属性。,1.2绘图工具的基本操作,使用“墨水瓶工具“，点击五角星的边缘，效果如下图所示。,1.2绘图工具的基本操作,（2）颜料桶工具（PaintBucketTool）可以对定义区域内的图像填充纯色、渐变色和位图。注意：使用颜料桶工具可以对填充区域进行位图填充，此时要先将位图导入到当前文件中，然后再用颜料桶工具进行填充。颜料桶工具的选项区可以有四种选择方式进行填充。,1.2绘图工具的基本操作,允许的空隙大小主要是帮助设计者在遇到非密封的填充对象应如何填充。根据设定的允许空隙大小来进行封闭填充，该

25、选项中给出了四种级别的封闭模式，如图所示。根据设定允许的空隙大小来完成填充。此功能是填充的容差处理。,1.2绘图工具的基本操作,利用“颜料桶工具”来将五角星填充为渐变色。在舞台中按下鼠标确定渐变的起点，然后拖动鼠标确定渐变的方向和大小，释放鼠标。如果效果不理想可以反复的设置此处。设定后的效果如图所示。,1.2绘图工具的基本操作,1.2绘图工具的基本操作,（3）填充变形,“填充变形”工具可以更加详细的设置线性渐变色、放射性的渐变色、位图填充的内容。,修改线性渐变时，填充变形工具可以设置渐变的缩放、旋转，以及设定渐变的中心。设置效果如图所示。,1.2绘图工具的基本操作,修改放射性渐变时，填充变形工

26、具可以设置渐变的宽度、大小、旋转的角度，焦点和中心。,1.2绘图工具的基本操作,中心点选择和移动中心点手柄可以更改渐变的中心点。中心点手柄的变换图标是一个四向箭头。焦点选择焦点手柄可以改变放射状渐变的焦点。仅当选择放射状渐变时，才显示焦点手柄；焦点手柄的变换图标是一个倒三角形。大小单击并移动边框边缘中间的手柄图标可以调整渐变的大小。大小手柄的变换图标是内部有一个箭头的圆。旋转单击并移动边框边缘底部的手柄可以调整渐变的旋转。旋转手柄的变换图标是四个圆形箭头。宽度单击并移动方形手柄可以调整渐变的宽度。宽度手柄的变换图标是一个双头箭头。,1.2绘图工具的基本操作,（4）滴管工具（DropperToo

27、l）用于探测对象的种类与属性，将滴管的指针移动到要采集的某种特征的区域上，然后单击鼠标左键，即可将滴管所在区域的那一点所具有的特征采集出来，接着移动到目标对象上，再次单击鼠标左键，这样刚才所采集的信息就被应用到目标对象上了。,1.2绘图工具的基本操作,注意：采集的对象不同，滴管工具的显示状态也不同。另外，用滴管工具采集的颜色进行填充时，滴管工具会自动变为颜料桶工具，使用该工具时，必须打开“填充锁定”，否则填充色被锁定，无法调整。,1.2绘图工具的基本操作,（4）橡皮擦工具（EraserTool）用于擦除图形的轮廓线条或填色区域，也可以擦除工作区中任何内容。其设置可以通过附加选项进行设置。,1.

28、2绘图工具的基本操作,水龙头：将图形的填充色或轮廓线整体擦除。在要擦除的填充色或轮廓线上单击一下，即可实现整体擦除效果。橡皮擦形状：单击该选项，可以选择橡皮擦的形状和大小。标准擦除：Flash默认的工作模式，可以清除同一土曾上的轮廓线条和填充。擦除填色：此模式只擦除填充色，对图形的轮廓线没有影响。擦除线条：此模式只擦除图形的轮廓线条，而对填充没有影响。擦除所选填充：此模式只擦除事先所选定的填充区域，不擦除其他没有被选中的区域，不影响笔触。内部擦除：此模式仅擦除橡皮擦笔触开端所在的填充区域，如果橡皮擦的笔触从空白区域开始，则不会清除任何内容，此模式对轮廓线没有影响。,1.2绘图工具的基本操作,1

29、.2.3常用功能面板的使用（1）“混色器”面板选择“窗口”“混色器”命令，可打开“混色器”面板，其主要作用是用来对图形对象进行颜色设置。,1.2绘图工具的基本操作,在“混色器”选项卡中，可以设置熟悉的笔触颜色、填充颜色，还可以设置笔触颜色和填充颜色的类型。混色器类型包括种类有：无、纯色、线性、放射性、位图，五种选择，其中：“纯色”是单一颜色，“无”则是删除填充，“线性”和“放射性”则是渐变色，而“位图”则是使用图片来填充。除“无”选项之外的四种色彩类型的效果如下图所示。,纯色线性渐变放射性渐变位图填充,1.2绘图工具的基本操作,当选择混色器“类型”为线性、或者放射性时，“混色器”面板将增加“溢

30、出”设置，其功能是允许控制超出线性或放射状渐变限制的颜色。溢出模式有扩展（默认模式）、镜像和重复模式。扩展：将所指定的颜色应用于渐变末端之外。镜像渐变颜色：以反射镜像效果来填充形状。指定的渐变色以下面的模式重复：从渐变的开始到结束，再以相反的顺序从渐变的结束到开始，再从渐变的开始到结束，直到选定的形状填充完毕。重复：从渐变的开始到结束重复渐变，直到选定的形状填充完毕。,1.2绘图工具的基本操作,1.2绘图工具的基本操作,（2）“颜色样本”面板选择“窗口”“颜色样本”命令，可打开“颜色样本”面板，它可以用来保存软件自带的或用户自定义的颜色，包括纯色和渐变色，以方便以后重复使用。,补充,1、对新建

31、文档的设置新建Flash文件，在文档“属性”检查器中设置文件长和宽、帧数。对于文件的基本设置可以通过文档“属性”检查器的设置，设置如图所示。,补充,在文档“属性”检查器中，单击“大小”右边“550400像素”按钮，弹出“文档属性”对话框，可以对文档的外观属性设置。,标题：设置文档的标题。描述：对创建的影片做一些简单的描述。尺寸：舞台的尺寸最小可设定成宽1px高1px，最大可设定成宽2880px、高2880px。还可以自行输入“cm”、“mm”和“in（英寸）”等单位的数值，也可以在“标尺单位”中选择。背景颜色：设置舞台的背景颜色。帧频：默认的是12fps。这个速度很适合在网络上播放。数值越大动画的播放速度越快。设为默认值：将所有设定存成默认值，再新建影片文档时，影片的属性会自动调整成这次设定的值。,补充,2、发布Flash文档发布Flash文档可以通过执行【文件】|【发布设置】菜单命令或者直接在文档“属性”检查器中点击“发布：”右边的按钮可以打开“