The Flash Connection Make mine Actionscript 3.0!

Hi

When I try to down load the source files I get an unexpected file format message.

I'm using CS3

Any idea what is happening?

Thanks

Thanks Jodi. I suspectred it might be something like that

Tony (aka Ynot)

grumbler,

That doesn't work because in your first for loop you are reusing the variable each time. Nothing wrong with this technique, but after the loop runs, your variable only points to the last object created, because it is being overwritten on each iteration of the loop. You need some other way of saving all these references if you are going to use them later. Also, you need some way of making each dynamically generated MovieClip that you are going to drag "know" what MovieClip target it "belongs" to (or matches).

Obviously, in your upHandler function, you can easily get a reference to the clip being dragged because it's the event.currentTarget of the MOUSE_UP event. This gives you a reference to either one of the two clips that could possibly be dragged. But I see you fighting hard to get a reference to whichever of the two clips is supposed to be the matching clip. This is because at this point, you only have one valid variable reference. You might possibly get other references using getChildByName(), but you have no way of knowing which one is supposed to "match" the clip being dragged, because that would have to be established ahead of time somehow.

I usually solve this problem using parallel arrays. If you are creating all the clips dynamically, just "push" them into an array as you create them. Either that or use the loop counter for your index. This will give you references you can use for all the clips. Now, the two arrays have no relationship to each other, except that each clip in one array should have its matching clip at the same position in the other array. In your upHandler, if you can find the position of the clip being dragged in its array (and you can, using indexOf), then you can use that position number to get a reference to the matching clip in the other array.

Here's some code that does just that:

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.ui.Mouse;

var dragArray:Array = new Array();
var targetArray:Array = new Array();

var u:uint;
for(u = 0; u < 2; u++) {
	var sCard:targetMe = new targetMe();
	sCard.y = 220;
	sCard.x = 20 + u * 90;
	addChild(sCard);
	targetArray.push(sCard);
}

var i:uint;
for(i=0; i<2; i++) {
	var tCard:cardPlacer = new cardPlacer();
	tCard.y = 120;
	tCard.x = 10 + i * 90;
	addChild(tCard);
	tCard.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
	tCard.addEventListener(MouseEvent.MOUSE_UP, upHandler);
	tCard.buttonMode = true;
	dragArray.push(tCard);
}

function downHandler(event:MouseEvent):void {
	var clip:MovieClip = event.currentTarget as MovieClip;
	clip.startDrag();
}

function upHandler(event:MouseEvent):void {
	var dragClip:MovieClip = event.currentTarget as MovieClip;
	var index:int = dragArray.indexOf(dragClip);
	var targetClip:MovieClip = targetArray[index];
	dragClip.stopDrag();
	if(dragClip.hitTestObject(targetClip)) {
		dragClip.x = targetClip.x;
		dragClip.y = targetClip.y;
	}
}

Anyway, keep reading my tutorials, and you will pick up some of these techniques, because it's all explained in there.

Hello Jody,

from the previous code. the object will snap at the right index of the dragclip array. right?

Is there a way i can do the hit test also without detecting the right index of the drag clip?

For example, i drag one of the movie clip and put it on the first box?  then snap.

...... some thing like this. I drag the third movie clip to the first target movie clip then snap?

 

thank you so much.

 

 

 

 

Hello Jody,

Im sorry if i have to many question to you. To a beginner like me, my head has a big question for all of this.

Actually im trying to make a game for my self , based on flash like a text twist game. You're tutorial and replies giving me the best solution and helping me to understand it.

Thank you so much. hehe

Hello Jody,

Im here again. hehe.

Problem:
i have a 5 box of movie clips on the stage then a shuffle button on the top corner.

the x position of 5 movieclip came from an array;

var xPos:Array = new Array();

var i:uint;

xPos = (20,110,200,290,380);

for(i=0;i<xPOs.length;i++) {

mC.x = xPos[i];

}

