FLASH绘图基础课件

1、 绘图基础绘图基础 基本动画的制作基本动画的制作 多媒体素材的导入和编辑多媒体素材的导入和编辑 动作脚本与交互功能动作脚本与交互功能Flash动画设计动画设计Flash 绘图基础绘图基础4 4 Flash 的工具的工具 3 3 Flash 的基本概念的基本概念 2 2 Flash Professional 8 8工作界面工作界面 1 1 Flash 动画基础动画基础 1 Flash 动画基础动画基础 快速连续播放静止的图片，给人眼产生的错快速连续播放静止的图片，给人眼产生的错觉就是画面会连续动起来。那些静止的图片叫帧；觉就是画面会连续动起来。那些静止的图片叫帧； 一般用一般用“帧帧”的概念来描

2、述动画中的每一幅的概念来描述动画中的每一幅静态图像，每秒钟播放的帧数就是动画的播放速静态图像，每秒钟播放的帧数就是动画的播放速率，率， Flash Professional 8Flash Professional 8默认的播放速率是默认的播放速率是1212帧帧/ /秒。秒。 播放速度越快，动画越流畅。播放速度越快，动画越流畅。 动画的要素动画的要素 位置与大小的变化位置与大小的变化 位置的变化位置的变化 移动移动 比例的变化比例的变化 改变大小或距离改变大小或距离 倾斜度的变化倾斜度的变化 透视空间里的不同状态透视空间里的不同状态 角度的变化角度的变化 物体的旋转物体的旋转形状的变化形状的变化

3、 使物体从一种状态变为另一种状态，或从一使物体从一种状态变为另一种状态，或从一个物体变为另一个物体。个物体变为另一个物体。 亮度、透明度和清晰度的变化亮度、透明度和清晰度的变化 分别用来表现对象的闪烁、显隐和虚实分别用来表现对象的闪烁、显隐和虚实 色彩的变化色彩的变化 色彩变化使动画具有更强的表现力，常色彩变化使动画具有更强的表现力，常用来展示物体的视觉特点。用来展示物体的视觉特点。 2 Flash Professional 8工作界面工作界面Flash 简介简介 Flash是美国是美国Macromedia公司所设计的一种二维矢量动公司所设计的一种二维矢量动画软件。通常包括画软件。通常包括Ma

4、cromedia Flash，用于设计和编辑，用于设计和编辑Flash文档，以及文档，以及Macromedia Flash Player，用于播放，用于播放Flash文档。现在，文档。现在，Flash已经被已经被Adobe公司购买，最新版公司购买，最新版本为：本为：Adobe Flash CS4。 Flash 是一种创作工具，设计人员和开发人员可使用它是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。来创建演示文稿、应用程序和其它允许用户交互的内容。Flash Flash 可以包含简单的动画、视频内容、复杂演示文稿和可以包含简单的动画、视频内容、复杂演

5、示文稿和应用程序以及介于它们之间的任何内容。也可以通过添加应用程序以及介于它们之间的任何内容。也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。应用程序。 2 Flash Professional 8 的工作界面的工作界面 3 Flash 的基本概念的基本概念 3.3 舞台与场景舞台与场景3.2 时间轴与图层时间轴与图层 3.1 帧与关键帧帧与关键帧3.4 元件、组件与引用实例元件、组件与引用实例3.1 帧与关键帧帧与关键帧1. 帧：帧：是时间轴上的一个小格，是动画的一个最小是时间轴上的一个小格，是动画的一个最小时

6、间片断。时间片断。每一个帧其实也就是一幅组成动画的每一个帧其实也就是一幅组成动画的静态图象。静态图象。 2.关键帧：关键帧：任何动画要表现运动或变化，至少前后任何动画要表现运动或变化，至少前后要给出两个不同的要给出两个不同的关键状态关键状态，而中间状态的变化，而中间状态的变化和衔接电脑可以自动完成，在和衔接电脑可以自动完成，在Flash中，表示关中，表示关键状态的帧叫做关键帧键状态的帧叫做关键帧, ,关键帧都带有标记。关键帧都带有标记。 实例实例帧和关键帧的区别：帧和关键帧的区别： 帧与关键帧都用来记录舞台的内容，帧与关键帧都用来记录舞台的内容，我们不能对帧的内容直接进行修改编辑，我们不能对帧

