Adobe animate CC(AN/flash)动画制作教程1/3——软件动画基础知识

原创  2021年5月11日  动画小组 未经作者授权,禁止转载

一、软件介绍

Adobe Animate(以前是Adobe Flash Professional、Macromedia Flash和FutureSplash Animator)是由Adobe Systems开发的多媒体创作和计算机动画程序。

Animate用于为电视节目、在线视频、网站、web应用程序、internet应用程序和视频游戏设计矢量图形和动画。该程序还支持光栅图形、富文本、音频和视频嵌入以及ActionScript脚本。和AE的脚本相通,都是js语言。

动画可以发布HTML5, WebGL,可缩放矢量图形(SVG)动画和spritesheet,以及遗留的Flash Player (SWF)和Adobe AIR格式。于1996年以FutureSplash动画师的身份首次发布,之后被Macromedia收购,更名为Macromedia Flash。

timg.jpg

软件下载地址:AdobeAnimateCC2017

密码: s97e

敬告:

  软件注册文件可能被部分杀毒软件报毒或间谍木马,请自行甄别取舍。该下载资源仅限个人用户基于测试学习之用,请勿用于商业目的。

附:

 二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习

 和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软

 件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!。

 如果你喜欢,请支持正版!



二、界面认识和基本绘图模式

新建actionScript 3.0

无标题-1.jpg

1-菜单

保存-继续使用flash的.fla格式作为文档文件。

文件-导出 可导出图片、图片序列、影片、GIF。

工具

blob.png

选择工具组

  1. 选择工具(v)、2.部分选取工具(a)、3.任意变形工具(Q)、4.3D旋转工具(w)-3d平移工具(g)、5.套索工具(L)-多边形套索工具-魔术棒。

绘图工具组

  1. 钢笔工具(p)、2.文字工具(t)、3.线条工具(n)、4.矩形工具(R)-基本矩形工具【两者区别】、5.椭圆工具(o)-基本椭圆工具【两者区别】、6.多角星形工具、7.铅笔工具(shift+Y)、8.艺术画笔工具(Y)和9.画笔工具(b)【两者区别】

调整工具组

  1. 骨骼工具(m)-绑定工具(M)、2.颜料工具(K)和3、墨水瓶工具(S)【两者区别】、4.滴管工具(i)、5.橡皮工具(e)、6.宽度工具(u)。

视图工具

  1. 摄像机(c)、2.手形平移工具-手形旋转工具(h)、3.缩放工具(z)。



工具拓展

blob.png

  1. 笔触颜色、2.填充颜色、3.黑白、4.切换颜色

5.对象绘制(j)、6.贴紧至对象

根据选择的工具不同,拓展工具也不同

blob.png选择工具拓展:blob.png1.贴紧至、2.平滑、3.伸直。


blob.png任意变形工具拓展:blob.png1.贴紧至、2.旋转与倾斜、3.缩放、4.扭曲、5.封套。


blob.png3D旋转工具拓展:blob.png1、贴紧至、2.全局转换(D)。


blob.png铅笔工具拓展:blob.png1.对子绘制、2.铅笔模式-伸直-平滑-墨水。


blob.png艺术画笔工具拓展:blob.png1.对象绘制、2.画笔模式-伸直-平滑-墨水、3.使用压力(数位屏设备)、4.使用斜度。


blob.png画笔工具拓展:blob.png1.对象绘制、2.锁定填充、3.画笔模式-标准绘画-颜料填充-后面绘画-颜料选择-内部绘画、4.画笔大小、5.画笔形状、6.使用压力(数位屏设备)、7.使用斜度。


blob.png橡皮擦工具拓展:blob.png1.橡皮擦模式-标准擦除-擦出填色-擦除线条-擦除所选填充-内部擦除、2.水龙头(所单击的一片连续的填充色都擦除掉)、3.橡皮擦形状。


使用解释

绘图工具组-4.圆形矩形、椭圆工具(R)-基本矩形、椭圆工具两者的区别:

ff.gif

绘图工具组8.艺术画笔工具(Y)和9.画笔工具(b)艺术画笔和画笔区别

gg.gif

绘制图形和绘制对象的方法和区别

①绘制图形

aa.gif

②绘制对象

bb.gif

通过比较可以看出来,通过绘制图形得到的图像是在一个层,不同颜色填充的图形产生相交会产生节点,在节点处图形会产生分离,如果是两个一样填充色的图形相交,怎么连接在一起。而使用对象绘制的图像,产生的是对象,相互独立。

图形和对象的相互切换

cc.gif

使用创建对象-将图形转换成对象

dd.gif

使用分离-将对象转换成图形

ee.gif

使用拓展以填充-可以把一些内容变成单纯的路径、填充把复合形状转换为独立的新对象,例如:是把文字什么的转成对象了(曲线),和AI中的功能一样。

时间轴窗口

blob.png

时间轴面板可以在“时间轴”文字上单击隐藏,这样可以腾出许多空间来显示工作区(原来flash可以);
时间轴面板分为三部分,左下角是场景名称,一般是“场景1”按钮,按钮上面是图层面板,图层面板旁边是时间轴,先来看一下时间轴:
时间轴由许多的小格组成,每一格代表一个帧,一帧就是一幅图片,许多图片连续播放,就是一个动画影片;

