当前位置:首页 >> 金融/投资 >>

动作补间动画


动作补间动画[FLASH8 基础教程]

动作补间动画
动作补间动画也是 Flash 中非常重要的表现手段之一,与“形状补间动画” 不同的是,动作补间动画的对象必需是“元件”或“成组对象”。 运用动作补间动画,您可以设置元件的大小、位置、颜色、透明度、旋转等 种种属性,配合别的手法,您甚至能做出令人称奇的仿 3D 的效果来。本实例详 细讲解了动作补间动画的特点及创建方法, 并分析了动作补间动画和形状补间动 画的区别,我们精心设计的一个实例将带您进一步加深对动作补间动画的了解。
1.动作补间动画的概念 .

(1)动作补间动画的概念 )动作补间动画的概念 在 Flash 的时间帧面板上,在一个时间点(关键帧)放置一个元件,然后在另一个时间 点(关键帧)改变这个元件的大小、颜色、位置、透明度等等,Flash 根据二者之间的帧的 值创建的动画被称为动作变形动画。 (2)构成动作补间动画的元素 构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮等等,除了元件,其 他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行, 只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。 (3)动作补间动画在时间帧面板上的表现 动作补间动画建立后, 时间帧面板的背景色变为淡紫色, 在起始帧和结束帧之间有一个 长长的箭头,如图 3-4-1 所示。

图 3-4-1 动作补间动画在时间帧上的表现

(4)形状补间动画和动作补间动画的区别 形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧,二 者之间的区别如下表所示。
区别之处 在时间轴上的表现 组成元素

动作补间动画
淡紫色背景加长箭头

形状补间动画
淡绿色背景加长箭头 形状, 如果使用图形元件、 按钮、 文字,则必先打散再变形。

影片剪辑、图形元件、按钮
实现一个元件的大小、位置、颜色、 透明等的变化。

完成的作用

实现二个形状之间的变化,或一 个形状的大小、位置、颜色等的 变化。

5)创建动作补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件, 一帧中只 能放一个项目, 在动画要结束的地方创建或选择一个关键帧并设置该元件的属性, 再单击开 始帧,在【属性面板】上单击【补间】旁边的“小三角”,在弹出的菜单中选择【动作】,或 单击右键,在弹出的菜单中选择【新建补间动画】,就建立了“动作补间动画”。
2.认识动作补间动画的属性面板 .

在时间线“动作补间动画”的起始帧上单击,帧属性面板会变成如图 3-4-2 所示。

图 3-4-2 动作补间动画属性面板

(1)“简单”选项 简单”

在“0”边有个滑动拉杆按钮

,单击后上下拉动滑杆或填入具体的数值,补间动作动画

效果会以下面的设置作出相应的变化: 1. 在 1 到 -100 的负值之间, 动画运动的速度从慢到快, 朝运动结束的方向加速补间。 2. 在 1 到 100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。 3. 默认情况下,补间帧之间的变化速率是不变的。 (2)“旋转”选项 ) 旋转”

有四个选择,选择“无”(默认设置)禁止元件旋转;选择“自动”可以使 元件在需要最小动作的方向上旋转对象一次;选择“顺时针”(CW) 或“逆时针” (CCW) , 并在后面输入数字, 可使元件在运动时顺时针或逆时针旋转相应的圈数。
(3)“调整到路径” 调整到路径” 将补间元素的基线调整到运动路径, 此项功能主要用于引导线运动, 我们在下一节中要 谈到此功能。 (4)“同步”复选框 同步” 使图形元件实例的动画和主时间轴同步。 (5)“对齐”选项 对齐” 可以根据其注册点将补间元素附加到运动路径,此项功能主要也用于引导线运动。
实例: 实例:网站 Banner

实例简介

当您访问一个网站时,最先吸引您的目光的可能是网站上方的广告了吧?这 就是 Banner,它具有灵活的实时性、强烈的交互性与感官性,您可以用它来说明 自己网站的特点,提升网站的形象,如果您能用 Flash 做成动画的形式,那无疑 会大大增加对眼球的吸引力。

