flashCS3课件.ppt

1、,计算机平面动画设计教程,计算机平面动画设计,主讲人：王雪峰 邮箱：wxf-,计算机平面动画设计教程,第一章 Flash CS3 基础入门,学习目标 本章要点 习 题,计算机平面动画设计教程,学习目标,学习和掌握计算机平面动画技术之前，首先应了解计算机动画和Flash的基础知识。 本章将对Flash CS3 的背景、特点、应用领域、界面、功能和应用等基础知识进行详细的介绍。,计算机平面动画设计教程,本章要点,Flash CS3的发展 Flash CS3的特点 Flash CS3的应用领域 Flash CS3的基本术语 Flash CS3的基本界面,第一章 Flash CS3 基础入门,计算机平

2、面动画设计,认识 Flash,Flash CS3的基本术语,Flash CS3的基础操作,计算机平面动画设计教程,1.1认识Flash,Flash的背景知识 Flash的应用领域 Flash的特点,计算机平面动画设计教程,Flash的背景知识,Flash是目前最优秀的网络动画编辑软件之一，从简单的动画效果到动态网页设计、短片音乐剧、广告电子游戏的制作，利用该软件制作的动画尺寸要比位图动画文件如GLF动画尺寸小的多，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站， Flash的应用领域日趋广泛。 通过本章的学习，读者应熟悉FLASH动画的特点，Flas

3、h CS3的界面组成元素，并通过制作实例了解FLASH动画的一般步骤。,计算机平面动画设计教程,Flash的发展历史,Macromedia公司收购Future Splash，并进行修改，改名为Flash。 1998年，Flash3.0与同时推出的Dreamweaver2.0和Fireworks2.0一起称为Dream Team，即网页三剑客。 2000年，Flash5.0掀起了闪客旋风，把矢量图的精确性和灵活性与位图、动画、声音和交互性巧妙结合，功能显著增强。 2003年，Macromedia推出新一代的网络多媒体动画制作软件-Flash MX。,计算机平面动画设计教程,2006年，Adobe

4、公司收购Macromedia，带来Flash的巨大变革，2007年3月，发布Flash CS3，支持脚本语言ActionScript3.0，实现了Flash历史上的第二次飞跃。 目前Flash的动画播放器在全世界的普及率达到98.8%，最新版本是FlashCS5。 每一次的变革，都是Flash这款软件功能更全面，更灵活。,Flash的发展历史 （续）,计算机平面动画设计教程,Flash的特点,流媒体动画 操作简单，容易学习 小容量动画文件 强大的交互功能 Flash的图文元素,计算机平面动画设计教程,Flash的应用领域,网络广播 制作游戏 MTV 制作教学课件 Flash的电子贺卡 产品宣传

5、,站点建设 制作视频文件 实例演示,计算机平面动画设计教程,1.2 Flash CS3的基本术语,矢量图像 矢量图像是用包含颜色和位置属性的点和线来描述的图像。无论怎样放大图像都不会影响画质，依旧保持原有的清晰度。 位图图像 位图图像是通过像素点来记录图像的，许多不同色彩的点组合在一起后，就形成了一幅完整的图像，位图图像存在的方式及所在空间的大小是由像素点的数量来控制的。,计算机平面动画设计教程,场景 场景是设计者直接绘制帧图形或者从外部导入图形之后进行编辑处理，行程单独的帧图合成为动画的场所。它需要有固定的长、宽、分辨率、帧的播放速率等。 动画的原理,Flash CS3的基本术语（续）,当我

6、们将这三幅画面依次按照一定速度播放的时候，给我们的视觉效果就是看上去感觉飞机在从左向右飞行，如图4所示。动画就是由一系列近似的画面按照一定的顺序和速度进行播放而产生，它是欺骗人视觉效果的一种把戏。,计算机平面动画设计教程,帧 帧是一个数据传输的发送单位，帧内包含一个信息，在Flash中是指时间轴窗口的窗格内一个一个的小个子，由左到右编号，每帧内包含图像信息，在播放时，每帧内容会随时间轴一个一个放映而改变，最后形成连续的动画效果。 由动画的原理我们知道，动画就是画面的连续播放所产生的，电影是每秒播放24幅画面，电视则每秒播放25幅画面，Flash默认每秒播放12幅画面（可以修改）。每一幅画面我们

