- 浏览: 13634580 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
动作补间动画也是 Flash 中非常重要的表现手段之一,与“形状补间动画”不同的是,动作补间动画的对象必需是“元件”或“成 组对象”。
运用动作补间动画,你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性,配合别的手法,你甚 至能做出令人称奇的仿 3D 的效果来。本节详细讲解了动作补间动画的特点及创建方法,并分析了动作补间动画和形状补间动画的区别,精心设计的两个实例将带你进一步加深对动 作补间动画的了解。
1 .动作补 间动画的概念
( 1 )动作补间动画的概念
在一个关键帧上放置一个元件,然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等,Flash 根据二者之间的帧的值创建的动画被称为动作补间动画。
(2)构成动作补间动画的元素
构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮、文字、位图、组合等等,但不能是形 状,只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。
(3)动作补间动画在时间帧面板上的表现
动作补间动画建立后,时间帧面板的背景色变为淡紫色,在起始帧和结束帧之 间有一个长长的箭头,如图3-4-1所示。
图3-4-1 动作补间动画在时间帧上的表现
(4)形状补间动画和动作补间动画的区别
形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束 帧,二者之间的区别如下表所示。
区别之处 |
动作补间动画 |
形状补间动画 |
在时间轴上的表现 |
淡紫色背景加长箭头 |
淡绿色背景加长箭头 |
组成元素 |
影片剪辑、图形元件、按钮、文字、位图等 |
形状,如果使用图形元件、按钮、文字,则必先打散 再变形。 |
完成的作用 |
实现一个元件的大小、位置、颜色、透明等的变化。 |
实现二个形状之间的变化,或一个形状的大小、位 置、颜色等的变化。 |
(5)创建动作补间动画的方 法
在时间轴面板上 动画 开始播放的地方创建或选择一个关键帧并设置一个元件,一帧中只能放一个项目,在动画要结束的地方创建或选择一个关键帧并设置该元件的属性,再单击开始帧, 在【属性】面板上单击 【补间】旁边的“小三角”,在弹出的菜单中选择【动 作】,或单击右键,在弹出的菜单中选择【创建补间动画】,就建立了“动作补间动画”。
2 .认识动 作补间动画的属性面板
在时间线“动作补间动画”的起始帧上单击,帧属性面板会变成如图3-4-2所示。
图3-4-2动作补间动画属性面板
(1)【简易】选项
用鼠标单击【简易】右边的 按钮,弹出拉动滑杆,拖动上面的滑块,可设置参数值,当然也可以直接在文本框中输入具体的数值,设置完 后,补间动作动画效果会以下面的设置作出相应的变化:
u 在 -1 到 -100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速补间。
u 在 1 到 100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。
u 默认情况下,补间帧之间的变化速率是不变的。
( 2 )【旋转】选项
有四个选择,选择【无】(默认设置)可禁止元件旋转;选择【自动】可使元件在需要最小动作的方向上旋 转对象一次;选择【顺时针】 (CW) 或【逆时针】 (CCW) ,并在后面输入数字,可使元件在运动时顺时针或逆时针旋转相应的圈数。
(3)【调整到路径】
将补间元素的基线调整到运动路径,此项功能主要用于引导线运动,我们在下一节中会介绍此功能。
(4)【 同步】复 选框
使图形元件实例的动画和主时间轴同步。
(5)【对齐】选项
可以根据其注册点将补间元素附加到运动路径,此项功能主要也用于引导线运动。
3.实例1——飞行的飞机
实例简介
巍巍群山,茫茫云海,轻烟似的白云缓缓飘过,一架飞机由近而远的飞去,渐渐消失在远方,如图 3-4-3 所示。本例制作不难,但通过它, 你可以掌握创建动作补间动画的方法。
图 3-4-3 飞机飞行动画
知识提要
● 创建动作补间动画
● 制作元件由大变小的效果
● 制作元件透明度变化的效果
(1)创建影片文档
步骤1 设置影片文档属性
执行 【文件】|【新建】命令,在弹出的面板中选择【常规】|【Flash文档】选项后,点击【确定】按钮,新建一个影片文档,在【属性】 面板上设置文件大小为650×255像素,【背景色】为白色,如图3-4-4所示。
图3-4-4 影片文档属性
步骤 2 创建背景图层
执行【文件】 | 【导入】 | 【导入到舞台】命令,山峰 .jpg 的图片导入到场景中 。 用【箭头工具】调整图片在舞台上的位置,使其居于舞台的中央。如果图片大小不合适,再选 择【任意变形工具】调整图片大小。选择第 100 帧,按 F5 键,添加普通帧。
(2)创建元件
步骤 1 创建飞机元件
执行【插入】 | 【新建元件】命令,新建一个图形元件,名称为“飞机”。这时进入新元件编辑场景,选择第一帧,执行 【文件】 | 【导 入】 | 【导入到舞 台】命令,将为飞机 .png 图片导入到场景中 。
步骤 2 创建白云元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为 “白云”。这时进入新元件编辑场景,选择第一帧, 执行【文 件】 | 【导入】 | 【导入到舞台】命令,将名为“白云 .png ”的图片导入到场景中 。
( 3 )创建动画
步骤1 创建飞行效果
单击时间轴右上角的 【编 辑场景】按钮,选择【场景 1 】,转换到主场景中。 新建一层,把库里名为“飞机”的元件拖到 场景的左侧,执行【修改 】 | 【变形 】 | 【水平翻转 】命令 ,将飞机元件实例水平翻转。在【属性】面板上打开【颜色】旁边的小三角,设置【Alpha】值为80%,如图3-3-5所示。
图3-3-5 第一帧中飞机在场景中的位置和Alpha值
飞机向远处飞去,应该越来越小,越来越模糊,来看看这种效果是什么做出来的吧,选中【图层2】的第100帧,按F6键,添加一个关键帧,在【属性】面板中设置飞机的大小,【W】值是飞机的宽值,为32;【H】值是 飞机的高值,为18.9;【X】、【Y】则是飞机在场景中的X、Y坐标,分别是628.5,51,如图3-4-6所示。
图3-4-6 飞机在100帧处的位置和大小
在【属性】面板上,设置【Alpha】值为20%。
用鼠标右键单击【图层2】的第一帧,选择【创建补间动画】。
步骤2创建白云飘过的效果
新建一层,从库中拖出名为“白云”的元件,放置在背景图右侧的山峰处,设置【Alpha】值为80%,在第100帧处添加关键帧,把元件移到场景的左上方,设置【Alpha】值为40%。
用鼠标右键单击图层的第一帧,选择【创建补间动画】。
执行【控制】|【测试影片】命令,观察动画效果,如果满意, 执行【文件】|【保存】命令,将文件保存成“飞机.fla”,如果要导出Flash的播放文件,执行【文件】|【导出】|【导出影片】命令,保存成“飞 机.swf”文件。
3. 动作补间动画应用——网站Banner
在第一章 中,我们已经学习了一个简单动作补间动画的制作全过程,这里来学习一个比较综合的案例应用。
实例简介
当你访问一个网站时,最先吸引你的可能是网站上方的广告条吧?这就是Banner,它具有 灵活的实时性、强烈的交互性与感官性, 你可以用它来说明自己网站的特点,提升网站的形象,如果你能用Flash做成动画的形式,那无疑会大大 增加吸引力。
我们来看看网站的Banner, 播放效果如图3-4-7所示。
图 3-4-7 启航网站的 Banner
知识提要
● 创建文字变色效果
● 创建文字改变大小效果
● 创建文字改变透明度效果
制作步骤
(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 】转换到主场景中。 在场景中新建一个图层。选择第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帧处的位置参数。
(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】值为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 创建补间后的时间轴结构及实例在第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,选择【颜色】为【色调】、黑色,最后在第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帧处建立动作补间动画,在第174帧插入空白关键帧。
步骤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-4-18 【时间帧】面板上的各层
在实际制作中,本例中各图形元件的大小、位置均不必拘束于数值,你可自行调整至满意为止。
课堂实例:
摇摆的蜡烛光
迎奥运的banner
发表评论
-
iPhone、iPad 如何播放网页调用优酷视频?
2013-09-26 14:30 17680在线视频一般都是基 ... -
Scrolling Dynamically Loaded Text (as2)
2010-07-02 05:04 1924One quest ... -
flashAndPHP 简单交互
2010-06-17 01:53 1929第一章: flash,php 和 mysql ... -
交互动画按钮
2010-06-16 23:44 3669交互动画按钮 按钮元件是 Flash 的基本 ... -
引导路径动画 (2)
2010-06-16 23:41 17554.实例2——海底世界 ... -
引导路径动画 (1)
2010-06-16 23:31 3510引导路径动画(1) 在前面几节里,我们已经给大家介 ... -
动画基础
2010-06-16 23:22 1577动画的舞台结构及道具组合(1) 动画是一种动态 ... -
逐帧动画与夸张表情动画
2010-06-16 23:18 6437夸张表情动画的制作(1) (转之ET动画学堂) ... -
形状补间动画
2010-06-16 23:15 5433形状补间动画(1) ... -
逐帧动画与人运动动画制作
2010-06-16 23:11 4998人走路动画制作 ... -
遮罩动画
2010-06-16 22:55 3539遮罩动画(1) ... -
Popup window ActionScript3 VS ActionScript2
2010-06-09 04:17 2631A common ... -
加载loader (How to Load External Images in Actionscript 3.0)
2010-05-28 02:18 1809Using the flash.display.Lo ... -
元件变色 change movieclip's color
2010-05-28 01:34 1872// This line defines a varia ... -
Flash AS3获取PHP数据(ActionScript3 + php + email)送ActionScript2
2010-04-23 21:11 5787一,AS3部分[下载 ] package { ... -
flex与flash元件交互
2010-01-30 04:31 1890前一段时间发了flex与JavaScript的数据交互 ,现 ... -
FLEX里的CSS样式设置教材
2010-01-29 00:38 2354FLEX3中应用 CSS完全详解 ... -
flex 扇形菜单
2010-01-29 00:27 9181在继 auzn经典Flex教程–KingnareStyle ... -
flex 画线
2010-01-29 00:23 3495实例1: <?xml version=" ... -
Flex 中 12 个简单实用的小技巧
2010-01-26 06:32 16371. 复制内容到剪贴板 System.setCli ...
相关推荐
FLASH动画补间动画的教学课件,对于初学者有很好的实用性,可以参考一下
动作补间动画制作步骤:动作补间动画是在两个关键帧上分别定义不同的属性,然后在两个关键帧之间建立一种运动渐变关系,这就是制作动作补间动画的过程。
flash初学者,制作动作补间动画,这就是一个好的例子
动作补间动画(翻书效果).fla
flash动作补间动画教学设计.doc
FLASH动作补间动画.pptx
动作补间动画制作.pdf
FLASH讲动作补间动画.ppt
简单的动画补间动画,做flash动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的,本节课我们需要作出蜻蜓在空中飞过的动画效果,然...
Flash动作补间动画教案(精).doc
第2课动作补间动画(教育厅讲的课)(精)-4页.pdf
上动画制作的一堂市级优质课。此为说课课件,用纯PPT做的,是对一些漂亮的模板经过自己的精心加工和设计制作而成。个人比较满意的地方是色彩搭配、触发器的使用和里面涉及的一些教学理论。
一、理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个...补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先
第7课 动作补间动画 第8课 遮罩动画 第9课 引导路径动画 第10课 交互动画的灵魂——按钮 第11课 MC应用范例――仿三维空间效果 第12课 声音 第13课 时间轴特效 第14课 行为 第15课 对象类型及绘画、动画技巧(一...
第7课 动作补间动画 第8课 遮罩动画 第9课 引导路径动画 第10课 交互动画的灵魂——按钮 第11课 MC应用范例――仿三维空间效果 第12课 声音 第13课 时间轴特效 第14课 行为 第15课 对象类型及绘画、动画技巧(一...
1.1动画制作基础 图层的特点:一、除了画有图形或文字的地方,其他部分都是透明的 二、图层是相对的独立的 1.2绘画基础 Shift键:(1)画正圆 (2)画直线 1.3制作简单动画 Flash生成的补间动画类型 1、动作补间动画 ...
Android 提供三种动画:帧动画、补间动画和属性动画,本篇文章介绍帧动画以及补间动画的使用,属性动画的使用将在后面的文章中分享,那就来复习一下这两种动画的使用吧。 FrameAnimation FrameAnimation 即逐帧动画...
课件,动作补间动画,有背景图片。飞机起飞
如何在Flash cs3利用动作补间制作飞机飞行的动画效果.docx