AS3 Wordgame drag/drop movieclips textfield bug

programming flash
1

Hi! I’m making a drag and drop wordgame, and I’ve encountered a rather irritating problem.

Based on the words contained in an array, I create different movieclips with drag and drop functionality, so that they can be dragged on top of the corresponding correct translation of the word.

Problem is that when I add a textfield to my buttons (using addchild), dragging and dropping becomes rather buggy, and dropping doesn’t work properly, quite often.

“Bug-free” version, no text on the MCs:
http://triforce.no/buggy/dragdrop_plipp_plopp.swf

Buggy version, text on the MCs:
http://triforce.no/buggy/dragdrop_buggy.swf

This was done based on a tutorial that used pre-made movieclips containing shapes, maybe it was at kirupa, I don’t remember where I read it I’m afraid.

There are many tutorials out there on this subject, but I haven’t found any that show you how to dynamically create movieclips which contain text and drag/drop functions.

Here’s the code:

(mcSquarePeg is a movieclip in the project library containing just a square rectangle)

import flash.display.MovieClip;
import flash.text.TextField;

var startX:Number;
var startY:Number;
var counter:Number = 0;

//variabler som holder ordene som skal brukes
var wordsFrom:Array = new Array("hest", "bil", "hus");
var wordsTo:Array = new Array("horse", "car", "house");

var myArray:Array = new Array;
var myTargetArray:Array = new Array;

var myX:Array = new Array;
var myY:Array = new Array;

var fromBox:MovieClip = new MovieClip;
var toBox:MovieClip = new MovieClip;

fromBox.x = 100;
fromBox.y = 50;

toBox.x = 200;
toBox.y = 50;

stage.addChildAt(fromBox, 0);
stage.addChildAt(toBox, 1);

wordsTo.forEach(addMc);
wordsFrom.forEach(addMcTargets);

function addMc(element:String, index:int, array:Array):void {
	
			var test_mc:MovieClip = new mcSquarePeg;
			//var test_mc_target:MovieClip = new mcSquarePeg;
			
			trace (element);
			var tekst:TextField = new TextField;
			
			tekst.text = (element);
			
			tekst.selectable = false;
			test_mc.addChild(tekst);
			
			//test_mc.tekst.width = 10;
			//test_mc.tekst.height = 10;

			toBox.addChildAt(test_mc, 0);
			//fromBox.addChildAt(test_mc_target, 0);
			
			test_mc.x = 0;
			test_mc.y = (index*100);

			//test_mc_target.x = 0;
			//test_mc_target.y = (index*100);
			
			test_mc.x_int = index;
			
			test_mc.mouseChildren = false;
			
			
			myArray.push(test_mc);
			
			//lagre x og y variablene
			myX.push(test_mc.x);
			myY.push(test_mc.y);
			
			//myTargetArray.push(test_mc_target);
			
			test_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
			test_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
			
			test_mc.buttonMode = true;

			
}

function addMcTargets(element:String, index:int, array:Array):void {
	
			var test_mc:MovieClip = new mcSquarePeg;
			//var test_mc_target:MovieClip = new mcSquarePeg;

			var tekst:TextField = new TextField;
			
			tekst.text = (element);
			tekst.selectable = false;
			test_mc.addChild(tekst);

			toBox.addChildAt(test_mc, 0);
			
			test_mc.x = 200;
			test_mc.y = (index*100);

			//test_mc_target.x = 0;
			//test_mc_target.y = (index*100);
			
			//test_mc.x_int = index;
			
			test_mc.mouseChildren = false;
			
			myTargetArray.push(test_mc);
			
			//lagre x og y variablene
			//myX.push(test_mc.x);
			//myY.push(test_mc.y);
			
			//myTargetArray.push(test_mc_target);
			
			//test_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
			//test_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
			
			test_mc.buttonMode = false;
		}



var x2:int = new int;
var y2:int = new int;



function pickUp(event:MouseEvent):void {
	event.target.startDrag(true);
	reply_txt.text = "";
	
	var x2 = event.target.x_int;
	var y2 = event.target.y_int;
	
	startX = event.target.x;
	startY = event.target.y;
	
	
	event.target.alpha = 0.5;
	
	event.target.parent.addChild(event.target);

}
function dropIt(event:MouseEvent):void {
	
	event.target.stopDrag();
	trace(clickedIndex);
	var clickedIndex:int=myArray.indexOf(event.currentTarget);
	
	if (event.target.dropTarget != null){
	var targetIndex:int=myTargetArray.indexOf(event.target.dropTarget.parent);
	}
	
	trace (clickedIndex);
	trace (targetIndex);
	
	
	
	if (event.target.dropTarget != null && clickedIndex == targetIndex){
		
		reply_txt.text = "Good Job!";
		
		event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
		event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);

		event.target.buttonMode = false;
		
		counter++;
		
	} else {
		trace ("bomma");
		
		event.target.x = myX[clickedIndex];
		event.target.y = myY[clickedIndex];
		
		event.target.alpha = 1;
		reply_txt.text = "Try Again!";
		
	}
	if(counter == wordsFrom.length){
        reply_txt.text = "Congrats, you're finished!";
    }
}

I don’t expect you to fix my code, but if someone could tell me the correct way to add text to a movieclip without messing up the drag/drop functionality of the parent movieclip that’d be great.

Edit: I solved it, after struggling for an hour before I posted here, hehe! I added a dynamic textfield within the rectangle movieclip setting the id to something I could control from as3.

test_mc.knappeTekst.text = element;

Of course this should have been obvious, but I just can’t understand how I could have done this dynamically using as3 though (without messing up the drag/drop func.)