我们来看看 “闪客启航” 网站(http://www.flasher123.com/)的 Banner, “闪 客启航”这是一个提供免费学习 Flash 及网页制作等知识的网站, “闪客启航视 频语音教室”(UC 合作专区-合作免费教学专区-闪客启航)是提供免费语音视频 教学的网上教室,本例通过动画手段,使“Banner”较好地显示了网站的性质与 特点,播放效果如图 3-4-7 所示。

图 3-4-7 启航网站的 Banner

知识提要 知识提要 1. 创建文字变色效果 2. 创建文字改变大小效果 3. 创建文字改变透明度效果

制作步骤 (1)创建影片文档 1、 设置影片文档属性 执行【文件】|【新建】命令,在弹出的面板中选择【常规】|【Flash 文档】选项后, 点击【确定】按钮,新建一个影片文档,在【属性】面板上设置文件大小为 520*60 象素, 【背景色】为白色。如图 3-4-8 所示。

图 3-4-8 启航 Banner 文档属性

2、 设置背景图层 执行【文件】|【导入到场景】命令,将本实例中名为“启航 banner.bmp” 图片导入到场景中,在第 205 帧处按 F5,加普通帧,如图 3-4-9 所示。

图 3-4-9 设置背景

(2)创建元件 ) 1、 创建“电脑动画”元件 执行【插入】|【新建元件】命令,新建一个图形元件,名称为“电脑动画”。在“新元件 编辑窗口”中选择第一帧,单击工具栏上的文字工具 ,在场景中点击一下,然后在【属

性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】32、【颜色】 #FF9900,最后在场景中写下“电脑动画”四个字,如图 3-4-10 所示。

图 3-4-10 创建“电脑动画元件”

2、创建“网页设计”元件 执行【插入】|【新建元件】命令,新建一个图形元件,名称为“网页设计”。 在编辑窗口选择第一帧,按上面的方法,在场景中写下“网页设计”四个字,参 数同上。 3、 创建“图象制作”元件 执行【插入】|【新建元件】命令,新建一个图形元件,名称为“图象制作”。 在编辑窗口选择第一帧,按上面的方法,在场景中写下“图象制作”四个字,参 数同上。 4、 创建“闪客启航”元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“闪客启航”。在编辑窗口 选择第 1 帧,单击工具栏上的文字工具 ,在【属性】面板上设置【文本类型】为静态文

本、【字体】为隶书、【字体大小】为 50、【颜色】为#FF6600,在场景中写下“闪客沙龙” 四个字,如图 3-4-11 所示。

图 3-4-11 创建“闪客沙龙”元件 5、 创建“语音教学”
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“语音教学”。在编辑窗口 选择第 1 帧, 单击工具栏上的文字工具 , 文字属性不变,在场景中写下“语音教学”四个字。

(3)创建动画 1、 创建“电脑动画”文字效果 在场景中新建一个图层。先在第 1 帧中,把库里的“电脑动画”元件拖到场景的外面,在 【属性】面板上设置元件的【W】值为 300,【H】值为 76, 【X】值为 47,【Y】值为 27, 【Alpha】值为 3%,然后在第 20 帧处加关键帧,把“电脑动画”元件拖到场景的中间,设置 【属性】面板的【W】值为 141,【H】值为 36,【X】值为 127,【Y】值为 12,【颜色】 选项为“无”。 图 3-4-12 是“电脑动画”元件在【属性】面板的第 1、20 帧处的位置设置。

图 3-4-12 “电脑动画”属性设置

在第 28 帧处加关键帧,不改参数,这是为了给该文字对象一个停顿,让别人能看清楚。 在第 48 帧加关键帧,设置 【属性】 面板上参数【W】 84, 值 【H】值 21,【X】值 9, 【Y】 值 3,【颜色】选色调,黑色。 在第 1 和第 28 帧处分别动建立动作补间动画,在第 205 帧添加普通帧使帧内容延续。 2、 创建“网页设计”文字效果 在场景中新建一个图层。在此图层的第 49 帧加关键帧,把库里的“网页设计”元件拖到 场景的外面,在【属性】面板上设置元件的【W】值为 300,【H】值为 83, 【X】值为 43, 【Y】值为 20, 【Alpha】值为 6%,然后在第 71 帧处加关键帧,把“网页设计”元件拖到场景 的中间,设置【属性】面板的【W】值为 135,【H】值为 36,【X】值为 131,【Y】值为 11,【颜色】选项为“无”,如图 3-4-13 所示。

图 3-4-13 “网页设计”元件在第 49、71 帧的位置

再在第 78 帧处加关键帧,不改参数,在第 97 帧加关键帧,设置【属性】面板上参数 【W】值 81,【H】值 22,【X】值 18, 【Y】值 20,【颜色】选色调,黑色。最后在第 49 和第 78 帧处分别建立动作补间动画,在第 205 帧添加普通帧。 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,【颜色】选色调,黑色,最 后在第 98 和第 126 帧处分别建立动作补间动画,在第 205 帧添加普通帧,如图 3-4-14 所 示。

