资源简介

(共35张PPT)
项目八 交互功能和影片输出
二维动画设计软件应用（Animate 2022）
项 目
导 读
Animate不仅让用户观看自行播放的动画，还能够根据用户的选择呈现出不同的动画内容，甚至即时、动态的资料，实现此功能的就是ActionScript，本项目通过Animate 2022中ActionScript 3.0的实例讲解，使读者掌握ActionScript语言的初步应用，还将学习动画影片的输出，方便在其他程序或网站中使用该动画产品。
储备新知识
学习重点
任务1 按钮交互
——移动的圆
任务2 片头片尾交互动画
——真人实拍互动动画
思考与探索
项目内容
任务3 任意跳转功能
——原创角色展示
任务4 动画导出
学习重点
项目八 交互功能和影片输出——学习重点
学会什么？
1.认识“动作” 面板及ActionScript 3.0有关术语
2.代码的添加方法
3.学会动画影片的输出
学习重点：
本项目重点了解ActionScript 3.0相关知识，学习添加脚本的方法，学会动画交互功能的实现和动画影片输出。
01
02
储备新知识
项目八 交互功能和影片输出——储备新知识
“动作”面板
ActionScript有关术语
01
02
Action（动作）, Event（事件）, Class (类) , Function (函数), Objects (对象)
项目八 交互功能和影片输出——储备新知识
03
影片输出
导出的影片类型有：SWF影片(*.swf)、Windows AVI(*.avi)、GIF动画(*.gif)、QuickTime（*.mov）、WAV Audio（*.wav）、JPEG文件序列(*.jpg)、GIF文件序列(*.gif)、PNG文件序列(*.png)。
导出的图像类型有：SWF影片(*.swf)、位图(*.bmp)、JPEG图像(*.jpg)、GIF图像(*.gif)、PNG(*.png)。
任务1
按钮交互——移动的圆
项目八 交互功能和影片输出——任务1
任务分析：
任务1案例实际上是一个基本模型，当学会了这一模型，再结合上漂亮的动画表现形式，那么带有交互功能的优秀动画就实现了。任务分析如下：首先制作一个圆从舞台左侧移动到右侧的动画，接下来制作三个按钮，分别为“开始”、“暂停”和“重放”。最后为每一个按钮实例添加实现其功能的代码。
按钮交互——移动的圆
项目八 交互功能和影片输出——任务1
任务实施——步骤1
选择“文件”菜单→“新建”命令，选择“角色动画”→“ 标准”，创建一个新文档。默认工作区宽和高为640像素×480像素。
任务实施——步骤2
选择“插入”菜单→“新建元件”命令，新建一个按钮元件，名称设置为“开始”，利用矩形工具和文本工具创建“开始”按钮。
新建文件参数设置
“开始”按钮
项目八 交互功能和影片输出——任务1
任务实施——步骤3
重复步骤2，新建“暂停”按钮元件和“重放”按钮元件。
任务实施——步骤4
在第1帧处，使用椭圆形工具在舞台左侧绘制圆形，选中圆形，按快捷键【F8】，将圆形转换为图形元件，在第50帧按快捷键【F6】插入关键帧，将绘制的圆形移动到舞台右侧。在第1到50帧中间任意位置单击右键，在弹出的快捷菜单中选择“创建传统补间”命令。
时间轴
按钮元件
任务实施——步骤5
新建“图层2”，按组合快捷键【Ctrl+L】，调出库面板，将新建的3个按钮元件从库中拖入到舞台。
项目八 交互功能和影片输出——任务1
任务实施——步骤6
选中“开始”按钮，在右侧的属性栏中，将实例名称修改为“kaishi_mc”，同样方法，将“暂停”按钮的实例名称修改为“zanting_mc”，将“重放”按钮的实例名称修改为“chongfang_mc”。
任务实施——步骤7
在时间轴第一帧处，选中“开始”按钮元件，按住快捷键【F9】，调出“动作”面板。点击右上方的“代码片段”按钮，打开“代码片段”面板。选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。根据动作设定的需要，修改两个位置，其一是在代码片段前加上 “停止”代码“stop();”，让画面停留在第1关键帧的位置上。其二是将数字“5”改为“2”，使单击元件实例时，动画从第2帧开始进行播放。此时会在时间轴的图层顶部自动生成一个Actions图层，用来存放代码，第一关键帧上出现了小写的字母“a”。
任务实施——步骤9
“重放”的动作设定是当舞台中的圆运行到最右侧的时候，点击“重放”按钮，实现从头播放的效果。因此，需要在动画的最后一帧处，选中“重放”按钮元件，按住快捷键【F9】，调出“动作”面板。在右上方找到“代码片段”按钮，点击打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。
与“开始”按钮的代码修改方法相似，需要修改两个位置，其一是在代码片段前加上 “停止”代码，让画面停留在第50关键帧的位置上。其二是将数字“5”改为“2”，使单击元件实例时，动画从第2帧开始进行播放。
项目八 交互功能和影片输出——任务1
任务实施——步骤8
选中“暂停”按钮元件，按住快捷键【F9】，调出“动作”面板。再次调出“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并停止”命令。可以在代码编辑区查看到调用的代码。根据动画需要，修改gotoAndStop(5);为stop();即可实现暂停的功能。
任务实施——任务经验
任务1实现了添加脚本，控制动画播放。在制作过程中，为了提升操作速度，可以使用【F9】快捷键快速打开“动作”面板。另外还需要特别注意的是：手动输入脚本时必须在英文输入法状态下进行。
项目八 交互功能和影片输出——任务1
任务实施——步骤10
代码设置完成后，按组合快捷键【Ctrl+Enter】，运行动画，进行测试。动画运行没问题则动画制作完成。如果出现代码错误的提示框，则需要根据提示，结合之前的制作步骤重新检查代码中存在的问题，直到调试成功。
任务2
片头片尾交互动画——真人实拍互动动画
任务分析：
任务2是在任务1模型动画的基础上进行的实际应用，需要实现两个交互功能，首先是为片头设计代码，实现点击“发射”按钮，播放动画。其次是为片尾设计代码，实现点击“再飞一次”按钮，动画重新播放。
真人实拍互动动画
项目八 交互功能和影片输出——任务2
项目八 交互功能和影片输出——任务2
任务实施——步骤1
选择“文件”菜单→“打开”命令，打开“素材\项目八\任务2\ “真人实拍互动动画素材.fla”文件，素材文件是完整的动画文件，包括片头、片尾两个创意按钮“发射”和“在飞一次”，我们需要做的是为动画添加交互代码。
任务实施——步骤2
选择“发射”按钮，在右侧属性栏中，将实例名称修改为“fashe_mc”。在228帧处，选择“再飞一次”按钮，在右侧属性栏中，将实例名称修改为“zailai_mc”。
任务实施——步骤2
选择第1帧，在舞台中选中“发射”按钮，按住快捷键【F9】调出“动作面板”，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。根据动作设定的需要，修改两个位置，一个是在代码片段前加上 “停止”代码“stop();”，让画面停留在第1关键帧的位置上。另一个是将数字“5”改为“2”，使单击元件实例时，动画从第2帧开始进行播放。
项目八 交互功能和影片输出——任务2
任务实施——步骤4
“再飞一次”的动作设定是当动画结束的时候，点击“再飞一次”按钮，实现动画从头播放的效果。因此，需要在动画的最后一帧处，选中“再飞一次”按钮元件，按住快捷键【F9】，调出“动作”面板，在右上方找到“代码片段”按钮，点击打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。可以在代码编辑区查看到调用的代码。
任务实施——步骤5
代码设置完成后，按组合快捷键【Ctrl+Enter】，运行动画，进行测试。
任务实施——任务经验
任务中为按钮实例添加代码的时候，注意要现在属性栏修改实例名称。很多动画片的片头和片尾交互按钮都是非常有创意的，不管如何变化，代码实现的功能基本都是一致的，方法基本相似。
任务3
任意跳转代码——原创角色展示
任务分析：
任务3要实现的是时间轴上的任意跳转功能，动画源文件素材已经准备好，我们需要做的是为每个按钮添加正确的代码，实现跳转功能。
原创角色展示
项目八 交互功能和影片输出——任务3
项目八 交互功能和影片输出——任务3
任务实施——步骤1
选择“文件”菜单→“打开”命令，打开“素材\项目八\任务3\ “原创角色展示素材.fla”文件。
任务实施——步骤2
首先来了解素材动画的结构，三个按钮元件“淘气灰”、“小狐狸”、“小鱼儿”均放在“按钮”图层里。“角色”图层有四个关键帧，第1关键帧中放置三张角色正面图片，第2关键帧中淘气灰图片已经替换成了淘气灰转面动画影片剪辑。第4关键帧中，小狐狸图片已经替换成小狐狸转面动画影片剪辑。第6关键帧中，小鱼儿图片已经替换成小鱼儿转面动画影片剪辑。目前来看，四个关键帧中的内容表面上看是一样的，但是当运行动画之后，影片剪辑元件呈现的就是动态的效果。
任务实施——步骤3
选择“淘气灰”按钮，在右侧属性栏中，将实例名称修改为“mao_mc”。选择“小狐狸”按钮，在右侧属性栏中，将实例名称修改为“huli_mc”。选择“小鱼儿”按钮，在右侧属性栏中，将实例名称修改为“yu_mc”。
项目八 交互功能和影片输出——任务3
任务实施——步骤4
选择第1帧，在舞台中选中“淘气灰”按钮，按住快捷键【F9】，调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。根据动作设定的需要，将数字“5”改为“2”，使单击“淘气灰”按钮时，动画跳转到第2帧并播放。
任务实施——步骤5
选择第1帧，在舞台中选中“小狐狸”按钮，按住快捷键【F9】调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。根据动作设定的需要，将数字“5”改为“4”，使单击“小狐狸”按钮时，动画跳转到第4帧并播放。
项目八 交互功能和影片输出——任务3
任务实施——步骤6
选择第1帧，在舞台中选中“小鱼儿”按钮，按快捷键【F9】调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。根据动作设定的需要，将数字“5”改为“6”，使单击“小鱼儿”按钮时，动画跳转到第6帧并播放。
任务实施——步骤7
此时，跳转代码设置完成，但是还缺少一个关键的设置，就是为“角色”层的四个关键帧添加停止代码，选中“角色”图层第1帧，按快捷键【F9】，调出“动作”面板，找到面板右上方的“代码片段”按钮，打开 “代码片段”面板，在英文输入法状态下键入代码“stop();”。同样的方法，为第2帧，第4帧和第6帧都加上“stop();”。
时间轴效果
项目八 交互功能和影片输出——任务3
任务实施——步骤8
代码设置完成后，按组合快捷键【Ctrl+Enter】，运行动画，进行测试。
“动作”面板代码
任务实施——任务经验
ActionScript脚本的功能强大，编写程序要遵循严密的逻辑性，需要多加训练方可掌握精髓。
任务4
动画影片输出
任务分析：
案例 1 的操作思路为，在 Animate 2022 中打开动画源文件，选择“文件”菜单→“发布 设置”命令，在“发布设置”对话框中进行相应的设置。案例 2 导出 GIF 动态图片的方法为， 选择“文件”菜单→“导出”子菜单→“导出动画 GIF”命令，在“导出图像”对话框中进行 相应的设置。
项目八 交互功能和影片输出——任务4
项目八 交互功能和影片输出——任务4
案例 1：
步骤 1 打开“项目八 交互功能和影片输出\项目八 素材及源文件\任务 4\真人实拍互动 动画素材.fla”文件。
步骤 2 选择“文件”菜单→“发布设置”命令，打开“发布设置”对话框。
步骤 3 勾选“Win 放映文件”复选框，单击“输出名称”文本框右侧的“选择发布目标” 交互功能和影片输出 项目八 143 按钮 ，如图 8-22 所示。在打开的对话框中输入文件名“真人实拍互动动画”，并选择保存路 径，如图 8-23 所示。单击“保存”按钮，返回“发布设置”对话框，此时“输出名称”文本 框中出现了相应的保存路径和文件名称
“发布设置”对话框
项目八 交互功能和影片输出——任务4
步骤 4 设置成功后，单击“发布设置”对话框下方的“发布”按钮，即可在相应路径中 找到保存的“真人实拍互动动画.exe”文件。
步骤 5 双击打开“真人实拍互动动画.exe”文件，可以直接观看动画
项目八 交互功能和影片输出——任务4
案例 2：
步骤 1 打开“项目八 交互功能和影片输出\项目八 素材及源文件\任务 4\早安表情动 画.fla”文件。
步骤 2 选择“文件”菜单→“导出”子菜单→“导出动画 GIF”命令，打开“导出图像” 对话框，如图 8-24 所示。
“导出图像”对话框
项目八 交互功能和影片输出——任务4
步骤 3 “导出图像”对话框右侧为设置选项，其中“透明度”复选框是默认勾选的，案 例 2 需要取消勾选“透明度”复选框，保留动画白色的背景。
步骤 4 单击“保存”按钮，在“另存为”对话框中输入文件名，确定保存路径，即可完 成 GIF 动态图片的导出。
任务经验 打开“发布设置”对话框的快捷键是“Ctrl+Shift+F12”，执行“发布”命令的快捷键是 “Ctrl+Alt+F12”。
思考与探索
思考
01
1.调出ActionScript面板的快捷键是什么？
2.添加脚本时候输入法要求在什么状态？
3.如何导出gif格式的动画？
项目八 交互功能和影片输出
02
探索
项目八 交互功能和影片输出
1.一粥一饭当思来之不易，一丝一缕恒念物力维艰。动画“粒粒皆辛苦”是一个珍惜粮食的交互动画，内容是把散落的麦穗麦粒捡回到袋子里。
2.“红灯停、绿灯行”遵守交通规则是每个公民应尽的义务，动画“红灯停，绿灯行”是一个交通安全类交互动画，内容是按照红绿灯的变化控制小汽车。
项目八是Animate 2022软件教学中的重点内容之一，也是难点部分，本项目通过丰富典型的任务范例讲授了二维动画中常用的交互功能实现方法和动画影片导出的操作方法，要掌握这部分内容，需要勤思考，多操作。
项目总结

展开更多......

收起↑