Flash动画设计与制作教学

Flash动画设计与制作任课教师：王亚469134792Flash学习交流群探究动画动画原理

光的影像一旦在视网膜上形成,视觉将会对该光像的感觉维持0.05至2.0秒的短暂时间,这种现象被称为"视觉暂留"现象.动画原理便以人眼的"视觉暂留"特征为基础,通过快速更换静态图像,利用"视觉暂留"特性而在大脑中形成图像内容连续运动的感觉.

视觉暂留：人眼在观察事物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉现象并不立即消失，视觉的这一现象被称为视觉暂留。动画原理（1）19世纪20年代，英国科学家发现了人眼的“视觉暂留”现象（物体被移动后其形象在人眼视网膜上还可有约1秒的停留），揭示了连续分解的动作在快速闪现时产生活动影像的原理。动画原理（2）根据视觉暂留原理，当连续相互关联的图像（一般把静止的画面称为图像）快速变化时（每秒10帧以上，通常取每秒24帧），人眼看到的这个图像变化的过程就是视频。电影、电视、动画和计算机视频都是根据这个原理来实现的。传统动画的制作

传统动画使用画笔绘制一张张不动的、但又逐渐变化着的连续画面，经过摄像机或摄像机的逐格拍摄，然后以每秒钟２４格或２５格的速度连续播放，这时，所画的静止画面就在银幕上“活动起来”，这就是传统动画。《黑猫警长》动画片及制作花絮《黑猫警长》制作过程文字描述第一步：使用画笔绘制一张张不动的、但又逐渐变化着的边续画面。（在这过程中可能需要手绘上万幅图片）第二步：然后对这些图片使用摄像机或摄影机逐格拍摄。第三步：然后以每秒钟25帧的速度连续播放，这样就形成了动画。《大灌篮》片段观看视频并思考：女孩在翻书的时候"周杰伦"是会动的,他是怎么动起来的呢?提个醒：１、如果我们把“相册”换成“flash软件”；２、把相册中的每一页换成flash中的每一个关键帧；３、把每一页中的照片换成不同的豹子图片；４、把快速翻页换成按时间轴播放；逐帧动画你会了吗？补序++

在网络世界的今天，与Fireworks、Dreamweaver并称为“网络三剑客”，组成Macromedia公司“网络梦之队”的Flash，必将越来越流行。“闪客”的出现，更是丰富了我们的生活。Flash现在早已超出制作简单动画的范围，它更可以：◆◆制作声光效果绝佳的开场画面◆◆制作网页上的广告◆◆制作交互式网页的接口◆◆制作各种小游戏◆◆作为电子礼物（举例）

Flash简介

因特网上现在已有成千上万个Flash个站点，著名的微软MSN新闻站以及Intel、奥迪等世界著名企业主页都大量采用了大量的Flash动画。

到现在，Flash已经发展到了FlashCS4，随着其功能的不断加强，它已从以前的小插件一跃成为互联网动画制作新生力量的代言人。推荐使用flash8中文版，实用而又稳定。Flash以*.fla为其源文件，以*.swf为生成的效果文件（就是平时网上下载的动画格式）。随着应用的不断推广，Flash也可以生成*.exe文件，可以在没有安装Flash的机器上很好的直接运行。通过格式的转化，还可以将动画变为*.html、*.mov等等！一、Flash简介Flash是当前最流行的动画制作软件，用它制作的Flash电影已经在无数网站和很多相关领域广泛应用。很多游戏软件也是采用Flash制作的。Flash以帧来组织动画,帧与帧之间采用渐变过渡动画.因此,制作动画时,只要将某段动画的第一帧和最后一帧制作出来,中间的移动、旋转、变形、颜色改变等过程都可以由Flash自动完成，因此，动画制作的过程被大大简化了。Flash图形系统是基于矢量的，只需存储少量的向量数据就可以描述一个看起来相当复杂的对象，这样，其占用的空间很小，与位图相比具有明显的优势，非常适合在低带宽的互联网中使用。使用矢量图形的另一个好处还在于，无论将它放大多少倍，图像都不会失真。1制作简单方便2矢量动画，文件占用空间小（一）Flash的主要特点SWF文件（Flash标准的发布文件）采用信息流传送方式，可以边下载边播放，不用等待整个文件全部下载完才能观看动画。3流式下载方式4强大的交互功能

