How to load an external image on a drag & drop object using AS3?

Question

NEW MESSAGE - THE SOLUTION I ENDED UP APPLYING

This is what I used to load an external image into a movie clip and drag and drop. The feedback part is pretty much the same from the old code.

var holdermc_Arr:Array = new Array(4);
for(var i:uint = 0; i < holdermc_Arr.length; i++)
{
    holdermc_Arr[i] = this["panel" + (i+1) + "_mc"];

    var myLoader:Loader = new Loader();
    var fileRequest:URLRequest = new URLRequest("images/" + (i+1) + ".jpg");
    myLoader.load(fileRequest);

    holdermc_Arr[i].addChild(myLoader);

    holdermc_Arr[i].addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    holdermc_Arr[i].addEventListener(MouseEvent.MOUSE_UP, dropIt);
    holdermc_Arr[i].buttonMode = true;
}

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

function pickUp(event:MouseEvent):void {
startX = event.currentTarget.x;
startY = event.currentTarget.y;

setChildIndex(MovieClip(event.currentTarget),numChildren-1);
event.currentTarget.startDrag();
reply_txt.text = "";

}

OLD MESSAGE BELLOW

This is my latest attempt with the current error I am getting.

I actually would like to work with the code of my previous attempt because to me is easier that way to add multiple draggable movie clips.

But whichever the code, what seems to be the fundamental problem is that I am not setting up the property correctly for the "Loader".

Let me know if a link to the example is needed.

The error is the following:

ReferenceError: Error #1069: Property dropTarget not found on flash.display.Loader and there is no default value. at cs5test_fla::MainTimeline/ReleaseToDrop()

The code is the following

var myLoader:Loader = new Loader(); 
panel1_mc.addChild(myLoader); 
var url:URLRequest = new URLRequest("uploadedImages/photo_1.jpeg"); 
myLoader.load(url);

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

panel1_mc.addEventListener(MouseEvent.MOUSE_DOWN, ClickToDrag);

function ClickToDrag(event:MouseEvent):void
{
panel1_mc.startDrag();
startX = event.target.x;
startY = event.target.y;
    reply_txt.text = "";
event.target.parent.addChild(event.target);
}

stage.addEventListener(MouseEvent.MOUSE_UP, ReleaseToDrop);

function ReleaseToDrop(event:MouseEvent):void
{
panel1_mc.stopDrag();
var myTargetName:String = "target" + event.target.name;
var myTarget:DisplayObject = getChildByName(myTargetName);

if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){

    reply_txt.text = "Good Job!";
    event.target.x = myTarget.x;
    event.target.y = myTarget.y;
    event.target.removeEventListener(MouseEvent.MOUSE_DOWN, ClickToDrag);
    event.target.removeEventListener(MouseEvent.MOUSE_UP, ReleaseToDrop);
    event.target.buttonMode = false;
    counter++;
} else {
    reply_txt.text = "Try Again!";
    event.target.x = startX;
    event.target.y = startY;
}
if(counter == 1){
    reply_txt.text = "Congrats, you're finished!";
}
}

OLDER MESSAGE BELLOW

I am still struggling.

I am new to all this so I am really tying the best I can to grasp it.

The ActionScript I am trying to work with is all the way at the bottom.

I'd really appreciate if someone tries to look at this code and tell me how can I load external images to each draggable movie clip with out getting the following error.

ReferenceError: Error #1069: Property startDrag not found on flash.display.Loader and there is no default value. at dragdropDilema_fla::MainTimeline/pickUp() ReferenceError: Error #1069: Property stopDrag not found on flash.display.Loader and there is no default value. at dragdropDilema_fla::MainTimeline/dropIt()

I tried to use a simple var loader but for what I can see on the error, I have to set up the startDrag property to work with the Loaded image and not with the draggable movie clips that are currently in place??

I thought I would have just been simple if I had use the following for each:

