Flash动画制作.ppt

1、Flash动画制作,1.1 Flash8工作环境,1.1.1 工作环境简介 1开始页,1.1 Flash8工作环境,2工作窗口,1.1 Flash8工作环境,1.1.1 工作环境简介 1开始页,“时间轴”下方是“工作区”和“舞台”。Flash 8扩展了舞台的工作区，可以在上面存储更多的项目。 舞台是放置动画内容的矩形区域，这些内容可以是矢量插图、文本框、按钮、导入的位图图形或视频剪辑等,1.1 Flash8工作环境,1.1.1 工作环境简介 2常用工具箱,1.1 Flash8工作环境,1.1.2 面板,属性”面板,“动作”面板,“滤镜”面板,Flash8.0常见的动画形式：,逐帧动画,逐帧动画

2、（FrameBy Frame），这是一种常见的动画手法，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。由于逐帧动画的帧序列内容不一样，不仅增加制作负担而且最终输出的文件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。,逐帧动画在时间帧上表现为连续出现的关键帧,创建逐帧动画的几种方法 （1）用导入的静态图片建立逐帧动画 （2）绘制矢量逐帧动画 （3）文字逐帧动画 （4）导入序列图像,Flash8.0常见的动画形式：,逐帧动画实例奔跑的豹子,1、 创建影片文档 执行【文件】|【新建】

3、命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*260象素，【背景色】为白色,Flash8.0常见的动画形式：,逐帧动画实例奔跑的豹子,2、 创建背景图层 选择第一帧，执行【文件】|【导入到场景】命令，将本实例中的名为“雪景.bmp”图片导入到场景中。在第8帧按F5，加过渡帧使帧内容延续。,3、 导入gif动画 新建一层，选择第一帧，执行【文件】|【导入到场景】命令，将本教程中的“奔跑的豹子”系列图片导入。此时，会弹出一个对话框,Flash8.0常见的动画形式：,逐帧动画实例奔跑的豹子,4 、调整对象位置 先

4、把“雪景”图层加锁，然后按下时间轴面板下方的【绘图纸显示多帧】按钮,再单击【修改绘图纸标记】按钮 ,在弹出的菜单中选择【显示全部】选项 ,最后执行【编辑】|【全选】命令，此时时间轴和场景效果如图.用鼠标左键按住场景左上方的豹子拖动，就可以一次把8帧中的图片一次全移动到场景中.,5、 测试存盘 执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“奔跑的豹子.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“奔跑的豹子.swf”文件。,Flash8.0常见的动画形式：,形状补间动画,形状补间

5、动画的概念 在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后 在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。,构成形状补间动画的元素 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。,形状补间动画在时间帧面板上的表现 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头,Flash8.0常见的动画形式：

6、,形状补间动画,创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图所示，一个形状补间动画就创建完毕。,Flash8.0常见的动画形式：,动作补间动画,动作补间动画也是Flash中非常重要的表现手段之一，与“形状补间动画”不同的是，动作补间动画的对象必需是“元件”或“成组对象”。 运用动作补间动画，您可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，配合别的

7、手法，您甚至能做出令人称奇的仿3D的效果来,（1）动作补间动画的概念 在Flash的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flash 根据二者之间的帧的值创建的动画被称为动作变形动画。 （2）构成动作补间动画的元素 构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等等，除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。 （3）动作补间动画在时间帧面板上的表现 动作补间动画建立后，时间帧面板的背景色

8、变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图所示。,Flash8.0常见的动画形式：,动作补间动画,（4）创建动作补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在【属性面板】上单击【补间】旁边的“小三角”，在弹出的菜单中选择【动作】，或单击右键，在弹出的菜单中选择【新建补间动画】，就建立了“动作补间动画”。,实例：网站Banner,（1）创建影片文档 1、 设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后

9、，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为520*60象素，【背景色】为白色,Flash8.0常见的动画形式：,动作补间动画,实例：网站Banner,2、 设置背景图层 执行【文件】|【导入到场景】命令，将本实例中名为“启航banner.bmp”图片导入到场景中，在第205帧处按F5，加普通帧,（2）创建元件 1、 创建“电脑动画”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“电脑动画”。在“新元件编辑窗口”中选择第一帧，单击工具栏上的文字工具 ，在场景中点击一下，然后在【属性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】32、【颜

10、色】#FF9900，最后在场景中写下“电脑动画”四个字.,Flash8.0常见的动画形式：,动作补间动画,实例：网站Banner,2、创建“网页设计”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“网页设计”。在编辑窗口选择第一帧，按上面的方法,在场景中写下“网页设计”四个字，参数同上。 3、 创建“图象制作”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“图象制作”。在编辑窗口选择第一帧，按上面的方法，在场景中写下“图象制作”四个字，参数同上。 4、 创建“闪客启航”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪客启航”。在编辑窗口选择第1

11、帧，单击工具栏上的文字工具 ，在【属性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】为50、【颜色】为#FF6600,在场景中写下“闪客沙龙”四个字 5、 创建“语音教学” 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“语音教学”。在编辑窗口选择第1帧，单击工具栏上的文字工具 ，文字属性不变,在场景中写下“语音教学”四个字,Flash8.0常见的动画形式：,动作补间动画,实例：网站Banner,（3）创建动画 1、 创建“电脑动画”文字效果 在场景中新建一个图层。先在第1帧中，把库里的“电脑动画”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为300，【H

