FLASH制作连线题详解.doc

FLASH制作连线题详解-以AS3为例
时间:2013-09-17 11:20来源:电脑教程学习网 编辑:xiaolian
连线题是一种常见的测试题型，利用FLASH中的画线功能可以很容易实现“连线”的过程，但对连线结果的判断却有一定的难度，在这里为大家介绍两种实现连线结果的判断方法。
连线题设计方法：
1，利用graphics实现画线的过程，通常操作过程为鼠标按下开始画线，鼠标移动是画线的过程，鼠标弹起结束画线：
addEventListener(MouseEvent.MOUSE_DOWN,mc1Down);
function mc1Down(e:MouseEvent ):void{
        stage.addEventListener(MouseEvent.MOUSE_MOVE ,moveFun);
        stage.addEventListener(MouseEvent.MOUSE_UP ,upFun);
    }
function moveFun(e:MouseEvent ):void{
        graphics.clear();
        graphics.lineStyle(3,0xff0000);
        graphics.moveTo(xx,yy);
        graphics.lineTo(mouseX,mouseY);
    }
function upFun(e:MouseEvent ):void{
        stage.removeEventListener(MouseEvent.MOUSE_MOVE ,moveFun);
        stage.removeEventListener(MouseEvent.MOUSE_UP ,upFun);
    }
2，实现连线结果判断：通过单击指定按钮判断。
因为如果依据鼠标移动位置来判断连线对象，难度比较大。通常可以在接近连线目标区时单击指定的对象（如按钮，通过这个单击事件实现答案判断和信息反馈），下面看示例：

这个连线的过程在于单击题干中的按钮确定连线的起点，移动鼠标显示连线的方向和过程，单击答案中的按钮确定目标是否正确。（这里是只有正确的情况才可以连线，实现可以做成不问正确与否都可连线，但最后显示评分信息）
连线题实现过程：
1，根据连线需要制作相应的界面，这里必须为每一个连线选项设计一组按钮，一个用来确定连线起始位置，一个用来判断连线结果和结事位置，如图：

这个连线题有5对，相应的就要有5组按钮，它们实例名分别为：f1、f2、f3、f4、f5和f1f、f2f、f3f、f4f、f5f。注意这里的按钮并不是按顺序排列的，而是根据答案来确定顺序的，比如第一个是图标灯泡对应的按钮为f1,连线正确的答案项是下排第2个，所以灯泡上方的按钮按钮是f1f。（如果按序排列，则在判断答案时则要根据实际值判断，大家可以试着更改一下）
2，创建两个容器，用来实现实现过程，一个是用来临时显示画线过程（如果不这样做，则在实现后一个连线过程时前一个连线就被自动清除了）
//创建一个名字为myshape的Shape对象，用来显示连线
var myshape:Shape=new Shape();
myshape.graphics.lineStyle(3,0xff0000);
addChild(myshape);
//这个容器用来临时显示画线过程，以避免画线过程中clear()方法清空上次画线的轨迹。
var tempShape = new Shape();
myshape.graphics.lineStyle(3,0xff0000);
addChild(tempShape);
3，定义反馈答案方式，在这里以声音提供连线结果。
//定义一个变量j，变量j用来取得单击起始位置中的数值，作为答案判断的依据，如单击f2,则j=2,在判断答案时其就是判断的条件。
var j;
//zSound是通过库中的链接命令创建的一个flash.media.Sound类的子类，
//这里通过这个子类定义一个名字叫zhengque的声音对象，用来提供连线正确时的反馈信息
var zhengque:zSound=new zSound();
//cSound是通过库中的链接命令创建的一个flash.media.Sound类的子类，
//这里通过这个子类定义一个名字叫cuowu的声音对象，用来提供连线错误时的声音反馈
var cuowu:cSound=new cSound();
4，定义连线开始操作过程和画线实现
//将上面的5个按钮注册MouseEvent.CLICK事件到侦听函数fH
f1.addEventListener(MouseEvent.CLICK,fH);
f2.addEventListener(MouseEvent.CLICK,fH);
f3.addEventListener(MouseEvent.CLICK,fH);
f4.addEventListener(MouseEvent.CLICK,fH);
f5.addEventListener(MouseEvent.CLICK,fH);
//定义fH函数
function fH(e:MouseEvent):void {
    //获得所单击按钮的名称字符串的第2个字符，并将其赋值给变量j
    j=e.target.name.charAt(1);
//确定绘图的初始点，设置为所单击按钮的坐标
stage.addEventListener(MouseEvent.MOUSE_MOVE ,moveFun);
//stage.addEventListener(MouseEvent.MOUSE_UP ,upFun);
}
function moveFun(e:MouseEvent ):void
    {
        tempShape.graphics.clear();
        tempShape.graphics.lineStyle(3,0xff0000);
        tempShape.graphics.moveTo(this["f"+j].x,this["f"+j].y);
        tempShape.graphics.lineTo(mouseX,mouseY); 
         }
 5，完成画线和答案判断
//将下面面的5个按钮注册MouseEvent.CLICK事件到侦听函数fH2
f1f.addEventListener(MouseEvent.CLICK,f1H);
f2f.addEventListener(MouseEvent.CLICK,f2H);
f3f.addEventListener(MouseEvent.CLICK,f3H);
f4f.addEventListener(MouseEvent.CLICK,f4H);
f5f.addEventListener(MouseEvent.CLICK,f5H);
//定义f1H函数
function f1H(e:MouseEvent):void {
    if (j==1) {//如果连线匹配，停止画线，并显示所画的线
        stage.removeEventListener(MouseEvent.MOUSE_MOVE ,moveFun);
        myshape.graphics.moveTo(this["f"+j].x,this["f"+j].y);
        myshape.graphics.lineTo(mouseX,mouseY);
        zhengque.play();//并且播放答案正确的声音
    }
    else{//否则
        cuowu.play();//播放答案错误的声音
    }
}