var myLoader:Loader = new Loader(); 
imageHolder.addChild(myLoader); 
var url:URLRequest = new URLRequest("uploadedImages/photo_1.jpeg"); 
myLoader.load(url);

and then do something like:

square_mc.imageHolder.addChild(myLoader);

but when I do that I get the error anyway when I click on the image.

Here is the entire code: It is supposed to count when the object meet their target and gives a message all through out and at the end.

panel1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
panel1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

panel1_mc.buttonMode = true;


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

function pickUp(event:MouseEvent):void {
startX = event.target.x;
startY = event.target.y;
event.target.startDrag(true);
reply_txt.text = "";
event.target.parent.addChild(event.target);
}

function dropIt(event:MouseEvent):void {
event.target.stopDrag();
var myTargetName:String = "target" + event.target.name;
var myTarget:DisplayObject = getChildByName(myTargetName);
if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
    reply_txt.text = "Good Job!";
    event.target.x = myTarget.x;
    event.target.y = myTarget.y;
    event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
    event.target.buttonMode = false;
    counter++;
} else {
    reply_txt.text = "Try Again!";
    event.target.x = startX;
    event.target.y = startY;
}
if(counter == 1){
    reply_txt.text = "Congrats, you're finished!";
}
}

Thanks.

Hi Antonio, could you please add your code to your question? Only the relevant bit of course, thanks.Rob — robertp
Rob. I put a link to the FLA I am experimenting with. The action script is less than a half a page and only 205 kb. — nemo1293876
Are you looking for dragging help as well? It appears from what you posted earlier that you're having errors come up. — user1385191
@Matt McDonald. The drag on its own to me works fine. The image loader on its own works fine in my code. The problem I am having is loading the image on the draggable movie clip. When I click on the image, although loaded on the draggable mc I get the error startDrag not found... — nemo1293876
Your code is full of pitfalls. Please take a look at the code I posted. It's designed to work right out of the box. — user1385191

Unknown Unknown · Accepted Answer · 2011-02-28T17:36:56

import flash.display.DisplayObjectContainer;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;  
import flash.events.MouseEvent;
import flash.net.URLRequest;

var _dragMc:MovieClip = new MovieClip();
addChild(_dragMc);

loadImage("image.jpg")

function loadImage(path:String):void
{
    var _loader:Loader = new Loader();
    var _loaderToLoad:URLRequest = new URLRequest(path);
    _loader.load(_loaderToLoad);
    _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded, false, 0, true);
}

function imageLoaded(evt:Event):void
{
   addLoader(evt.currentTarget.loader, _dragMc);
}

function addLoader(loader:Loader, container:DisplayObjectContainer):void
{
    container.addChild(loader);
    addListeners();
}

function addListeners():void
{
    _dragMc.addEventListener(MouseEvent.MOUSE_DOWN, setDrag, false, 0, true);
}

function setDrag(evt:MouseEvent):void
{
    _dragMc.addEventListener(MouseEvent.MOUSE_MOVE, doDrag, false, 0, true);
    _dragMc.removeEventListener(MouseEvent.MOUSE_DOWN, setDrag);
}

function doDrag(evt:MouseEvent):void
{
    _dragMc.startDrag(false, null);
    stage.addEventListener(MouseEvent.MOUSE_UP, endDrag, false, 0, true);
    _dragMc.removeEventListener(MouseEvent.MOUSE_MOVE, doDrag);
}

function endDrag(evt:MouseEvent):void
{
    _dragMc.stopDrag();
    _dragMc.addEventListener(MouseEvent.MOUSE_DOWN, setDrag, false, 0, true);
    stage.removeEventListener(MouseEvent.MOUSE_UP, endDrag);
}

This loads an image onto a MovieClip called _dragMc. The rest from there is up to you. I also added some quick code that will enable you to drag _dragMc around.

How to load an external image on a drag & drop object using AS3?

1 Answers