动作补间动画制作Word文档格式.docx
- 文档编号:16651968
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:13
- 大小:230KB
动作补间动画制作Word文档格式.docx
《动作补间动画制作Word文档格式.docx》由会员分享,可在线阅读,更多相关《动作补间动画制作Word文档格式.docx(13页珍藏版)》请在冰豆网上搜索。
4.创建动作动画的方法
在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件,一帧中只能放一个项目,在动画要结束的地方创建或选择一个关键帧并设置该元件的属性,再单击开始帧,在【属性】面板上单击【补间】旁边的“小三角”,在弹出的菜单中选择【动作】,或单击右键,在弹出的菜单中选择【创建补间动画】,就建立了“动作补间动画”。
5.形状补间动画和动作补间动画的区别
形状补间动画和动作补间动画都属于补间动画。
前后都各有一个起始帧和结束帧,二者之间的区别如下表所示。
区别之处
动作补间动画
形状补间动画
在时间轴上的表现
淡紫色背景加长箭头
淡绿色背景加长箭头
组成元素
影片剪辑、图形元件、按钮、文字、位图等
形状,如果使用图形元件、按钮、文字,则必先打散再变形。
完成的作用
实现一个元件的大小、位置、颜色、透明等的变化。
实现二个形状之间的变化,或一个形状的大小、位置、颜色等的变化。
三、学生练习
任务:
熟悉动作补间动画的制作
1.根据老师所提供的学习资料制作动作补间动画
2.从网上搜索更多的教程学习
四、课堂小结
小结本节的主要内容和学生中存在的问题
附:
学生资料
动作补间动画也是Flash中非常重要的表现手段之一,与“形状补间动画”不同的是,动作补间动画的对象必需是“元件”或“成组对象”。
运用动作补间动画,你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性,配合别的手法,你甚至能做出令人称奇的仿3D的效果来。
本节详细讲解了动作补间动画的特点及创建方法,并分析了动作补间动画和形状补间动画的区别,我们精心设计的实例将带你进一步加深对动作补间动画的了解。
1.动作补间动画的概念
(1)动作补间动画的概念
(2)构成动作补间动画的元素
(3)动作补间动画在时间帧面板上的表现
动作补间动画建立后,时间帧面板的背景色变为淡紫色,在起始帧和结束帧之间有一个长长的箭头,如图3-4-1所示。
图3-4-1动作补间动画在时间帧上的表现
(4)形状补间动画和动作补间动画的区别
(5)创建动作补间动画的方法
2.认识动作补间动画的属性面板
在时间线“动作补间动画”的起始帧上单击,帧属性面板会变成如图3-4-2所示。
图3-4-2动作补间动画属性面板
(1)
【简易】选项
用鼠标单击【简易】右边的
按钮,弹出拉动滑杆,拖动上面的滑块,可设置参数值,当然也可以直接在文本框中输入具体的数值,设置完后,补间动作动画效果会以下面的设置作出相应的变化:
◆
在-1到-100的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速补间。
在1到100的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。
默认情况下,补间帧之间的变化速率是不变的。
(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”的图片导入到场景中(“山峰”图片位置:
光盘\example\part3\***\图片\山峰.jpg)。
用【箭头工具】调整图片在舞台上的位置,使其居于舞台的中央。
如果图片大小不合适,再选择【任意变形工具】调整图片大小。
选择第100帧,按F5键,添加普通帧。
(2)创建元件
步骤1创建飞机元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“飞机”。
这时进入新元件编辑场景,选择第一帧,执行【文件】|【导入】|【导入到舞台】命令,将配套光盘中的名为“飞机.png”图片导入到场景中(“飞机”图片位置:
光盘\example\part3\***\图片\飞机.png)。
步骤2创建白云元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“白云”。
这时进入新元件编辑场景,选择第一帧,执行【文件】|【导入】|【导入到舞台】命令,将配套光盘中的名为“白云.png”的图片导入到场景中(“白云”图片位置:
光盘\example\part3\***\图片\白云.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做成动画的形式,那无疑会大大增加吸引力。
我们来看看“闪客启航”网站(
图3-4-7启航网站的Banner
创建文字变色效果
创建文字改变大小效果
创建文字改变透明度效果
制作步骤
执行【文件】|【新建】命令,在弹出的面板中选择【常规】|【Flash文档】选项后,单击【确定】按钮,新建一个影片文档,在【属性】面板上设置文件大小为520×
60像素,【背景色】为白色,如图3-4-8所示。
图3-4-8启航Banner文档属性
步骤2设置背景图层
执行【文件】|【导入】|【导入到舞台】命令,将配套光盘中的名为“启航banner.bmp”图片导入到场景中(“启航banner.bmp”图片位置:
光盘\example\part3\***\图片\启航banner.bmp),选择工具箱中的【选择工具】和【任意变形工具】调整图片的大小和位置。
选中第205帧,按F5键,添加普通帧,如图3-4-9所示。
图3-4-9设置背景
步骤1创建“电脑动画”元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“电脑动画”。
在新元件编辑场景中选择第一帧,单击工具箱中的【文字工具】
,在场景中单击一下,然后在【属性】面板上设置文本类型为【静态文本】、字体为【隶书】、字体大小为32、颜色值为#FF9900,设置完后,在场景中输入“电脑动画”四个字,如图3-4-10所示。
图3-4-10创建“电脑动画元件”
步骤2创建“网页设计”元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“网页设计”。
在编辑场景中选择第一帧,按上面的方法,在场景中输入“网页设计”四个字,参数同上。
步骤3创建“图像制作”元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“图像制作”。
在编辑场景中选择第一帧,按上面的方法,在场景中输入“图像制作”四个字,参数同上。
步骤4创建“闪客启航”元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“闪客启航”。
在编辑场景中选择第1帧,单击工具箱上的文字工具
,在【属性】面板上设置文本类型为【静态文本】、字体为【隶书】、字体大小为50、颜色值为#FF6600,在场景中输入“闪客沙龙”四个字,如图3-4-11所示。
图3-4-11创建“闪客启航”元件
步骤5创建“语音教学”
执行【插入】|【新建元件】命令,新建一个图形元件,名称为“语音教学”。
在编辑场景中选择第1帧,单击工具箱中的【文字工具】
,文字属性不变,在场景中输入“语音教学”四个字。
“电脑动画”、“网页设计”和“图像制作”三组字体分别从大到小、由近及远以渐显的方式运动到舞台中央停留片刻,再移动到舞台左边,字体颜色和大小相应改变。
然后“闪客启航”一组字以同样的方式移动到舞台中央,突然消失,最后“语音教学”以旋转的方式移动到舞台正中,这就是本实例中文字的动画效果。
下面,我们就来实现这一动画效果。
步骤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帧的效果
动作补间动画(5)
步骤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【时间帧】面板上的各层
在实际制作中,本例中各图形元件的大小、位置均不必拘束于书中的数值,你可自行调整至满意为止。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 动作 动画 制作