when i click the shuffle button, the 5 movie clip will exchanges places. (X Position only)

 

thank you so much jody

 

 

Hello jody,

here's what im doin.

import flash.text.TextField;
import flash.events.Event;
import flash.display.*;
import flash.events.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.KeyboardEvent;
import flash.events.TimerEvent;
import flash.utils.setInterval;
import flash.utils.Timer;

stop();
var stringCount:Number;
var stringArray:Array = new Array();
var i:Number;
var dragArray:Array = new Array();
var targetArray:Array = new Array();
var stringFieldArray:Array = new Array();
var myStrng:String;
var hintWord:String;

var randomPosition:Array = new Array();
var randomPositionArray:Array = new Array();
var positionArray:Array = new Array();
var item:uint;
var ranNum:int;
var stWord:String;
var xmldata:XML;
xmldata = new XML();
var xmlURL:URLRequest = new URLRequest("XML/lib.xml");
var xmlLoader:URLLoader = new URLLoader(xmlURL);
xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR,xmlLoadError);
function xmlLoadError(event:IOErrorEvent)
{
    trace(event.text);
}
function xmlLoaded(event:Event)
{
    trace('==========\nXML LOADED\n==========');
    xmldata = XML(event.target.data);
    item = xmldata.item.length();
    ranNum = Math.floor(item * Math.random());
    stWord = xmldata.item.word.attributes()[ranNum];
    trace("Random Word = " + stWord);
    stringCount = stWord.length;
    trace("String Count = " + stringCount);
    var startList:Array = new Array();
    var endList:Array = new Array();
    var c,j,u,r:int;
    for (c=0; c<stringCount; c++)
    {
        j = 20 + c * 90;
        startList[c] = j;
    }

    for (i=0; i<stringCount; i++)
    {
        stringArray[i] = stWord.charAt(i);
        var cPlacer:cardPlacer = new cardPlacer();
        cPlacer.y = 150;
        r = Math.floor(Math.random() * startList.length);
        endList.push(startList[r]);
        startList.splice(r,1);

        cPlacer.x = endList[i];
        cPlacer.sLetter.text = stringArray[i];
        cPlacer.name = stringArray[i];
        addChild(cPlacer);
        cPlacer.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
        cPlacer.addEventListener(MouseEvent.MOUSE_UP, upHandler);
        cPlacer.buttonMode = true;
        dragArray.push(cPlacer);
        var tMe:targetMe = new targetMe();
        tMe.y = 220;
        tMe.x = 20 + i * 90;
        addChild(tMe);
        targetArray.push(tMe);
        tMe.alpha = .5;

    }

    hintWord = xmldata.item.word[ranNum].hint;
    hintTxt.text = hintWord;
    hintTxt.selectable = false;

    myTimer.start();
    myTimer.addEventListener(TimerEvent.TIMER, sayHello);
    myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, sayBye);

}

var myTimer:Timer = new Timer(1000,60);
var timerCont:Number;

function sayHello(e:TimerEvent):void
{
    timerCont = 0;
    timerCont = myTimer.currentCount;
    //trace('Timer = ' + timerCont.toString( ));
    timerTxt.text = Number(timerCont).toString();
}

function sayBye(e:TimerEvent):void
{
    myTimer.stop();
    gotoAndStop(3);

}

