Flash ActionScript 3.0动画教程

《Flash ActionScript 3.0动画教程》由会员分享，可在线阅读，更多相关《Flash ActionScript 3.0动画教程（19页珍藏版）》请在装配图网上搜索。

1、单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,第二级二级二级二级二级二级二级二级二级二级二级,,第三级,,第四级,,第五级,,,*,第4章 动画制作详解,本章将详细讲解Flash动画的核心内容，主要包括以下几点内容：动画的形成原理、Flash CS6中图层与动画的关系、Flash CS6中自动形成动画的种类、时间轴面板和层的种类及应用。通过本章的学习，使读者对Flash动画有更加深刻的理解。,,1,4.1 动画的形成原理,视觉原理如图4-1所示。,,当大脑每秒接收的图片超过最大分辨限度时，储存在大脑中的景象就会与视觉信息新传来的景象发生冲突，最终造成大脑的分辨混乱。在这种情况下大

2、脑会相应缩短对每张图片的分辨时间和分辨图片的间隔时间，以匹配视觉信息的传输速度。,,但当眼睛每秒传送更多图片时，大脑处理图片的速率就无法与眼睛传输颜色信息的速度相匹配，这时大脑正在处理的信息与眼睛所看到的信息就会发生冲突，最终造成视觉残留的效果。如果大脑正在处理的图片与眼睛所看到的图片有一定的相关联系，例如图4-2所示的两幅图片，由于大脑分辨这两幅图片的时间都不充足，所以并不能完全辨认两幅图片中的所有颜色区域，而且辨认这两幅图片的时间间隔又非常短暂，这样就会使大脑在分析第2幅图片时忽略其中与第1幅图片相同的区域，再加上视觉残留的效果大脑最终会认为第2幅图片中的星星是从袜子中喷出来的。,,2,4

3、.2 图 层,可以把图层简单地理解为很多重叠的透明画纸，每一张画纸上都有相对独立的内容。当把这些画纸按一定顺序重叠在一起时就得到了图片的最终效果。如图4-3所示的图片中一共有三个图层，每个图层中都有各自独立的内容，而这些各自独立的内容通过图层的叠加最终得到图片的效果。,,在Flash CS6中，图层的创建与管理功能被集成在时间轴面板中，如图4-4所示。,,3,4.2 图 层,,1. 新建图层,,2. 删除图层,,3. 管理图层,,(1) 图层的名字,,(2) 图层的顺序,,(3) 图层文件夹,,(4) 隐藏图层,,(5) 锁定图层,,(6) 显示图层轮廓,,(7) 图层属性窗口

4、,,4,4.3 Flash CS6中的帧与关键帧,帧是Flash CS6中的核心概念，帧的快速交替形成Flash动画。,,在Flash CS6中有关帧的控制功能都被集中在时间轴面板的时间轴上，如图4-14所示。时间轴是由帧构成的虚拟动画流程轴，在时间轴上用户可以为动画添加帧、删除帧、修改帧等。,,用户创建的每个图层都有各自相对独立的时间轴，也就是说用户可以在图层中单独编辑属于该图层的动画，在编辑时并不会影响到其他图层中的内容。事实上，专业的动画制作都是尽可能地将最终的动画拆分到很多图层中，这样既有利于管理动画效果，也方便日后的修改工作。图层和时间轴的具体关系如图4-15所示。,,在Flash

5、 CS6中帧分为3种：关键帧、过渡帧和空白帧。,,5,4.3 Flash CS6中的帧与关键帧,,具体方法是将鼠标光标移动到时间轴要插入关键帧的帧上，右击鼠标后在弹出的快捷菜单中选择“插入关键帧”或“插入空白关键帧”命令，如图4-16所示。,,当编辑好关键帧后Flash CS6会按用户的要求自动成生位于两关键帧之间的帧内容，这些由Flash CS6自动生成的帧叫作过渡帧。,,那些既不是关键帧又不位于两关键帧之间的帧叫作空白帧。空白帧中虽然没有任何内容，但空白帧会延续显示与它相邻的上一个关键帧中的内容。Flash CS6在空白帧中添加一个黑色的空心矩形表示某关键帧中内容的显示范围。如图4-17

6、所示，位于第1帧的关键帧中内容的显示范围延伸至第10帧，也就是说我们在第1帧到第10帧中看到的内容是完全相同的。,,6,4.4 Flash CS6中自动形成动画的种类,Flash CS6中自动生成的动画类型有两种：动画补间和形状补间。这两种补间方式都是利用位于两端关键帧中的内容差异，自动生成逐渐变化的中间过渡帧实现的。,,Flash CS6规定每个图层在该图层时间轴的某段连续的帧中只能有一个组合对象或元件形成动画补间，也就是说在一个图层时间轴中的两个关键帧之间只能有一个组合或元件发生位置的变化，若多于一个Flash CS6会在库中自动生成图形元件，以应付多个组合或元件的动画效果，但这种添加元