7、的内容直接进行修改编辑，要想修改帧的内容，必须把它转变成关键要想修改帧的内容，必须把它转变成关键帧帧。3.2 时间轴与图层时间轴与图层1. 时间轴时间轴 用来组织和控制动画的播放用来组织和控制动画的播放. .主要组件是图主要组件是图层、帧和播放头。层、帧和播放头。2. 图层图层 图层就像透明胶片一样，在舞台上一层层图层就像透明胶片一样，在舞台上一层层地向上叠加。图层可以帮助组织文档中的各种地向上叠加。图层可以帮助组织文档中的各种对象，在图层上绘制和编辑对象，不会影响其对象，在图层上绘制和编辑对象，不会影响其它图层上的对象。它图层上的对象。 3.2 时间轴与图层时间轴与图层3.2 时间轴与图层时

8、间轴与图层 “帧帧”是动画的最小时间单位，每一个帧其是动画的最小时间单位，每一个帧其实也就是一幅组成动画的静态图象。把这些帧实也就是一幅组成动画的静态图象。把这些帧按时间先后的顺序排列起来，就构成一条按时间先后的顺序排列起来，就构成一条“时时间轴间轴”；把一个动画里面的多个同时进行的时；把一个动画里面的多个同时进行的时间轴并列起来，每一个时间轴就是一个间轴并列起来，每一个时间轴就是一个“图图层层”。 3. Flash的的“帧帧” ” 、“时间轴时间轴”和和“图层图层”的关系的关系3.3 舞台与场景舞台与场景1. 舞台舞台 舞台就是形成电影画面的矩形区域，可用来舞台就是形成电影画面的矩形区域，可

9、用来编辑和放置各种动画对象编辑和放置各种动画对象。 2. 场景场景 表演对象所处的环境就是场景，与拍电影一表演对象所处的环境就是场景，与拍电影一样，样，FlashFlash可以将多个场景中的动作组合成一个可以将多个场景中的动作组合成一个连贯的电影。当我们开始要编辑电影时，都是在连贯的电影。当我们开始要编辑电影时，都是在 “场景场景1”1”中开始，场景可以添加，场景的数量中开始，场景可以添加，场景的数量是没有限制的。是没有限制的。只有当动画很大，或者内容很多的时只有当动画很大，或者内容很多的时候，才会用到场景，大多数用一个场景就能达到效果。候，才会用到场景，大多数用一个场景就能达到效果。 3.4

10、 元件、组件与引用实例元件、组件与引用实例1. 元件元件 元件是指动画里的每一个独立的元素，包括图形元件、元件是指动画里的每一个独立的元素，包括图形元件、按钮元件和影片剪辑元件三种。按钮元件和影片剪辑元件三种。 图形元件图形元件可用于静态图像，并可用来创建连接到主时可用于静态图像，并可用来创建连接到主时间轴的可重复使用的动画片段。间轴的可重复使用的动画片段。 按钮元件按钮元件可以创建响应鼠标点击、滑过或其它动作的可以创建响应鼠标点击、滑过或其它动作的交互式按钮。交互式按钮。 影片剪辑元件影片剪辑元件可以创建可重复使用的可以创建可重复使用的动画片段动画片段。影片。影片剪辑拥有它们自己的独立于主时

11、间轴的多帧时间轴。剪辑拥有它们自己的独立于主时间轴的多帧时间轴。3.4 元件、组件与引用实例元件、组件与引用实例注意：注意：所有的元件一经创建就保存在所有的元件一经创建就保存在“库库”面板中面板中元件可以反复使用。元件可以反复使用。每个元件都有自己的时间轴。每个元件都有自己的时间轴。 在文档中使用元件可以显著减小文件的大小。在文档中使用元件可以显著减小文件的大小。3.4 元件、组件与引用实例元件、组件与引用实例2. 组件组件 组件是软件本身提供的，带有参数的影片剪组件是软件本身提供的，带有参数的影片剪辑，这些参数使用户可以修改组件的外观和行为。辑，这些参数使用户可以修改组件的外观和行为。 3.

12、 引用实例引用实例 当把一个元件放到舞台或另一个元件的时间当把一个元件放到舞台或另一个元件的时间轴中时，轴中时， 就创建了一个该元件的参考实例，也就创建了一个该元件的参考实例，也就是说就是说参考实例是元件的实际应用参考实例是元件的实际应用，元件的运用，元件的运用可以缩小文档的尺寸，这是因为不管创建了多少可以缩小文档的尺寸，这是因为不管创建了多少个参考实例，个参考实例， FlashFlash在文档中只保存一份副本。在文档中只保存一份副本。3.5 动作动作 Flash动作脚本动作脚本Action Script具有函数、变量、具有函数、变量、语句、操作符、条件和循环等基本的编程概念。语句、操作符、条

