交互式动画课件的制作

1.创建AS2.0文件
2.导入swf到舞台
3.设置帧频和文档大小
4. 新建图层第1帧添加stop脚本
5.影片中需要停的帧添加关键帧
6.在需要停的帧添加stop脚本
7.新建图层添加半透明按钮到第一个 交互点，用脚本助手添加play脚本
8. 浏览每一个需要停止的帧，在按钮图层添
加对应的关键帧，移动按钮到对应交互点
交互式动画课件的制作
主讲 黄子谦
华南师范大学教育信息技术学院 2015.7.9
教学内容与授课方式
教学内容 理论知识 授 课 方 式 现场讲解 图文教程 录制视频 交互课件 √ √ √ √ 硬件操Baidu Nhomakorabea √ √ √ √ 软件操作 √ √ √ √
以信息技术课程为例
教学媒体类型与特点
媒体 特点 抽象 交互课件 微课视频 直观
按钮脚本
on (press) { startDrag("物体1"); } on (release) { stopDrag(); if (托盘.hitTest(物体1)) { 重量1 = 30; p = 1; } else { p = 0; 重量1 = 0; } }
• 这里只给出一个按钮的脚 本，其他的按钮脚本基本 相同，只是示例名称和重 量变量有所不同。
• • • • • • • • 拖动对象用按钮，位置判断用影片； 按钮按下可拖动，按钮释放可停止； 碰撞语句有讲究，影片名字在前面； 碰撞结果真与假，变量赋值各不同； 判断变量大或小，影片向前或向后； 函数括号有参数，可用变量替换之； 变量对应属性值，各种变化随你意； 对象要想回原位，预先记下坐标值。
•
• • • • • •
if (r>g) {
r -= 5; if (r<5) {r = 0;} 指针._rotation = r; } if (r<g) { r += 5;
•
• • • };
if (r>350) {r = 350;}
指针._rotation = r; }
应用旋转属性实现旋转效果
小结
• 与hitTest的区别
hitTest在影片接触到另一对象时返回结果true，
未接触时返回结果false
方法1主要步骤
• 制作表盘和指针旋转动画 • 制作影片剪辑给出实例名代表托盘 • 制作按钮给出实例名代表物体，用脚本助手添加startDrag 与stopDrag实现拖动与停止 • 手工添加碰撞检测脚本，实现拖动位置的判断
拓展应用
• 拖动填空
• 拖动分类
• 音量调整
• 拼图游戏
网页课件
文字介绍
图文解说
学习者 特点 经验丰富
引导交互
视频演示 现场演示
经验缺乏
信息资源建设的趋势
课件 形式
网页 课件
过去
微课 视频
目前
交互课 件
智能 课件
时间 未来
案例展示
• 音频处理
• 找规律
• 弹簧秤
软件操作类交互示例
工作1：软件操作录屏
——以Camtasia Studio为例
1.设置录屏隐藏光标
关键函数和语句
• 拖动： startDrag("对象") • 停止拖动： stopDrag() • 碰撞检测 影片.hitTest(对象) • 条件语句 if (条件成立) {动作1} else {动 作2} • 重复执行 onEnterFrame = function() { 动作 } • 当前帧、 _currentframe • 前一帧
方法2主要步骤
• 在方法1基础上，删除第1帧后面的其他
• 给出指针元件的实例名
• 修改帧脚本，按钮脚本保持不变
帧脚本
• • • • • • • • • •
• • • •
重量1 = 0; 重量2 = 0; 重量3 = 0; 重量4 = 0; 重量5 = 0; 重量6 = 0; stop(); 指针.onEnterFrame = function() { r = 指针._rotation; if (r<0) {/当角度大于180时，实际数值为负 数 r = 360+r;/ } 重量 = 重量1+重量2+重量3+重量4+重量5+ 重量6; g = 重量*3;//每单位重量旋转3度
9.对按钮图层不需要交互的帧，插入 空白关键帧
10.测试影片观察交互效果
11.必要时可添加操作提示和干扰交 互按钮
操作完成 请大家自行练习
拖动交互应用示例
——弹簧秤模拟
模拟情景
• • • • • • • 假设有物体若干，分别为物体1、物体2、物体3、物体4、物体5、物体6; 其重量分别为重量1、重量2、重量3、重量4、重量5、重量6； 按下物体1可以将其拖动到弹簧秤的托盘上； 释放时停止拖动，当物体1被准确放在托盘上则弹簧秤会计算重量1，否则不 计算重量1； 物体2、物体3、物体4、物体5、物体6情况相同； 称重结果：总重量=重量1+重量2+重量3+重量4+重量5+重量6； 弹簧秤初始刻度为0，每次增加物体重量，指针顺时针旋转，反之每次减少 物体重量，则指针反时针旋转；当指针刻度与重量相符则不旋转。
prevFrame()
• 下一帧 – nextFrame() • 旋转角度 _rotation
注：对象和影片均指舞台 上元件的实例名称
与hitTest相似的函数
• eval(影片1._droptarget);
• //当影片剪辑“影片1”落入另一影片剪辑范围内，
返回落入目标的实例名称，例如“影片2”
2.设置录屏帧频
帧频：每秒5帧左右
3.进行录屏
4.导入媒体并添加到时间轴
5.生成swf文件
5.生成swf文件
•选择MP4/FLV/SWF— Flash输出 •在下一步进行参数选择， 目的是输出帧频较低的 flash文件，以方便添加交 互
5.生成swf文件
工作2:添加交互
——以Flash为例
• 手工添加脚本实现变量定义与计算 • 手工添加脚本实现播放控制
帧脚本
• 重量1 = 0; • 重量2 = 0; • 重量3 = 0;
• • • onEnterFrame = function() { 当前帧 = _currentframe; f = 当前帧-1;
•
• •
重量 = 重量1+重量2+重量3+重量4+重量5+重量6;
问题思考
• 如何将物体拖动或不拖动？
– 拖动startDrag与停止拖动stopDrag
• 如何判断物体是否放在托盘上？
– 影片碰撞检测函数hitTest
问题思考
• 物体重量如何反映在弹簧秤的指示刻度上?
– 利用goto，先制作旋转动画，不同帧上的指针旋转角度 不同，转到不同的帧就会指到不同刻度 – 利用旋转属性_rotation，直接改变指针旋转角度
if (f>重量) { prevFrame();
• 重量4 = 0;
• 重量5 = 0; • 重量6 = 0; • stop();
•
• • •
}
if (f<重量) { nextFrame(); }
•
};
应用补间动画实现旋转，不同帧 代表不同旋转角度
• • • • • • • • • • • • •