7、件形成动画的方法常常不会达到你所期望的动画效果，而是形成非预期的动画效果。,,7,4.4.1 动画补间,,动画补间是Flash CS6自动形成两关键帧之间组合或元件位置和旋转角度变化的补间方式。首先，Flash CS6会默认位于左侧的关键帧为这段动画的起始关键帧，位于右侧的关键帧为这段动画的结束关键帧。其次，Flash CS6会判断两关键帧中位置或旋转角度发生变化的组合或元件，并计算变化的数值。最后，Flash CS6会在夹在两关键帧中间的空白帧中生成由起始帧到结束帧逐渐变化的中间内容。,,需要注意的是动画补间的补间对象仅支持组合或元件，若对填充区或笔触区执行动画补间，Flash CS6会先

8、将填充区或笔触区组合后再执行动画补间操作。,,执行补间操作的具体方法是，将鼠标光标移动到两个关键帧中间的任意一个过渡帧上，右击鼠标后在弹出的快捷菜单中选择“创建补间动画”命令，如图4-19所示。,,8,4.4.1 动画补间,,创建动画补间后在两个关键帧中间会产生一条由左指向右的黑色箭头，以表示这两个关键帧中已经生成了动画补间。,,要删除两关键帧中的动画补间，需要将鼠标光标移动到两个关键帧中间的任意一个过渡帧上右击鼠标，在弹出的快捷菜单中选择“删除补间”命令(见图4-20)即可将这两个关键帧之间的动画补间删除。删除动画补间后两个关键帧中间的箭头会自动消失，Flash CS6会将各个过渡帧中的内

9、容清除。,,在某些特殊情况下，Flash CS6会创建动画补间失败，例如当用户在一个关键帧和一个空白关键帧之间创建动画补间时，Flash CS6会在创建动画补间的两个有问题的关键帧之间标注一条黑色虚线表示创建动画补间失败，如图4-21所示。,,9,4.4.2 形状补间,,形状补间的对象是未经组合的笔触区和填充区，Flash CS6会自动形成两关键帧之间笔触区和填充区形状和大小变化的过渡帧。,,如图4-22所示，在时间轴的第1帧中绘制一个圆形，然后将第6帧转换为空白关键帧，并在第6帧中绘制一个五角星形，之后在第1帧与第6帧之间创建形状补间。Flash CS6会在第2、3、4、5帧中添加由圆形到

10、五角星形的渐变图形。,,而且形状补间只能很好地支持一些简单规则形状间的补间动画，对于那些不规则或比较复杂的规则图形在进行形状补间时，Flash CS6会在过渡帧中产生一些出乎意料的图形形状，如图4-23所示。在第1帧中绘制一个五角星形，在第6帧中绘制一个八角星形，它们之间的形状补间会产生一些比较奇怪的图形。,,为两个关键帧添加形状补间的方法大致与添加动画补间的方法相同，所不同的是在添加形状补间后，Flash CS6会将在时间轴中添加形状补间帧的背景颜色变为浅绿色，并添加一条由起始帧到结束帧的黑色箭头。,,10,4.4.2 形状补间,,在时间轴面板的时间轴区域中提供了很多有关帧的编辑参数，如图

11、4-24所示。,,在时间轴左下角有一个“帧居中”图标，单击该图标可以将时间轴移动到所有帧的中间位置上。,,它们的具体作用是让用户像真实使用半透明画纸一样，在编辑某一帧画面的同时能看到位于该帧下层帧中的画面。先前圆形到五角星形补间动画的绘图纸效果如图4-25所示。,,激活绘图纸效果后，时间轴上方的播放头两侧会出现绘图纸效果范围边框，拖动该边框可以调节绘图纸效果的显示范围，如图4-26所示。,,11,4.5 遮 罩 层,遮罩层能创造出类似于用透过望远镜观看事物的遮罩效果。遮罩效果分为遮罩层和被遮罩层。遮罩层相当于望远镜的圆形镜桶，而被遮罩层相当于用望远镜所观看的风景。,,遮罩层遮盖住被遮罩层