13、件和循环等基本的编程概念。可以在动作面板中直接输入脚本，也可以从脚本可以在动作面板中直接输入脚本，也可以从脚本列表中选择需要的函数命令；可以使用点语法获列表中选择需要的函数命令；可以使用点语法获取和设置一个对象的属性和方法，包括影片剪辑取和设置一个对象的属性和方法，包括影片剪辑实例和变量。实例和变量。 4 Flash 常用绘图工具常用绘图工具 4.3 选择工具选择工具4.2 文本工具文本工具 4.1 绘图工具绘图工具4.4 变形工具变形工具4.5 色彩工具色彩工具 4.6 橡皮工具橡皮工具 4.7 辅助工具辅助工具 位图和矢量图位图和矢量图 位图是由像素点构成，图像的大小取决于像位图是由像素点

14、构成，图像的大小取决于像素的多少，将位图放大时会产生失真。素的多少，将位图放大时会产生失真。 矢量图是由一条条的线构成的，当对图形进矢量图是由一条条的线构成的，当对图形进行缩放处理时，图形内的对象能够维持原来的清行缩放处理时，图形内的对象能够维持原来的清晰度和弯曲度，不会出现失真现象。晰度和弯曲度，不会出现失真现象。 Flash是基是基于矢量的动画软件。于矢量的动画软件。综合实例综合实例绘制月牙绘制月牙 对象绘制对象绘制综制夜晚景色综制夜晚景色 （图层）（图层）绘制花朵绘制花朵课外拓展课外拓展综合实例综合实例绘制花朵绘制花朵步骤：步骤： 1.1.新建一个新建一个flash文档文档，取名为，取名

15、为“综合实例综合实例.fla” 2. 2.新建花瓣元件新建花瓣元件：“插入插入” “” “新建元件新建元件”弹出对话框，弹出对话框，输入元件名称为输入元件名称为“花瓣花瓣”选择选择“行为行为”为为“图形图形”，如下，如下图图1 1所示。所示。 图图13.3.画花瓣：画花瓣：在在“花瓣花瓣”图形元件的编辑场景中，选择图形元件的编辑场景中，选择“椭圆椭圆工具工具”，设置笔触颜色为红色，填充色为无，在场景中绘，设置笔触颜色为红色，填充色为无，在场景中绘制出一个圆形，用选择工作将圆形调整成花瓣形状，如下制出一个圆形，用选择工作将圆形调整成花瓣形状，如下图图2 2所示：所示：4.4.给花瓣填充颜色给花瓣

16、填充颜色 “ “窗口窗口” “” “设计面板设计面板” “” “混色器混色器”，在混色器面板中，在混色器面板中选择填充类型为选择填充类型为“放射状放射状”，设定颜色为由大红到浅红渐，设定颜色为由大红到浅红渐变，在工具箱中选择变，在工具箱中选择“颜料桶工具颜料桶工具”，给场景中的花瓣图，给场景中的花瓣图像填充颜色，然后删除外框线条，如图像填充颜色，然后删除外框线条，如图3 3所示所示图图2综合实例综合实例5 5. .创建花朵图形元件创建花朵图形元件 新建图形元件，元件名称为新建图形元件，元件名称为“花朵花朵”。在这个元件的。在这个元件的编辑场景中，将刚刚绘制好的编辑场景中，将刚刚绘制好的“花瓣花

17、瓣”元件从元件从“库库”面板面板中拖放到场景中，然后用中拖放到场景中，然后用“任意变形工具任意变形工具”将这个图形实将这个图形实例的中心点移动到花瓣图形的下端。选中花瓣，例的中心点移动到花瓣图形的下端。选中花瓣，“窗口窗口” ” “ “设计面板设计面板” “” “变形变形”，在，在“变形变形”面板中，设置面板中，设置旋转为旋转为7272度，单击右下角度，单击右下角“复制并应用变形复制并应用变形”按纽，如下按纽，如下图图4 4所示，将会出现一个同样的花瓣图形，按下来再单击所示，将会出现一个同样的花瓣图形，按下来再单击该按纽该按纽3 3次，一朵花就画好了，如下图次，一朵花就画好了，如下图5 5所示

18、。所示。图图3综合实例综合实例图图4图图5注意：注意： 本例中共新建了两个图形元件，分别为本例中共新建了两个图形元件，分别为“花瓣花瓣”和和“花朵花朵”，这两个元件都存放在，这两个元件都存放在“库库”中，我们可以将库中，我们可以将库中的元件拖放到舞台中（可多拖几次），然后就可通过测中的元件拖放到舞台中（可多拖几次），然后就可通过测试影片试影片Ctrl+Enter来观看效果。来观看效果。综合实例综合实例当图形元件和影片剪辑都有动画时，把图形元件当图形元件和影片剪辑都有动画时，把图形元件放到主场景，它不会播放，而把影片剪辑放到主放到主场景，它不会播放，而把影片剪辑放到主场景时，他会循环地不停的播放

