交互式动画课件的制作

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