时间轴下边有几个数字,表示当前是第几帧,速度一般是12.0,时间长度几秒;
下面看一下时间轴下面的五个按钮,

第一个blob.pngblob.png“帧居中”可以让选中的这个图层显示在时间轴面板的中间位置,在多个图层时很有用;
第二个是blob.png“绘图纸外观”可以让工作区中显示几个帧的图像,这也叫洋葱皮效果。这时在帧的上方有一个大括号一样的效果范围,两头可以拖动范围blob.png显示的图像颜色和两个端的蓝点和绿点一致;
第三个是blob.png“绘图纸边框”只显示出图形的边框来,没有填充色,因而显示速度要快一些;
第四个是blob.png“编辑多帧”可以同时编辑两个以上的关键帧,可以同时选中,也可以单独修改;
第五个是blob.png“修改标记”可以设置显示洋葱皮的数量和显示帧的标记,默认2个绘图纸,括号里有两帧;

还有blob.pngblob.png

属性窗口

文档属性设置:actionscript发布版本、动画帧率fps,一般动画24-25帧/秒,网站使用动画一般8-12帧/秒。

文档大小,根据需要设置,单位像素。舞台背景色根据需要设置。

blob.png

钢笔工具属性

blob.png

  1. 笔触和填充色

  2. 笔触大小

  3. 样式

文本工具属性

blob.png

静态文本、动态文本、输入文本区别对照

区别:静态文本内容固定,一经生成不可改变。动态文本的内容可以由程序控制。输入文本用于用户向程序输入数据。

ctrl+enter播放影片

hh.gif

墨水瓶工具和颜料桶工具区别

墨水瓶工具画的是线,用到的颜色是笔触颜色,而颜料桶画是图,用到的颜色是填充色。

元件和实例图形元件和影片剪辑元件的区别

新建软件:插入-新建元件(ctrl+F8)

ii.gif

创建影片剪辑元件

1、特点:影片剪辑元件独立于主时间轴

2、名称:影片剪辑元件在库中一元件命名,在属性中以实例命名,实例名称可用于代码编程引用,区分元件被多次引用后,代码可以识别具体的某个元件实例。

aa.gif

创建图形元件

bb.gif

1、特点:图形元件同步主时间轴,想要播放图形元件需要在主时间轴上加上图形元件动画时间长度的延长帧(右键插入帧)。



三、三大基本功能-补间动画

cc.jpg

创建动画有四种方式: 

       ①blob.png创建补间动画:1、需要转为元件,做头帧 2、创建补间动画(一般是头帧右键创建补间动画),然后选择动作尾帧,拖拽图形,自动产生关键帧。(位移类动画),可以直接做动画补间的组、元件、文本、位图。

       ②创建补间形状:(形变类动画)不适用组、元件、文本、位图,适用于对象和图形基础模式,通常用于对已分离的形状的位置、形状等。

       ③创建传统补间:1、做头帧 2、做尾巴帧 3、创建传统补间(两个关键帧之间右键即可)通常用于对元件的位置、大小等,和补间动画不同在于,补间动画时自动创建关键帧。

       ④转换为逐帧动画:(适用运动规律的动画,人或者四足动物走路,不需要创建补间动画,使用逐帧动画。)

插入帧:

blob.pngF5插入帧(延长帧)

blob.pngF6插入关键帧
blob.pngF7插入空白关键帧
F8转换成元件blob.png影片剪辑元件blob.png图形元件(场景图形上右键)
F9打开动作面板(actionscript编辑面板,时间轴上右键)

实例:

转换成元件和不转换成元件做传统补间的差别

不转在库中会生成补间元件,不同补间元件再次修改内容时,是单独分开的,二转换为元件后创建补间,再次修改元件后每帧相同。

dd.gif

blob.png引导层(路径动画):引导层不会再输出显示

创建方法:在作为引导层的图层右键-引导层

将场景中物体首尾帧吸附在引导层路径上,选择元件层拖拽到引导层,引导层(例图层2)前面的图标blob.png会变为blob.png.

blob.png

gg.gif

复制以及元件替换

hh.gif

Alpha位图透明度动画

位图-右键转换为元件-属性-色彩效果-样式-Alpha-建立关键帧和补间动画

ll.gif

动画补间变色

错误示范-需要转换为元件

mm.gif

正确做法

nn.gif




四、三大基本功能-补间形状

pp.gif

形状补间变色

oo.gif

形状补间变形变色

qq.gif

总结补间动画:

传统补间:产生于起始两个关键帧的位移等变化。

补间动画:产生于第一个关键帧之后元件的变化,类似自动关键帧。

补间形状:产生于起始两个关键帧图形或对象的两个状态过渡的演变。

传统补间和补间动画用于对位置、大小等变化,两者差别在于一个手动创建关键帧,补间动画自动创建关键帧,而补间形状,则对于位置、大小、外形、颜色等特征进行变化。



五、三大基本功能-遮罩动画

在图层上右键-遮罩层

blob.png

rr.gif

案例

qq.gif

六、使用滤镜和图形混合功能

七、实例实作演练——综合效果实现

八、按钮元件(高级点歌台)

九、交互动画的实例演练

十、添加声音和视频等多媒体内容

十一、运动规律及骨骼绑定

十二、Animate CC创建HTML5横幅广告

十三、实操案例