内容正文:
单元十
高级动画的制作
单元十 高级动画的制作
Adobe公司发布的新版本FlashCC2015中,Flash动画技术有了很大的变革。其中主要包括3D工具、骨骼工具和新的动画预设,以上这些动画技术都需要 ActionScript3.0支持,发布设置的时候,要选择最新版本的播放器。
学习目标
3
掌握骨骼工具的使用方法,熟练掌握骨骼的添加和骨骼动画的创建。
1
掌握3D工具的使用方法。
2
理解骨骼动画的原理。
4
掌握使用动画预设的基本方法。
案例10-1 制作3D字幕动画
案例描述
3D平移工具可以制作出景深效果,3D旋转工具可以制作出沿某一轴向旋转的效果。本案例是以3D字幕为例,来介绍3D工具的使用方法。案例的动画效果如图10-1所示。
图10-1 3D字幕的动画效果
案例10-1 制作3D字幕动画
制作步骤
(1)首先创建宽为620像素、高为350像素的“ActionScript3.0”文档,把“图层1”重命名为“字幕背景”,在第1个关键帧中导入“10-1.jpg”字幕背景图像。
(2)新建“图层2”并重命名为“字幕”,在第1个关键帧中使用“文字工具”创建“职业技术学院”,设置字体的大小颜色以及滤镜“发光”和“投影”属性,如图10-2和图10-3所示。将该文本转换成影片剪辑元件。
图10-2 字号及颜色
图10-3 滤镜属性
案例10-1 制作3D字幕动画
制作步骤
(3)在“字幕”图层的第1帧中使用“3D平移工具”选中字幕元件,设置“3D定位和视图”属性,使得字幕定位到背景中央,并设置Z轴数值为“2000”,如图10-4和图10-5所示。
(4)选定“字幕”图层的第80帧,按F6键插入关键帧,使用“3D平移工具”设置“3D定位和视图”属性:设置Z 轴数值为0,并调整X 轴和Y 轴的数值使字幕定位到舞台中央,此时字体以正常大小显示到舞台中央,如图10-6和图10-7所示。
图10-4 “3D定位和视图”属性设置
图10-5 第1帧字体状态
图10-6 设置第80帧3D定位属性
图10-7 第80帧字体状态
案例10-1 制作3D字幕动画
制作步骤
(5)选中“字幕背景”图层的第80帧,按F5键插入帧。
(6)在“字幕”图层的第40帧按F6键插入关键帧,使用“3D旋转工具”向下拖动红色X 轴,使得字体沿X 轴翻转180度,如图10-8所示。
(7)在所有图层的第100帧按F5键插入帧,按组合键Ctrl+Enter或执行菜单命令“控制”→“测试”,进行测试播放。
图10-8 3D旋转工具的使用
案例10-2 制作旋转的3D立方体动画
案例描述
3D工具除了可以在二维平面中模拟出3D的空间感,也可以制作出逼真的3D物体,本案例以旋转的3D立方体为例来拓展3D工具的使用方法。案例的动画效果如图10-9所示。
图10-9 旋转的3D立方体
案例10-2 制作旋转的3D立方体动画
制作步骤
(1)首先创建宽为640像素、高为350像素的“ActionScript3.0”文档,把“图层1”重命名为“立方背景”,在第1个关键帧中导入素材“10-2.jpg”为背景图像。
(2)执行菜单命令“插入”→“新建元件”,将新建的影片剪辑元件命名为“面”,使用“矩形工具”在按Shift键的同时绘制出一个正方形,无笔触,填充颜色为蓝色。修改其属性如图10-10所示。
图10-10 正方形参数
案例10-2 制作旋转的3D立方体动画
制作步骤
(3)执行菜单命令“插入”→“新建元件”,将新建的元件命名为“立方体”,分别创建5个图层,每个图层放置一个“面”影片剪辑元件,然后调整其位置,注意中间的面要与舞台对齐,如图10-11所示。
(4)使用“3D旋转工具”更改每一个面的3D中心点,然后进行旋转变形,如图10-12~图10-15所示。
图10-11 立方体元件
图10-12 设置左侧面
图10-13 设置上侧面
案例10-2 制作旋转的3D立方体动画
制作步骤
图10-14 设置右侧面
图10-15 设置下侧面
案例10-2 制作旋转的3D立方体动画
制作步骤
图10-16 第1帧立方体属性
(5)新建“图层2”并重命名为“立方体”,在第1帧拖入立方体元件,并在立方体背景图层的第80帧按F5键插入帧。
(6)使用3D工具在“立方体”图层的第1帧设置立方体属性,参数如图10-16所示。
案例10-2 制作旋转的3D立方体动画
制作步骤
图10-17 第80帧立方体属性
(7)在“立方体”图层的第80帧按F6键插入关键帧,使用3D工具设置立方体属性,参数如图10-17所示。
(8)动画创作完成,按组合键Ctrl+Enter或执行菜单命令“控制”→“测试”,进行测试播放,导出Flash影片。
任务2 制作骨骼动画
创建骨骼动画一般有两种方式,一种方