stringFieldArray.length = stringCount;
function downHandler(event:MouseEvent):void
{

    var clip:MovieClip = event.currentTarget as MovieClip;
    clip.startDrag();
    addChild(clip);

}
function upHandler(event:MouseEvent):void
{
    var clip:MovieClip = event.currentTarget as MovieClip;
    var index:int = dragArray.indexOf(clip);
    //var sameClip:MovieClip = targetArray[index];
    clip.stopDrag();
    for (var i:int = 0; i < targetArray.length; i++)
    {
        if (clip.hitTestObject(targetArray[i]))
        {

            clip.x = targetArray[i].x;
            clip.y = targetArray[i].y;
            //removeChild(clip);
            //removeChild(targetArray[i]);
            //trace(targetArray)
            stringFieldArray[i] = event.currentTarget.name;

        }
    }
}
checkMc.addEventListener(MouseEvent.CLICK, checkMcHandler);
function checkMcHandler(event:MouseEvent):void
{
    trace('==========\nCHECK WORD\n==========');
    myStrng = stringFieldArray.join("");
    trace('myStrng = ' + myStrng);
    if (myStrng == stWord)
    {
        trace('true');
        sCore +=  20;
        scoreTxt.text = Number(sCore).toString();
        myTimer.stop();
        gotoAndStop(3);

    }
    else
    {
        sCore +=  -5;
        scoreTxt.text = Number(sCore).toString();
        trace('false');
    }

}

 

remember i say im doin something like a text twist game. My problem here is that the drag clip is overlapping on each other i cannot make a restriction that if the drag clip has been placed to the targetclip it should be not enabled to put another clip to it. i've tried a lot but it does seems not working and giving me error.

 

 HI,

Please have look of this game http://www.showtoclients.com/game/drag&drop.html

I tried to work on this game and made upto here with lot's of change around. Now the final problem with this game are:

-the words don't slide into the boxes ( This means only right word is sliding while eben the wrong word should also be slide in just like right one)