7、都称它为一个帧。,Flash CS3的基本术语（续）,计算机平面动画设计教程,Flash CS3的基本术语（续）,关键帧 关键帧是定义了动画变化的帧，也可以是包含了帧动作的帧。默认情况下，每一层的第一个帧就是关键帧，在时间轴上一黑点表示。 帧序列 帧序列是指某一层中的一个关键帧和直到下一个关键帧之间的静态帧，不包括下一个关键帧。 这几个概念在Flash制作中非常重要，使用的频率也最高 。,计算机平面动画设计教程,Flash CS3的基本术语（续）,空白关键帧和关键帧,普通帧,计算机平面动画设计教程,1.3 Flash CS3的基本操作,运行、退出程序 认识Flash CS3的基本界面 初试Fl

8、ash制作第一个动画 （演示）,计算机平面动画设计教程,认识Flash CS3的基本界面,Flash CS3的基本界面主要有标题栏、菜单栏、工具栏、时间轴、工具箱、工作区、面板和属性面板组成。这个界面更具有亲和力，操作和使用也更方便。Flash CS3的新面貌不但大大简化了编辑过程，还为用户提供了更大的发挥空间。,计算机平面动画设计教程,认识Flash CS3的基本界面,菜单栏,工具箱,舞台,工具栏,时间轴,面板：动作、对齐、颜色、信息、样本,属性面板,计算机平面动画设计教程,初试Flash制作动画,入门为基础，掌握基础知识。 精通为目的，掌握Flash CS3 和ActionScript0的

9、高级运用。 范例为导向，实际操作动画实例，掌握Flash的常用功能及重点技术。 理念为精华，学习优秀设计思想及前人的丰富教学经验。,计算机平面动画设计教程,Flash CS3文件,.Fla：源文件，可编辑（Flash软件打开） .swf：最终生成的文件格式，不可编辑（硕思闪客精灵）（Flash Player播放） .as：flash脚本文件（任意文本软件编辑） .exe：swf文件可以创建不需Flash Player播放的可执行文件,计算机平面动画设计教程,时间轴、舞台、工作区,时间轴：文档卡、图层、层文件夹、帧、层工具、洋葱皮、动画信息 舞台：编辑区域，生成文件后的显示区域（网格、标尺、辅助

10、线） 工作区：场景、工作区（个性化环境）、缩放,计算机平面动画设计教程,工具栏详解,计算机平面动画设计教程,工具栏详解（续）,计算机平面动画设计教程,Flash制作流程,制作流程,2.新建Flash影片文档,3.设置文档属性,4.制作动画,5.测试和保存影片,1.准备素材,6.导出和发布影片,计算机平面动画设计教程,第二章 绘制图像,学习目标 本章要点 习 题,计算机平面动画设计教程,学习目标,熟悉工具箱 绘制线条 选择图形 绘制形状 绘制路径,图形的笔触与填充 变形对象 修饰图像 绘图综合案例,计算机平面动画设计教程,本章技术要点,Flash CS3的工具箱主要包括哪些工具？ 绘制形状主要用

11、那些工具？ Flash提供了几种对图像的修饰方法？ 利用那些相关工具可以通过绘制精确的路径来确定直线和平滑的曲线？,计算机平面动画设计教程,2.1 选取工具,1、选择工具:此工具用于选择、移动、复制图形以及改变形状图形的形状。 单击某个对象，即可选中对象，被选中的对象会覆盖上一层灰色； 双击还会选中与其相连的对象； 拖拽或按住SHIFT键复选可选中多个对象 单击对象选择全部，拖拽框选选择局部 按下Ctrl键拖动实现复制 2、部分选取工具:此工具主要用于选择线条、移动线条和编辑节点以及节点方向等,计算机平面动画设计教程,2.1 选取工具,3、套索工具:用套索工具可以精确地选择不规则对象中的任意部

12、分，在工具箱中选择套索工具，其选项区域如图，使用魔棒自动选择区域需要现将对象“分离”。 抠图 “和尚”图案 （1）“修改”-“分离”（2）“编辑”“取消全选”（3）使用“套索工具”的“魔术棒”功能来去除。,计算机平面动画设计教程,2.2 绘制线条,计算机平面动画设计教程,2.2.1 线条工具,2.2.2 自定义笔触样式,2.2.3 快速套用线条属性,2.2.4 用选择工具改变线条属性,2.2.5 线条的端点设置,2.2.6 线条的接合,计算机平面动画设计教程,实战范例韵律线条,1新建影片文档和设置文档属性,2用线条工具绘制直线并调整成曲线,3用“变形面板”对线条进行变换操作,计算机平面动画设计

