第1章Flash基础1.2Flash动画设计与制作《flash动画设计与制作》是利用计算机进行平面动画设计和制作的重要基础课程。课程概括性的介绍平面动画设计的基本原理和基本知识,着重讲解Flash软件的使用方法,结合实例练习,使学生掌握对象的绘制与编辑、图层与帧、元件、实例与库等动画制作的基础知识和技巧,在此基础上,讲解音视频的导入与编辑、“Actionscript和组件的应用,使学生掌握更复杂的动画设计和制作方法。课程简介1.3Flash动画设计与制作大作业的基本要求2.作品中至少包括以下操作:•新建动画文件,并保存为fla格式;•用绘图工具绘制较复杂的图形;•使用逐帧动画、传统补间动画、形状动画、引导动画、遮罩动画中的至少3种;•使用简单的ActionScript动作;•使用音频、视频。1.4Flash动画设计与制作大作业的基本要求3.个性化设计和有创意的表现•动画作品要求有一定的设计主题,如某广告、自我介绍等;•图形图像素材的选取要符合主题;•画面设计元素和编排形式要原创,突出个性;•鼓励用不同的方法达到所需求的效果。1.5Flash动画设计与制作大作业的基本要求4.作品提交形式建立以“姓名”命名文件夹,存放以下文件:•作品fla格式的源文件•作品的swf文件;•作品设计步骤文字说明,包括主要设计界面的截图和设计步骤说明,以Word文档的形式保存。1.6Flash动画设计与制作1Flash基础2绘图基础3.逐帧动画4.形变动画5.运动动画6.轨迹动画7.遮罩动画8.影片剪辑9.按钮的制作使用10.多媒体动画的制作11.ActionScript语言基础12.常用的Action行为13交互式动画14时间轴特效和行为15.测试、发布与导出动画16.综合实例课程概况LOGO妙趣横生的Flash动画世界Flash实例电视机1.9Flash动画设计与制作综观历史,人类对信息交流与信息传递的探索从未停止过,早在原始社会,我们的祖先只是透过“五感”——视觉、味觉、听觉、嗅觉及触觉来感受外界信息并彼此进行交流。随着历史车轮的推进,人类开始用各种不同的信息传递方式来表达意念,无论是旧石器时代的洞穴岩画,还是文字的发明,都是人类进行信息交流与信息传递的伟大变革。人类的祖先不仅学会用图形图像传递信息,而且还发明了一系列抽象的符号——数字和文字等来表达思想及行为。与此同时,人类的祖先也注意记录运动中的形态和通过动感来表现和传达信息。1.1Flash动画的基本概念动画的起源1.10Flash动画设计与制作动画本身也是一种信息传递的方式,它虽然是近代的产物,但考古学家在3万多年前的岩洞中就已经发现了最早的动画作品——一头长有八条腿的运动中的野猪。后来,人们又发现了六只翅膀的燕子、古代埃及壁画中的摔跤连续图、希腊陶瓶上的人跑步连续动作装饰图案等。可以说是动画原理的萌芽。但这种早期的动画并没有真正表现出物体运动的时间和空间形态,所以人们把这种早期的动画现象称之为“原始意象动画”。1.1Flash动画的基本概念动画的起源1.11Flash动画设计与制作“动画”(Animating)一词,在词典中的解释是“赋予生命”的意思,从这个角度来讲,它是给原本没有生命的形象赋予栩栩如生的幻觉动作。动画的应用范围非常广泛,既是老少皆宜的信息传递方式,又是艺术与技术紧密结合的产物。其实动画的起源也就是电影的起源,电影技术早期就是用动画的原理来进行实验的,动画和“故事片”、“记录片”等影片一样,也是电影类型之一,但动画中的动感原理是通过人的幻觉产生的,这种幻觉就叫做“视觉残像”也成“视觉暂留”。什么是动画1.1Flash动画的基本概念1.12Flash动画设计与制作视觉暂留的原理:是指当所见之物立即消失后,其影像仍会在人们的视网膜中残留1/24秒的现象。这就是会动的卡通的基本原理。例如:在房间里把灯关掉,拿着手电筒快速地旋转,大家会看到一个光环,这也是视觉暂留的一种现象。什么是动画1.1Flash动画的基本概念动画原理动画的基本原理与电影、电视一样,都是视觉原理。医学已证明,人类具有视觉暂留的特性,就是说人的眼睛看到一幅画或一个物体后,在1/24秒内不会消失。利用这一原理,在一幅画还没消失前播放下一幅画,就会给人造成流畅的视觉变化效果。动画制作就是将好多幅画面连续播放就产生了动画效果。用“视觉暂留”原理制作的奇妙图片欣赏1.15Flash动画设计与制作传统动画我们所说的传统动画片是产生了1个多世纪的一种艺术形式,用最简单的话说就是:会“动”的画,和电影一样,他是利用人类眼睛的‘视觉暂留’现象,而使一幅幅静止的画面连续播放,看起来像是在动。他应该归类于电影艺术。不同于通常意义的电影之处在于:它的拍摄对象不是真实的演员,而是由动画师画出的动画形象。在动画片里演员就是动画师本人,戏演得好坏和这个动画师的本身素质有着紧密关系。1.1Flash动画的基本概念1.16Flash动画设计与制作传统动画传统动画片是用画笔画出一张张不动的、但又是逐渐变化着的连续画面,经过摄影机、摄像机或电脑的逐格拍摄或扫描,然后,以每秒钟24格或25桢的速度连续放映或播映,这时,我们所画的不动的画面就在银幕上或荧屏里活动起来,这就是传统动画片。1.1Flash动画的基本概念1.17Flash动画设计与制作Flash是Adodb公司推出的一款多媒体动画制作软件,FlashCS4是其最新版本。利用该软件不但可以制作出集音乐、声效、动画于一体的高品质动画,还可以制作出交互式影片和具有完备功能的网站。Flash动画采用的是矢量绘图技术,矢量图的特点是图像可以无限放大而不会失真。由于动画是由矢量图构成的,这就大大地缩小了动画文件的容量,在网络带宽限制的情况下,提升了网络传输的效率,可以方便地下载观看,一个几分钟的flash动画片也许只有1~2兆字节大小。所以Flash一经推出,就风靡网络世界。现在更是许多专业与非专业设计者的首选动画制作软件。什么是Flash1.1Flash动画的基本概念1.18Flash动画设计与制作•Flash的前身是JonathanGay在学生时代编写的绘图程序SuperPaintII•1993Jonathan成立了自己的公司FutureWave•1995开始动画软件的开发,并将其绘图软件SmartSketch更名为FutureSplashAnimator•1996与Macromedia公司合作将并将FutureSplashAnimator更名为MacromediaFlash1.0•之后版本不断升级,从Flash2.0、Flash3.0、Flash4.0、Flash5.0、FlashMX、FlashMX2004到现在的FlashCS4Flash的起源与发展1.1Flash动画的基本概念1.19Flash动画设计与制作•体积很小•不会失真•互动性强•支持音、视频•简单易学Flash动画的特点1.1Flash动画的基本概念1.20Flash动画设计与制作•Flash网页动画•Flash动画短片•Flash视频动画•Flash多媒体软件开发•FlashMV•Flash交互网站与游戏开发flash的应用领域1.1Flash动画的基本概念1.21Flash动画设计与制作Flash引领网络动画1.1Flash动画的基本概念1.使用矢量图形和流式播放技术。矢量图形可以任意缩放尺寸而不影响图形的质量;流式播放技术使得动画可以边播放边下载,从而缓解了网页浏览者焦急等待的情绪2.通过使用关键帧和元件使得所生成的动画(.swf)文件非常小3.把音乐、动画、声效、交互方式融合在一起4.强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画,通过ActionScript可以实现交互性,是Flash具有更多的设计自由度,另外,它与当今最流行的网页设计工具Dreamweaver配合默契,可以直接嵌入网页的任一位置,非常方便1.22Flash动画设计与制作矢量图与点阵图帧图层元件1.1Flash动画的基本概念Flash动画的基本知识1.23Flash动画设计与制作点阵图形:也称位图,是以称为像素的彩色点来描绘图像,是非分辨率独立性的矢量图形:是用称为向量的直线或曲线来描绘图像,是分辨率独立性的矢量图点阵图矢量图与点阵图1.1Flash动画的基本概念1.24Flash动画设计与制作位图放大后失真1.1Flash动画的基本概念1.25Flash动画设计与制作矢量位图放大后不失真1.1Flash动画的基本概念1.26Flash动画设计与制作Flash动画的类型1.1Flash动画的基本概念补间动画是FlashCS4新增的功能核心之一。使用补间动画可设置对象的属性,如一个帧中以及另一个帧中的位置和Alpha透明度。Flash然后在中间内插帧的属性值。对于由对象的连续运动或变形构成的动画,补间动画很有用。补间动画在时间轴中显示为连续的帧范围,默认情况下可以作为单个对象进行选择。补间动画功能强大,易于创建。1.27Flash动画设计与制作Flash动画的类型1.1Flash动画的基本概念传统补间传统补间与补间动画类似,但是创建起来更复杂。传统补间允许一些特定的动画效果,使用基于范围的补间不能实现这些效果。反向运动姿势反向运动姿势用于伸展和弯曲形状对象以及链接元件实例组,使它们以自然方式一起移动。可以在不同帧中以不同方式放置形状对象或链接的实例,Flash将在中间内插帧中的位置。1.28Flash动画设计与制作Flash动画的类型1.1Flash动画的基本概念补间形状在形状补间中,可在时间轴中的特定帧绘制一个形状,然后更改该形状或在另一个特定帧绘制另一个形状。然后,Flash将内插中间的帧的中间形状,创建一个形状变形为另一个形状的动画。1.29Flash动画设计与制作Flash动画的类型1.1Flash动画的基本概念逐帧动画使用此动画技术,可以为时间轴中的每个帧指定不同的艺术作品。使用此技术可创建与快速连续播放的影片帧类似的效果。对于每个帧的图形元素必须不同的复杂动画而言,此技术非常有用。1.30Flash动画设计与制作动画的基本类型•(1)逐帧动画•(2)运动渐变动画1.31Flash动画设计与制作逐帧动画•逐帧动画是由许多单个的关键帧组合而成的,适合制作一个动画在每个帧上都有关键性变化的情况。•要创建逐帧动画,需要将每个帧都定义为关键帧,然后给每个帧创建不同的图像。•创建逐帧动画实例1.32Flash动画设计与制作创建逐帧动画实例•步骤1:新建一个文件,利用属性面板可以设置场景为合适的大小和背景色。•步骤2:选择第1帧作为逐帧动画的起始帧,单击右键,在弹出的下拉菜单中选择“插入关键帧”。•步骤3:在第1帧上创建插图。可以使用绘画工具、从剪贴板中粘贴图形,或导入一个文件,这里我们导入一张图片。•步骤4:拷贝第1帧的内容,单击第2帧,将第1帧中的内容粘贴到第2帧上,单击“编辑多个帧”按钮,并用“选择工具”将图形调整一下位置。•步骤5:重复步骤4,完成第3-10帧的动作。•步骤6:单击“编辑多个帧”按钮,取消显示,按“Enter”键测试动画,保存。1.33Flash动画设计与制作运动渐变动画•运动渐变动画的创建–运动渐变实际上是一个对象移动的两点关键帧间的变化。在两个关键帧上可分别定义不同的属性,如尺寸、颜色、角度等。–运动渐变动画创建实例•形状渐变动画的创建–形状渐变动画与运动渐变一样,但更主要的是外形的改变。–形状渐变动画创建实例1.34Flash动画设计与制作运动渐变动画的创建实例•步骤1:新建一个文件,利用属性面板设置场景为合适的大小和背景色。•步骤2:从电脑中导入图片作为动画的主体。•步骤3:选中图片单击“修改”/“转换为元件”命令,打开“转换为元件”对话框,将元件命名为“moon”。•步骤4:在第30帧处插入关键帧,并把鼠标放在1-30帧中任意一帧,点右键,在弹出的下拉菜单中选“创建补间动画”。然后单击第30帧,把图片拖到右下角。•步骤5:将图片移到左上角,单击右键,从弹出菜单中单击“时间轴特效”/