在Flash中，高级交互事件的行动控制使Flash动画的播放更加精确并容量控制。设计者可以动画中加入滚动条、复选按钮、下拉菜单和拖动物体等各种交互组件等等。（二）Flash动画的分类在Flash中可以创建三类动画：1逐帧动画它由若干个关键帧组成，而每个关键帧的内容都需要制作。逐帧动画适合在每一帧中都要改变不同图像的动画。2补间动画（补间形状和补间动作）补间动画是指用户创建了两个关键帧后，中间的帧由Flash根据其属性的不同自动创建出具有过渡效果的动画。二、Flash启动及界面介绍

启动后，系统会显示出完整的Flash界面，界面的中间是舞台，舞台类似于其它软件中的画布，我们可定义动画的尺寸和舞台的颜色。舞台是显示影片中各个帧内容的区域，可以在其中直接绘制图像，也可以在舞台中安排导入的图像。舞台的上方是时间轴，它控制着整个动画的时间维度。

时间轴最重要的组成部分就是帧和图层。时间轴的每一个小方格表示动画中的一帧，一个动画中可以有几条并发的时间轴，每一条时间轴对应于一个运动实例。运动实例分布在图层上，不同图层上的实例是相互独立的，它们的动互不影响。3交互式动画

交互式动画也称为行为动画，它是指在上述两类动画的基础上添加ActionScript动作脚本，根据用户响应（例如键盘或鼠标移动到影片中的某一区域、移动对象、输入信息）在影片中执行交互式动作。常用快捷键的使用1、Shift：绘制正圆2、Alt：由中心向四周绘制椭圆3、Alt+shift：由中心向四周绘制正圆椭圆工具的使用1、颜料桶工具：用来更改填充色2、墨水瓶工具：用来更改边框色注：用选择工具在图形内部双击可以将填充和边框全部选中。更改椭圆的颜色1、散件（图形）：选中对象时出现网纹形状称为散件。散件的特点是可以整体选择移动，也可以部分选择移动。2、散件转变成元件快捷键：F83、元件的分类：（1）图形

（2）影片剪辑

（3）按钮散件如何转变成元件帧的概念1、帧：指的就是图片或画面，一帧指的是一张图片一个画面。2、关键帧：指关键的图片或画面，也是我们做动画时主要制作的画面。3、关键帧的分类（1）有图像的关键帧（简称关键帧），用●表示。（2）无图像的关键帧（简称空白关键帧）用○表示。1、帧速率（帧频率）：所谓帧频率指的是单位时间内播放多少张画面或图片。2、帧速率的大小关系：帧速率越大，表示单位时间内播放的画面多，也就意味播放的速度快，如果帧速率越小，表示单位时间内播放的画面少，也就意味播放的速度慢。帧速率1、动画的分类：（1）位移动画（2）形变动画（3）逐帧动画（4）路径动画（5）蒙版动画（6）脚本动画2、常用快捷键Ctrl+2：满画布显示F6：插入关键帧，并且复制上一关键帧的画面。Shift：水平或垂直移动对象Enter:用flash软件播放动画Ctrl+Enter:用flash播放器播放动画。动画实例—球体移动1、常用快捷键的使用（1）Shift：绘制正方形（2）Alt：由中心向四周绘制矩形（3）Alt+shift：由中心向四周绘制正方形2、矩形属性面板（1）矩形属性面板可以设置矩形的各种属性：如：圆角大小等。当将圆角值设为正数，表示是外圆角，如果数设为负数，表示是内圆角。同时可以设置四个角的圆角度是否同时设置。（2）单击矩形边框可以选择一条边，双击可以选择所有边。3、多边形属性面板（1）利用多边形工具可以绘制多边形和星形两种图形。（2）可以设置多边形的边数和星形的角数。矩形和多边形工具的使用（1）文档属性：可以设置文档（舞台）的颜色，舞台的大小，帧频率等。（2）散件属性：可以设置散件大小、边框色、填充色、边框粗细、边框的线型等。（3）元件属性；可以设置元件的亮度、色调、Alpha不透明度等。设置文档、散件和元件的属性（1）颜料桶工具可以改变填充色也可以设置径向渐变的高光点。（2）在设置元件属性时一定要选中元件对象。（3）任意变形工具：可以设置对象的大小、角度和倾斜角度等。在设置对象大小时按住shift键可以等比例调整对象大小。（4）放大镜工具：可以放大视图，按住alt键也可以缩小视图。动画实例—球体渐隐渐显在帧属性中可以设置以下参数（1）缓动：改变对象运动时速度的变化。是越来越快还是越来越慢。还是一直保持匀速运动。（2）旋转：设置对象移动时旋转的方向，可以按顺时针旋转也可以按逆时针旋转。以及旋转圈数的设置。帧属性Ctrl+2：满画布显示动画实例—球体旋转常用快捷键Ctrl+z:撤消F7：插入空白关键帧Ctrl+c：复制Ctrl+v：粘贴（默认是粘贴画布的中心）Ctrl+shift+v：原位置粘贴动画实例—球体弹跳钢

