flashCS3课件

计算机平面动画设计教程计算机平面动画设计主讲人：王雪峰邮箱：wxf-1220@163.com上机：周三下午5-8节（教室526）本课程学分：6本课程学时：每周6课时，共18周考试：闭卷实验目标：完成课后实例最后上交一个综合案例计算机平面动画设计教程第一章FlashCS3基础入门学习目标本章要点习题计算机平面动画设计教程学习目标学习和掌握计算机平面动画技术之前，首先应了解计算机动画和Flash的基础知识。本章将对FlashCS3的背景、特点、应用领域、界面、功能和应用等基础知识进行详细的介绍。计算机平面动画设计教程本章要点FlashCS3的发展FlashCS3的特点FlashCS3的应用领域FlashCS3的基本术语FlashCS3的基本界面第一章FlashCS3基础入门计算机平面动画设计认识FlashFlashCS3的基本术语FlashCS3的基础操作计算机平面动画设计教程1.1认识FlashFlash的背景知识Flash的应用领域Flash的特点计算机平面动画设计教程Flash的背景知识Flash是目前最优秀的网络动画编辑软件之一，从简单的动画效果到动态网页设计、短片音乐剧、广告电子游戏的制作，利用该软件制作的动画尺寸要比位图动画文件﹙如GLF动画﹚尺寸小的多，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站，Flash的应用领域日趋广泛。通过本章的学习，读者应熟悉FLASH动画的特点，FlashCS3的界面组成元素，并通过制作实例了解FLASH动画的一般步骤。计算机平面动画设计教程Flash的发展历史Macromedia公司收购FutureSplash，并进行修改，改名为Flash。1998年，Flash3.0与同时推出的Dreamweaver2.0和Fireworks2.0一起称为DreamTeam，即网页三剑客。2000年，Flash5.0掀起了闪客旋风，把矢量图的精确性和灵活性与位图、动画、声音和交互性巧妙结合，功能显著增强。2003年，Macromedia推出新一代的网络多媒体动画制作软件----FlashMX。计算机平面动画设计教程2006年，Adobe公司收购Macromedia，带来Flash的巨大变革，2007年3月，发布FlashCS3，支持脚本语言ActionScript3.0，实现了Flash历史上的第二次飞跃。目前Flash的动画播放器在全世界的普及率达到98.8%，最新版本是FlashCS5。每一次的变革，都是Flash这款软件功能更全面，更灵活。Flash的发展历史（续）计算机平面动画设计教程Flash的特点流媒体动画操作简单，容易学习小容量动画文件强大的交互功能Flash的图文元素计算机平面动画设计教程Flash的应用领域网络广播制作游戏MTV制作教学课件Flash的电子贺卡产品宣传站点建设制作视频文件………实例演示计算机平面动画设计教程1.2FlashCS3的基本术语矢量图像矢量图像是用包含颜色和位置属性的点和线来描述的图像。无论怎样放大图像都不会影响画质，依旧保持原有的清晰度。位图图像位图图像是通过像素点来记录图像的，许多不同色彩的点组合在一起后，就形成了一幅完整的图像，位图图像存在的方式及所在空间的大小是由像素点的数量来控制的。计算机平面动画设计教程场景场景是设计者直接绘制帧图形或者从外部导入图形之后进行编辑处理，行程单独的帧图合成为动画的场所。它需要有固定的长、宽、分辨率、帧的播放速率等。动画的原理FlashCS3的基本术语（续）当我们将这三幅画面依次按照一定速度播放的时候，给我们的视觉效果就是看上去感觉飞机在从左向右飞行，如图4所示。动画就是由一系列近似的画面按照一定的顺序和速度进行播放而产生，它是欺骗人视觉效果的一种把戏。图1图2图3图4计算机平面动画设计教程帧帧是一个数据传输的发送单位，帧内包含一个信息，在Flash中是指时间轴窗口的窗格内一个一个的小个子，由左到右编号，每帧内包含图像信息，在播放时，每帧内容会随时间轴一个一个放映而改变，最后形成连续的动画效果。由动画的原理我们知道，动画就是画面的连续播放所产生的，电影是每秒播放24幅画面，电视则每秒播放25幅画面，Flash默认每秒播放12幅画面（可以修改）。每一幅画面我们都称它为一个帧。FlashCS3的基本术语（续）计算机平面动画设计教程FlashCS3的基本术语（续）关键帧关键帧是定义了动画变化的帧，也可以是包含了帧动作的帧。默认情况下，每一层的第一个帧就是关键帧，在时间轴上一黑点表示。帧序列帧序列是指某一层中的一个关键帧和直到下一个关键帧之间的静态帧，不包括下一个关键帧。这几个概念在Flash制作中非常重要，使用的频率也最高。计算机平面动画设计教程FlashCS3的基本术语（续）空白关键帧和关键帧普通帧空白关键帧+内容（比如画个圆）=关键帧。关键帧后面的灰色部分都是普通帧，普通帧里面没有实际的内容，但是它却能将离它最近的关键帧的内容显示出来，用来延续一幅画面的存在时间。代表普通帧的结束计算机平面动画设计教程1.3FlashCS3的基本操作运行、退出程序认识FlashCS3的基本界面初试Flash——制作第一个动画（演示）计算机平面动画设计教程认识FlashCS3的基本界面FlashCS3的基本界面主要有标题栏、菜单栏、工具栏、时间轴、工具箱、工作区、面板和属性面板组成。这个界面更具有亲和力，操作和使用也更方便。FlashCS3的新面貌不但大大简化了编辑过程，还为用户提供了更大的发挥空间。计算机平面动画设计教程认识FlashCS3的基本界面菜单栏工具箱舞台工具栏时间轴面板：动作、对齐、颜色、信息、样本……属性面板计算机平面动画设计教程初试Flash—制作动画入门为基础，掌握基础知识。精通为目的，掌握FlashCS3和ActionScript0的高级运用。范例为导向，实际操作动画实例，掌握Flash的常用功能及重点技术。理念为精华，学习优秀设计思想及前人的丰富教学经验。计算机平面动画设计教程FlashCS3文件.Fla：源文件，可编辑（Flash软件打开）.swf：最终生成的文件格式，不可编辑（硕思闪客精灵）（FlashPlayer播放）.as：flash脚本文件（任意文本软件编辑）.exe：swf文件可以创建不需FlashPlayer播放的可执行文件计算机平面动画设计教程时间轴、舞台、工作区时间轴：文档卡、图层、层文件夹、帧、层工具、洋葱皮、动画信息舞台：编辑区域，生成文件后的显示区域（网格、标尺、辅助线）工作区：场景、工作区（个性化环境）、缩放计算机平面动画设计教程工具栏详解计算机平面动画设计教程工具栏详解（续）计算机平面动画设计教程Flash制作流程制作流程2.新建Flash影片文档3.设置文档属性4.制作动画5.测试和保存影片1.准备素材6.导出和发布影片计算机平面动画设计教程第二章绘制图像学习目标本章要点习题计算机平面动画设计教程学习目标熟悉工具箱绘制线条选择图形绘制形状绘制路径图形的笔触与填充变形对象修饰图像绘图综合案例计算机平面动画设计教程本章技术要点FlashCS3的工具箱主要包括哪些工具？绘制形状主要用那些工具？Flash提供了几种对图像的修饰方法？利用那些相关工具可以通过绘制精确的路径来确定直线和平滑的曲线？计算机平面动画设计教程内容提要1、选择工具:此工具用于选择、移动、复制图形以及改变形状图形的形状。单击某个对象，即可选中对象，被选中的对象会覆盖上一层灰色；双击还会选中与其相连的对象；拖拽或按住SHIFT键复选可选中多个对象单击对象选择全部，拖拽框选选择局部按下Ctrl键拖动实现复制2、部分选取工具:此工具主要用于选择线条、移动线条和编辑节点以及节点方向等计算机平面动画设计教程内容提要3、套索工具:用套索工具可以精确地选择不规则对象中的任意部分，在工具箱中选择套索工具，其选项区域如图，使用魔棒自动选择区域需要现将对象“分离”。抠图“和尚”图案（1）“修改”---“分离”（2）“编辑”—“取消全选”（3）使用“套索工具”的“魔术棒”功能来去除。计算机平面动画设计教程内容提要线条是最简单的图形，它是复杂图形的基础。FlashCS3在线条处理方面有一些新的改进，例如更新了钢笔工具，使它接近于同类其他软件，本节主要讲解线条的基本绘制方法、快速套用线条属性、用选择工具改变线条属性、线条的端点设置和线条的接合。计算机平面动画设计教程知识要点2.2.1线条工具2.2.2自定义笔触样式2.2.3快速套用线条属性2.2.4用选择工具改变线条属性2.2.5线条的端点设置2.2.6线条的接合计算机平面动画设计教程实战范例――韵律线条1．新建影片文档和设置文档属性2．用线条工具绘制直线并调整成曲线3．用“变形面板”对线条进行变换操作计算机平面动画设计教程内容提要本小节在学习绘制基本线条的基础上，学习绘制基本形状如三角形、四边形、星星、月亮、十字花、圆环、扇形等的方法和技巧。计算机平面动画设计教程知识要点※2.3.1绘制三角形※2.3.2绘制四边形※2.3.3绘制星星※2.3.4绘制月亮※2.3.5圆角矩形和十字花图的绘制※2.3.6圆环和扇形的绘制上机练习：计算机平面动画设计教程※绘制直线※绘制曲线※编辑锚点※综合实例绘制路径—钢笔工具计算机平面动画设计教程※墨水瓶工具※颜料桶工具※滴管工具※橡皮擦工具图像的笔触与填充计算机平面动画设计教程内容提要前面我们已经绘制了单色填充的图形，它们色彩单一，填充简单。而渐变填充色彩绘制的图形色彩丰富，设置复杂，但极富表现力，应用的范围也更广。本小节就学习渐变色彩图形的绘制方法计算机平面动画设计教程知识要点2.4.1渐变填充1．线性渐变2．放射状渐变计算机平面动画设计教程2.4.2绘制立体按钮图形1.新建影片文档和设置文档属性2.绘制放射状渐变的圆3.绘制线性渐变的椭圆计算机平面动画设计教程内容提要前面的小节中绘制的形状都是比较规则的，因此运用线条、矩形、椭圆工具都能轻而易举地绘制出来。如果要绘制比较复杂的不规则图形，这些工具都不能胜任了，这时就要用到功能强大的钢笔、铅笔、刷子工具等绘图工具，以及部分选取工具和橡皮擦工具等这些辅助工具了。计算机平面动画设计教程小结教学目的：（1）掌握使用选择工具选择并修改节点和图形。（2）掌握绘画工具的使用、辅助选项和属性的设置。（3）掌握文本的输入与编辑，文本的打散与分离。（4）掌握颜色的编辑，笔触和填充的设置与编辑。（5）标尺和网格线的使用方法。教学重点：（1）绘图工具的使用。（2）图形的修改。（3）渐变颜色的设置、不透明度的设置。（4）渐变填充、位图填充的调整。教学难点：使用钢笔工具绘制各种图形。计算机平面动画设计教程第三章文本与对象的操作创建文本设置文本属性编辑文本制作特效文本文本滤镜计算机平面动画设计教程创建文本文本类型：静态文本、动态文本、输入文本字段文本属性：不同的文本类型具有不同的文本属性提示：[线条类型]、[在文本周围显示边框]、[嵌入……]只是对动态文本和输入文本有效计算机平面动画设计教程文本样式字体（嵌入字体）、字号、颜色、粗体、斜体、文本对齐格式选项：缩进、行距、左边距、右边距文本方向、旋转（仅垂直时）字母间距、字符位置、字体呈现方法、自动调整间距换行、可选、HTML格式、变量、边框、超链接和目标计算机平面动画设计教程文本工具（分离和组合）分离与组合由于这个含义有些抽象，以图例的方法来增强理解并做简要解释:分离组合正常选择移动计算机平面动画设计教程由图中可以看出，在正常状态下，两者没有区别，但选中以后，组合的对象周围有一个蓝框，表示当前物件处于选中状态，而打散的对象则以星点表示。在移动时，组合的对象在动过程中始终以一个整体进行移动，物件的外框线出现在当前的拖动位