写在前面

感谢这两篇文章救了老命，虽然之前从来没用过Animate，靠第一篇学会了怎么用，靠第二篇解决了下一个问题。

问题描述

需要做一个填空题，将选项拖拽到对应的目标下

最初展示图

希沃白板

首先想通过最简单的方法，利用希沃白板。可惜希沃白板可提供功能非常简陋，超级分类看似符合要求，然而希沃白板中的超级分类是将答案像丢垃圾一样丢进对应的项目上，并且对选项的边框形状无法自定义。还有一个很麻烦的问题是将ppt导入希沃白板中，ppt的格式会发生很大变化，尤其有特殊字体，特殊字体无法导入。
而使用希沃白板进行排版，远不如在slide插件加持下的Powerpoint使用舒服，况且ppt已经做好，只差这一个内容未完成，动画只占1页篇幅，内容有限，所以不考虑使用。

课堂活动

Animate 2021制作拖拽填空题

如何制作拖曳填空题

根据 Animate/Flash如何制作拖拽填空题（AS3），可以做出如下填空题，遇到的问题是，根据这篇文章给出的代码，只能实现将空与答案的一一对应。拿“阿长”举例来说，如果按照空与答案对应来做，实际展示中会遇到，“阿长”本可以放在绍兴对应的五个空中任意一个，而操作中如果没有放在设置的那个空的位置上，其他四个空放入都会提示错误，答案返回原位置。

拖拽填空题

代码如下

import flash.utils.Timer;
import flash.geom.Point;

var mc_index:int=0;
var mc_count:int=4; %0-3共四个答案mc0,mc1,mc2,mc3
var right_id:int=0;%正确答案标号
var tempx:Number=0;
var tempy:Number=0;
var posAry:Array=new Array();
var timer:Timer=new Timer(20);
for(var i:int=0;i<mc_count;i++)
{
  this["mc"+i].addEventListener(MouseEvent.MOUSE_DOWN,StartDragEvent);
  this["mc"+i].addEventListener(MouseEvent.MOUSE_UP,StopDragEvent);
  posAry.push(new Point());
  posAry[i].x=this["mc"+i].x;%记录拖拽答案的原位置以便返回
  posAry[i].y=this["mc"+i].y;
}
timer.addEventListener(TimerEvent.TIMER,FollowMouseEvent);
function StartDragEvent(e:MouseEvent):void
{
  var obj:MovieClip=e.currentTarget as MovieClip;
  var t:int=int(obj.name.slice(2));
  mc_index=t;
  tempx=this.mouseX-obj.x;
  tempy=this.mouseY-obj.y;
  timer.start();
  this.setChildIndex(obj,this.numChildren-1);
}
function FollowMouseEvent(e:TimerEvent):void
{
  this["mc"+mc_index].x=this.mouseX-tempx;
  this["mc"+mc_index].y=this.mouseY-tempy;
}
function StopDragEvent(e:MouseEvent):void
{
  var obj:MovieClip=e.currentTarget as MovieClip;
  var t:int=int(obj.name.slice(2));
  timer.stop();
  if(obj.hitTestObject(p_mc)==true&&t==right_id)%p_mc为空的标号
  {
    obj.x=p_mc.x;
    obj.y=p_mc.y; %如果对应，则停留在该位置上
  }
  else
  {
    obj.x=posAry[t].x; %如果不对，返回原位置
    obj.y=posAry[t].y;
  }
}

将答案拖到对应区域内

想法一

考虑用语句判断一个答案可放在五个位置中任意一个都是正确，写了半天没写对，着急用选择再找方案。

想法二

根据Flash 拖放实例_cnicfhnui的博客-CSDN博客_flash拖拽实例
可以判断答案是否到达目标区域，判断到达，则松开鼠标，位置保留；不到达，则回到拖拽之前的位置。
尝试了一下，也失败了。不知道为什么松开鼠标不会留在原地，答案一直粘在鼠标上，头疼。

想法三

结合一、二，判断答案是否在目标区域，在，则答案会跑到设定的空的位置；不在，则回到拖拽之前的位置。
完美实现想要的效果，由于实在太晚了，不想动脑写循环了，考虑到就10个元素，就偷懒不动脑直接复制粘贴判断了。哪天再做的时候再考虑吧。

开始改的时候遇到两个问题：

画面闪烁。解决方案：背景和内容在两个图层，合并图层后没有问题，不知道是什么导致的，理论上应该分开图层不会有问题的。
回答错误后不会回到原位置，而是回到了p_cm0的位置。解决方案：最初只判断了有没有到目标区域，而没有将位置信息t修改到对应的地方，所以只存了一个地点。