笔

工

具（1）钢笔工具可以绘制直线也可以绘制曲线（2）为了避免曲线的控制手柄影响后面所绘制的图形，可以用钢笔工具在曲线点上单击减掉一边控制手柄。（3）构成直线的点叫直线点，构成曲线的点叫曲线点。直线点无控制手柄，曲线点有控制手柄。（4）钢笔工具所绘制的图形如果需要修改可以用部分选取工具。改变图形的形状其实就是修改节点的位置。钢笔工具的使用（1）添加锚点工具可以用来在所绘制的图形（直线和曲线）上加点。（2）删除锚点工具可以用来在删除图形（直线和曲线）上的节点。（3）转换锚点工具可以实现直线点和曲线点的相互转换。用转换锚点工具在曲线点上单击可以将曲线点转换成直线点，在直线点上单击并拖动可以将直线点转换成曲线点。添加、删除节点以及直线和曲线的相互转换闭合和不闭合图形的相互转换（1）闭合图形变成不闭合图形：可以选中一条边或边中某个部分直接删除。（2）不闭合图形就成闭合图形：可以使用钢笔工具画闭合是用选择工具。（3）磁铁工具的使用动画实例--心动1（1）显示标尺：视图—标尺（快捷键：ctrl+shift+R）（2）辅助线：可以直接拖动标尺，不要辅助线可以再拖回去。（3）按住alt键用鼠标拖动图形可以复制对象（4）要想对物体镜相可以使用：修改—变形—水平翻转（5）“窗口—颜色”中渐变类形：线型、放射状（6）渐变编辑：改变颜色、加色、减色。（7）帧属性中的旋转圈数只能设置为整数，不可以设置为小数。（1）F5：加帧（延长帧）（2）shift+F5：删除帧动画实例--心动2图层、库与元件（1）图层：像透明玻璃（2）图层的作用：方便对图形和动画的管理。对图形的管理：可以避免散件间重叠时发生镂空影响。对动画的管理：可以在某一时刻同时出现多个动画。图

层（1）新建图层（2）删除图层（3）图层改名：直接放在图层名称上双击。（4）按住alt键单击表示隐藏或显示其它所有的图层。图

层

（1）锁定图层（2）图层中对象的显示方式，是以实体显示还是用轮廓显示（3）按住alt键单击表示设置其它所有图层的显示方式。图

层

文本工具文本工具

（1）文本的分类：A、静态文本B、动态文本C、输入文本（2）文本的属性设置包括：字体、大小、字母间距、对齐方式、方向、链接等。（1）文本的颜色设置：文本默认只能设置单色，如果想填充渐变，必须将文本转变成散件。（2）对于一个文字只需要分离一次就能变成散件，而对于多于一个文字以上的需要分离两次才能变成散件。（3）对于多个文字在填充渐变时默认是一个文字中填充一个渐变，可以利用颜料桶工具拖动将这些文字整体应用一个渐变。注意在拖动时一定要将落点落在文字内部，否则将无效。（4）填充变形工具：可以设置渐变的方向、角度、过渡区域的大小。文本编辑

（1）文本转换成散件后，文本的属性将丢失。（2）要想将边框变成填充可以用：修改—形状—将线条转换成填充。文本编辑（1）隐藏或显示辅助线：视图—辅助线—显示辅助线。（2）fla：flash的原文件。这种格式的特点是：只能用fllash软件才能打开，并且会保留动画的制作方法。（3）swf：swf格式的文件是依赖于flash的播放器打开的。这种格式的文件比较小，适合在互联网上传播。（4）exe：是在swf格式