图 3-4-14 “图象制作”元件在第 126、146 帧的位置

4、 创建“闪客启航”文字效果
在场景中新建一个图层。先在第 147 帧处加关键帧,把库里的“闪客启航”元件拖到场景 的外面,在【属性】面板上设置元件的【W】值为 487,【H】值为 124, 【X】值-28, 【Y】 值-144,【Alpha】值为 3%,然后在第 166 帧处加关键帧,把“闪客启航”元件拖到场景的 中间,设置【属性】面板的【W】值为 212, 【H】值为 54,【X】值 123, 【Y】值 5,【颜 色】选项无。最后在第 147 帧处建立动作补间动画,在第 173 帧添加普通帧。 5、 创建“语音教学”文字效果 在场景中新建一个图层。先在第 174 帧处加关键帧,把库里的“语音教学”元件拖到场景 的外面,在【属性】面板上设置元件的【W】值为 450,【H】值为 115, 【X】值-20, 【Y】 值 29,【Alpha】值为 3%。然后在第 194 帧处加关键帧,把“语音教学”元件拖到场景的中 间,设置【属性】面板的【W】值为 210,【H】值为 54,【X】值 123, 【Y】值 3,【颜

色】选项无。最后在第 174 帧处动作建立补间动画,顺时钟旋转一圈,在第 205 帧添加普 通帧,如图 3-4-15 所示。

图 3-4-15 “语音教学”元件在第 174 帧的【属性】面板参数

完成后的部分时间线情况如图 3-4-16 所示。

图 3-4-16 时间帧面板上的各层

在实际制作中,本例中各图形元件的大小、位置均不必拘束于书中所示的数字,您可自 行调整至满意为止。

第六课背景素材:点击下载


赞助商链接
相关文章:
《动作补间动画》导学案
动作补间动画》导学案 - 《移动的小方块——动作补间动画》导学案 基本任务 制作“移动的小方块” 自我检测 1. 绘制的小方块使用的工具是( 2. 选中小方块使用(...
Flash动作补间动画教学设计
Flash动作补间动画教学设计 - Flash 动画制作——动作补间动画教学设计 【教材分析】 本课是河南大学出版社信息技术(七年级下册)第一章第十节“创作 Flash 动画(...
制作运动补间动画(带反思)
制作运动补间动画(带反思) - 武威第五中学课堂教学设计首页 编写时间:2014 年 11 月 22 日 课题 第一学期 授课班级 总第 17 课时 八年级 1-3 班 编写人:...
人教版八年级上册信息技术第2课《动作补间动画 》精品教案
人教版八年级上册信息技术第2课《动作补间动画 》精品教案_其它课程_初中教育_教育专区。人教版八年级上册信息技术第2课《动作补间动画 》精品教案,精品在线,方便...
动作补间动画制作微课教学设计-文字脚本
动作补间动画制作微课教学设计-文字脚本 - 引导动画教学设计 录制时间:2016 年月 日微课时间:八分钟 微课 名称 知识 来源 教学 类型 适用 对象 设计 思路 动作...
FLASH 动画教学
FLASH 动画教学 - FLASH 教案 项目 4 动作补间动画 课题 任务 太极图动画 教师讲解、学生讨论,上机实训操作 授课节数 2 课时 教学方法 应知 了解动作补间动画的...
第五课神奇的形变动画教学设计
第五课神奇的形变动画教学设计 - 第五课《神奇的形变动画》 【教学目标】 知识与技能:理解“形状补间”动画与“动作补间动画的区别,掌握“形状补间”动画 的...
Flash部分讲稿
Flash部分讲稿 - 2.2.2 制作动作补间动画 动作补间动画可以通过 Flash 自动运算功能,对对象的移动、缩放、旋转、颜色渐 变等变化进行处理。 需要特别说明的是动作...
Flash开场拉幕特效:圣旨展开
中拖入“章”图形元件放大并放在合适的位置,再第 46 帧插入关键帧,将“章”元件缩小放在合适的位置,然后选中第 39 帧,在“属性面板”中 设置“动作补间动画...
封面封底及设计说明书
同时采用动作补间表现加载效果,如图 1; 图1 第 1 页 网络动画设计(KJ) 63—290 帧:利用遮罩从左至右拉出背景,再利用逐帧画出方向标,用 动作补间拉出文字,...
更多相关标签: