归类识字教学以“青”字为例,变换不同的偏旁部首,称为新的汉字,辅助学生识字。本次课件制作用到“豆包”“flash8.0”“Animate2022”,硬件配置可顺畅运行即可,安卓系统的智能手机、Animate2022需要AIR支持。
教学课件作为教师教育教学中的教学资源,辅助教师在教学过程中提高教学效率,因此制作课件的宗旨要符合儿童的试听规律和心理发展特点。在开发设计过程中,以简洁实用为主,可嵌入PPT使用,也可以单独使用。
设计思路:
1、UI界面设计——以“青”为中心,设计同心圆,转动大圆,则更换“青”字的偏旁部首,组成新的文字。
在设计第一版时,大圆转动部首也会随转动,转到左边时部首便会倾斜,因此修改为第二版。
2、代码开发AS3.0
开发思路:鼠标按下,拖动大圆,大圆以圆心为轴转动。上层“青”字保持不动。
再用“智能工具”豆包进行代码辅助开发,对功能的描述要准确,才能达到理想的状态。笔者在开发过程中先用Flash8.0版本AS2.0称程序实现上述功能,再转化为AS3.0代码,如下图。
但是这段代码是有问题的,按下鼠标确实可以转动,角度和鼠标坐标存在关联性,再此按动鼠标时,不能保持上次的的转动角度。
效果验证(关键场景)
操作步骤 | 元件表现(修复后) |
第一次拖动:向右拖→旋转30°→松开 | 元件停在30° 角度 |
新位置按下(不拖动) | 元件保持30°,完全不动 |
新位置按下并向左拖(鼠标移动 10°) | 元件从30°开始,向左旋转 10°(最终20°),而非瞬间跳转到指向鼠标的角度 |
松开后再拖动 | 从20°开始,跟随鼠标拖动方向继续旋转 |
运用AI智能体简单编程,实际上和人交流差不多,不一样的就是我要把我的想法完全文字化,让“他”听明白,再多次“沟通之后”实现了预设功能。
接下来要精简代码,代码繁冗会出现不确定的“意外”。
3、Animate2022测试
新建舞台,如图选择AIR for Android。
时间轴分两个图层,上层为“青”字,下层为可转动的大圆。
/ 核心状态变量(AS3.0 标准强类型声明)var isDrag:Boolean = false; // 鼠标是否按下var lastRot:Number = 0; // 上次拖动后的角度var sX:Number, sY:Number, sA:Number; // 起始坐标/角度(简写)var dragThres:Number = 3; // 拖动阈值// 关键:获取舞台上的影片剪辑实例(实例名必须是line_mc,大小写敏感)var lineMc:MovieClip = this.getChildByName("line_mc") as MovieClip;// 初始化上次角度lastRot = lineMc.rotation;// 【修复】绑定鼠标按下事件(AS3.0 标准写法)stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);// 【修复】分别绑定鼠标松开/移出事件(避免forEach)stage.addEventListener(MouseEvent.MOUSE_UP, resetDragHandler);stage.addEventListener(Event.MOUSE_LEAVE, resetDragHandler);// 【修复】绑定帧循环事件this.addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);// 鼠标按下处理函数(标准函数写法,无箭头函数)function onMouseDownHandler(e:MouseEvent):void { isDrag = true; // 记录按下时的鼠标坐标(AS3.0 用stage.mouseX/Y) sX = stage.mouseX; sY = stage.mouseY; // 计算按下时鼠标相对元件的初始角度 sA = Math.atan2(stage.mouseY - lineMc.y, stage.mouseX - lineMc.x) / Math.PI * 180; // 强制保持上次角度 lineMc.rotation = lastRot;}// 重置拖动状态(复用函数)function resetDragHandler(e:Event):void { lastRot = lineMc.rotation; isDrag = false;}// 帧循环处理函数(标准写法,无语法错误)function onEnterFrameHandler(e:Event):void { if (isDrag) { // 计算鼠标移动距离 var dx:Number = Math.abs(stage.mouseX - sX); var dy:Number = Math.abs(stage.mouseY - sY); // 【修复】三元运算符保留(AS3.0支持),但确保语法正确 lineMc.rotation = (dx > dragThres || dy > dragThres) ? lastRot + (Math.atan2(stage.mouseY - lineMc.y, stage.mouseX - lineMc.x) / Math.PI * 180 - sA) : lastRot; }}
4、打包发布为*.apk文件
在发布设置中,目标要选择AIR for Android,脚本AS3.0。
在发布的时候也会出现一些错误发布失败,不明白的用“豆包”进行帮助,解决相关问题。
在Animate发布成功后,形成安装文件shizi.apk。
我用的这个版本用汉字发布时总出错误,改为数字或拼音、英文就可以了。
5、安卓智能手机测试
从Flash8一直到Animate2022,每一个版本都用过,总结出来,最稳定的就是Flash8、FlashCS3、FlashCS6以及现在使用的Animate2018。而Animate2018作为Flash系列到Animate系列转变的最后一个版权,界面基本延续了FlashCS6,性能更好一些。现在最新版本为Adobe Animate2025。
要钱的,呵呵。
AIR平台是最常用的开发平台了,也是因为现在Animate中的AIR平台已经被Harman收购,所以启动、安装使用都有一定的限制,比如有了Harman的LOGO,就像Unity一样。我使用的Animate2022版本,集成了AIR。在手机上打开会出现Harman的界面。
从FlashPlayer插件停止Adobe官方更新,就意味着Flash技术要被大大削减其地位,即使改名为Animate软件,也无法恢复到当年网页三剑客时的风光。
总之,AdobeAIR以后可能真的只是传说了,毕竟现在应该叫Harman AIR了。
沧州市十四五规划课题《农村小学数字化教学资源开发与应用研究》研究学习材料成果