19、。一般图形元件场景时，他会循环地不停的播放。一般图形元件的动画是在主场景编辑的，影片剪辑顾名思义可的动画是在主场景编辑的，影片剪辑顾名思义可以存放影片（即动画），放到主场景时会自动播以存放影片（即动画），放到主场景时会自动播放，除非写了放，除非写了stopstop命令命令 帧操作帧操作空白关键帧空白关键帧 Flash的时间轴上，默认情况下只有第的时间轴上，默认情况下只有第1帧是空白关帧是空白关键帧，其它都只是帧位而没有帧。它的标志是一个带矩键帧，其它都只是帧位而没有帧。它的标志是一个带矩形边线的空心的小圆。形边线的空心的小圆。关键帧关键帧 如果空白关键帧上添加了内容，就自动成为了关键如果空白关

20、键帧上添加了内容，就自动成为了关键帧。它的标志是一个带矩形边线的实心的小圆。帧。它的标志是一个带矩形边线的实心的小圆。 只有关键帧上才可以放置内容只有关键帧上才可以放置内容，有帧或关键帧的位，有帧或关键帧的位置才可以显示内容。如果没有设置动画，帧上显示的是置才可以显示内容。如果没有设置动画，帧上显示的是前面最邻近的关键帧上的内容。如果是处于设置了动画前面最邻近的关键帧上的内容。如果是处于设置了动画的两个关键帧之间的帧，显示的则是两个关键帧之间计的两个关键帧之间的帧，显示的则是两个关键帧之间计算过变化分量之后的内容。算过变化分量之后的内容。l插入帧插入帧：执行插入执行插入“关键帧关键帧”命令，新

21、插入的关键帧命令，新插入的关键帧将和前面最邻近的关键帧内容完全相同；执行插入将和前面最邻近的关键帧内容完全相同；执行插入“空空白关键帧白关键帧”命令，前面的内容将被该空白关键帧中断，命令，前面的内容将被该空白关键帧中断，可以在该空白关键帧上放置新的内容。可以在该空白关键帧上放置新的内容。l剪切帧剪切帧：剪切帧后，该帧转换为空白关键帧，其后相剪切帧后，该帧转换为空白关键帧，其后相邻的那一帧如果不是关键帧也将自动转换为关键帧。邻的那一帧如果不是关键帧也将自动转换为关键帧。l复制帧复制帧：可以复制关键帧，也可以复制普通帧，但复可以复制关键帧，也可以复制普通帧，但复制普通帧得到的内容是当前帧前面最邻近

22、的关键帧的内制普通帧得到的内容是当前帧前面最邻近的关键帧的内容。容。l粘贴帧粘贴帧：执行粘贴后，把帧粘贴到当前位置。如果当执行粘贴后，把帧粘贴到当前位置。如果当前位置是普通帧，则自动转换为关键帧；如果当前位置前位置是普通帧，则自动转换为关键帧；如果当前位置是空白关键帧，则将内容置入该帧，转换为关键帧；如是空白关键帧，则将内容置入该帧，转换为关键帧；如果当前位置本身就是关键帧，则会用剪贴板上的内容替果当前位置本身就是关键帧，则会用剪贴板上的内容替换原有内容。换原有内容。 帧操作帧操作l清除帧清除帧：清除当前帧上的所有内容、动作代码和帧标签清除当前帧上的所有内容、动作代码和帧标签等并转换为空白关键

23、帧。该帧到下一个关键帧之间的帧等并转换为空白关键帧。该帧到下一个关键帧之间的帧成为空白的普通帧。成为空白的普通帧。l删除帧删除帧：删除帧后，右侧的帧自动向左移动与前面的帧删除帧后，右侧的帧自动向左移动与前面的帧衔接补齐。衔接补齐。帧操作帧操作基本动画基本动画4 4 遮罩图层的屏蔽效果遮罩图层的屏蔽效果 3 3 运动路径的引导运动路径的引导2 2 补间动画补间动画1 1 逐帧动画逐帧动画1 逐帧动画逐帧动画 逐帧动画要将动画中每一帧的画面绘制逐帧动画要将动画中每一帧的画面绘制出来并加以设定。它的原理是在连续的关键出来并加以设定。它的原理是在连续的关键帧中分解动画动作，也就是帧中分解动画动作，也就

