Download presentation
Presentation is loading. Please wait.
1
Flash 动画设计教程
2
课程的主要内容 Flash 动画基础 Flash 特点、图像知识、Flash工作环境介绍。 绘制图形 绘图工具的使用、各种形状的绘制方法。
对象的编辑 文字、形状、图像的修改与编辑。 帧-帧动画 动画的基础知识,帧-帧动画实例。 旋转动画 旋转动画的制作过程与实例。 导向移动动画 导向移动动画的制作过程与实例。 形状过渡动画 形状过渡动画的制作过程与XYZ变换实例。 遮罩动画 遮罩动画的制作过程与实例。
3
第1章 Flash 中文版基础知识 什么是 Flash? Flash 是由美国Macromedia公司出品的矢量绘图和动画制作软件。
1998年,Macromedia公司收购了一家很小的计算机公司,同时将该公司开发的网络发布插件FutureSplash更名为Flash 2,取得了意想不到的效果。以后继续开发升级,很快就推出了Flash 3,使Flash被商业界接受。 1999年6月推出Flash 4,更加受到各方面的重视。 2000年9月发布了Flash 5,引起了市场的强烈反应。 2002年3月推出了Flash MX。 2004年推出Flash 2004 MX。 2005年推出Flash 8.0,此时Flash已不能再被称为矢量图形软件,因为它的处理能力已延伸到了视频、矢量、位图和声音。 Flash如此受到人们欢迎的主要原因是,它可以在使用很小字节量的情况下,实现高质量的矢量图形和交互式动画的制作。目前,Flash文件的格式已成为网络动画的标准格式,是发布网络多媒体的首选网页设计工具。 Flash不仅可用于网页制作,还可以应用于交互式多媒体软件的开发、多媒体教学和游戏等。
4
1.1 Flash 的主要特点 简单易学: 功能强大: 操作界面友好,使用方便。 采用浮动面板,面板安排更合理。
绘图工具简单易学,可以更简便地绘制各种矢量图形。 与Macromedia公司的其他产品配合密切。尤其是和Dreamweaver和Fireworks等组合成一体,成为“梦幻组合”,使制作网页更方便。 功能强大: 具有较强的矢量绘图和动画制作功能。绘制的图像质量高,制作的动画和网页数据量小。 较强的多媒体技术。具有很强的导入和发布功能,可以导入位图、MP3、 AVI、 QuickTime等格式文件。 可以充分调用Flash文件内部库中的文件,重复利用资源。 Flash MX具有自己的脚本语言。它所有的编程方式和编程思想都符合面向对象的语言形式。
5
数字图像知识 数字图像的种类有两种:点阵图、矢量图。 1、点阵图
点阵图也叫位图,它由许多颜色不同、深浅不同的小圆点(像素)组成。像素是组成图像的最小单位,许许多多的像素构成一幅完整的图像。在一幅图像中,像素越小,数目越多,则图像越清晰。 点阵图可以表现得更自然和更逼真,更接近于实际观察到的真实场景。 点阵图的缺点:图像文件一般较大,在将它放大、缩小和旋转时,会产生失真。
6
矢量图 矢量图由一些基本图元组成,这些图元是一些几何图形,如:点、线、矩形、多边形、圆和弧线等。这些几何图形均可由数学公式计算后获得。矢量图的图形文件是绘制图形中各图元的命令。显示矢量图形时,需要相应的软件读取这些命令,并将命令转换成组成图形的各个图元。 由于矢量图是采用数学描述方式的图形,所以通常由它生成的图形文件相对比较小,图形颜色的多少与文件的大小基本无关。另外,在将它放大、缩小和旋转时,不会象点阵图那样产生失真。
7
1.2 Flash的工作环境 工具箱 标题栏 菜单栏 主要工具栏 调色版面板 时间轴 颜色样本面板 舞台工作区 “属性”面板
8
一、菜单栏与主要工具栏 菜单栏 菜单栏在标题栏的下边,菜单栏有十个主菜单。Flash 8.0 菜单的形式与其他Windows软件的菜单形式相同,都遵循基本相同的规定。 主要工具栏 主要工具栏也叫常用工具栏,它有16个按钮,其中一些按钮都是标准化的,如新建、打开、保存、剪切、复制、粘贴等。另外一些按钮则是用于绘图编辑,如平滑、直线、对齐对象等按钮。 平滑 直线 旋转和倾斜 缩放 对齐 对齐对象
9
二、Flash 工具箱 工具箱提供用于图形绘制和图形编辑等的各种工具。工具箱内从上到下分为四个栏: 工具栏,查看栏, 颜色栏,选项栏。
10
三、面板 在Flash中提供了许多面板(也叫浮动面板),利用这些面板,可以完成绘制图形、加工文字、制作动画等许多操作。通过 “窗口”菜单,可以打开不同的面板窗口。 颜色样本面板 混色器面板 属性面板
11
四、舞台 舞台,就是绘制图形和编辑图形、图像的矩形区域,也是创作影片动画的区域。在创建或编辑一段Flash影片时,我们离不开舞台,这是排练演出的场所。 1. 舞台工作区大小与颜色的设置 单击菜单“修改”--“文档…” 或单击属性面板中的“文档属性”按钮,打开文档属性对话框。在尺寸栏可以设置舞台工作区的大小,默认单位为像素(px),最大可设置为2880px×2880px,最小为1px×1px。 在文档属性对话框中,单击“背景颜色”按钮,会弹出颜色面板,选中一种颜色,完成工作区的颜色设置。 帧频:影片的播放速度,默认12fps,即每秒播放12帧画面,对于在 Web 站点播放的动画,8fps到12fps就足够了。 2.舞台工作区显示比例的调整 在舞台的右上方,有一个可改变舞台工作区显示比例的下拉列表框,通过它可以调整舞台工作区显示比例。
12
在舞台中,为了使对象准确定位,可以在舞台的上边和左边加入标尺,或在舞台工作区显示网格。
3. 网格和标尺 在舞台中,为了使对象准确定位,可以在舞台的上边和左边加入标尺,或在舞台工作区显示网格。 通过菜单“视图”—“标尺”,可以在舞台上边和左边出现标尺。 通过菜单“视图”—“网格”—“显示网格”,舞台工作区内显示网格 4. 舞台工作区的两个控制工具 工具箱内“查看”栏中提供了两个舞台工作区的控制工具,一个是手形工具,另一个是缩放工具。 手形工具:选择手形工具,鼠标移入舞台工作区后鼠标指针变为手的形状,按下鼠标左键并拖曳,可以在舞台工作区的不同部位进行查看。 缩放工具:单击按下工具箱内的“缩放工具”按钮,在工具箱“选项”栏中会出现放大和缩小两个按钮,可以实现对舞台工作区的放大和缩小显示。
13
五、时间轴 时间轴是动画和视频类软件中的一个重要概念。通俗地讲,时间轴就好象导演的剧本,它决定了各个场景的切换以及演员出场、表演的时间顺序。
Flash 把动画按时间分解成帧,时间轴用于组织和控制影片内容在一定时间内播放的层数和帧数。它是处理帧和图层的地方,帧和图层是对象和动画的组成部分。将一些图形图像按照一定的时间、空间顺序播放,就形成了动画,而“时间轴”可以表现和记录动画的全部信息,是控制动画流程最重要的手段。
15
时间轴的组成 每一个动画都有与它相应的时间轴。时间轴窗口可以分为左右两个区域,左边区域是图层控制区域,它主要用来进行各图层的操作;右边区域是帧控制区域,它主要用来进行各帧的操作。 所谓图层就相当于舞台中演员所处的前后位置。图层靠上,相当于该图层的对象在舞台的前面。在同一个纵深位置处,前面的对象会挡住后面的对象。 (1) 图层控制区域:它上边第一行是所有图层的控制栏,有三个按钮:显示、锁定和轮廓线。图层控制区域的下边是图层工作区,其内有许多行,每行表示一个图层。 (2) 帧控制区域:它上边的第一行是时间轴帧数标示区,用来标注随时间变化所对应的帧号码。下边是帧工作区,它给出各帧的属性信息。有一个小黑点的是关键帧(即动画起点、终点或转折点的帧)。
16
1.3 创建第一个Flash影片 基本步骤: 1. 新建动画影片文件,同时设置影片的基本属性。
影片的尺寸为500px宽、300px高,背景为浅灰色。 2. 输入文字,进行必要的设置。 使用 “文本工具”在舞台工作区输入文字“第1个Flash影片”,字体为楷体,10号,粗体,黄色。使用箭头工具将文字置于舞台的正中间。 3. 创建文字由小到大逐渐扩展的动画 右键单击时间轴图层1的第1帧,在快捷菜单(右键单击)中选择“创建补间动画”。单击时间轴的第30帧,按F6键,即创建了从第1到第30帧的动画。时间轴处于第30帧处时,选中文字,使用“任意变形工具”调整文字尺寸,将文字调大。
17
4. 增加图层和绘制立体球图形 在图层1上增加新图层2,单击图层2第1帧,在舞台左下角画一个小立体彩球。 5. 创建红色立体球从左下角向右上角直线移动的动画 单击图层2第30帧,按F6键创建关键帧。按住Shift键,选中1到30帧的所有单元格,单击菜单“插入”—“时间轴”—“创建补间动画”。选中第30帧,将彩球移到舞台的右上角处,再调整大小。 将此动画文件调试后保存。
18
3. Macromedia Flash Player (独立播放器)
直接按Enter键,即可在舞台窗口内播放动画。 使用“控制栏”面板播放: 通过菜单“窗口”—“工具栏”—“控制器”,打开“控制器”,单击相应按钮进行操作。 通过菜单“控制”—“测试影片”(快捷键:Ctrl+回车键),即可在播放窗口内播放动画。 2. 保存与打开Flash动画: 与其它软件操作类似。这里应注意文件的扩展名为.fla 3. Macromedia Flash Player (独立播放器) 是一个独立的应用程序,它的名字是SAFlashPlayer。使用它可以播放SWF 格式的文件。直接双击swf类型的文件,就可以打开Flash Player播放器,同时播放该动画文件。
19
第 2 章 绘制图形 制作 Flash 动画前,一定要准备好素材,素材的来源有三种: 一、导入外部素材,如图片、声音和视频等;
矢量图形一般可以看成是由线条和填充物组成; 矢量图形的着色有两种:线条的着色和填充物的着色;可以着单色,也可以着渐变色和位图。 本章主要内容: 介绍绘图工具的使用方法、设置颜色、图形属性等。
20
1.1 Flash 的基本操作 1. 选取对象:单击“箭头工具”按钮,然后可以选择对象。
选择一个对象:单击一条线或填充物,可以选中该线或填充物。 选取多个对象:按住Shift键,同时依次单击各对象;或用鼠标画矩形,可以将矩形区域中的所有对象都选中。 2. 移动对象:利用箭头工具选中一个或多个对象,拖动鼠标。 如果按住Shift键,同时拖动被选的对象,可以将选中的对象沿 45 度的整数倍角度移动。 按键盘上的光标移动键,可以微调对象的位置。 3. 复制对象:移动对象的同时按Ctrl键,可以复制对象。 也可以打开“变形面板”(菜单: 窗口—变形)进行“复制与变形”操作。 4. 删除对象: 选中要删除的对象,然后按 Delete 键或退格键。
21
2.1 颜色的设置和绘制图形 Flash 提供了很多设置和修改颜色的方法,其中“颜色样本”和“混色器”面板是最常用的处理颜色的工具面板。
一、“颜色样本”面板 通过菜单“窗口”—“颜色样本”,可以调出“颜色样本”面板。它提供了各种不同的颜色样本供选择使用,在它的底部是渐变填充效果样式按钮,单击其中一个,即可迅速获得相应的渐变填充色设置。 另外,单击颜料桶等工具也会出现与“颜色样板”一样的“填充颜色”面板。
22
混色器面板 通过菜单“窗口”—“混色器”,可以调出“混色器”面板。 可以实现填充类型有: 纯色、线性、放射状和位图。 设置渐变效果:
对于“线性”和“放射状”填充方式,用户可以自己设置颜色渐变的效果。如移动关键点、改变关键点的颜色、增加关键点等。
23
绘制有填充物的椭圆和矩形 绘制有填充物的椭圆 绘制有填充物的矩形
使用工具箱中的“椭圆工具”,设置线条类型、线条颜色和填充色,在舞台工作区内拖动鼠标,即可绘制有填充物的椭圆图形。 在绘制时,如果按Shift键,可绘制正圆。 绘制有填充物的矩形 使用工具箱中的“矩形工具”,设置线条类型、线条颜色和填充色,在舞台工作区内拖动鼠标,即可绘制有填充物的矩形图形。 如果在绘制时,按Shift键,可绘制正方形。
24
实例1:立体彩球 制作步骤: 1、新建一个文件和导入一幅图像
设置舞台的尺寸为 600Px×200Px,白色背景;导入一幅图像,使用“任意变形”工具,调整适当的尺寸,然后将该图层锁定。 2、绘制第1和第2个立体彩球 在图层1上插入图层2,单击“椭圆工具”按钮,绘制正圆,无轮廓线,填充为放射状的红到黑色;使用箭头工具,按Ctrl键拖动红色彩球,复制一个相同的立体彩球,使用油漆桶工具,改变彩球亮点的位置为左上方。 3、绘制第3个立体彩球 复制第3个立体彩球,通过调整渐变色调整条关键点的颜色,将填充设置成红到白色的放射状填充效果。
25
2.2 线条的绘制与设置 使用“线条工具”绘制直线 使用“椭圆工具”绘制椭圆轮廓线 使用“矩形工具”绘制矩形轮廓线
单击工具箱中的线条工具按钮,在属性面板设置线的颜色、粗细和线型,在舞台工作区内拖动鼠标,可以绘制各种长度和角度的直线。同时按 Shift 键,可以绘制水平、垂直和45°角的线条。 使用“椭圆工具”绘制椭圆轮廓线 单击工具箱中的椭圆工具按钮,在属性面板设置轮廓线的颜色、粗细和线型,在舞台工作区拖动鼠标,即可画出椭圆。同时按 Shift 键,可以画正圆。 使用“矩形工具”绘制矩形轮廓线 单击工具箱中的矩形工具按钮,在属性面板设置轮廓线的颜色、粗细和线型,在舞台工作区拖动鼠标,即可画出矩形。同时按 Shift 键,可以画正方形。
26
线条属性设置 一、设置线的颜色 以下操作一般应首先要选中操作对象。 将鼠标移到颜色板内的色快上单击即可; 使用“混色器”面板设置线的颜色
使用“笔触颜色”面板设置线的颜色 将鼠标移到颜色板内的色快上单击即可; 或在颜色输入框输入六位十六进制数#RRGGBB来设置颜色。 使用“混色器”面板设置线的颜色 在颜色板上用鼠标单击选择; 或在右边的红、绿、篮输入框中输入R、G、B值。 二、设置线型 线型包括线的形状、线的粗细和线的颜色等。线型的设置可由线的“属性”面板来完成。
27
刷子工具的使用 使用刷子工具,可以创建某些特殊效果。 刷子参数设置:刷子宽度、刷子形状和刷子模式,其中刷子模式设置如下:
原始图像 1.标准绘画 2.后面绘画 3.颜料选择 4.颜料填充 5.内部绘画 1、标准绘画模式:新画的线条覆盖同一层中的原有图形。 2、后面绘画模式:可在空白区域涂色,不影响原有线条和填充。 3、颜料选择模式:只能在选择的图形区域里画线条。 4、颜料填充模式:只能在空白区域和原图形的填充区域内绘制线条。 5、内部绘画模式:只能在起始点所在的图形区域中绘制线条。
28
实例2:荷塘月色 荷塘月色的风景图画。 漆黑的夜晚,圆圆的月亮照映在湖水中,倒挂的垂柳,深篮色的湖面上漂浮着片片荷叶。给人一种美丽、幽静的感觉,好像置身于迷人的风景之中。
29
制作过程 1、设置:创建新 Flash 文件,舞台大小 300×260px,灰色(#999999)背景。
2、月亮:用椭圆工具画一个黄色的圆形月亮图形。 3、湖面:使用矩形工具在舞台的下半部绘制深篮色的矩形湖面。 4、垂柳:使用刷子工具,设置深绿色,最小的竖形笔型画垂柳。 5、荷叶:在舞台的外边绘制深绿色椭圆,之上画小圆和直线,形成荷叶。 6、组合:用箭头工具选中荷叶图形,通过菜单“修改”—“组合”,将它们组合。 7、复制:按Ctrl键,用鼠标拖动荷叶,进行荷叶的复制,放在湖面的不同位置。 8、变形:使用任意变形工具,调整荷叶的大小和旋转角度。 9、倒影:设置填充色为黄色,使用刷子工具,画出月亮的倒影。 10、保存:保存文件“荷塘月色.fla”。
30
2.3 钢笔工具的使用 使用钢笔工具可以绘制精确的直线、曲线、多边形等。 直线:单击直线的起点,然后松开鼠标,移到终点再双击鼠标。
折线:单击折线的起点,依次单击转折点,最后在终点双击鼠标。 多边形:单击多边形的起点,然后依次单击各端点,最后单击多边形的起点。 绘制曲线:有两种方法。 (1)先绘直线再定切线:单击起点,松开鼠标,移动鼠标到下一点处单击,产生一条线段,同时(不要松开鼠标左键)拖动鼠标改变切线的方向,从而确定曲线形状。 (2)先定切线再绘曲线:单击起点,不松开鼠标,拖动鼠标形成切线,然后松开鼠标,再单击下一节点处,产生一条两点间的曲线。
31
2.4 铅笔工具的使用 使用铅笔工具,可以像我们真的在使用一支铅笔一样,绘制直线、曲线和其它任意形状。Flash 还可以自动对其进行加工,例如变直、平滑等处理。 使用铅笔工具时,首先要设置线型和颜色,并且要选择一种绘画模式: 伸直模式:可以绘制直线,并且将接近三角形、椭圆、矩形和正方形的形状转换为这些常见的几何形状。 平滑模式:可以绘制平滑曲线。 墨水模式:可以绘制接近徒手画出的线条。
32
树叶图形由几片树叶和几条叶茎组成,制作过程如下:
实例3:树叶图形 树叶图形由几片树叶和几条叶茎组成,制作过程如下: 1、创建新文档,尺寸为300px宽、260px高,白色背景。 2、设置钢笔工具:线宽2,笔触颜色为深绿色,填充为绿色放射性渐变。 3、画树叶的外形:使用钢笔工具,画出树叶的外形;使用任意变形工具,对树叶的形状进行调整;使用线条工具,在树叶上绘制几条直线。 4、树叶组合与复制:通过菜单“修改”—“组合”命令,将树叶组合。然后按 Ctrl 键同时拖动鼠标进行树叶的复制操作。 5、画粗叶茎:使用铅笔工具,深绿色,线宽 6,画一条粗叶茎。线宽3,画几条细叶茎。 6、最后调整树叶的大小和位置。
33
2.5 橡皮擦工具的使用 使用“橡皮擦”工具,可以快速擦除舞台上的任何内容。 橡皮形状下拉列表框:可选择橡皮擦的形状与大小。
橡皮模式按钮:可以设置擦除方式,各擦除模式意义如下: “标准擦除”模式:可以擦除同一层上的笔触和填充。 “擦除填色”模式:只擦除填充,不影响笔触。 “擦除线条”模式:只擦除笔触,不影响填充。 “擦除所选填充”模式:只擦除当前选定的填充,并不影响笔触。 “内部擦除”模式:只擦除橡皮擦笔触开始处的填充。 水龙头按钮:可擦除所单击的整个填充或线段。
34
2.6 墨水瓶和颜料桶工具的使用 墨水瓶工具 墨水瓶工具的作用是改变线条的属性,例如线的颜色、粗细和类型等。另外,使用墨水瓶工具还可以为没有轮廓线的填充物增加轮廓线。 颜料桶工具 使用颜料桶工具,可以设置和修改填充物的颜色属性,也可以填充封闭图形内部为某一颜色属性。
35
实例4:国画展厅
36
国画展厅的制作步骤 1. 绘制轮廓线和地面 (1) 设置舞台区大小为500×260px。单击“视图”-“网格”-“编辑网格”,设置网格水平、垂直间距均为10px,选择“显示网格”复选框。 (2) 使用线条工具,绘制展厅、地面的布局线条图形。 (3) 使用颜料桶工具,给展厅地面的格子内填充黑白相间的颜色。
37
2. 填充图像 (1) 单击“文件”-“导入”-“导入到库”菜单命令,将一幅“灯”图像和五幅国画图像导入到“库”面板。 (2) 在“混色器”面板的填充风格下拉列表框中,选中“位图”选项,将“灯”图像用油漆桶工具填充到上边的梯形内部。 (3) 使用填充变形工具,单击填充的“灯”图像,拖动鼠标调整图像的大小和位置,形成房顶的吊灯图像效果。 (4) 将“库面板”中的三幅国画图像依次拖到工作区,调整图像的大小,填充到展厅正面。选中整个图像并组合。 (5) 将“库面板”中的一幅国画拖到工作区,调整大小,打碎。使用“任意变形工具”调整形状,使其与左边的梯形形状一致。同样方法将另一幅国画填充到另一梯形中。
38
第3章 创建文本和导入外部对象 本章主要内容: 创建文本 导入图像 导入声音和视频
39
3.1 创建文本 1. 文本输入 选择工具箱内的文字工具,在单击舞台工作区单击,会出现一个矩形框,矩形框右上角有一个小圆控制柄,光标出现在矩形框内,这时可以输入文字。此时文本框宽度不固定,称为延伸文本。 要创建固定行宽的文本,可以用鼠标拖动文本框的小圆控制柄,即可改变文本的行宽度,此时文本框的小圆控制柄变为方形控制柄,称为固定行宽文本。在固定行宽状态下,输入文本超过一行后会自动换行。双击方形控制柄,可将固定行宽文本变为延伸文本。 2. 文本类型 静态文本:文本框内显示不会动态更改字符的文本。 动态文本:显示动态更新的文本,如体育比赛得分、天气报告。 输入文本:文本框内可以提供用户输入文本,如用户名、密码等。
40
文本的属性包括文字的字体、字号、颜色等。设置文本的属性可通过菜单命令或属性面板来完成。
文本属性的设置 3. 文本的属性与设置 文本的属性包括文字的字体、字号、颜色等。设置文本的属性可通过菜单命令或属性面板来完成。 利用菜单命令设置文本属性 单击“文本”菜单选项,可以设置字体、大小(字号)、样式(效果)、对齐、间距等。 利用“属性”面板设置文本属性 单击工具箱内的“文本工具”按钮,调出它的文本属性面板,可以设置文字的各种属性。
41
分离和打碎文字 分离文字块: 使用箭头工具,单击选中一个文字块,单击“修改”—“分离”菜单命令,即可将文字块分离为独立的单个字符或汉字。文字块分离后,成为多个独立对象。 打碎文字: 单击选中一个或多个独立的字符或汉字,然后单击“修改”—“分离”菜单命令,即可将其打碎。打碎后的文字可以按照图形来处理。
42
实例5:彩虹文字 制作过程: 1、使用文本工具输入文本“彩虹文字”,华文行楷,70号,黑色。
2、用箭头工具选中文字,再用任意变形工具适当调整文字的大小。3、两次单击“修改”—“分离”菜单命令,将文字打碎。 3、选中所有文字,单击“修改”—“形状”—“扩展填充…”,将文字向外扩充 2 个像素点。 4、在工具箱的“颜色”栏内设置填充色为多彩线性渐变色。在混色器面板中,依次将各关键点颜色调整为:红(255,0,0)、橙(200,200,0)、黄(255,255,0)、绿(0,255,0)、青(0,255,255)、蓝(0,0,255)、紫(255,0,255)。 5、不选中文字。使用填充转换工具,单击文字,调整渐变色的倾斜方向与颜色。
43
3.2 导入图像 一、导入外部素材和位图属性的设置
导入外部素材: 单击“文件”—“导入到舞台 或 导入到库”菜单,打开“导入”对话框进行导入操作。 可以导入的外部素材包括:矢量图形、位图、声音和视频等。 几种格式简介如下: GIF图像文件:压缩比略小于JPEG格式的位图图像,可以动态显示。 WAV声音文件:是未压缩的声音格式,其扩展名是 .wav。 MP3声音文件:采用 MP3 方式压缩的声音格式,扩展名是 .MP3。
44
位图属性的设置 导入一个位图图像后,打开“库”面板,双击“库”面板中的图像名字或图标,即可调出该图像的“位图属性”对话框。
允许平滑:可以消除位图边界的锯齿。 “压缩”下拉列表框:可选择“照片(JPEG)”或“无损(PNG/GIF)”。 “使用导入的 JPEG 数据”复选框:选中时,表示使用文件默认质量;不选择该复选框,会出现一个“品质”文本框,输入1到100的数值,数值越大,图像品质越高。 “测试”按钮:可以按新的属性进行设置,在对话框的下半部显示相关信息。
45
位图的打碎和矢量化 在 Flash 中,许多操作是针对矢量图形进行的,对于导入的位图就不能操作了。因此,位图必须经过分离(也叫打碎)或矢量化才能操作和编辑。 打碎位图:选中位图,然后单击“修改”--“分离”,将位图打碎。 位图的矢量化:“修改”—“位图”-“转换位图为矢量图”,进行有关设置后确定。 颜色阈值:区分颜色的阀值,介于 1 和 500 之间。阀值越小,转换后的颜色丢失少,与原位图图像差别较小。 最小区域:介于 1 和 1000 之间,表示最小区域的像素数。其值越小,转化后的矢量图形越精确,与原位图像越接近,但转换速度慢。 曲线拟合:从下拉列表中选择一个选项,用于确定绘制的轮廓的平滑程度。 转角阈值:选择一个角阀值,以确定是保留锐边还是进行平滑处理。 要创建最接近原始位图的矢量图形,请输入以下的值: 颜色阈值:10;最小区域:1 个像素;曲线拟合:像素;转角阈值:较多转角。
46
实例6:图像文字 图像文字由一幅风景画填充文字的内部,制作过程如下: 1. 导入一幅风景图像,将图像在水平方向调宽→打碎→锁定该图层。
2. 插入图层 2,单击选中图层 2 的第 1 帧。 3. 输入文字“图像文字”,宋体、96号、黄色,用任意变形工具适当调整文字大小。 4. 将文字打碎。此时若有连笔画现象,需要修补。 (缩放比例 400%,使用线条工具,在有连笔画的地方绘制线条并调整,双击线条内部,选中线条内部的填充物和线条,删除。) 5. 选中文字,单击“修改”—“形状”-“扩展填充”菜单,将文字向外扩充4个像素点。 6. 单击空白处,不选文字。使用墨水瓶工具,设置黄色,线粗为2。单击文字笔画的边缘,增加文字的黄色轮廓线。 7. 使用箭头工具,按 Shift 键,选中所有文字内部的填充,删除。 8. 选中所有文字,在舞台工作区右键单击,选择“复制”命令,然后删除图层2。 9 . 解除图层 1 的锁定状态,在舞台工作区右键单击,选择“粘贴”(Ctrl+V)命令。 10. 使用箭头工具,按 Shift 键,同时选中文字外部的图像,删除,只剩下文字轮廓线和文字内的图像。 制作完毕。
47
3.3 导入声音 一、导入声音和使用声音 二、声音的属性设置
在Flash作品中,可以给图形、按钮动作和动画等配有背景声音,导入的声音文件格式有 WAV、AIFF 和 MP3 等。 导入声音: 首先为声音创建一个图层(添加普通图层即可,此为声音图层)。然后单击“文件”—“导入”-“导入到库”菜单,在对话框中选择声音文件打开,导入的声音会加载到“库”面板中。 将“库”面板中的一个声音文件拖到新建图层舞台工作区,在时间轴上可看到在第 1 帧内显示出声音的波形。在声音图层时间轴的某一帧,如 30 帧单击,按 F5键,可以看到后面的声音波形。 二、声音的属性设置 双击“库”面板中的声音元件图标,打开“声音属性”对话框,可以查看、更改声音属性和进行测试。
48
第 4 章 编辑对象 修改对象的形状 修改对象的大小、位置 编辑多个对象和声音
49
4.1 修改对象的形状 使用箭头工具 1、改变对象的形状:使用箭头工具,先不要选中对象,将鼠标移到对象的边缘处,鼠标指针右下角出现小弧线或小直角线,拖动鼠标即可修改对象的形状。 2、切割对象:使用箭头工具,在舞台工作区内拖动鼠标,选中图形的一部分,然后拖动选中的部分,即可将选中的部分分离。 也可以在对象上画细直线,将图形切割,用鼠标拖动分离。
50
实例7:扑克牌 制作步骤: 1、设置舞台大小为默认值,打开“网格”对话框,设置水平和垂直间距均为10,选择“显示”和“紧贴”网格选项。
2、绘制黑桃:使用黑色钢笔,先画一个三角形,高度6个格,底边4个格。 3、在上肩两侧、底边中间画小段直线,使用箭头工具调整出桃形图案。 4、将小线段删除,使用油漆桶填充黑色。 5、对上述图形复制和垂直翻转,输入相应的文字,组成黑桃A扑克牌图形。 6、画矩形框作为扑克的边框。
51
7、方片5:使用线条工具,设置线的颜色为红色,线宽为1,画菱形,尺寸10格×6格。
8、使用箭头工具,调整菱形的形状,填充红色。 9、选中轮廓和填充,将它们组合。 10、通过属性面板,将菱形的尺寸缩小至原尺寸的 ¼。 11、按Ctrl键同时拖动鼠标,复制6个菱形,摆放至合适位置。 12、将左上角、右下角的2个菱形尺寸缩小一半。 13、使用文本工具,输入红色数字5,字号20,放到左上角。 14、复制数字5至右下角,垂直翻转,摆放到合适位置 15、画矩形框作为扑克的边框。
52
4.2 对象的大小、形状和位置 一、使用任意变形工具改变对象 使用任意变形工具可以缩放、旋转、变形和封套对象。 二、平滑与校直:
选中线、填充物或打碎的对象,不断单击“平滑”按钮(在选项栏或常用工具栏),即可将不平滑的图形变平滑;不断单击“直线”按钮,即可将不直的图形变直。 三、精确调整对象的形状与位置 可以通过 “属性面板”精确调整对象的位置和大小
53
4.3 编辑多个对象 一、组合 组合就是将多个对象(图形和位图像)组合成一个对象。组合后,可以作为一个对象来进行操作,如复制、移动、旋转与倾斜等。 二、多个对象的对齐和层次调整 1. 对齐对象:先选择要对齐的对象,执行菜单“修改”-“对齐”,即可将选中的对象进行相应的对齐。也可以通过“窗口”-“设置”面板-“对齐”,打开“对齐”窗口进行对齐操作。 2. 层次调整:可以通过菜单“修改”-“排列”,进行层次调整。
54
实例8:彩球倒影 绘制方法: 1、绘制椭圆:使用椭圆工具,蓝色线条,绘制一个无填充的圆。按住Ctrl键拖动,将图形复制一份。
2、打开“变形”面板,复制缩小比例分别为2/3、1/3的椭圆,形成各个小区域。间隔填充小区域为深红色,删除彩球线条。将左上角的两个色块填充由白到红色的放射状渐变色,选中图形并组合。 3、设置填充颜色为白、绿、黑色中心渐变色,绘制一个同样大小的无轮廓线的绿色彩球,将其移到红白彩球之上并组合。 4、复制3份彩球,摆放到适当的位置。 5、插入图层2,绘制无轮廓线的蓝色矩形,将下面两个彩球覆盖住,在混色器面板中调整Alpha的值为60%。(完成)
55
第5章 Flash 动画制作 移动动画和“帧-帧”动画 对象旋转的动画 导向移动动画 形状过渡动画 遮罩图层动画
56
5.1 移动动画和“帧-帧”动画 一、Flash 动画的基础知识 Flash动画的分类:
(1)“帧-帧”动画:制作好每一帧画面,每一帧内容不同,然后连续依次播放这些画面,即可生成动画效果。 (2)过渡动画:制作好若干关键帧的画面,由Flash通过计算生成各关键帧之间的各个帧,使画面从一个关键帧过渡到另一个关键帧。过渡动画又分为: 移动过渡动画(动作动画) 形状过渡动画(变形动画)
57
移动动画的制作方法 1、选中时间轴中的一个空白关键帧(第1帧就是空白关键帧),在舞台工作区创建一个对象或从“库”面板中把一个元件拖到舞台工作区中。例如画一个绿色立体圆球。 2、鼠标右键单击关键帧,在快捷菜单中选择“创建补间动画”, 3、单击选择时间轴中的动画结束帧(如30帧),按F6键,创建一个关键帧并选中该关键帧。此时在两个关键帧之间会产生一个指向右边的水平箭头线,表示过渡动画创建成功。 4、调整动画起始帧和结束帧中对象的位置、大小、旋转。
58
实例9:弹跳彩球 “弹跳彩球”动画显示的画面是:彩球在垂直方向弹跳,彩球下面有一个阴影,随着彩球的上下跳动,阴影大小也在随之变化。
制作步骤: 1、在舞台工作区绘制一个立体彩球。 2、右键单击时间轴第1帧,选择“创建补间动画”菜单命令。单击第30帧,按F6键,创建从第1帧到30帧的移动过渡动画。 3、选择第15帧,按F6键,将第15帧的彩球垂直移到舞台工作区的下边。 4、新建图层2,把图层2拖到图层1的下面。选中图层2的第1帧,在舞台工作区绘制一个无轮廓线的灰色椭圆。 5、通过菜单“修改”-“形状”-“柔化填充边缘”,对灰色椭圆进行“柔化填充边缘”操作。 6、创建图层2从第1帧到30帧的移动过渡动画,单击第15帧,按F6键,将阴影缩小。
59
实例10:倒计时数字 “倒计时数字”动画播放后,画面依次显示 5、4、3、2、1 图像,然后显示一幅从大到小的国画图像。 制作步骤:
(1)设置动画文档,宽为 300px、高为 200px,白色背景。 (2)将提前制作的 “1”、“2”、“3”、“4”、“5”图像文件,导入到“库”面板。 (3)单击选中第 1 帧,将“库”中的“5”元件拖到舞台工作区,位置为(130,50)。 (4)选择第 5 帧,按 F6 键。再按删除键,将图像“5”删除。 (5)将“库”面板中的“4”元件拖到舞台,位置仍为(130,50)。
60
(6)选择第 10 帧,按 F6 键。再删除图像“4”,将图像“3”放到舞台,位置(130,50)。
(7)按照上述方法,依次将“库”面板中的“2”和“1”元件放到舞台工作区。最后在第 25 帧将“1”图像删除。 (8)单击选中第 25 帧,导入一幅国画图像。 (9)单击选中第 25 帧,右击鼠标,选择“创建补间动画”菜单命令。单击选择第 40 帧,按 F6 键,创建 25 帧到第 40 帧的移动过渡动画。 (10)使用任意变形工具,分别调整第25帧和第40帧的图像大小。
61
5.2 制作旋转的动画 制作旋转动画的方法 (1)选中移动动画的第 1 个关键帧,创建动画对象。 (2)按照前述方法,制作移动动画。
(3)选中动画对象,用任意变形工具调整动画对象中的圆形标记,即旋转中心的位置。 (4)在“属性”面板的“旋转”下拉列表框中选择“顺时针”或“逆时针”选项,在右边的文本框中输入旋转的圈数。 (5)如果动画对象是围绕中心点摆动,可以单击选中动画的结束关键帧,使用任意变形工具,用鼠标调整该帧对象的位置。
62
有关帧的编辑操作 (1)选择一个或多个帧:单击一帧的单元格即可选中该帧;按Ctrl 键,同时单击帧,可以同时选中多个不连续的帧;按 Shift 键,单击第 1帧和最后 1 帧,可以选择连续的多个帧;按 Ctrl+Alt+A,可以选中动画中的所有帧。 (2)复制和移动帧:选中若干帧,右键单击,选择“复制帧”(或“剪切帧”)菜单,然后选择一个单元格,在快捷菜单中选择“粘贴帧”。 (3)调整过渡帧的数量:在创建了移动过渡动画或形状过渡动画后,如果要调整过渡的长度(即过渡帧的数量),可以先单击选中起始或结束关键帧,然后用鼠标水平拖动该帧单元格。 (4)插入普通帧:单击选中要插入帧的帧单元格,然后按 F5 键。或右键单击,选择“插入帧”命令。 (5)插入关键帧:单击选中要插入关键帧的帧单元格,按 F6 键。
63
实例11:摆动球 “摆动球”动画是单摆小球来回摆动的动画。最左边的小球摆起再回到原处,撞击其它三个单摆小球,最右边的小球摆起,回到原处后,又撞击其他三个单摆小球,左边的单摆球再摆起。周而复始,不断循环。 制作过程: (1)设置舞台工作区的大小为 500px×300px,背景为白色。 (2)单击“插入”-“新建元件”菜单命令,输入元件的名称为“单摆”。单击选中“影片剪辑”单选按钮确定,此时舞台工作区切换到元件编辑窗口。 (3)绘制一个灰色的立体球和一条红色的垂直直线,将它们组合,制成单摆。然后单击“场景1”,回到主场景舞台工作区。 (4)选择图层 1 的第 1 帧,在舞台上绘制一个长条的矩形,作为单摆的横梁。它的轮廓线为蓝色,填充为放射状渐变的红黑色。单击选中第 40 帧,按 F5 键,使第 1 到 40 帧内容一样。
64
(5)在图层 1 上增加图层 2。选中第 1 帧,将“库”面板中的“单摆”元件拖到横梁的下边的偏左处。使用“任意变形工具”适当调整它的大小,并且调整“单摆”对象的中心标记到单摆线的顶端。
(6)创建图层 2 从第 1 帧到第 20 帧的旋转移动动画。第 1 帧与第 20 帧的画面均如图 1 所示,第 10 帧为关键帧,将该帧“单摆”对象的位置移动到如图 2 所示。 图1 图2 (7)选择图层 2 的第 40 帧,按 F5 键,使“图层2”图层的第 21帧到 40 帧的内容与第 20 帧的内容一样。
65
(8)在图层 2 上增加图层 3。将图层 2 第 1 帧的单摆对象复制到图层 3 的第 1 帧。同时使图层 3 第 1 到 40 帧的图像一样。
(9)单击选中图层3的第1帧的单摆对象,两次按Ctrl+D键(重制命令),复制两“单摆”对象。精确调整它们的位置,使它们成为三个“单摆”对象。 (10)在图层 3 之上增加图层 4。复制图层2”的“单摆”对象到图层 4 的第 1 帧。 (11)单击图层 4 图层的第 21 帧,按 F6键,创建关键帧。再创建第 21 帧到 40 帧的旋转动画。然后,单击“图层 4 的 30 帧,按F6 键。 (12)选择图层 4 的第 30 帧,将该帧的“单摆”对象向右上方旋转(制作完毕)。
66
5.3 制作导向移动动画 一、导向移动动画的制作方法 1、首先建立沿直线移动的移动动画,例如圆球从左到右的动画。
2、选择上述含有动画的图层,作为被引导图层,然后单击时间轴左下角的“添加引导图层”按钮,创建引导图层。 3、选中引导图层的第1帧,在舞台工作区内绘制路径曲线。 4、选中被引导图层第1 帧,将移动对象(例如圆球)拖放到引导线的起始端,使对象的中心与路径起始点重合。单击动画结束帧,拖放移动对象到引导线的结束端,中心与结束点重合。 5、按回车键,播放动画。引导线在正式播放时不会显示出来。
67
实例12:云中翱翔的雄鹰 制作步骤: 1、设置舞台属性:宽800,高500;白色背景。
2、导入背景图像到图层1:将一幅风景图像导入到舞台工作区,使用任意变形工具调整它的大小和位置,锁定图层1。 3、在图层1上增加图层2,选中第1帧。将鹰图像(Gif格式)导入舞台工作区。 4、使用任意变形工具、套索工具等,对鹰图像进行修饰(可略)。 5、在图层2中创建鸟的直线移动动画(第1到50帧)。选择图层1的第50帧,按F5键插入普通帧。 6、在图层2上创建引导图层,用钢笔工具绘制引导曲线。使用箭头工具调整路径的形状。 7、将鸟图像拖放到引导线的起始端,与路径起始点重合;单击动画结束帧,将鸟图像拖到引导线的结束端,中心与结束点重合。 8、按回车键或Ctrl+回车键,测试动画效果。
68
5.4 制作形状过渡动画 什么是形状过渡动画? 形状过渡动画也叫变形动画,它是由一种形状对象逐渐变为另一种形状对象。Flash 可以将图形、打碎的文字和由点阵图像转换的矢量图形进行变形。 创建形状过渡动画的过程 1、选中一个图层,使它为当前图层,然后单击选中一个空白关键帧作为动画的开始帧。 2、在舞台工作区内创建一个符合要求的对象,作为初始对象。例如,绘制一个红色立体球。 3、选择形状动画的结束帧,按F6键,使其成为关键帧。 4、删除原对象,然后在舞台工作区内创建一个符合要求的对象,作为形状过渡动画的结束对象。 5、选中起始关键帧与结束关键帧之间的所有单元格,在动画属性面板的“补间”下拉列表框中选择“形状”选项。 在时间轴上,从初始到结束帧之间会出现一个指向右边的箭头,帧单元格的背景变为浅绿色,表示创建了形状动画。 变形动画不但可以改变初始对象的形状,还可以改变它的位置和颜色。
69
形状动画效果调整 形状动画效果调整的方法:
1、单击选中时间轴第1帧单元格,按Ctrl+Shift+H键,或通过菜单“修改”-“形状”-“添加形状提示”命令,即可在第1帧文字图形中加入一个关键点标记:a。重复上述过程,可以继续增加 b 到 z 25个关键点标记。 2、用鼠标拖动标记,分别放置在第 1 帧图形的不同位置。 3、单击选中结束帧,这时在结束帧图形中也有 a 、b……关键点标记(可能重叠在一起)。用鼠标将这些标记拖放到适当位置。 4、在起始关键帧的形状关键点用黄色圆圈表示,在结束关键帧用绿色圆圈表示。如果关键点的位置不在曲线上,将显示红色圆圈。 为了获得更好的形状效果,应注意以下原则: 如果过渡比较复杂,可以在中间增加一个或多个关键帧。 起始关键帧与结束关键帧中关键点标记的顺序应该一致。例如一条线上添加了3个关键点标记 a 、b 、c 。无论这条线如何变形,这三个点在线上始终保持 a 、 b 、c 的顺序。 最好使各形状关键点沿逆时针或顺时针方向对齐,并且从图形的左上角开始。
70
实例13:XYZ变换 “XYZ变换”动画播放后,屏幕上红色的字母“X”逐渐变形为绿色的“Y”,接着绿色的“Y”再逐渐变形为蓝色的字母“Z”。制作步骤: 1、用文本工具,在舞台输入字符“X”,红色、黑体、96号、加粗,并将其打碎。 2、在第 15 帧,按 F6 键插入关键帧。将字符 X 删除。输入绿色字符 Y,打碎。 3、选中 1 到 15 帧,在属性面板的“补间”下拉列表框中选择“形状”选项,创建变形动画。 4、选择第 1 帧,添加 5 个关键点标记(Ctrl+Shift+H),分别调整 X 和 Y 上的关键点标记的位置。 5、选择第 16 帧,按 F6 键,创建关键帧。选择 30 帧,按 F6 键,在 30 帧将字符 Y 删除,输入蓝色字符 Z 并打碎。 6、选择第 21 帧,添加 7 个关键点标记,分别调整 Y 和 Z 上的关键点标记。
71
5.5 遮罩图层与动画 遮罩图层的作用: 创建遮罩图层:
由于遮罩图层的存在,不能看到下面图层的内容。但可以透过遮罩图层中的图形看到下面图层的内容。 在遮罩图层上绘制的图形或输入的文字,相当于在遮罩图层上挖掉了相应形状的洞,形成挖空区域,挖空区域将完全透明,其他区域都是完全不透明的。通过挖空区域,下面图层的内容就可以被显示出来。 创建遮罩图层: 1、首先创建一个普通图层,在其上绘制图形、输入文字、导入图像或加入影片剪辑等。 2、选中刚刚创建的普通图层,在其上面创建一个新的普通图层。 3、在新建的普通图层上绘制图形、加入打碎的文字或影片剪辑等,作为遮罩图层中挖空的区域。 4、鼠标在新建图层上右键单击,选择“遮罩”菜单命令。此时,下面的普通图层的名字会向右缩进,表示已经被它上面的遮罩图层所关联,成为被遮罩的图层。
72
示例14:模拟探照灯光 制作过程: 1、在图层 1 的第 1 帧导入一幅图像,调整大小,使它与舞台一致。
2、新增图层 2。将图层 1 第 1 帧的图像复制到图层 2 的第 1 帧。两幅图像的位置、大小应一致。 3、隐藏图层 2。选中图层 1 的图像,打开菜单“修改”—“转换为元件”,将图层1的图像转换成影片剪辑。 4、打开属性面板,选择“颜色”下拉列表框中的“亮度”选项,将图像调暗。 5、在图层 2 上创建图层 3,在该图层创建一个圆形图形移动(1-60帧)的动画。分别在第 15、30、45 帧创建关键帧,调整圆形图形的位置和形状。 6、选中图层1、2的第 60 帧,按 F5 键创建普通帧。 7、选中图层 3,右键单击,选择“遮罩”项。
73
示例15:水泼荷花 制作步骤: 1、新建 Flash 文档,舞台尺寸 550×400 像素,白色背景。
2、将一副荷花图片导入到库中,然后将该图片放到舞台图层 1 第 1 帧。 3、调整图片尺寸:宽与舞台一致,高为舞台高度的 1/2,位置处于舞台上半部。 4、增加图层 2。将图层 1 的图片复制到图层 2 的第 1 帧,位置处于舞台的下半部分,然后将图层 2 的图片垂直翻转(菜单:“修改-变形-垂直翻转”)。 5、增加图层 3,锁定图层 1。选定图层 2 第 1 帧,即倒置的荷花图片,复制到图层 3 第 1 帧,位置在图层 2 荷花图片偏右下 1 到 2 像素(具体坐标为 1, 202)。
74
8、选中图层 4 的所有矩形长条,将它们转换为元件 2 (菜单:“修改-转换为元件…”)。
水泼荷花 6、选择图层 3 的荷花图片,将其转换为图形元件 1(菜单:“修改-转换为元件…”,名称为元件1)。通过属性面板设置其透明度(Alpha)为 70%。 7、增加图层 4,锁定其它图层。使用矩形工具,画矩形长条(长度与舞台一致,高度 15 像素)。复制多个矩形长条(长条之间均匀分布,布满舞台及舞台下方一定区间)。 8、选中图层 4 的所有矩形长条,将它们转换为元件 2 (菜单:“修改-转换为元件…”)。 9、选中图层 4 的第 40 帧,按 F6 键,将其设为关键帧。分别选中 1-3 图层的第 40 帧,按 F5 键,插入普通帧。 10、调整图层 4 元件 2 的位置:第 1 帧元件 2 处于靠上位置(与舞台底边对齐),第 40 帧元件 2 处于靠下位置(其顶部与舞台中部对齐)。
75
11、将图层 4 设为遮罩层。创建该图层 1-40 帧的运动动画。
水泼荷花 11、将图层 4 设为遮罩层。创建该图层 1-40 帧的运动动画。 12、在图层 4 上增加图层 5,在该图层上画无轮廓线的蓝色矩形盖住舞台下半部分。将蓝色矩形转换为元件 3,设置其透明度(Alpha)为 20%。完成!欣赏效果。
76
END
Similar presentations