当前位置：首页>课件>归类识字教学课件实操实录——汉字回家

归类识字教学课件实操实录——汉字回家

2026-03-29 11:41:49

归类识字教学——汉字回家，学生将生字拖动到相应的拼音下，安装在安卓系统的智能手机、Animate2022需要AIR支持。

一、准备：工具与素材

工具配置需安装 Adobe Animate 2018-2022 版本（推荐 2018，对 AIR 支持更稳定），笔者用的2022版，确保集成 Harman AIR SDK（Animate 新版本已内置）。可用photoshop制作界面。

1、拼音框：按 “kǒu、rì” 等拼音，做成彩色云朵形状（黄色、橙色、蓝色、绿色四组），转为影片剪辑并命名（如pinyin_kou_mc）。

2、汉字元素：将 “目、耳、兔” 等汉字做成独立影片剪辑，命名为hanzi_mu_mc（注意实例名与拼音对应）。

3、背景与标题：还原你设计的 “找一找” 标题栏、上下题按钮，确保界面与上图一致。

二、核心：实现汉字拖拽功能（AS3 代码）

在 Animate 中新建 “ActionScript 3.0” 文档，将素材拖入舞台后，在 “动作” 面板编写以下代码（需绑定到主时间轴）：

// 1. 初始化变量：记录拖拽状态var isDragging:Boolean = false;var currentHanzi:MovieClip; // 当前拖拽的汉字var startX:Number, startY:Number; // 汉字初始位置// 2. 为所有汉字绑定触摸事件（适配手机触屏）// 示例：为“目”字绑定事件，其他汉字同理hanzi_mu_mc.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchStart);hanzi_er_mc.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchStart);// （需补充所有汉字的事件绑定）// 3. 触摸开始：记录初始位置function onTouchStart(e:TouchEvent):void {    currentHanzi = e.target as MovieClip;    isDragging = true;    startX = currentHanzi.x;    startY = currentHanzi.y;    currentHanzi.parent.addChild(currentHanzi); // 置顶显示}// 4. 触摸移动：跟随手指位置stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);function onTouchMove(e:TouchEvent):void {    if (isDragging && currentHanzi) {        currentHanzi.x = e.stageX;        currentHanzi.y = e.stageY;    }}// 5. 触摸结束：判断是否匹配拼音stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);function onTouchEnd(e:TouchEvent):void {    if (!isDragging) return;    // 碰撞检测：判断汉字是否拖入拼音框    var isMatched:Boolean = false;    // 示例：“目”对应“mù”拼音框    if (currentHanzi.name == "hanzi_mu_mc" && hitTest(pinyin_mu_mc, currentHanzi)) {        currentHanzi.x = pinyin_mu_mc.x;        currentHanzi.y = pinyin_mu_mc.y;        isMatched = true;    }    // （需补充所有汉字-拼音的匹配逻辑）    // 未匹配则回弹到初始位置    if (!isMatched) {        currentHanzi.x = startX;        currentHanzi.y = startY;    }    isDragging = false;}// 6. 辅助函数：检测两个元件是否重叠function hitTest(target1:DisplayObject, target2:DisplayObject):Boolean {    var rect1:Rectangle = target1.getBounds(stage);    var rect2:Rectangle = target2.getBounds(stage);    return rect1.intersects(rect2);}