AnimateCC二维动画制作核心技法与交互项目实战

简介面向数字媒体应用技术专业影视动画方向的《AnimateCC二维动画设计与制作》课程标准针对动画制作员、Web前端设计师等岗位需求编写服务于高职课程建设与教学设计。文档明确能力、知识、素质三类教学目标贯彻“教、学、做一体化”职教理念。内容规划15项能力目标、20余项知识目标与8项素质目标涵盖Animate软件安装配置、矢量绘图、多种补间动画、引导层与遮罩层动画、骨骼动画、虚拟摄像头、音视频导入、代码片段交互、脚本游戏开发及后期处理同时以电子贺卡、网络广告、网站Banner、UI动效、故事短片和小游戏等为载体配有教学内容与学时分配表。整份课程标准为单个PDF文件共18页仅257KB。已有741人学习可作为课程大纲编写、实训设计、考核方案制定的依据也可帮助学生了解学习目标与职业能力要求。1. 一份课程标准PDF里藏着的二维动画制作技能树把这份18页的PDF从头翻到尾第一感觉是它在讲课程第二感觉才是它真正在讲的东西一条完整的AnimateCC二维动画制作生产链路。课程标准把动画制作员、Web前端设计师这类岗位拆成15项能力目标、20个知识目标和8个项目载体从矢量图绘制一路覆盖到ActionScript小游戏。对带团队、做培训或者想系统性补短板的从业者来说它比大多数Animate入门教程更适合用来定学习路线。这份资料好读的地方在于每个能力目标都对应了具体操作比如“会制作引导层动画”“能灵活使用遮罩层”直接可以作为验收标准。接下来按能力拆解、项目安排、核心动画参数和脚本验证四条线走一遍把可复用的制作参数和判断标准放在后面。2. 拆解能力目标AnimateCC技能树与岗位映射2.1 能力目标先分成三层再看课程标准里的A1-A15不是平铺的细看可以分成三个层次。基础层是A1-A3解决软件安装、矢量图绘制、位图处理这是素材生产阶段。中间层是A4-A9覆盖逐帧、补间、引导层、遮罩层、骨骼动画、虚拟摄像头、图层父子关系这是让素材动起来的核心手段。应用层是A9-A15包含分镜头、音视频导入与控制、ActionScript交互、小游戏开发以及使用其他工具辅助后期处理。把岗位任务对照进来会发现动画制作员和Web前端设计师的交叉点就在A9-A15。前端设计师不会只补间还需要用代码片段控制时间轴、处理声音、做简单游戏逻辑所以课程标准在第六单元和第七单元分别安排了运动规律与ActionScript。分层能力目标编号典型技能对应岗位任务基础层A1-A3软件安装与设置、矢量图绘制、位图处理素材制作、动画元素准备动画层A3-A9逐帧/补间动画、引导层、遮罩层、骨骼动画角色动作、自然现象动画应用层A9-A15分镜头、音视频控制、脚本交互、小游戏宣传片、互动媒体开发这个分层不是严格互斥的比如A3“能制作逐帧动画、形状补间动画、传统补间动画和新补间动画”同时跨了动画层和应用层。实际项目里一个网站片头往往要同时用到补间、遮罩和脚本分层只是为了判断当前学习阶段的重心在哪里。2.2 知识目标映射到AnimateCC的具体位置K1-K20是能力目标的底层支撑。看这份资料建议把知识目标直接落到AnimateCC的操作面板上而不是当作概念背。例如K6“掌握矢量图和位图的处理方法”对应的是文件菜单里的导入命令和Modify菜单下的位图转矢量图功能。K9“理解元件与实例的概念”对应的是库面板和属性面板里的实例名称。这样把知识目标和软件入口一一对应教学时可以按图索骥自学时也能快速定位操作位置。知识目标AnimateCC对应位置/操作K6 矢量图与位图处理文件 导入 导入到舞台修改 位图 转换位图为矢量图K9 元件与实例库面板CtrlL属性面板中设置实例名称K10 时间轴、层和帧时间轴面板F6插入关键帧F7插入空白关键帧K13 补间动画制作条件插入 补间动画 / 传统补间 / 形状补间K14 引导层概念图层右键 添加传统引导层K15 遮罩层概念图层右键 遮罩层K18 ActionScript代码片段面板动作面板F9这个映射表在课程设计里也很有用。做培训大纲的时候一般把“知识目标”列看成目录“能力目标”列看成验收再用项目把两者串起来。如果学习者能对着映射表指出每个概念在软件里的入口说明基础知识已经过关。2.3 学时分配比看上去更值得琢磨从课时分布能看出课程重心基本工具8学时基本动画12学时图层应用和脚本语言占据了整个课程后半程。初学者容易把时间花在画人物和场景上但真实项目里遮罩层、引导层的层级关系以及代码对时间轴的控制才是决定作品能不能按时交付的地方。课程标准里还特别提了A14“能使用其它工具辅助Animate进行动画制作”和A15“简单对动画进行后期处理”这暗示了一个常见工作流Photoshop处理位图素材、Illustrator调整矢量路径、Audition剪辑声音、Premiere做最终合成素材在外部处理好再导入到Animate的库效率远高于软件内直接编辑位图。3. 项目化教学落地从Animate电子贺卡到小游戏的实现路径3.1 八个项目的递进关系项目载体是这份资料最有价值的部分。从场景和角色绘制到接苹果小游戏八个项目把二维动画从“画出来”推向“动起来”和“玩起来”。每个项目都有明确的学时和建议考核方式适合直接作为实训任务。项目学时核心技能产出物场景和角色绘制4矢量绘图、颜色填充企业标志/吉祥物电子贺卡设计4逐帧动画、补间动画、文本节日贺卡Animate网络广告12元件与实例、多种补间网络广告Animate网站片头14引导层、遮罩层网站片头动画Animate宣传短片6按钮、播放控制企业宣传片Animate动画短片8分镜头、音视频同步故事短片交互动画-随机号码抽取6ActionScript、XML抽奖器小游戏-接苹果12键盘控制、碰撞检测苹果小游戏前四个项目解决的是“把素材和动画做出来”后四个项目重心转向“让动画和用户发生交互”。这种递进关系很像前端开发里的静态页面到单页应用先玩转时间轴和补间再引入事件和状态。3.2 电子贺卡项目补间动画的完整工作流电子贺卡是第二个项目学时只有4适合用来建立补间动画的标准流程。常见做法是新建ActionScript 3.0文档舞台设成1280x720帧速率24fps。接着按CtrlF8创建图形元件在元件内绘制贺卡背景再回到主时间轴把元件拖上舞台创建传统补间。首帧和末帧分别调整元件位置和旋转设置缓动模拟吉祥物摆动。最后在时间轴最后一帧加一个控制脚本让动画播放一次后停住。import flash.events.MouseEvent; stop(); playBtn.addEventListener(MouseEvent.CLICK, onPlay); function onPlay(event:MouseEvent):void { gotoAndPlay(2); }这里的关键参数是补间缓动。Animate的属性面板里缓动值范围是-100到100负值表示先慢后快正值表示先快后慢。电子贺卡里的雪花飘落建议用负值让下落越来越快吉祥物摆动用默认的0或小幅正值反而更自然。按钮实例名playBtn需要与舞台上的按钮属性一致否则代码会报空对象引用。代码放在最后一帧事件监听器会一直存在不会因为播放停止而失效。3.3 网站片头项目引导层和遮罩层的联合使用网站片头用了14学时是整个课程里项目学时最多的因为引导层和遮罩层各有边界。引导层动画的实现要点被引导图层里放的必须是元件实例引导层里用铅笔或钢笔绘制一条连续且平滑的路径然后把首帧和末帧元件中心点吸附到路径两端。如果动画没有沿路径走最常见的原因是中心点没有吸住或者引导线上有断点。放大画布用选择工具拖动元件中心当出现小黑圈指示时表示吸附成功。遮罩层动画的要点则相反遮罩层在上方被遮罩层在下方遮罩层里的填充区域决定显示范围。网站片头的探照灯效果通常会在遮罩层放一个圆形元件做传统补间从左侧移到右侧。也可以让代码来控制遮罩跟随鼠标增加交互感stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove); function onMove(e:MouseEvent):void { maskCircle.x mouseX; maskCircle.y mouseY; }maskCircle是遮罩层上一个影片剪辑的实例名。注意遮罩层里不能直接应用滤镜效果否则遮罩会失效。要实现模糊遮罩正确做法是在被遮罩层上对对象应用滤镜再由遮罩层决定显示区域。3.4 动画短片项目声音同步与分镜头到了动画短片项目重点已经不在补间参数而是素材组织和时间轴结构。导入声音后在属性面板的同步选项里“事件”模式适合背景音乐只关心播放一次“数据流”模式适合对嘴型或音效同步它会把声音和帧绑定拖拽时间轴时声音也跟随定位。视频导入前用格式转换工具压成H.264编码的MP4再通过“文件 导入 导入视频”接到舞台上比直接放外链更稳定。分镜头设计在课程标准里是A10能力。实操中不需要画得多精美一张纸上列镜头序号、景别、动作描述、时长和音效就够用。这样到剪辑阶段只要照着时间轴把每个镜头对应的帧范围排开片子结构自然就出来了。4. Animate核心动画技法补间、引导层、遮罩层与骨骼动画的边界4.1 四种补间动画的适用条件对照很多人在Animate里做动画卡在不知道用哪种补间。课程标准的K13专门要求掌握逐帧、形状补间、传统补间和新补间动画的制作特点、条件和适用范围。这四种可以这样区分动画类型适用对象关键操作常见错误逐帧动画形状或元件逐帧绘制每个关键帧都是单独画面关键帧之间没有连续性形状补间分离的矢量形状首尾帧形状必须分离可加形状提示点在元件实例上做形状补间传统补间元件实例首尾帧是同一元件实例关键帧上是分离图形新补间动画元件实例在舞台上直接创建补间可用动画编辑器不了解补间曲线调整逐帧动画适合表现人物跑动、表情变化这类高细节动作。形状补间适合做字形变形、水流、爆炸这类轮廓变化如果变形不理想用CtrlShiftH添加形状提示点把起始形状的关键点到目标形状的关键点对上。传统补间是移动、旋转、缩放的常规方案前提是两个关键帧里是同一个元件实例。新补间动画在Animate里更现代它不依赖关键帧之间显式的首尾状态而是直接在时间轴上建立一个补间对象然后用动画编辑器里的贝塞尔曲线调整速度适合做UI动效和角色跟随。4.2 引导层动画的吸附验证引导层动画虽然看起来简单但实际检查时要看的点比想象多。第一引导层本身不会被导出所以不需要担心最终文件里出现杂线。第二被引导层中的对象必须是元件实例如果是分离的图形播放时经常闪一下就不动。第三引导线必须是一条连续的线条用铅笔工具绘制时如果笔触产生微小断点对象会在断点处直接跳到终点。第四首帧和末帧的中心点必须吸附到路径两端验证方法是播放动画观察运动轨迹是否与引导线重合。提示引导层动画验证时把视图缩放调到400%以上更容易看到中心点是否吸附到路径端点。一个额外技巧引导线可以用渐变色或者细线绘制但不要把透明度调成0否则看不到路径。调试完可以右键引导层选择引导层属性取消“帮助”选项隐藏显示不影响动画效果。4.3 遮罩层动画的边界条件遮罩层的核心思想是“用上层图形的轮廓显示下层内容的局部”。做探照灯效果时遮罩层里是一个可以补间移动的圆形做卷轴效果时遮罩层里是一个从左到右扩展的矩形。需要注意的是遮罩层不能作用于按钮元件不能对遮罩层直接使用滤镜遮罩层中位图的Alpha也不会影响遮罩透明度。如果需要文字逐渐显现把文字放在被遮罩层遮罩层用形状补间从一个小矩形撑到覆盖全文这样比逐帧擦除高效得多。网站片头项目里还可以尝试“模糊遮罩”做法是在被遮罩层上对图片应用模糊滤镜然后让遮罩层移动。效果像是有一个清晰的窗口在整个画面上运动这是片头动画里常用的表现手法。4.4 骨骼动画、虚拟摄像头与图层父子关系骨骼动画用到的是Animate的骨骼工具可以把多个元件实例串成IK骨架。课程标准里的毛毛虫爬行、木偶运动都是这类练习。制作时先绘制身体部件每个部件转成影片剪辑再用骨骼工具按顺序点击连接点。骨骼旋转的约束可以在属性面板里设置最小/最大角度避免关节反向弯折。虚拟摄像头则是在时间轴上添加摄像机图层通过打关键帧实现推拉摇移。做宣传短片时用虚拟摄像头从角色特写拉到全景替代直接移动场景图层视觉层次好很多。图层父子关系是容易被忽略的隐藏能力。选中一个图层在图层属性中把它设置为另一个图层的子层子层会继承父层的位移、旋转和缩放。这个机制很适合做手持道具跟随角色手臂摆动或者骑乘类动画。配合代码控制主体角色时子层自动跟随不需要在脚本里同步坐标。给一段键盘控制角色移动的示例import flash.events.KeyboardEvent; stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); function onKeyDown(e:KeyboardEvent):void { if (e.keyCode Keyboard.LEFT) { hero.x - 8; } else if (e.keyCode Keyboard.RIGHT) { hero.x 8; } }这里hero是角色实例名keyCode比较的是键盘键值。注意舞台必须获得焦点所以发布预览时先点击一下舞台键盘事件才会触发。5. ActionScript交互动画与考核验收的踩坑技巧5.1 随机号码抽取与接苹果小游戏的核心代码交互动画项目综合了ActionScript和XML读取接苹果小游戏则是完整游戏逻辑。随机号码抽取的核心逻辑实际很短假设舞台上已经有代表中奖名单的数组、按钮pickBtn和用于显示结果的文本resultTxtimport flash.events.MouseEvent; var list:Array [A001, B002, C003, D004]; pickBtn.addEventListener(MouseEvent.CLICK, onPick); function onPick(e:MouseEvent):void { var i:int Math.floor(Math.random() * list.length); resultTxt.text list[i]; }Math.random()返回0到1之间的小数乘上数组长度后取整保证索引不会越界。接苹果的循环判断类似但需要倒序遍历数组避免删除当前元素时跳过下一个for (var i:int apples.length - 1; i 0; i--) { apples[i].y 5; if (apples[i].hitTestObject(basket)) { score 10; removeChild(apples[i]); apples.splice(i, 1); } }hitTestObject做的是矩形碰撞检测它比较的是两个显示对象的边界框适合接苹果这种简单游戏如果对象是圆形或者不规则形状边界框判断会显得不够精确要换成基于距离的判断。接住苹果后要从显示列表移除再从数组里清除这个顺序不能反否则下次循环还会访问到这个对象出现误判或者空引用。5.2 用考核标准反向检查作品课程标准里有一份综合实务考试评价表正好可以当作作品自检清单作品规格和思想主题占10%原创性占35%艺术表现力占35%技术运用占20%。发布之前按这个顺序检查。原创性部分要看素材是否自己绘制第三方素材有没有做重绘或标注艺术表现力主要看动画节奏和声音配合常见问题是背景音乐没有调音量和音效撞在一起技术运用看是否只用了逐帧而没体现出补间、遮罩、脚本的综合能力。5.3 发布设置里容易被忽略的选项Animate发布到SWF或HTML5时脚本版本要核对。如果工程里有ActionScript 3.0代码发布为SWF时选择与工程匹配的Flash Player版本发布为HTML5时要注意代码片段里部分AS3 API不可用。另外声音采样率建议设为44.1kHz与常见背景音乐保持一致否则会出现动画播放变快或音调异常。最后调试时在动作面板按F9编译错误会输出到“编译器错误”面板。看到“Access of undefined property”说明实例名写错了看到“Syntax error”说明标点或括号匹配有问题。把这些错误逐条清掉交互动画一般就能稳定运行。本文还有配套的精品资源点击获取