-theres a strange bug in the game that shows the submit button before dragging all the words into the boxes. ( I got the falut but don't know it's solution. when user is taking the word on place holder , considering he is taking it to wrong place holder, the counter get's incremented by one , since word is not sliding in hence user try to place it appropratly inside the place holder and that increases the counter one again. )

-When one word is already in a box and another word is dragged into the same box. the word occupying the box should return to its default position. ( No clu how to do that)

 I would be greatful you can see the code and help me 

 

------

stop();

 

var num:int = 0;

var num1:int = 0;

 

ob1.addEventListener(MouseEvent.MOUSE_DOWN, startdragin1);

ob1.addEventListener(MouseEvent.MOUSE_UP, stopdragin1);

 

ob2.addEventListener(MouseEvent.MOUSE_DOWN, startdragin2);

ob2.addEventListener(MouseEvent.MOUSE_UP, stopdragin2);

 

ob3.addEventListener(MouseEvent.MOUSE_DOWN, startdragin3);

ob3.addEventListener(MouseEvent.MOUSE_UP, stopdragin3);

 

ob4.addEventListener(MouseEvent.MOUSE_DOWN, startdragin4);

ob4.addEventListener(MouseEvent.MOUSE_UP, stopdragin4);

 

ob5.addEventListener(MouseEvent.MOUSE_DOWN, startdragin5);

ob5.addEventListener(MouseEvent.MOUSE_UP, stopdragin5);

 

ob6.addEventListener(MouseEvent.MOUSE_DOWN, startdragin6);

ob6.addEventListener(MouseEvent.MOUSE_UP, stopdragin6);

 

ob7.addEventListener(MouseEvent.MOUSE_DOWN, startdragin7);

ob7.addEventListener(MouseEvent.MOUSE_UP, stopdragin7);

 

ob8.addEventListener(MouseEvent.MOUSE_DOWN, startdragin8);

ob8.addEventListener(MouseEvent.MOUSE_UP, stopdragin8);

 

complete_btn.addEventListener(MouseEvent.CLICK, startlevel);

 

function startdragin1(evt:MouseEvent):void

{

ob1.startDrag();

}

 

function startdragin2(evt:MouseEvent):void

{

ob2.startDrag();

}

 

function startdragin3(evt:MouseEvent):void

{

ob3.startDrag();

}

 

function startdragin4(evt:MouseEvent):void

{

ob4.startDrag();

}

 

function startdragin5(evt:MouseEvent):void

{

ob5.startDrag();

}

 

function startdragin6(evt:MouseEvent):void

{

ob6.startDrag();

}

 

function startdragin7(evt:MouseEvent):void

{

ob7.startDrag();

}

 

function startdragin8(evt:MouseEvent):void

{

ob8.startDrag();

}

 

function stopdragin1(evt:MouseEvent):void

{

ob1.stopDrag();

num1 +=  1;

if (ob1.hitTestObject(tr1))

{

ob1.x = tr1.x;

ob1.y = tr1.y;

num +=  1;

 

}

}

function stopdragin2(evt:MouseEvent):void

{

ob2.stopDrag();

num1 +=  1;

if (ob2.hitTestObject(tr2))

{

ob2.x = tr2.x;

ob2.y = tr2.y;

num +=  1;

 

}

}

function stopdragin3(evt:MouseEvent):void

{

ob3.stopDrag();

num1 +=  1;

if (ob3.hitTestObject(tr3))

{

ob3.x = tr3.x;

ob3.y = tr3.y;

num +=  1;

 

}

}

function stopdragin4(evt:MouseEvent):void

{

ob4.stopDrag();

num1 +=  1;

if (ob4.hitTestObject(tr4))

{

ob4.x = tr4.x;

ob4.y = tr4.y;

num +=  1;

 

}

}

function stopdragin5(evt:MouseEvent):void

{

ob5.stopDrag();

num1 +=  1;

if (ob5.hitTestObject(tr5))

{

ob5.x = tr5.x;

ob5.y = tr5.y;

num +=  1;

 

}

}

function stopdragin6(evt:MouseEvent):void

{

ob6.stopDrag();

num1 +=  1;

if (ob6.hitTestObject(tr6))

{

ob6.x = tr6.x;

ob6.y = tr6.y;

num +=  1;

 

}

}

function stopdragin7(evt:MouseEvent):void

{

ob7.stopDrag();

num1 +=  1;

if (ob7.hitTestObject(tr7))

{

ob7.x = tr7.x;

ob7.y = tr7.y;

num +=  1;

 

}

}

function stopdragin8(evt:MouseEvent):void

{

ob8.stopDrag();

num1 +=  1;

if (ob8.hitTestObject(tr8))

{

ob8.x = tr8.x;

ob8.y = tr8.y;

num +=  1;

 

}

}

 

addEventListener(Event.ENTER_FRAME,checkForLevel1Complete);

 

// and then add this function

function checkForLevel1Complete(e:Event):void

{

 

 

if (num1 >= 8)

{

// make the 'LEVEL 1 COMPLETE' button visible

complete_btn.visible = true;

 

// remove the event listener which checks for correctly placed flags

removeEventListener(Event.ENTER_FRAME, checkForLevel1Complete);

}

else

{

complete_btn.visible = false;

 

}

 

}

 

function startlevel(evt:MouseEvent):void

{

gotoAndPlay(2);

 

 

hope you can help. 

Hi Jody,
I wonder if you could give me a hint about how you would do this:
I want to create a label game in which different objects share the same destinations, sort of:
objArray [cat,dog,horse,sparrow,seagull,eagle,bee,wasp,ant]
matchArray[mammals,birds,insects]
I'm trying to do it following your code and adding an if statement in which I assign to the objArray index a matchIndex:int, like:

if (0<=index<=2){
var matchIndex:int=0
};
if (3<=index<=5){
var matchIndex:int=1
};
if (6<=index<=8){
var matchIndex:int=2
and then setting matchClip as
var matchClip:MovieClip = MovieClip(_matchArray[matchIndex]);

this doesn't seem to work, it gives me back an 1009 error, can't access a property or method of a reference to a null object.

Any idea? is my method ok?

Thanks for your work and your attention.

Hi,

Im a complete Novice at action scripting ... but thanks to your tutorial i was able to make a drag and drop jigsaw puzzle .... following the exact instructions .... ive also been able to add a timer to the game, unfortunately i am unable to figure out how to restart the game again .... at the end of the tutorial u mentioned that ( ... you'd have to save all the positions of all the drag clips into another array. You would also have to move some of the actions from the constructor function into an init() type function so that those actions could be called again. )

being a complete beginner i was unable to understand how to do so ... hence was wondering if you could help me in this

Awaiting a reply

Regards,
Sheldon

Jody, I really have earned the title noob. Your example works great. However, the images remain when I proceed to other frames. How do I clear the triangle, square and circle (rect1, rect2, rect3 in my project) so they don't appear in subsequent frames? Thank you in advance.

Hi Jody,
I tried emailing you yesterday about a couple of things, but there was a problem with your contact form. I kept getting errors after I typed in the codes, but sorry if you got loads of emails.

Firstly, thanks so much for your detailed tutorials - I'm a designer learning AS3, and the way you explain everything is amazing! Your tutorials actually inspired me to write my own, but I'll come to that later..

I have the same problem as the guy above (Persistent image):

I've been trying out your drag and drop class, which is the best I've found online, however, I'm really stuck trying to reuse it. For instance, I work on the timeline on single stopped frames (primitive I know, but as a designer I like to see what I'm doing!). Say I've stuck two Mcs to their Match points, I then go back a frame on the timeline - but the Mcs still appear, as if they are stuck in the memory. I'd also like to start a new drag and drop scene on the following frame, but I don't know how to reset it! Making the draggable MCs 'visible=false' does not always work, so I'm really stuck. Any chance you have a solution for this? Your level is way over my head!

p.s Thanks for the new reset code you posted. It's very useful, but sadly does not effect the 'new frame' problem..

Thanks,
Matt

Hi Jody,
I understand what you mean by scopes now. I'll try to start using classes, but for now, putting everything into a separate Movie Clip works great. It also keeps everything neat and self contained. Learning to build a project from the class method is going to be quite a jump, as I don't know how I'll visualize everything, but I'm already getting into deep water with the timeline.

Expect a little donation from me soon, as I really appreciate your help. Here is the other part of the email I tried to send:

Thanks so much for your detailed tutorials - I'm a designer learning AS3, and your tutorials actually inspired me to write my own, which are basic, but have helped a few people trying out Flash to iOS. Designing for iPad was the reason I needed to start learning AS3 code.

Firstly, I combined some of your code to make a button counter. It probably looks terrible, but it's all I could patch together. All I wanted was a way to count button clicks, but could not find a simpler way (a guy helped me with the counter). I credit you here. If you happen to know a more concise method, feel free to comment and I'll update it!

http://www.mattwasser.co.uk/articles_Flash_Counting_button_Array.html

Thanks again,
Matt

(UK)

Fonzio,

Thank you for joining my site, and posting your comment.

When someone says the words "I have code" (like you did), it usually means they have code they are trying to use but they didn't write it. Because if YOU write the code, you can make it do whatever you want it to do (assuming you know how).

When someone has code that has function names like "pickUp" and "dropIt" and code that uses dropTarget, I know it came from the monkeyflash.com tutorial. This tutorial must have got a ton of exposure, because it used to come up in first place when you googled "flash drag drop." Also I have seen this code posted on forums many, many times before. Amazingly, I don't get anything when I try to go to monkeyflash.com (I just now tried).

I don't advocate using dropTarget. It's just more hassle to use than it's worth, and you can do the same thing(s) much easier with hit testing.

I looked at your code on the adobe forum you linked to. It looks like you are relying on the borrowed code too much instead of relying on your own. I would be glad to take a look at your problem file if you care to send it to me. Looking at the code doesn't always do it for me (I didn't see any obvious mistakes or anything). I need to be able to see how you set things up, and being able to test it is sometimes crucial. My email is mazoonist at gmail dot com.

Jody