寫在前面

感謝這兩篇文章救了老命，雖然之前從來沒用過Animate，靠第一篇學會了怎么用，靠第二篇解決了下一個問題。

1. Animate/Flash如何制作拖拽填空題（AS3）
2. Flash 拖放實例_cnicfhnui的博客-CSDN博客_flash拖拽實例

問題描述

需要做一個填空題，將選項拖拽到對應的目標下

最初展示圖

希沃白板

首先想通過最簡單的方法，利用希沃白板?？上Ｎ职装蹇商峁┕δ芊浅：喡壏诸惪此品弦?，然而希沃白板中的超級分類是將答案像丟垃圾一樣丟進對應的項目上，并且對選項的邊框形狀無法自定義。還有一個很麻煩的問題是將ppt導入希沃白板中，ppt的格式會發(fā)生很大變化，尤其有特殊字體，特殊字體無法導入。
而使用希沃白板進行排版，遠不如在slide插件加持下的Powerpoint使用舒服，況且ppt已經(jīng)做好，只差這一個內(nèi)容未完成，動畫只占1頁篇幅，內(nèi)容有限，所以不考慮使用。

課堂活動

Animate 2021制作拖拽填空題

如何制作拖曳填空題

根據(jù) Animate/Flash如何制作拖拽填空題（AS3） ，可以做出如下填空題，遇到的問題是，根據(jù)這篇文章給出的代碼，只能實現(xiàn)將空與答案的一一對應。拿“阿長”舉例來說，如果按照空與答案對應來做，實際展示中會遇到，“阿長”本可以放在紹興對應的五個空中任意一個，而操作中如果沒有放在設置的那個空的位置上，其他四個空放入都會提示錯誤，答案返回原位置。

拖拽填空題

代碼如下

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;
  }
}

將答案拖到對應區(qū)域內(nèi)

想法一

考慮用語句判斷一個答案可放在五個位置中任意一個都是正確，寫了半天沒寫對，著急用選擇再找方案。

想法二

根據(jù)Flash 拖放實例_cnicfhnui的博客-CSDN博客_flash拖拽實例
可以判斷答案是否到達目標區(qū)域，判斷到達，則松開鼠標，位置保留；不到達，則回到拖拽之前的位置。
嘗試了一下，也失敗了。不知道為什么松開鼠標不會留在原地，答案一直粘在鼠標上，頭疼。

想法三

結(jié)合一、二，判斷答案是否在目標區(qū)域，在，則答案會跑到設定的空的位置；不在，則回到拖拽之前的位置。
完美實現(xiàn)想要的效果，由于實在太晚了，不想動腦寫循環(huán)了，考慮到就10個元素，就偷懶不動腦直接復制粘貼判斷了。哪天再做的時候再考慮吧。

開始改的時候遇到兩個問題：

1. 畫面閃爍。解決方案：背景和內(nèi)容在兩個圖層，合并圖層后沒有問題，不知道是什么導致的，理論上應該分開圖層不會有問題的。
2. 回答錯誤后不會回到原位置，而是回到了p_cm0的位置。解決方案：最初只判斷了有沒有到目標區(qū)域，而沒有將位置信息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

導入的時候發(fā)現(xiàn)一個很絕望的問題，flash現(xiàn)在基本不支持了??????????????????????要比較完美沒差錯的話，與其安裝一個插件，不如導出exe。
導出exe還找了一下教程，??
Ctrl+Shift+f12，勾選win放映文件，然后發(fā)布，就可以發(fā)布exe文件。實在是無奈之舉。
找怎么發(fā)布的時候才發(fā)現(xiàn)，Animate支持HTML5和Javascript，我。。。。。我Javascript也沒學好，好吧??。
下次研究研究可不可以向插入HTML5的動畫來實現(xiàn)。
希沃白板是指望不上了。
最后，當然是希望沒有下次了。

發(fā)布設置

勾選win放映文件