import flash.utils.Timer;
import flash.geom.Point;

var mc_index:int=0;
var mc_count:int=10;
var right_id0:int=0;
var right_id1:int=1;
var right_id2:int=2;
var right_id3:int=3;
var right_id4:int=4;
var right_id5:int=5;
var right_id6:int=6;
var right_id7:int=7;
var right_id8:int=8;
var right_id9:int=9;%有时间再想怎么改
var tempx:Number=0;
var tempy:Number=0;
var posAry:Array=new Array();
var timer:Timer=new Timer(20);
for(var i:int=0;i<mc_count;i++)
{
  this["mc"+i].addEventListener(MouseEvent.MOUSE_DOWN,StartDragEvent);
  this["mc"+i].addEventListener(MouseEvent.MOUSE_UP,StopDragEvent);
  posAry.push(new Point());
  posAry[i].x=this["mc"+i].x;
  posAry[i].y=this["mc"+i].y;
}
timer.addEventListener(TimerEvent.TIMER,FollowMouseEvent);
function StartDragEvent(e:MouseEvent):void
{
  var obj:MovieClip=e.currentTarget as MovieClip;
  var t:int=int(obj.name.slice(2));
  mc_index=t;
  tempx=this.mouseX-obj.x;
  tempy=this.mouseY-obj.y;
  timer.start();
  this.setChildIndex(obj,this.numChildren-1);
}
function FollowMouseEvent(e:TimerEvent):void
{
  this["mc"+mc_index].x=this.mouseX-tempx;
  this["mc"+mc_index].y=this.mouseY-tempy;
}
function StopDragEvent(e:MouseEvent):void
{
  var obj:MovieClip=e.currentTarget as MovieClip;
  var t:int=int(obj.name.slice(2));
  timer.stop();
  if(this.hotspot_mc0.hitTestObject(mc0)&&t==right_id0)%有时间再改
  {
    obj.x=p_mc0.x;
    obj.y=p_mc0.y;
  }
    else if(this.hotspot_mc0.hitTestObject(mc1)&&t==right_id1)
  {
    obj.x=p_mc1.x;
    obj.y=p_mc1.y;
  }
  else if(this.hotspot_mc0.hitTestObject(mc2)&&t==right_id2)
  {
    obj.x=p_mc2.x;
    obj.y=p_mc2.y;
  }
  else if(this.hotspot_mc0.hitTestObject(mc3)&&t==right_id3)
  {
    obj.x=p_mc3.x;
    obj.y=p_mc3.y;
  }
  else if(this.hotspot_mc0.hitTestObject(mc4)&&t==right_id4)
  {
    obj.x=p_mc4.x;
    obj.y=p_mc4.y;
  }
  else if(this.hotspot_mc1.hitTestObject(mc5)&&t==right_id5)
  {
    obj.x=p_mc5.x;
    obj.y=p_mc5.y;
  }
  else if(this.hotspot_mc2.hitTestObject(mc6)&&t==right_id6)
  {
    obj.x=p_mc6.x;
    obj.y=p_mc6.y;
  }
  else if(this.hotspot_mc2.hitTestObject(mc7)&&t==right_id7)
  {
    obj.x=p_mc7.x;
    obj.y=p_mc7.y;
  }
  else if(this.hotspot_mc3.hitTestObject(mc8)&&t==right_id8)
  {
    obj.x=p_mc8.x;
    obj.y=p_mc8.y;
  }
  else if(this.hotspot_mc3.hitTestObject(mc9)&&t==right_id9)
  {
    obj.x=p_mc9.x;
    obj.y=p_mc9.y;
  }
  else
  {
    obj.x=posAry[t].x;
    obj.y=posAry[t].y;
  }
}

效果展示

效果展示不知道为什么图片就很小。

导入ppt

导入的时候发现一个很绝望的问题，flash现在基本不支持了😭😭😭😭😭😭😭😭😭😭😭要比较完美没差错的话，与其安装一个插件，不如导出exe。
导出exe还找了一下教程，😩
Ctrl+Shift+f12，勾选win放映文件，然后发布，就可以发布exe文件。实在是无奈之举。
找怎么发布的时候才发现，Animate支持HTML5和Javascript，我。。。。。我Javascript也没学好，好吧😩。
下次研究研究可不可以向插入HTML5的动画来实现。
希沃白板是指望不上了。
最后，当然是希望没有下次了。

发布设置

勾选win放映文件

Animate制作拖拽多选填空题