当前课程知识点：大学计算机基础 > 第四章 计算机软件 > 多媒体创作软件实例3 动画制作软件 > 多媒体创作软件实例3 动画制作软件
这小节我们Adobe Animate为例
介绍动画处理软件的使用
常用的动画制作工具很多
如Autodesk公司推出的三维
动画制作软件Autodesk Mays
Discreet公司开发的三维动画渲染
和制作软件
3D Studio Max
简称3D max
Adobe公司推出的动画视频
编辑软件Adobe Premiere等
本节我们主要以Adobe Animate为例
介绍动画处理软件的使用
Animate的前身是Macromedia公司推出的
网页动画设计软件Flash
Flash将音乐
声效
动画以及富有新意的界面融合在一起
从而制作出高品质的网页动态效果
该软件于2005年Adobe公司收购
2015年Adobe将Flash
升级并改名为Animate CC
Animate的基本功能包括绘图
和编辑图形
逐帧动画的制作
补间动画的制作
程序动画的制作以及在动画中使用
声音视频等
绘图和编辑图形是制作动画的基本功
也是Animate的基本功能之一
打开Animate,选择新建文件
我们选择Action Script的3.0
Action Script 3.0是Animate
实现程序动画的一种方式
所谓程序动画就是编写程序代码
控制动画中某些对象的行为
除了Action Script的3.0
Animate还支持使用JavaScript来实现
程序动画
Animate包含多种绘图工具
是基于矢量图的
2D动画制作软件.在绘图时有两种绘制模式
合并绘制和对象绘制
默认情况下是合并绘制
我们选择工具箱当中的椭圆工具
笔触颜色设置为黑色
填充颜色选择蓝色
在属性面板中看到对象绘制模式是关闭的
我们绘制两个椭圆
用选择工具选中椭圆
我们看到在属性面板中它的属性是一个形状
再次选择椭圆工具
这次我们将对象绘制模式打开
在右边再绘制两个椭圆
和刚才不同
这次我们使用选择工具，选中绘制的椭圆
在属性面板当中看到它的属性是绘制对象
再选择多角形工具,设置填充颜色为黄色
在选项这里,我们选择要绘制的是星型,边数是5
点击确定
首先将对象绘制模式关闭
我们绘制一个合并绘制模式下的五角星
再将对象绘制模式打开
我们绘制另外一个五角星
到目前为止
两种绘制模式
除了属性中看到的不同
似乎没有什么太大的区别
下面我们用选择工具
当靠近椭圆形的时候
鼠标下方出现一个弧度
我们按住鼠标进行拖拉
可以改变椭圆的形状
靠近五角星进行拖拉
这一��对两种绘图方式也一样
右边的椭圆,鼠标靠近的时候出现弧形
我们进行拖拉
我们选中椭圆将其拖拉到其他的地方
发现填冲的内容和描边是分离的
撤销刚才的操作
对于对象绘制,二者是一个整体
而合并绘制的对象要双击才能全部选中
进行拖拉
对于五角星我们可以选中其中的一个边
将其删除
因为各个部分都是分离的
而对于对象绘制是一个整体
要删除的话就删除了整个对象
我们撤销刚才的操作
我们还可以按住鼠标左键
同时选中三个合并绘制的对象
可以对他们进行拖拉
撤销刚才的操作
但对于对象绘制
他们只能整体被选中
我们双击选中五角星
将它拖拉到椭圆上
两个图形就进行了合并
这可能就是合并绘制的含义
如果我们再次选中五角星将它脱离
会发现椭圆也被破坏了
同样我们双击，选中椭圆
将它拖拉到另外一个椭圆上
二者也进行了合并
当再脱离开的时候
原来的椭圆被破坏了
但对于对象绘制的对象
我们拖拉时每个对象都是独立的
不会发生合并
Animate是基于矢量图的2D动画制作软件
如果要在Animate当中使用位图
我们首先将位图导入到舞台
用任意变形工具
我们调整一下位图的大小
接着我们用选择工具选中位图
用菜单修改当中的位图转换成矢量图
点击确定将位图转换成矢量图之后
我们就可以对它进行修改了
比如说用选择工具
我们靠近某条边
当鼠标下方出现弧度的时候
我们可以进行拖拉
动画的制作方式有逐帧动画和补间动画两类
逐帧动画的制作是在时间轴上逐帧绘制帧内容
来完成的
例如我们要制作一个滚动的小球
我们在图层一进行逐帧制作
第一帧是一个空心圆
表示这一帧是一个空白关键帧
Animate中只能对关键帧
进行编辑
空白关键帧表示没有任何内容的关键帧
当我们添加内容后
它就变成了关键帧
在第一帧我们选择画笔工具,笔触的高度设置为
三个像素
画一个圆
这时第一帧就变成了一个关键帧
在时间轴上是一个实心圆
为了节省时间
我不一帧一帧的画
而是隔一帧画一个小球的移动
在第3帧
我们点击鼠标右键,选择插入空白关键帧
再画一个圆
为了让动画看起来流畅
每一帧要在前一帧的基础上略微变化
为了看到前一帧小球的位置
我们点击绘图纸外观
可以半透明的看到前面这一帧的内容
在第3帧我们画小球的移动
同样在第5帧插入空白关键帧
再绘制一个小球位置的变化
在第7帧插入空白关键帧
绘制另外一个小球
第9针鼠标右键插入空白关键帧
再绘制一个小球
现在我们关闭绘图纸外观
将播放头移动到开头
或者我们拖拉播放头可以看到动画的效果
小球的滚动
或者我们按播放键,连续播放动画
这样,我们就完成了逐帧动画的制作
下面我们新建一个图层
在图层2
我们同样还是制作一个滚动的小球
但这次我们用补间动画来完成
选中图层2的第一帧
用画笔工具
我们绘制另外一个圆形的小球
用选择工具选中小球
点击鼠标右键将它转化为一个元件
补间动画要求对象必须是一个元件
我们将其转换为一个图形元件
点击确定
元件在Animate的动画中是指可以重复使用的某些部件
它是构成Animate动画的基本元素
元件被放置在库当中
点击库看到刚才我们放置的小球
Animate当中的元件包含三种类型
有图形元件
按钮元件和影片剪辑元件
图形元件是可以重复使用的静态图像
按钮元件定义一个可以弹起,按下
有动作的按钮
影片剪辑元件是可重用的动画片段
在图层2的第9帧
我们点击鼠标右键选择插入关键帧
这时,会把前一个关键帧的内容拷贝到这一帧
我们拖拉小球到一个新的位置
在第1帧和第9帧之间
我们点击鼠标右键选择创建传统补间
这时,时间轴上出现一个箭头背景
背景也变成了藕荷色
表示创建了传统补间
我们可以按播放按钮查看一下两个动画的效果
或者按键盘的Ctrl回车
测试一下影片的效果
使用补间动画
只要编辑好开始的关键帧和结束的关键帧
中间的过渡
由计算机自动计算完成
动画制作简单
逐帧动画要一帧一帧的画
虽然比较麻烦
但可以控制中间过程
具有更大的灵活性
补间动画是Animate动画设计的核心
也是Animate动画的最大优点
补间动画有三种形式
传统补间
动作补间和形状补间
上面的例子
我们使用了传统补间
传统补间可���完成诸如位置的改变
旋转
放大
缩小
透明度变化等
我们再举一个例子
首先我们通过文件,导入
导入到舞台
我们导入一幅照片
用任意变形工具我们调整图像的大小
然后点击鼠标右键将其转化为原件
我们将其转换为一个图形元件
将小汽车放在适当的位置上
然后在第20针我们点击鼠标右键选择插入
关键帧
在这一帧我们将小汽车移动到一个新的位置
在第1帧和20帧之间
我们点击鼠标右键选择创建传统补间
可以通过拖拉播放头查看一下动画的效果
或者点击播放按钮
这里中间运动的轨迹
用户是不能修改的
动作补间在传统补间的基础上
除了实现更灵活的运动变化
还增加了3D补间的功能
例如要实现小汽车蛇形的运动
我们用动作补间来实现
我们重新导入了小汽车的图片
将其调整到适当的大小
放在舞台的右上角
我们右键点击小汽车的图片
选择将其转化为元件
这次我们将它转换为一个影片剪辑元件
因为我们要进行一些3D的变化
而3D动画只对影片剪辑有效
点击确定,我们现在第40帧
点击鼠标右键选择插入针
空心矩形表示这是一个结束帧
结束帧是一段内容相同的帧的最后一帧
然后我们在中间的位置点击鼠标右键，选择创建
补间动画
时间轴上没有出现箭头指示
时间轴背景颜色变成了蓝色
我们选择第10帧
将小汽车拖动到适当的位置
选择第二十帧
改变小汽车的位置
再点击第30帧
将小汽车拖动到新的位置
以及第40帧
移动小汽车到右下角
舞台上出现了小汽车运动的轨迹
我们还可以用选择工具
靠近运动轨迹
改变运动的弧度
下面我们增加一些3D变换
我们选中第10帧
在工具箱当中选择3D旋转工具
我们对小汽车进行一定的旋转
右键第十帧
我们看到这是一个3D补间
同样对第二十针
我们将小汽车做另外一些旋转
第30帧
以及第40帧
通过键盘的Ctrl回车
我们可以测试一下影片的效果
形状补间
和动作补间不同
是指由一种对象变换成另一个对象的变形
用户提供两个分别包含变形前和变形后对象的关键帧
中间过程由Animate自动完成
例如我们在时间轴的第一帧绘制一个圆形
选择圆形工具
属性
我们设置笔触的颜色为无
填充的颜色��绿色
按住键盘的Shift键
我们将绘制一个圆形
在时间轴的第15帧
我们鼠标右键选择插入空白关键帧
然后在这一帧我们绘制一个矩形
选择填充颜色为红色
绘制一个矩形
在时间轴的中间
我们点击鼠标右键选择创建补间形状
通过拖拉播放头可以看到从圆形到矩形
以及从绿色到红色的变形操作
时间轴上也出现了箭头
但背景颜色是绿色
表示这是一个补间形状
Animate cc在维持原有flash开发工具支持之外
还新增了html5创作工具
为网页开发者提供更适应现有网页应用
的音频,图片
视频
动画等创作支持
例如我们想制作这样一个网页横幅
新建文档
类型选择html5 canvas
和之前一样创建动画内容
Animate可以将舞台上创建的内容
包括位图
矢量图
补间
声音等生成html和JavaScript
用选择工具,点击舞台
我们将舞台大小设置为750×300
网页横幅的大小
分别建三个图层
图层一我们叫做山的图层
新建图层二
代表云
新建图层3
放置树
在每个图层的第一帧,我们分别导入图片
在山的图层第一帧
我们选择文件-导入
导入到舞台
选择山的图片
将其放置在舞台适当的位置
选择云的图层
第一帧
选择文件,导入
导入到舞台
我们导入云的图片
也放置在舞台适当的位置
在树的图层第一帧
我们选择文件
导入到舞台
导入树的图片
调整到适当的位置
我们希望树在最前面
然后是山
最后是云
所以我们按住鼠标左键,将云的图层拖拉到
山的图层的下面
接下来我们将使用动作补间
所以我们将三个图片分别转化为元件
现在三个图片有所重叠
为了更好的选择,选中云的图层
我们将树和山的图层进行锁定
第一帧选中云的图片
鼠标右键选择转换为元件
我们将它转换为影片剪辑元件
其次我们锁定云的图层
打开山的图层
在第一帧我们选中山
鼠标右键,转化为元件
最后我们锁定山的图层
打开树的图层
选中树的图片
鼠标右键,转换为元件
在时间轴的75帧按住键盘的Shift键
我们同时选中三个图层的第75帧
鼠标右键选择插入帧
然后再三个图层
第40帧的位置
按住键盘上的Shift的键
同时选中三个图层的40帧
鼠标右键选择插入关键帧
对于树的图层
我们选中第40帧
让树在第40帧的时候产生一些向左的位移
然后锁定树的图层
我们打开山的图层
同样在第40帧我们选中山的图片
让他产生一点向左的位移
最后是打开云的图层
锁定山的图层
在第40帧将云彩向左产生一定的位移
接下来在三个图层
我们分别选中时间轴的中间
鼠标右键创建传统补间
现在我们可以通过Ctrl加回车
测试一下影片的效果
树、山和云分别放置在三个图层
它们都产生了一定向左的位移
接着再回到时间轴,选中树的图层
在树的图层之上
我们再新建一个图层
作为文字的图层
在文字图层的第一帧,我们选择文本输入工具
设置文本的颜色为白色
我们输入接着用选择工具选中文字
点击鼠标右键将其转换为元件
这回我们将它转换成一个按钮元件
点击确定
双击按钮元件
我们进入到元件的编辑区,按钮元件是一种特殊
的只有4帧的交互式影片剪辑
前三帧显示按钮的三种状态
弹起、指针经过和按下.第4帧定义
按钮的活动区域
在指针经过帧,我们点击鼠标右键选择插入关键帧
在指针经过时
我们希望文字的颜色发生一些变化
选择文字将其颜色设置为蓝色
对指针按下帧
我们点击鼠标右键选择插入关键帧
当鼠标按下时
我们希望文字的颜色变为灰色
第四帧按钮的活动区域
我们点击鼠标右键选择插入关键帧
在这一帧我们选择矩形工具
填充颜色为白色
画笔颜色为无
我们绘制一个比文字大的矩形
这个矩形区域都是点击区域
现在我们回到场景一
我们添加当按钮被按下时要执行的动作
首先选择窗口当中的动作窗口
点击代码片段
选择html5 canvas
选择动作
选择单击以转到web页
系统帮我们生成好了当按钮被按下时要执行的动作
我们将其中跳转的网址修改一下
点击关闭
对于第1帧,我们设置文字的位置
在舞台之外
文字在前面三个图层的动画结束之后才出现
所以在第40帧点击鼠标右键选择插入关键帧
在第50帧同样插入关键帧
在第50帧的时候
我们希望文字从舞台外移入到舞台内
选中第50帧,移动文字的位置
在第40帧和50帧中间点击鼠标右键选择
创建传统补间
现在我们可以通过Ctrl回车测试一下影片的效果
先是图片的移动
接着是文字的出现
动画会被重复播放
如果不想动画重复播放
我们就要进行一些设置
回到Animate
在文件,发布设置当中
我们取消循环时间轴
点击确定
再按Ctrl回车测试影片的效果
当鼠标滑过按钮时变成蓝色
当点下之后按钮变成了灰色
并跳转到了对应的网页
动画做好后
我们就可以进行发布的网页
可以在支持html5 canvas的任何设备
或浏览器上运行
选择文件,发布设置
我们将其发布为JavaScript
加html
设置输出的名称
我们选择桌面
保存，点击发布
我们查看一下
桌面上有我们生成的html文件
和JavaScript的文件
这就是我们在Animate当中制作的
具有动态效果的网页横幅
最后我们总结一下
这一小节我们主要以Adobe Animate
为例
介绍了动画处理软件的使用
包括绘图和编辑图形
制作逐帧动画
制作补间动画
制作html5 canvas动画
谢谢观看
-1-1 计算机的诞生
--第一章 习题1
--计算机的诞生1
--计算机的诞生2
-1-2 计算机的分类
--第一章 习题2
--计算机的分类
-1-3 计算机的应用领域
--第一章 习题3
-1-4 计算机系统组成
--第一章 习题4
--计算机系统组成1
--计算机系统组成2
-1-5 计算机思维的定义
--第一章 习题5
--计算思维1
-1-6 计算思维的特点
--第一章 习题6
--计算思维2
-1-7 计算思维的应用案例
--第一章 习题7
--计算思维3
-第一章 章测试
-2-1 进位计数制表示方法
--第二章 习题1
-2-2 进位计数制的相互转换
--第二章 习题2
--进位计数制2
-2-3 整数的表示方法
--第二章 习题3
--整数的表示1
-2-4 浮点数表示方法
--第二章 习题4
--浮点数的表示1
-2-5 BCD格式表示法
--第二章 习题5
--BCD码
-2-6 算术运算
--2-6 算术运算
--第二章 习题6
-2-7 运算溢出及判断
--第二章 习题7
--运算的溢出
-2-8 逻辑运算
--2-8 逻辑运算
--第二章 习题8
--逻辑运算
-2-9 ASCII编码
--第二章 习题9
-2-10 Unicode编码
--第二章 习题10
-2-11汉字编码
--2-11汉字编码
--第二章 习题11
--汉字编码
-2-12数据校验编码
--第二章 习题12
--数据校验编码
-第二章 章测试
-3-1中央处理器
--3-1中央处理器
--第三章 习题1
--中央处理器
-3-2 存储器
--3-2 存储器
--第三章 习题2
--存储器1
--存储器2
--存储器3
-3-3 总线和接口
--第三章 习题3
--总线
-3-4 外部设备
--3-4 外部设备
--第三章 习题4
--外部设备
-3-5 冯.诺依曼体系结构
--第三章 习题5
-3-6 计算机常用性能指标
--第三章 习题6
--性能指标1
--性能指标2
-3-7嵌入式系统
--第三章 习题7
--嵌入式系统
-3-8哈佛体系结构
--第三章 习题8
--哈佛体系结构
-3-9 DSP简介
--3-9DSP简介
--第三章 习题9
--DSP
-3-10 虚拟台式计算机模拟器
--虚拟桌面架构
-3-11 4位计算机模拟器
-第三章 章测试
-4-1计算机软件分类
--第四章 习题1
--软件分类
-4-2软件的工作模式
--第四章 习题2
--软件的工作模式
-4-3软件的安装方法
--第四章 习题3
--软件安装
-4-4计算机软件生命周期
--第四章 习题4
--生命周期1
--生命周期2
--生命周期3
--软件测试1
--软件测试2
-4-5计算机软件开发过程模型
--第四章 习题5
- 4-6 常用软件介绍-办公软件
--第四章 习题6
-办公软件实例1 文字处理软件
-办公软件实例2 电子表格软件
-办公软件实例3 演示文稿软件
-4-7 常用软件介绍-多媒体创作软件
--第四章 习题7
-多媒体创作软件实例1 音频处理软件
-多媒体创作软件实例2 图像处理软件
-多媒体创作软件实例3 动画制作软件
-多媒体创作软件实例4 视频处理软件
-4-8 常用软件介绍-网页制作软件
--第四章 习题8
-第四章 章测试
-5-1 操作系统概述
--第五章 习题1
--操作系统
--操作系统分类
--操作系统管理
-5-2 Windows 7基本操作
--第五章 习题2
-5-3 Windows 7文件管理
--第五章 习题3
-5-4 Windows 7程序管理
--第五章 习题4
-5-5 Windows 7系统安全
--第五章 习题5
--操作系统安全
-5-6 Windows 7计算机管理
--第五章 习题6
-5-7 Dos命令
--第五章 习题7
--dos
-5-8 Windows 7常用软件
--第五章 习题8
-5-9 Linux操作系统
--第五章 习题9
--Linux
-5-10 手机操作系统
--第五章 习题10
-5-11 虚拟机及Vmware介绍
--第五章 习题11
--虚拟机
--虚拟机使用
-第五章 章测试
-6-1 算法基础
--6-1 算法基础
--第六章 习题1
-6-2 程序设计语言分类
--第六章 习题2
-6-3 程序设计过程
--第六章 习题3
-6-4 程序设计方法
--第六章 习题4
-6-5 程序设计语言基本要素(一)
--第六章 习题5
-6-6 程序设计语言基本要素(二)
--第六章 习题6
-6-7 Python简介及编程环境配置
--第六章 习题7
-6-8 程序设计应用举例
--第六章 习题8
-第六章 章测验
-7-1 数据库技术概述
--第七章 习题1
--信息和数据
-7-2 数据库管理系统
--第七章 习题2
--数据库管理系统
-7-3 数据库系统的组成与功能
--第七章 习题3
--独立性
--数据库系统分类
-7-4 关系模型的数据结构
--第七章 习题4
--E-R图
--三级模式结构
-7-5 关系模型的数据操作及完整性约束
--第七章 习题5
--关系模型
--数据库范式
--完整性约束
-7-6 Access数据库的建立
--第七章 习题6
--Access
-7-7 Access的数据查询
--第七章 习题7
-第七章 章测试
-8-1计算机网络概述
--第八章 习题1
--定义
-8-2网络分类
--8-2网络分类
--第八章 习题2
--分类
-8-3数据传输
--8-3数据传输
--第八章 习题3
--数据传输
-8-4网络拓扑结构
--第八章 习题4
--网络拓扑结构
-8-5网络体系结构
--第八章 习题5
--网络体系结构
-8-6网络互连
--8-6网络互连
--第八章 习题6
--网络互连
-8-7Internet基础：TCP╱IP协议结构
--第八章 习题7
--TCP/IP模型
--IP协议
-8-8Internet基础：IP地址
--第八章 习题8
--IP地址
-8-9Internet基础：域名系统
--第八章 习题9
--域名
-8-10Internet基础：Internet的基本服务
--8-10Internet基础：Internet的基本服务
--第八章 习题10
--Internet
-8-11Internet基础：Internet的接入
--第八章 习题11
-第八章 章测试
-9-1信息安全的基本概念
--第九章 习题1
--信息安全的CIA
--攻击与防御
-9-2 密码技术及应用
--第九章 习题2
--数字签名
-9-3防火墙技术
--9-3防火墙技术
--第九章 习题3
--防火墙的分类
--防火墙的基本特性
-9-4恶意软件
--9-4恶意软件
--第九章 习题4
--恶意软件类型
-9-5入侵检测技术
--第九章 习题5
--入侵检测概念原理
--入侵检测分类
-第九章 章测试
-10-1 云计算
--10-1 云计算
--第十章 习题1
-10-2大数据
--10-2大数据
--第十章 习题2
-10-3物联网
--10-3物联网
--第十章 习题3
-10-4机器学习
--10-4机器学习
--第十章 习题4
-10-5人工智能
--10-5人工智能
--第十章 习题5
-10-6物联网应用
-第十章 章测验
-1-0 准备步骤
--1-0 准备步骤
-1-1 台式机组装
-1-2 笔记本电脑组装
-3-1 启动和退出Word
-3-2 创建、编辑和保存Word文档
-3-3 封面的制作
--封面的制作-1
--封面的制作-2
--封面的制作-3
--封面的制作-4
-3-4 长文档编辑
--长文档编辑
-3-5 页面插入与目录
-3-6 页眉页脚与页码
-3-7 完成文档
-4-1 创建和编辑Excel表格
-4-2 简单公式和函数
-4-3 插入图表
--4-3 插入图表
-4-4 电子表格中数据的管理
-5-1 创建演示文稿与添加幻灯片
-5-2 编辑演示文稿
-5-3 设置演示文稿外观
-5-4 交互式演示文稿的设置
-5-5 设置演示文稿动画和音乐
-5-6 演示文稿放映
-6-1 图像的修饰
-6-2 淡黄色的记忆
-6-3 心形贺卡
--6-3 心形贺卡
-6-4 燃烧字
--6-4 燃烧字
-6-5 闻味的小狗狗
-6-6 换脸
--6-6 换脸
-7-1 逐帧动画的制作
-7-2 动作补间动画的制作
-7-3 形状补间动画的制作
-8-1 网站制作前期工作
-8-2 在Dreamweaver中建立和管理站点
-8-3设计制作网站主页
-8-4 制作网站导航栏
-8-5 修饰美化页面
-8-6 填写页面内容
-8-7 设计制作次级页面并建立链接
-9-1 Python的下载
-9-2 Python的安装
-9-3 IDLE的使用
-9-4 求矩形的周长和面积
-9-5 求三角形的面积
-9-6 求素数
--9-6 求素数
-10-1 数据库的建立
-10-2 SQL的应用
-11-1 Packet Tracer简介及下载方法
-11-2 有线网络的组网与配置
-11-3 无线网络的组网及无线路由配置
-12 无线网络安全配置