12、】值为76, 【X】值为47，【Y】值为27, 【Alpha】值为3，然后在第20帧处加关键帧，把“电脑动画”元件拖到场景的中间，设置【属性】面板的【W】值为141,【H】值为36，【X】值为127，【Y】值为12,【颜色】选项为“无”。 在第28帧处加关键帧，不改参数，这是为了给该文字对象一个停顿，让别人能看清楚。 在第48帧加关键帧，设置【属性】面板上参数【W】值84，【H】值21,【X】值9, 【Y】值3，【颜色】选色调，黑色。 在第1和第28帧处分别动建立动作补间动画，在第205帧添加普通帧使帧内容延续。,Flash8.0常见的动画形式：,动作补间动画,实例：网站Banner,2、 创

13、建“网页设计”文字效果 在场景中新建一个图层。在此图层的第49帧加关键帧，把库里的“网页设计”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为300，【H】值为83, 【X】值为43，【Y】值为20, 【Alpha】值为6,然后在第71帧处加关键帧，把“网页设计”元件拖到场景的中间，设置【属性】面板的【W】值为135,【H】值为36，【X】值为131，【Y】值为11,【颜色】选项为“无 再在第78帧处加关键帧，不改参数，在第97帧加关键帧，设置【属性】面板上参数【W】值81，【H】值22,【X】值18, 【Y】值20，【颜色】选色调，黑色。最后在第49和第78帧处分别建立动作补间动画，

14、在第205帧添加普通帧。,Flash8.0常见的动画形式：,遮罩动画,1）什么是遮罩 “遮罩”，顾名思义就是遮挡住下面的对象。 在Flash8.0中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。,2）遮罩有什么用 在Flash8.0动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。,3）在Flash8.0中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转

15、化的。你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标 变为遮罩层图标 ，系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为 ，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行。,Flash8.0常见的动画形式：,遮罩动画,实例：红星闪闪,（1）创建影片文档 1、设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*400象素，【背景色】为黑色。（在教程中，我们为了更好的显示场景中的内容

16、，背景色设为了深蓝色）,（2）创建元件 1、 创建“闪光线条”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条”。选择工具栏上的直线工具 ，在场景中画一直线，在【属性】面板上作如图设置。,Flash8.0常见的动画形式：,遮罩动画,实例：红星闪闪,2、 创建“闪光线条组合”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条组合,从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在X轴上的位置为-200，Y轴为20。然后单击工具栏上的任意变形工具 ，此时元件的中心会出现一个小白点，它就是对象的“注册点”，用鼠标左键按住它，拖到场景的中心处松手

17、。 然后执行【窗口】|【设计面板】|【变形】命令，打开变形面板，选中【旋转】，角度为15度，连续按下【复制并应用变形】按钮,在时间轴的关键帧上点一下，选中全部图形，执行【修改】|【分散】命令，把线条打散，再执行【修改】|【形状】|【将线条转化为填充】命令，将线条转变为形状。,Flash8.0常见的动画形式：,遮罩动画,实例：红星闪闪,3、 创建“闪光”元件 执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”， 单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组合”的元件拖到场景中，对齐中心点，复制此元件，在第30帧处加关键帧，再回到第1帧中建立补间动作动画，【属性】

18、面板上设置顺时针旋转一周。 然后新建一层，在第1帧中执行【编辑】|【粘贴到当前位置】命令，使二层中的“闪光线条组合”完全重合，再执行【修改】|【变形】|【水平翻转】命令，让复制过来的线条和第一层的线条方向相反，在场景中形成交叉的图形。 在第30帧处建立关键帧，在第1帧中建立动作补间动画，【属性】面板上设置逆时针旋转一周，最后将此层设为遮罩层，如图所示。图中显示的是“闪光”元件的时间轴面板和各图层中的动画设置。,Flash8.0常见的动画形式：,遮罩动画,实例：红星闪闪,Flash8.0常见的动画形式：,遮罩动画,实例：红星闪闪,4、 创建“红星”元件 执行【插入】|【新建元件】命令，新建一个图

19、形元件，名称为“红星”。我们要在这个元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图中的“1-9”的数字表示这九个步骤。,Flash8.0常见的动画形式：,遮罩动画,实例：红星闪闪,第一步，按住shift键，从场景中心向上画一根黄色的线条 第二步，选择工具箱中的任意变形工具 ,在画好的线条上点一下，这里，线条的中心出现一个白色的小园点，我们叫它“注册点”。 第三步，鼠标左键按住这个小白点，拖到线条的最下端，这是因为我们要让线条要以下端为中心旋转复制。 第四步，执行【窗口】|【设计面板】|【变形】，打开变形面板，各参数设置 按下【复制并应用变形】按钮四次，就会在场景中每隔72度复制出一根线条，五个线条的顶端构成五角星的五个顶点。第五步，用绿色线条分别连接五根线条的