24、是每一帧中的内容每一帧中的内容不同，连续播放而形成动画。不同，连续播放而形成动画。 1 逐帧动画逐帧动画电影胶片电影胶片 1 逐帧动画逐帧动画 1 逐帧动画逐帧动画 导入静态图片建立逐帧动画导入静态图片建立逐帧动画 绘制矢量逐帧动画绘制矢量逐帧动画 文字逐帧动画文字逐帧动画 导入动画导入动画1 逐帧动画逐帧动画导入静态图片建立逐帧动画导入静态图片建立逐帧动画1 逐帧动画逐帧动画 方法：将要做动画的图片命名为连续的序列，方法：将要做动画的图片命名为连续的序列， 然后选择然后选择“导入到舞台导入到舞台”1 逐帧动画逐帧动画 2.2.绘制失量逐帧动画绘制失量逐帧动画 在时间轴的每一帧画在时间轴的每一

25、帧画出帧内容。（气球，蜡烛）出帧内容。（气球，蜡烛）第1帧第2帧第3帧第4帧第5帧1 逐帧动画逐帧动画 3.3.文字逐帧动画文字逐帧动画 在时间轴的每一帧添加文字。在时间轴的每一帧添加文字。1 逐帧动画逐帧动画 4.4.导入动画导入动画导入gif、swf动画文件时，Flash会自动分解这些动画的每一帧画面，并自动设置相应数量的关键帧，将画面按顺序置于各关键帧中。 2 补间动画补间动画 补间动画：对于更多的动画，创作时只需制补间动画：对于更多的动画，创作时只需制作少量的关键帧，在关键帧之间创建补间动画，作少量的关键帧，在关键帧之间创建补间动画，关键帧之间的其它帧会由计算机自动绘制。关键帧之间的其

26、它帧会由计算机自动绘制。 Flash Flash中补间动画有两种类型：形状补间动中补间动画有两种类型：形状补间动画和运动补间动画。画和运动补间动画。形状补间动画形状补间动画运动补间动画运动补间动画2.1 形状补间动画形状补间动画 形状补间动画：由一个对象逐渐变成另一个形状补间动画：由一个对象逐渐变成另一个对象。变形动画只对失量图形有效，对象。变形动画只对失量图形有效，如果要如果要变形的对象是群组物体、元件、点阵图或文变形的对象是群组物体、元件、点阵图或文字，应该先将对象分离，方法是执行字，应该先将对象分离，方法是执行“修改修改”菜单的菜单的“分离分离”命令。命令。 制作方法：制作方法： 1.1

27、.在开始帧画一个图形或文字在开始帧画一个图形或文字 2.2.在结束帧选择在结束帧选择“插入关键帧插入关键帧”或或“插入空白插入空白关键帧关键帧”绘制另一个图形。绘制另一个图形。 3.3.属性面板补间选择属性面板补间选择“形状形状”例子：例子： 圆形变矩形变形补间动画圆形变矩形变形补间动画 2.1 形状补间动画形状补间动画 如果要变形的对象是群组物体、元件、如果要变形的对象是群组物体、元件、点阵图或文字，应该先将对象分离，方法点阵图或文字，应该先将对象分离，方法是执行是执行“修改修改”菜单的菜单的“分离分离”命令。命令。 变形的文字变形的文字2.1 形状补间动画形状补间动画2.2 运动补间动画运

28、动补间动画 概念概念 使使一个对象一个对象在画面中移动、在画面中移动、改变大小、改变颜改变大小、改变颜色、改变角度、改变透明度、改变清晰度等色、改变角度、改变透明度、改变清晰度等。可以。可以对图像、图形、文本生成运动动画。对图像、图形、文本生成运动动画。运动补间动画运动补间动画形状补间动画形状补间动画 运动补间动画运动补间动画2.2 运动补间动画运动补间动画注意注意： 制作运动动画的对象必须是制作运动动画的对象必须是“元件元件”，即在制作动画之前，首先要把对象设置为即在制作动画之前，首先要把对象设置为元件，或把图形转变为元件。元件，或把图形转变为元件。 制作方法：制作方法： 1. 1. 新建一个元件。新建一个元件。 2. 2. 回到场景中，在起始帧将建好的元件拖到舞台上。回到场景中，在起始帧将建好的元件拖到舞台上。 3. 3. 在结束帧右击选择在结束帧右击选择“插入关键帧插入关键帧”，改变，改变该元件该元件 的大小、位置、色调、角度、透明度等。的大小、位置、色调、角度、透明度等。 4. 4. 选择起始帧，属性面板选择起始帧，属性面板“补间补间”选择选择“动画动画”或或 在起始帧右击选择在起始帧右击选择“创建补