《第5讲Flash初步与矢量图高教书苑》由会员分享，可在线阅读，更多相关《第5讲Flash初步与矢量图高教书苑（45页珍藏版）》请在金锄头文库上搜索。
1、1第第第第5 5讲讲讲讲 Flash Flash 初步与矢量图初步与矢量图初步与矢量图初步与矢量图12 2教师信息q教师：q电子信箱：q办公室：q电话：2复习与回顾34教学目的q了解动画基本原理q了解动画的分类与存储格式q了解动画制作软件Flash CS4q初步熟悉Flash的工作环境 q掌握Flash的基本设置与操作q掌握Flash中各种工具的使用q学会绘制矢量图45重点和难点q重点q影片文档属性的设置q工具面板和属性面板的使用q绘制矢量图q理解Flash的两种文件格式：fla 和 swf q难点q面板的使用q绘制矢量图5动画的原理q19世纪20年代，英国科学家发现了人眼的“视觉残留效应”（
2、物体被移动后其形象在人眼视网膜上还可有约1秒的停留），揭示了连续分解的动作在快速闪现时产生活动影像的原理。q根据“视觉残留效应”原理，当连续相互关联的图像快速变化时，人眼看到的这个图像变化的过程就是视频。电影、电视、动画和计算机视频都是根据这个原理来实现的。6动画的产生q传统动画是将具有差异的图片绘制在胶片上，然后通过摄像机连续拍摄图片画面，胶片播放时实现动画。q计算机动画技术，将动画中的关键动画(关键帧)输入计算机，动画的中间过程由计算机自动产生。7计算机动画的类型-1q二维动画q二维动画只要制作关键帧图像，关键帧之间的图像通过计算机计算得到的插值方法来自动实现。q二维动画最常用的是基于角色
3、动画。角色可以是：线条、形状、文字、图像或另一段动画。q二维动画分类q逐帧动画：角色变化没有规律可寻，需要一帧帧地制作，然后连续播放。q渐变补间动画：角色变化有一定规律，可以制作好角色的初始状态和最终状态，由计算机来产生中间变化过程。q制作二维动画软件qVB、JAVA程序设计语言qAdobe公司的Flash CS4就是用来制作二维动画qGIF Animation用来制作短小的GIF动画8计算机动画的类型-2q三维动画q二维动画是平面的，只有上下左右的运动效果。三维动画还有前后（纵深）的运动效果，所以增加了立体感和空间感。 q运用建模、透视与消隐等功能后，就制作出简单的框架结构的立体画面。q三维
4、动画，也是由连续渐变的一幅幅画面组成。每一幅画面是一张静态的三维透视图。q制作三维动画软件qVRML语言q3DSMAX、MAYAqUlead公司推出的Cool 3D可以快速建立三维图形，通过设置关键帧，快速完成动画。9计算机动画的类型-3q虚拟现实q虚拟现实，英文名为VirtualReality，简称VR技术，也称假想现实，也就是用计算机合成人工世界。q虚拟现实的最大特点是用户可以与虚拟环境进行人机交互，将被动式观看变成更逼真地体验互动。q应用于旅游、房地产、大厦、别墅公寓、写字楼、景点展示、观光游览、酒店饭店、宾馆餐饮、园林景观、公园展览展示、博物馆，地铁、机场、车站、码头等行业项目展示、宣
5、传。10常用的动画存储格式qGIF动画格式qGIF图像文件的数据是经过无损压缩的，在一个GIF文件中可以存多幅彩色图像，把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。qAVI格式qAVI是对视频、音频文件采用的一种有损压缩方式，该方式的压缩率较高，并可将音频和视频混合到一起，其应用范围非常广泛。 qSWF格式qSWF是ADOBE公司的动画设计软件Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计，动画制作等领域 。qFLIC FLI/FLC 格式q FLC/FLI是Autodesk公司在其出品的2D、3D动画制作软件中采用的动画
6、文件格式。Autodesk Animator和3DSudio等动画制作软件均采用了这种彩色动画文件格式。 qMOV、QT格式q MOV即QuickTime影片格式，它是Apple公司开发的一种音频、视频文件格式。qQt是诺基亚开发的一个跨平台的C+图形用户界面应用程系框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。 q虚拟现实动画（VR）qVR是一项综合集成技术，涉及计算机图形学、人机交互技术、传感技术、人工智能等领域，它用计算机生成逼真的三维视、听、嗅觉等感觉，使人作为参与者通过适当装置，自然地对虚拟世界进行体验和交互作用。 1112Flash背景知识qAdobe Fla
7、sh简介qAdobe Flash前称Macromedia Flash，简称Flash。q自从Macromedia公司于2005年被Adobe公司收购，Flash也就成为了Adobe旗下的软件。qAdobe Flash 特点 q基于矢量绘图q流式播放技术q多媒体特性q强大的交互功能q广泛的平台支持q易学易用、可扩展性好qFlash与网络联系密切，其大量的特性是与网络相关的。可以说，没有网络的结合，Flash绝对不能取得如此大的成功。12Flash 特点-基于矢量绘图q矢量图像仅由线条和线条所封闭的填充区域组成，所需存储空间小，可任意缩放尺寸而不影响画面质量。q位图图像由大量的像素点组成，比较逼真
8、，但所需存储空间大，随着图像尺寸的放大画面品质将大幅度下降。13Flash 特点-流式播放技术q流式（stream）播放技术使得动画可以边播放边下载，从而缓解浏览者焦急等待的情绪。qGIF动画需等到动画全部下载完毕后才能观看，对于大动画等待时间过长。14Flash的特点-多媒体特性q可以将动画、视频、音乐、声效等有机融合在一起q支持多种图像格式文件导入q可导入Photoshop、Illustrator、Freehand等软件制作的图形和图像q可导入Adobe PDF电子文档和Adobe Illustrator 10文件q支持视频、音频文件导入q可从外部调用视频文件q可使用MP3q支持多种动画输
9、出格式qSWF、SPL、GIF、AI、BMP、JPG、PNG、AVI、MOV、MAV、EMF、WMF、EPS、DXF15Flash的特点-强大的交互功能q内置的ActionScript脚本语言，易于精确实现复杂的交互事件行为控制q可在动画中加入滚动条、复选框、下拉菜单和拖动物体等各种交互组件。q可与Java或其他类型的程序融合在一起，在不同的操作平台和浏览器中播放。q支持动态数据交互，ASP功能的全面嵌入使其可用于动态电子商务网站及虚拟社区等的建设。16Flash的特点-广泛的平台支持q任何安装有Flash Player插件的网页浏览器都可以观看Flash动画，目前已经有95%以上的浏览器安装
10、了Flash Player，几乎包含了所有的浏览器和操作系统。IE、Firefox、Opera 17Flash的特点-易学易用、可扩展性好q强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画。q通过第三方开发的Flash插件程序，可以方便地实现一些以往需要非常繁琐的操作才能实现的动态效果，大大提高了Flash影片的制作效率。18Flash的发展史qFuture Splash Animator (1995年)-由简单的工具和时间线组成 qMacromedia Flash 1 (1996年)-Macromedia更名后为Flash的第一个版本 qMacromedia Flash 2 (1
11、997年)-引入库的概念qMacromedia Flash 3 (1998年)-影片剪辑，Javascript插件，独立播放器 qMacromedia Flash 4 (1999年)-文本输入框，ActionScript，流媒体，MP3 qMacromedia Flash 5 (2000年)-HTML文本格式和Smart Clip(智能影片剪辑)qMacromedia Flash MX (2002年)-Unicode，组件，XML，流媒体视频编码 qMacromedia Flash MX2004 (2003年)-ActionScript2.0，流媒体视频行为 qMacromedia Flash
12、 8 (2005年)-为移动设备开发的功能，创建Flash WebqAdobe Flash CS3 (2007年)-Adobe耗资34亿美元并购MacromediaqAdobe Flash CS4 (2008年年)- Actionscript 3.0，针对 Adobe AIR进行创作 qAdobe Flash CS5 Professional (2010年)-FlashBuilder、TLF文本支持 qAdobe Flash CS6 Professional (2012年)-支持HTML、3D转换 19Flash CS4启动界面20Flash CS4工作界面的组成q菜单栏q舞台和工作区q时间轴
13、q工具面板q属性面板q其他面板属性面板属性面板舞台和工作区舞台和工作区时间轴时间轴工具面板工具面板2122Flash 的工作环境之场景qFlash中，制作影片的工作区域。类似话剧、电影等的场景，在Flash里以场景的形式来划分时间段或故事情节。q在制作动画的过程中，可以根据创作的需要随时添加、复制、移动、修改或删除场景。q场景在flash中是不可缺少的(至少要有一个场景)。qFlash在编辑的时候，只有一个当前场景处于显示状态。qFlash动画播放的时候，默认的播放顺序就是按照场景的先后次序依次播放。q一个Flash文件中可以包含多个场景，播放时依次逐个播放依次逐个播放qq提示：提示：对于帧数
14、多的，又便于“分段”的动画，应该分场景制作q场景管理使用“场景”面板q可以使用ActionScript的相关语句进行播放控制。 22场景的操作q在菜单栏选择“插入/场景”命令，插入空白场景。q使用编辑栏上的“编辑场景”按钮，可以快速切换场景。q在菜单栏选择“窗口/其他面板/场景”命令，打开“场景”面板，可以看到当前文件场景的列表。编辑栏中的编辑栏中的“编辑场景编辑场景”按钮按钮场景面板场景面板2324Flash 的工作环境之面板q面板q作用类似于对话框，用于进行相关设置。q通过窗口菜单可以显示或关闭各种面板。qFlash中面板包括4大类共有20几种。q常用面板q属性面板 q工具面板q库面板 q
15、时间轴面板 2425Flash CS4面板_属性面板q属性面板是一个综合性的面板。q可以设置图形、图像、元件，以及工具和文档的有关属性。q例如，选用“文本”工具时，就可以设置文本的字体、字号、颜色等属性。q提示：属性面板中的内容随用户所选定的内容的不同而变化。2526Flash 面板_工具面板2627Flash 面板_库面板q元件（Symbol）q元件也被称作符号或图符，是Flash动画的重要组成部分，元件对象可以应用于当前动画或其他动画中。q元件的主要特性是可以被重复利用，且不会影响影片的大小。 qFlash中包括三种元件类型，分别为图形元件、影片剪辑元件与按钮元件，每一种元件都具有独特的属
16、性 。q库（Library）qFlash中的所有元件都被归纳在库面板中，库可以理解为保存各种元件的文件夹，当元件被创建后，将自动保存到库中。q应用库面板中的元件时，只需将元件从库中拖拽到场景舞台。q即使在场景中将所有元件全部删除，也不会影响库面板中的元件。2728Flash 面板_时间轴面板q主要用于组织和控制影片中图层和帧的内容，使这些内容随着时间的推移而发生相应变化。q设计者可以将不同的对象安排在时间轴内，让不同的对象或图层上的部件，有一个共同的时间标准。只要对准了同一帧，就可保证所有的动作都会在同一时间发生。q时间轴最重要的组成部分：帧、图层和播放头。2829图层图层帧帧播放头播放头时间
17、轴时间轴时间轴面板示意图2930Flash 的工作环境之工具栏q工具栏q主工具栏命令按钮q编辑栏场景编辑、元件编辑、显示比例q控制器控制影片播放q通过“窗口/工具栏”打开或关闭各个工具栏30基本操作q工具面板中的复合工具和提示q 面板的折叠与展开、打开与关闭、移动及变形q通过折叠按钮实现面板折叠与展开q通过“窗口”菜单实现面板打开与关闭q通过鼠标拖动实现面板移动及变形q “基本功能”菜单q可以切换工作界面的布局3132动画的制作过程-1q创建新文件或打开文件q设置 文档属性q通过菜单“修改/文档”或“属性面板”设置q导入文件(素材)q通过菜单“文件/导入”可以导入q导入到舞台(将素材导入到舞台
18、，同时也导入到库) q导入到库(将素材只导入到库) 3233动画的制作过程-2q创建动画q在舞台上和时间轴中排列各种对象元素，以定义它们在动画中显示的时间和显示方式。q常用的动画q逐帧动画q形状补间动画q动作补间动画q动画参数设置3334动画的制作过程-3q播放q在编辑环境中演示动画。q控制器、按回车、“控制”菜单。q测试q在独立窗口中演示动画。q相当于发布成SWF影片后，用播放器播放（按CtrlEnter）。q会自动生成SWF文件。q发布q“发布”就是把Flash编辑成果以多种形式保存。q“发布设置”对话框上设置保存形式。q“发布预览”保存成设置形式，并在在独立窗口中播放 。3435动画的制
19、作过程-4q保存文件的几种格式qFlash文件（扩展名fla）qFlash的编辑格式q影片文件（扩展名swf） SWFq用Flash播放器播放SWF文件可与播放器集成q网页中用插件（Active控件）播放q动画GIF（非逐帧动画不能用此方式）3536课堂示例1：矢量图绘制q利用绘图和文字工具，绘制矢量图和文字q知识点：q文档属性设置q文字工具q线条工具q多角星形工具36课堂示例1-关键步骤q新建Flash文件，“属性面板”设置文档属性：舞台颜色设置为蓝色；q“文本工具”输入并设置文字格式；q字体Blackadder ITC，颜色#00FFFF ，大小100点，间距20；q分离两次q墨水瓶工具（
20、黄色描边）q利用“椭圆”工具画椭圆，利用“箭头”工具拉出心形，注意笔触颜色和填充颜色；q注意有无按Ctrl键的不同q“线条工具”绘制直线：黄色，笔触大小2；按样张做成弯曲形状；q“矩形工具”展开运用“多角星形工具”绘制五角星：注意笔触颜色和填充颜色；q保存为“矢量图.fla”，导出为“矢量图.swf”。3738课堂示例2：艺术的制作 q利用绘制工具绘制有规律矢量图形。q知识点：q文档属性设置q椭圆工具q颜料桶工具q任意变形工具q变形面板3839课堂示例2-关键步骤q修改文档背景为浅棕黄色；q“椭圆工具”绘制椭圆，改变椭圆形状；q设置笔触颜色为红色q按Ctrl键，用鼠标拖动椭圆边缘改变形状q打开
21、“颜色面板”，设置红到白的渐变色；q“颜料桶工具”填充椭圆，绘制单片形状；q（注意渐变变形工具的使用）q利用“任意变形工具”将单片形状的中心调整到底端；q利用“变形面板”，设置旋转角度为90度，并点击“重置选区并变形”按钮复制该形状形成艺术形状；q保存为“艺术.fla”，导出为“艺术.swf”。重制选区并变形重制选区并变形3940课堂示例3：去掉图片背景 q去掉老虎的白色背景，并复制。q知识点：q素材的导入q任意变形工具q对象的分离q套索工具q对象的复制4041课堂示例3-关键步骤q新建Flash文件；q设置文档背景为“淡黄色”；q利用“文件/导入”菜单，将“tiger.jpg”图片导入到库；
22、q老虎从库中拖动舞台上 ；q“任意变形工具”调整图片大小；q选中老虎，利用“修改/分离”菜单命令，将老虎分离；q利用“套索”工具中的“魔术棒”点击老虎的白色背景，按Delete键删除，注意多余线条的去除；q选中老虎，通过“复制/粘贴”，将老虎复制两个；q保存为“老虎.fla”，导出“老虎.swf”。4142课堂练习q完成课堂示例13q放射线制作q绘制矢量图形；保存为“放射线.fla”,导出为“放射线.swf”。q面具的制作q绘制矢量图形；保存为“面具.fla”,导出为“面具.swf”。q注意：粉红色是文档背景的颜色。42课后练习q花瓣的制作 q绘制矢量图形，保存为“花瓣.fla”， “花瓣.swf” q步骤提示： (参考课堂示例2)q绘制花瓣；q填充渐变色；q利用“任意变形工具”将该花瓣的中心调整到花瓣底端；q利用“变形面板”旋转30度并复制花瓣。q闪闪的红星 q绘制矢量图形，保存为“闪闪的红星 .fla”， “闪闪的红星 .swf”q步骤提示：q利用“多角星形工具”绘制五角星，保留边框，去掉填充色；q用线段连接五角形的各个顶点；q参考样张分别填充纯红色和红黑渐变色。43课后练习q车轮q提示：提示：先绘制好“放射线”q复制“放射线”并粘贴到当前位置q（ “编辑/粘贴到当前位置” ）q“修改/变形/水平翻转”放射线4445下周教学内容q帧的概念q图层q逐帧动画q补间形状45