12、中的内容，只允许用户通过遮罩层中指定的区域观看被遮罩层中的内容。如图4-27所示,,要制作遮罩效果首先要创建两个图层，这两个图层一个作为遮罩层，另一个作为被遮罩层。,,创建图层后将鼠标光标移动到位于上层的图层上，右击鼠标后在弹出的快捷菜单中选择“遮罩层”选项，将该图层转换为遮罩层。转换后该图层标签中的图标会变成图标，表示该图层现在已经转换为遮罩层。将上层图层转换为遮罩层后，位于该层下层的图层会自动换换成该遮罩层的被遮罩层，并会向右侧缩进，表示从属于遮罩层，如图4-29所示。被遮罩层在图层列表中的图标为。,,12,4.5 遮 罩 层,,删除遮罩层和被遮罩层的方法与删除普通图层的方法相同。,

13、,当制作好遮罩层和被遮罩层后，可以将鼠标光标移动到遮罩层的图层列表上右击鼠标，在弹出的快捷菜单中选择“显示遮罩”选项。这样Flash CS6会将遮罩层和所有被遮罩的图层锁定，并显示遮罩后的效果。用户也可以手动将遮罩层和所有被遮罩的图层锁定，当这些图层被锁定后就会激活遮罩层的遮罩效果。,,其实，遮罩层功能还可以替代很多基本工具实现的效果，而且用遮罩层制作的效果通常会优于用基本工具制作的效果，因为用遮罩层制作的效果要比用基本工具制作的效果更自然、更方便。,,,13,4.6 引 导 层,引导层是一个与遮罩层同样重要的概念，制作Flash动画的成功与否很大程度上取决于引导层和遮罩层的应用。,,引

14、导层的作用就是引导动画补间中补间对象的移动方式。,,创建引导层的方法与创建遮罩层的方法大致相同，先要在图层列表中新建两个图层，其中一个图层作为引导层，另一个图层作为储存起始关键帧和结束关键帧的动画补间图层(被引导层)。将鼠标光标移动到任意一个新建的图层标签上，右击鼠标，在弹出的快捷菜单中选择“引导层”选项，选择后该图层的图标会变成，表示该图层已经转换为引导层，但该引导层中还未添加被引导层。,,用鼠标将另一个图层拖动到引导层下面，Flash CS6就会自动将该图层转换为被引导图层，转换为被引导层的图层图标不会发生变化，但引导层的图标会变为，表示该引导层中已经包含一个或多个被引导层，如图4-32所

15、示。,,14,4.6 引 导 层,,如若要恢复Flash CS6为对象设定的直线运动轨迹，则需要将含有动画补间的被引导层拖动出引导层。,,如图4-35所示，在引导层中绘制一个椭圆形，用椭圆形的上半部分弧线作为足球的运动轨迹，并在被引导层中将起始关键帧和结束关键帧中的足球放置在指定位置上。但因为椭圆下半部分的弧线长度小于上半部分的弧线长度，所以最终足球会沿椭圆下半部分的弧线轨迹运动。,,在制作含引导层的动画补间运动时，工作区中的引导轨迹是可见的，这是为了方便用户准确地制作各个运动对象的运动轨迹，当把Flash发布为SWF文件后，Flash Player会自动隐藏引导层中的运动轨迹，不会影响

16、动画效果。,,15,4.6 引 导 层,,实例练习：制作流星闪过星空的动画效果,,知识要点：图层和时间轴的基本应用 难易程度：★★,,重点难点：合理使用图层,,1) 新建Flash CS6文档,,2) 制作天空和地面背景,,3) 制作星空效果,,4) 制作流星,,5) 制作背景树和整理图层,,参见教材P65,,16,4.6 引 导 层,,实例练习：制作星座图,,知识要点：图层、按钮和动画补间的使用 难易程度：★★★,,重点难点：按钮与影片剪辑的结合,,1) 新建Flash CS6文档,,2) 制作背景星空,,3) 制作星座元件,,4) 制作星座,,5) 制

17、作散射星效果,,6) 制作星座按钮,,7) 添加星座及整理元件,,参见教材P71,,17,4.6 引 导 层,,实例练习：制作六挡汽车广告,,知识要点：图层间帧与动画补间的交替 难易程度：★★★★,,重点难点：复杂动画的帧控制,,1) 新建Flash CS6文档,,2) 导入背景并制作背景元件,,3) 制作仪表盘指针动画效果,,4) 制作同步挡位数字,,5) 制作广告语,,6) 整理元件,,参见教材P78,,18,4.6 引 导 层,,实例练习：制作放大镜效果,,知识要点：遮罩层、引导层和动画补间的使用 难易程度：★★★★★,,重点难点：灵活应用遮罩层,,1) 新建Flash CS6文档,,2) 导入背景,,3) 制作放大镜,,4) 制作放大镜运动轨迹,,5) 制作遮罩层,,6) 合成各个图层,,参见教材P84,,19,