《flash入门基础第课动作补间动画.doc》由会员分享，可在线阅读，更多相关《flash入门基础第课动作补间动画.doc（9页珍藏版）》请在金锄头文库上搜索。
1、第7课动作补间动画动作补间动画也是Flash中非常重要的表现手段之一，与“形状补间动画”不同的是，动作补间动画的对象必需是“元件”或“群组对象”。运用动作补间动画，你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，充分利用动作补间动画这些特性，可以制作出令人眼花缭乱的动画效果。 学习目的本节你将学会以下知识： u 动作补间动画的制作方法 u 网站Banner的制作方法 u “文本工具”的使用方法 u 制作文字变色效果 u 制作文字大小缩放效果 u 制作文字改变透明度效果 课前热身当你访问一个网站时，最先吸引你的可能是网站上方的广告条吧？这就是Banner,它具有灵活的实时性、强烈的交互
2、性与感染力，你可以用它来说明自己网站的特点，提升网站的形象，如果你能用Flash将Banner做成动画的形式，那无疑会大大增加网站的吸引力。 下面先用动作补间动画制作一个网站Banner实例，效果如图3.1所示。 图3.1 网站Banner（1）创建影片文档 步骤1设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，单击【确定】按钮，新建一个影片文档。打开【文档属性】对话框，设置文件大小为52060像素，【背景色】为白色，如图3.2所示。图3.2 设置文档属性步骤2设置背景图层 执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的名为“ba
3、nner背景.bmp”图片导入到场景中（文件路径：配套光盘ch3素材ch3.2banner背景.bmp），选择工具箱中的【箭头工具】和【任意变形工具】调整图片的大小和位置。选中第205帧，按F5键，添加普通帧，图片效果如图3.3所示。 图3.3 设置背景（2）创建元件步骤1 创建“电脑动画”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“电脑动画”。在新元件编辑场景中选择第一帧，单击工具箱中的【文字工具】，在场景中单击一下，然后在【属性】面板上设置文本类型为【静态文本】、字体为【隶书】、字体大小为32、颜色值为#FF9900，设置完后，在场景中输入“电脑动画”四个字，如图3.4
4、所示。 图3.4 创建“电脑动画元件”步骤2创建“网页设计”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“网页设计”。在编辑场景中选择第一帧，按上面的方法，在场景中输入“网页设计”四个字，参数同上。 步骤3 创建“图像制作”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“图像制作”。在编辑场景中选择第一帧，按上面的方法，在场景中输入“图像制作”四个字，参数同上。 步骤4 创建“闪客启航”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪客启航”。在编辑场景中选择第1帧，单击工具箱上的文字工具 ，在【属性】面板上设置文本类型为【静态文本】、字体为
5、【隶书】、字体大小为50、颜色值为#FF6600,在场景中输入“闪客沙龙”四个字，如图3-4-11所示。 图3-4-11 创建“闪客启航”元件步骤5 创建“语音教学” 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“语音教学”。在编辑场景中选择第1帧，单击工具箱中的【文字工具】，文字属性不变,在场景中输入“语音教学”四个字。 （3）创建动画 “电脑动画”、“网页设计”和“图像制作”三组字体分别从大到小、由近及远以渐显的方式运动到舞台中央停留片刻，再移动到舞台左边，字体颜色和大小相应改变。然后“闪客启航”一组字以同样的方式移动到舞台中央，突然消失，最后“语音教学”以旋转的方式移动到舞台
6、正中，这就是本实例中文字的动画效果。下面，我们就来实现这一动画效果。 步骤1 创建“电脑动画”文字效果 单击时间轴右上角的【编辑场景】按钮，选择【场景1】转换到主场景中。在场景中新建一个图层。选择第1帧，把库里的“电脑动画”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为260.0，【H】值为45.0,【X】值为58.0，【Y】值为48.0,【Alpha】值为3%，然后在第20帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为141,【H】值为36，【X】值为127，【Y】值为12,选择【颜色】为【无】。 图3-4-12是“电脑动画”元件在【属性】面板中的第1、20帧处
7、的位置参数。 (a)第1帧属性 （b）第20帧属性图3-4-12 “电脑动画”属性设置在第28帧处添加关键帧，不改参数，这是为了给该文字对象一个停顿，让别人能看清楚。 在第48帧处添加关键帧，在【属性】面板上，设置【W】值为75，【H】值为12,【X】值为12，【Y】值为9，选择【颜色】为【色调】、黑色，如图3-4-13所示。 图3-4-13 设置第48帧上实例的属性分别用鼠标右键单击第1帧和第28帧，在弹出的菜单中选择【创建补间动画】。 步骤2 创建“网页设计”文字效果 在场景中新建一个图层。在此图层的第49帧处添加关键帧，把库里的“网页设计”元件拖到场景中，在【属性】面板上设置元件的【W】
8、值为300，【H】值为83，【X】值为43，【Y】值为20，【Alpha】值为6%。然后在第71帧处添加关键帧，在场景中选中文字，在【属性】面板中设置【W】值为135,【H】值为36，【X】值为131，【Y】值为11,选择【颜色】为【无】，如图3-4-14所示。 图3-4-14 在第49、71帧中的“网页设计”再在第78帧处添加关键帧，不改参数，在第97帧处添加关键帧，在【属性】面板上，设置【W】值为81，【H】值为22,【X】值为18,【Y】值为20，选择【颜色】为【色调】、黑色。最后在第49和第78帧处分别建立动作补间动画，在第205帧添加普通帧，效果如图3-4-15。 图3-4-15 创
9、建补间后的时间轴结构及实例在第78帧的效果步骤3 创建“图像制作”文字效果 在场景中新建一个图层。先在第98帧处添加关键帧，把库里的“图像制作”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为360，【H】值为90,【X】值20,【Y】值23，【Alpha】值为5,然后在第119帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为144,【H】值为36，【X】值128,【Y】值10，【颜色】选项为【无】,再在第126帧处添加关键帧，不改参数，在第146帧加关键帧，在【属性】面板中，设置【W】值为86，【H】值为22,【X】值为27,【Y】值为35，选择【颜色】为【色调】、
10、黑色，最后在第98和第126帧处分别建立动作补间动画，在第205帧添加普通帧，如图3-4-16所示。 图3-4-16 “图像制作”元件在第126、146帧的位置步骤4 创建“闪客启航”文字效果 在场景中新建一个图层。先在第147帧处添加关键帧，把库里的“闪客启航”元件拖到场景中，在【属性】面板中，设置元件的【W】值为487，【H】值为124,【X】值为-28，【Y】值-144，【Alpha】值为3%，然后在第166帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为212,【H】值为54，【X】值123,【Y】值5，选择【颜色】为【无】。最后在第147帧处建立动作补间动画，在第1
11、74帧插入空白关键帧。 步骤5 创建“语音教学”文字效果 在场景中新建一个图层。先在第174帧处添加关键帧，把库里的“语音教学”元件拖到场景中，在【属性】面板上，设置【W】值为450，【H】值为115,【X】值-20,【Y】值29，【Alpha】值为3%。然后在第194帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为210,【H】值为54，【X】值为123,【Y】值为3，选择【颜色】为【无】。最后在第174帧处建立补间动画，顺时钟旋转一圈，如图3-4-17所示。 图3-4-17 “语音教学”元件在第174帧的【属性】面板参数完成后的部分时间线情况如图3-4-18所示。 图3-
12、4-18 【时间帧】面板上的各层在实际制作中，本例中各图形元件的大小、位置均不必拘束于书中的数值，你可自行调整至满意为止。课堂讲解1动作补间动画的概念（1）动作补间动画的概念 在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画被称为动作补间动画。 （2）构成动作补间动画的元素 构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。 （3）动作补间动画在时间帧面板上的表现 动作补间动画建立后，时间帧面板的背景色变
13、为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图3-4-1所示。 图3-4-1 动作补间动画在时间帧上的表现（4）形状补间动画和动作补间动画的区别 形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧，二者之间的区别如下表所示。区别之处动作补间动画形状补间动画在时间轴上的表现淡紫色背景加长箭头淡绿色背景加长箭头组成元素影片剪辑、图形元件、按钮、文字、位图等形状，如果使用图形元件、按钮、文字，则必先打散再变形。完成的作用实现一个元件的大小、位置、颜色、透明等的变化。实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。（5）创建动作补间动画的方法 在时间轴面板上动画
14、开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在【属性】面板上单击【补间】旁边的“小三角”，在弹出的菜单中选择【动作】，或单击右键，在弹出的菜单中选择【创建补间动画】，就建立了“动作补间动画”。 2认识动作补间动画的属性面板在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图3-4-2所示。图3-4-2动作补间动画属性面板（1）【简易】选项 用鼠标单击【简易】右边的按钮，弹出拉动滑杆，拖动上面的滑块，可设置参数值，当然也可以直接在文本框中输入具体的数值，设置完后，补间动作动画效果会以下面的设置作出相应的
