《第3节基本动画制作(一)flash高级商务动画设计(ppt全)(袁野版)(2)剖析》由会员分享，可在线阅读，更多相关《第3节基本动画制作(一)flash高级商务动画设计(ppt全)(袁野版)(2)剖析（53页珍藏版）》请在金锄头文库上搜索。
1、FLASH 商务应用 二、矢量图绘画及传统补间动画,【目的】 1掌握矢量图制作的方法和技巧。 2掌握把位图作为填充色进行填充的技巧和方法。 3部分选取工具和钢笔工具的使用技巧。 4.帧，图层的概念。 5.掌握传统补间动画制作方法和技巧。 【重点】 1雨伞制作技巧。 2把位图当作颜色进行填充。 3工具箱中部分选取工具和钢笔工具的使用。 4，对做好的矢量图进行传统补间动画 【难点】 1.部分选取工具和钢笔工具的灵活使用。,动画电影的组成层次可分为： 动画电影（movie）场景（scene）帧（frame） 。 帧 进行Flash动画制作的最基本的单位，是时间轴上的最小单位，是通用的动画计量单位。
2、在时间轴上，每个小方格（亦称影格）即为一帧，其内容可包括：图形、音频、素材符号、嵌入对象等。,2.1 帧的概念,4,4,帧的类型,空帧： 空帧不是真正意义上的帧，而只是在时间轴上一个矩形小方块，在这些矩形方块里可以放入帧。 空白关键帧： 空白关键帧就像一张白纸，可以在上面可以放入图形、声音、各种素材和其他多种对象。 关键帧： 在空白关键帧中放入对象，形成了关键帧。关键帧是特殊的帧，可以定义动画中的变化，包括对象的运动和特点(如大小和颜色) 。 普通帧： 在时间轴上，普通帧总是在关键帧的后面。前面关键帧的内容可以一直显示在随后的每个普通帧中，直到到达另一个关键帧为止。 过渡帧： 过渡帧包含了一系
3、列帧，往往处于两个关键帧之间。利用过渡帧可以制作两种过渡动画：运动过渡和形状过渡。,5,各类的帧在时间轴上的显示,关键帧在时间轴上显示为实心的圆点 空白关键帧在时间轴上显示为空心的圆点 普通帧在时间轴上显示为灰色或白色填充的小方格 在关键帧后面显示为灰色 在空白关键帧后面显示为白色 过渡帧在时间轴上显示为浅绿色或浅紫色 表示“形状过渡帧”，颜色为浅绿色 表示“运动过渡帧”，颜色为浅紫色,6,6,各类的帧在时间轴上的示意图,关键帧,普通帧,空帧,空白关键帧,过渡帧,普通帧,插入帧 选择帧； 创建帧； 复制帧； 删除帧； 清除帧 移动帧 翻转帧 改变帧频率（播放频率）。 在默认情况下，Flash动
4、画的播放频率是24fps（每秒24帧）。,帧的操作,图层 是Flash为制作复杂动画作品而引入的一种手段，相当于一张透明的玻璃纸。 分为：Normal（普通）、Guide（引导）、 Guided（被引导）、Mask（遮罩）和Masked（被遮罩）。 在Flash CS4中，使用引导层，可以使元素沿着所创建的路径运动；而使用遮罩层，可以创建如探照灯、聚光灯或颜色转变灯动画效果。 将不同对象放在不同层上，可以轻松制作场景复杂的动画。 比如在绘制、编辑、粘贴和重新定位单一图层上的元素时 ，不会影响到其他图层上的元素，而且每个场景都可以创建任意数量图层。 使用图层还可以避免错误删除或编辑对象的失误。,
5、图层,9,9,图层的操作,图层操作 选择图层，按鼠标右键，在快捷菜单中选择操作。 通过图层工具栏进行操作 常用的图层操作 创建新普通图层。 创建新引导图层 删除图层 将普通图层转化为遮罩图层,10,图层的属性,在图层名称上右击鼠标，在快捷菜单中选择“属性” ，打开 “图层属性”对话框 ，可设置图层的各种属性 。,2.3 动画基本类型,Flash作为一款著名的二维动画制作软件，最主要的功能也就是制作动画。在Flash CS4中，基本动画类型主要有逐帧动画、形状补间动画和传统补间动画3种。 逐帧动画 形状补间动画 传统补间动画 动画效果有着各自的优势和不足。,逐帧动画 在连续动画的相邻两帧中，画面
6、一般地仅有微小的变化； 每一帧都是关键帧； 每帧画面的制作。 借助“描图纸”按钮，在上一帧的基础上略作修改。 使用其他绘图软件制作系列文件，文件名采用连续的编号，如a01、a02、a03等。,补间动画 只需在重要处定义关键帧，Falsh会自动创建关键帧间的内容； 渐变动画区分为传统补间动画 和形状补间 渐变有问题用虚线表示。,:计算机基础与实训教材系列系列丛书官方网站 :,2.4 传统补间动画,当需要在动画中展示移动位置、改变大小、旋转、改变色彩、改变透明度等效果时，就可以使用传统补间动画了。 在制作传统补间动画时，用户只需对最后一个关键帧的对象进行改变，其中间的变化过程即可自动形成，因此大大
7、减小了工作量。 它可以用于补间实例、组和类型的位置、大小、旋转和倾斜，以及表现颜色、渐变颜色切换或淡入淡出效果。 在传统补间动画中要改变组或文字的颜色，必须将其变换为元件。,15,15,传统补间动画,传统补间动画的概念 传统补间动画给对象在两个关键帧分别定义不同的属性，如颜色、大小、方位、角度等 在两个关键帧之间建立一种变化关系 位移首尾关键帧中元件位置改变 缩放首尾关键帧中元件大小的 旋转 扭曲变形 颜色渐变等首尾关键帧中元件的颜色、alpha值等发生改变 传统补间动画的对象通常是元件、组合、文本块等 传统补间动画的特点 只对单一的对象有效，包括影片剪辑、图形元件、按钮、文字、位图、组合等等
8、 分离的对象必须组合或转换成元件才能创建传统补间动画,:计算机基础与实训教材系列系列丛书官方网站 :,2.4 传统补间动画的制作步骤,创建一个新图层； 在起始帧位置，插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容（为元件或组合、文字等）； 单击时间轴中的结束帧位置，插入另一个关键帧； 在结束关键帧中编辑画面内容； 右键创建传统补间动画，并设置运动参数； 保存文件。 注：传统补间动画首尾帧间有淡紫色背景。,用菜单或右键创建传统补间,18,18,传统补间动画的表现形式,动画头尾必须是关键帧，两关键帧中间被带有一个黑箭头和浅紫色背景的中间过渡帧分开(如图层1所示) 如果两关键帧中间的黑箭头变
9、为虚线，代表传统补间动画创建错误 缺少开始或结束关键帧(如图层3,4所示) 关键帧的对象是分离的(如图层2,所示),19,19,传统补间动画的参数,选择传统补间动画中间任何一帧，打开传统补间动画的属性面板，设置属性 缓动：使动画加速或减速运动 旋转：实现元件或组的顺时针或逆时针旋转 调整到路径：使元件或组按照指定的路径有方向的进行运动 同步：使影片剪辑元件动画在主动画中能准确的完成循环,实例2-1 彩色立体文字传统补间动画,【实例说明】将文字放大与缩小。 【技术要点】将彩色立体文字组合；插入关键帧；会使用工具箱中“任意变形工具”。,22,22,课堂示例1: 关键步骤,启动FLASH CS4，菜
10、单上，文件打开，在“打开”对话框中，找到 “练习1.fla”文件，并单击该文件，点击“打开”按钮 用鼠标点击工具箱中的箭头工具 ，在舞台上拖出一个矩形将整个彩色立体文字包围（即选中舞台上所有的文字）。 右键转换为图形元件（F8）。 用鼠标在时间轴第15帧上点右键插入关键帧，在时间轴第30帧上点右键插入关键帧。 用鼠标单击第15帧，再用鼠标单击工具箱上的“任意变形工具” ，此时舞台上的彩色立体文字周围出现八个黑色的小方块，缩小该元件； 在第1帧至第15帧中任意帧上单击鼠标右键创建传统补间，在第15帧至第30帧中任意帧上单击鼠标右键创建传统补间 更新到作业模板的第一题。,实例2-2 软盘顺时针（逆
11、时针）旋转,【实例说明】制作软盘旋转动画。 【技术要点】将库中的元件放入舞台；插入关键帧；创建传统补间；属性设置：元件顺时针旋转。,25,25,课堂示例2: 关键步骤,启动FLASH CS4，菜单上，文件打开，在“打开”对话框中，找到实例2创建的“练习2.fla”文件，并单击该文件，点击“打开”按钮。设置文档大小为600*600 菜单上，窗口库，打开库面板。用鼠标点中库列表中的软盘元件，并将其拖到舞台上来。 在时间轴第20帧上点击鼠标右键插入关键帧。 在第1帧至第20帧之间任一帧上点击鼠标右键创建传统补间； 用鼠标单击时间轴上中间任意帧，单击舞台右侧“属性”图标，展开对象的属性面板，设置旋转为
12、“顺时针”,26,26,课堂示例2: 关键步骤,在第21帧上点击鼠标右键插入关键帧。任意变形工具将元件中心移到右下角。 在第40帧上点击鼠标右键插入关键帧。 在第21帧至第40帧之间任意帧上点击鼠标右键创建传统补间； 用鼠标单击时间轴上中间帧，单击舞台右侧“属性”图标，展开对象的属性面板，设置旋转为“顺时针” 观看动画结果：菜单上，文件发布预览Flash 保存结果，并更新作业模板中的第二题。,工具栏工具,箭头工具 选取和移动对象、修正对象轮廓，调整曲线、旋转或缩放对象。 部分选取工具 用来显示线段或对象轮廓上的锚点（贝塞尔曲线），移动锚点或路径来改变图形的形状。 铅笔工具 画直线或曲线。 所画
13、线条包括：Straighten（平直）、Smooth（平滑）、Ink（墨水）三种模式。,位图作为填充色进行填充,窗口/颜色，打开颜色面板，可以创建和编辑纯色、渐变填充、位图填充，调制出大量的颜色，以设置笔触，填充色及其透明度。,实例2-3 制作小雨伞的图形元件,【实例说明】绘制雨点打落在小雨伞上的图案效果。 【技术要点】先绘制一个“小雨滴”的矢量图，转换为元件；利用矩形工具、直线工具绘制雨伞和黑夜，并利用箭头工具调整曲线轮廓得到外框图，再借助图案填充变形工具完成雨滴的填充效果。,31,31,课堂示例3: 关键步骤,本例将元件“小雨伞”创建在“作业模板2.fla”的库中。启动Flash CS4，
14、菜单上，文件打开，在“打开”的对话框上，找到“作业模板2.fla”文件所在的文件夹位置，点击此文件，再点击“打开”按钮。菜单上，插入新建元件，在打开的“创建新元件”对话框上，“名称”后面输入：小雨伞，“行为”后面选中“图形”单选按钮； 选中工具箱中的“铅笔”工具 ，绘制小雨滴的轮廓。然后选中工具箱的“填充”工具 ，填充色为黑色，点击雨滴外面空白处，结果如图所示。 文件/导出/导出图像,20*20,存小雨滴.jpg到桌面，删除场景中雨滴。,32,32,课堂示例3: 关键步骤,选择工具箱中的矩形工具，设置边框线颜色为黑色，填充色为无，在舞台上拖动鼠标绘制一个300X200的矩形框（借助“属性”面板
15、进行精确设置。 5.选择工具箱中的箭头工具，在舞台上的空白处单击，取消对绘制矩形框的选取，然后移动鼠标指针到矩形框的下边中间位置，当鼠标指针显示为弧线形状时，按下鼠标左键并向上拖动，更改矩形最下面一条边的形状 6.选择工具箱中的直线工具，在曲线上方绘制两条直线段作为伞的尖，删除多余线段之后的图案如图所示。,33,33,课堂示例3: 关键步骤,选择工具箱中的铅笔工具，在“选项”区中设置铅笔工作模式为“平滑”，在舞台上绘制伞沿（可使用箭头工具对曲线部分进行调整。 选择工具箱中的矩形工具，设置笔触颜色为黑色，填充色为无，在伞的下方绘制伞的手柄，使用箭头工具将伞柄上、下两端调整为弧形（可以将图形放大后
16、进行调整)。 菜单上，窗口颜色，打开“颜色”面板，在“类型”下拉列表框中选择“位图”选项，点导入按钮，找到“小雨滴.jpg”，从而设定其为填充位图。,34,34,课堂示例3: 关键步骤,选择工具箱中的颜料桶工具，在雨伞上方区域中单击，以雨滴填充，如图所示。 选中工具箱中的填充变形工具，在位图填充区域上单击鼠标，此时出现填充变形句柄，将鼠标指针移动到不同句柄上，可以对填充部分进行旋转、缩放等操作。 选择工具箱中的颜料桶工具，设置填充色为粉红色（#FF00FF），在雨伞伞面和伞柄上单击，将它们填充为粉红色。 选择工具箱中的箭头工具，选中雨滴填充部分的外边框线、伞面和伞柄的外框线，并按【Delete】 键将它们删除. 回到场景1，文件保存。,实例2-4 制作蝙蝠,实例2-4 制作蝙蝠的图形元件 【实例说明】绘制绘制一只呲牙咧嘴的蝙蝠图案。 【技术要点】使用椭圆工具绘制椭圆