13、教程,2.3 绘制基本形状,计算机平面动画设计教程,2.3.1 绘制三角形 2.3.2 绘制四边形 2.3.3 绘制星星 2.3.4 绘制月亮 2.3.5 圆角矩形和十字花图的绘制 2.3.6 圆环和扇形的绘制,上机练习：,计算机平面动画设计教程,绘制直线 绘制曲线 编辑锚点 综合实例,绘制路径钢笔工具,计算机平面动画设计教程,墨水瓶工具 颜料桶工具 滴管工具 橡皮擦工具,图像的笔触与填充,2.4 变形对象,计算机平面动画设计教程,计算机平面动画设计教程,2.4.1 渐变填充 1线性渐变 2放射状渐变,计算机平面动画设计教程,2.4.2 绘制立体按钮图形,1.新建影片文档和设置文档属性 2.

14、绘制放射状渐变的圆 3. 绘制线性渐变的椭圆,2.5 绘制复杂图形,计算机平面动画设计教程,计算机平面动画设计教程,小 结,教学目的： （1）掌握使用选择工具选择并修改节点和图形。 （2）掌握绘画工具的使用、辅助选项和属性的设置。 （3）掌握文本的输入与编辑，文本的打散与分离。 （4）掌握颜色的编辑，笔触和填充的设置与编辑。 （5）标尺和网格线的使用方法。 教学重点： （1）绘图工具的使用。 （2）图形的修改。 （3）渐变颜色的设置、不透明度的设置。 （4）渐变填充、位图填充的调整。 教学难点： 使用钢笔工具绘制各种图形。,计算机平面动画设计教程,第三章 文本与对象的操作,创建文本 设置文本属

15、性 编辑文本 制作特效文本 文本滤镜,计算机平面动画设计教程,创建文本,文本类型：静态文本、动态文本、输入文本字段 文本属性：不同的文本类型具有不同的文本属性 提示：线条类型、在文本周围显示边框、嵌入只是对动态文本和输入文本有效,计算机平面动画设计教程,文本样式,字体（嵌入字体）、字号、颜色、粗体、斜体、 文本对齐格式选项：缩进、行距、左边距、右边距 文本方向、旋转（仅垂直时） 字母间距、字符位置、字体呈现方法、自动调整间距 换行、可选、HTML格式、变量、边框、超链接和目标,计算机平面动画设计教程,文本工具（分离和组合）,分离与组合由于这个含义有些抽象，以图例的方法来增强理解并做简要解释:,

16、计算机平面动画设计教程,由图中可以看出，在正常状态下，两者没有区别，但选中以后，组合的对象周围有一个蓝框，表示当前物件处于选中状态，而打散的对象则以星点表示。在移动时，组合的对象在动过程中始终以一个整体进行移动，物件的外框线出现在当前的拖动位置，当开鼠标后，对象整个移至外框线位置，被打散的对象则不同，可以单独移动选中的部分，选种部分可以与其整体分离，单独移动。当然，也可选中全部对象进行移动。,文本工具（分离和组合）,提示：Flash 中对象的两种基本形态，分离与组合，我们要对建立的对象分离，可按快捷键 Ctrl + B , 若要对打散的对象进行组合则可按 Ctrl + G , 或者在修改菜单下

17、进行选择. 文本图形化操作,需要两次 Ctrl+B,计算机平面动画设计教程,使用设备字体：指定 SWF 文件使用本地计算机上安装的字体来显示字体。 使用设备字体时，应选择最常安装的字体系列。 位图文本（未消除锯齿）：关闭消除锯齿功能，不对文本提供平滑处理。 用尖锐边缘显示文本，增加 SWF 文件的大小。 位图文本的大小与导出大小相同时，文本比较清晰，但对位图文本缩放后，文本显示效果比较差。 动画消除锯齿：通过忽略对齐方式和字距微调信息来创建更平滑的动画。 此选项会导致创建的 SWF 文件较大，因为嵌入了字体轮廓。 为提高清晰度，应在指定此选项时使用 10 磅或更大的字号。,字体呈现方法,计算机平面动画设计教程,可读性消除锯齿：使用 Flash 文本呈现引擎来改进字体的清晰度，特别是较小字体的清晰度。 此选项会导致创建的 SWF 文件较大，因为嵌入了字体轮廓。（如果要对文本设置动画效果，请不要使用此选项，而应使用“动画消除锯齿”。） 自定义消除锯齿：使您可以修改字体的属性。 使