Dragging multiple objects to one target?

  • chibuki
  • Novice
  • Novice
  • chibuki
  • Posts: 22

Post 3+ Months Ago

Hello,

I'm making some kind of unique gallery, where there will be a dozen of floating thumbnails surrounding a drop spot in the middle. Each of those floating thumbnail represents a gallery of few pictures. When the thumbnail is dragged to that drop spot, a new flash file will load right there using imageLoader. There should be a close button to unload too.

I have the dragging works but I still can't make it load the movie when it's placed in the drop spot. And the problem is, how can I work with multiple objects (the floating thumbnails) with just one target (the drop spot)?

I have an example file at: http://www.megaupload.com/?d=5LPL09TY

If you remove the comments in the first block of code, it'll demonstrate how the movie loads using imageLoader (but it is on Mouse Click).
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

It's not that hard to do that.
Dropping on a target means just to check on mouse release if the dragged movieclip overlaps the dropping target.
so your mouse release function would look like:
Code: [ Select ]
function mouseReleasedHandler(e:MouseEvent):void {
    dragging = false;

    if (!thumb1_mc.dropped)
    {
        if (thumb1_mc.hitTestPoint(mcDropPoint.x, mcDropPoint.y))
        {
            thumb1_mc.dropped = true;
            loadGallery("galleryinteraction1.swf");
        }
    }
}
  1. function mouseReleasedHandler(e:MouseEvent):void {
  2.     dragging = false;
  3.     if (!thumb1_mc.dropped)
  4.     {
  5.         if (thumb1_mc.hitTestPoint(mcDropPoint.x, mcDropPoint.y))
  6.         {
  7.             thumb1_mc.dropped = true;
  8.             loadGallery("galleryinteraction1.swf");
  9.         }
  10.     }
  11. }

For this you need to declare thumb1_mc.dropped = false; (anywhere in the code, just not in a function :p), and give an instance name the drop target (in this case: mcDropPoint).
Also adjust your loadGallery1 function to look like
Code: [ Select ]
function loadGallery(urlPath)
{
    imageLoader.unload();
    var imageRequest:URLRequest = new URLRequest(urlPath);
    imageLoader.load(imageRequest);
    imageLoader.y = 59;
    addChild(imageLoader);
}
  1. function loadGallery(urlPath)
  2. {
  3.     imageLoader.unload();
  4.     var imageRequest:URLRequest = new URLRequest(urlPath);
  5.     imageLoader.load(imageRequest);
  6.     imageLoader.y = 59;
  7.     addChild(imageLoader);
  8. }


For the multiple objects, you need to adjust a little your code, so that you can do all the declarations and checkings in a loop.
Something like:
Code: [ Select ]
var urlPaths:Array = Array("movie1.swf", "movie2.swf", ...., "movieX.swf" )
var crtDraggedObject:MovieClip = null;
var crtObject:MovieClip;


for (var objIndex = 0; objIndex < objCount; objIndex++)
{
   crtObject = this.getChildByName("thumb"+objIndex+"_mc") as MovieClip;
   crtObject.dropped = false;
   crtObject.dragging = false;
   crtObject.urlPath = urlPaths[objIndex];
   crtObject.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
  1. var urlPaths:Array = Array("movie1.swf", "movie2.swf", ...., "movieX.swf" )
  2. var crtDraggedObject:MovieClip = null;
  3. var crtObject:MovieClip;
  4. for (var objIndex = 0; objIndex < objCount; objIndex++)
  5. {
  6.    crtObject = this.getChildByName("thumb"+objIndex+"_mc") as MovieClip;
  7.    crtObject.dropped = false;
  8.    crtObject.dragging = false;
  9.    crtObject.urlPath = urlPaths[objIndex];
  10.    crtObject.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  11. }


then in the mouseDownHandler, you need to get the target movie, to know which thumb is currently dragged.
Code: [ Select ]
function mouseDownHandler(e:MouseEvent):void {
  crtDraggedObject = e.target as MovieClip;
  dragging = true;
  crtDraggedObject.dropped = false;
}
  1. function mouseDownHandler(e:MouseEvent):void {
  2.   crtDraggedObject = e.target as MovieClip;
  3.   dragging = true;
  4.   crtDraggedObject.dropped = false;
  5. }


and in your current mouseReleasedHandler function, replace thumb1_mc with crtDraggedObject;
Same change you make in moveBall1 and createTrailBall. Also in createTrailBall, check first if crtDraggedObject is null, then return from the function.
That's all.
  • chibuki
  • Novice
  • Novice
  • chibuki
  • Posts: 22

Post 3+ Months Ago

Thank you!! That's the ticket. :mrgreen:

I see putting it in an array is best way doing this. I renamed all of my swf gallery files to gallery1.swf, gallery2.swf, and so on. I've been playing around with codes now, the dragging works for the first gallery, but now I encountered two errors:

Description: 1137: Incorrect number of arguments. Expected no more than 1.
Source: var urlPaths:Array = Array("gallery1.swf", "gallery2.swf", "gallery3.swf", "gallery4.swf")

Description: 1120: Access of undefined property objCount.
Source: for (var objIndex = 0; objIndex < objCount; objIndex++)


I don't understand why it says expected no more than 1. I think I changed thumb1_mc to crtDraggedObject everywhere, I'm not sure if I was supposed to do that.

Also, why I can't move the other bubbles now, like thumb2_mc?

Lastly, wouldn't I need to modify loadGallery in my mouseReleasedHandler function after the multiple objects script is in place?

Here's my script looks like now:
Code: [ Select ]
var urlPaths:Array = Array("gallery1.swf", "gallery2.swf", "gallery3.swf", "gallery4.swf");
var crtDraggedObject:MovieClip = null;
var crtObject:MovieClip;

for (var objIndex = 0; objIndex < objCount; objIndex++) {
    crtObject = this.getChildByName("thumb"+objIndex+"_mc") as MovieClip;
    crtObject.dropped = false;
    crtObject.dragging = false;
    crtObject.urlPath = urlPaths[objIndex];
    crtObject.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}

var imageLoader:Loader = new Loader();

function loadGallery(urlPath) {
    imageLoader.unload();
    var imageRequest:URLRequest = new URLRequest(urlPath);
    imageLoader.load(imageRequest);
    imageLoader.y = 59;
    addChild(imageLoader);
}

/**********************************************************************/

//This variable tells whether the user is dragging or not
var dragging:Boolean = false;

//Spring variable (how strong the spring effect is)
var springFactor:Number = 0.2;

//Friction for the animatiom
var friction:Number = 0.59;//originally 0.9

//x and y speeds
var speedX:Number = 0.0005;//originally 0
var speedY:Number = 0.0005;//originally 0

//acceleration for x and y speeds
var accX:Number = 0.0005;
var accY:Number = 0.0005;

//Overall speed
var speed:Number = 0.5;//originally 10

//Add event listeners for the MOUSE_DOWN and MOUSE_UP
//events, so we know when to start/stop dragging.
crtDraggedObject.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseReleasedHandler);

//Add ENTER_FRAME which animates the ball movement
addEventListener(Event.ENTER_FRAME, moveBall1);

//This function is called when the user presses the mouse on the ball
function mouseDownHandler(e:MouseEvent):void {
    crtDraggedObject = e.target as MovieClip;
    dragging = true;
    crtDraggedObject.dropped = false;
}
//This function is called when the user releases the mouse
function mouseReleasedHandler(e:MouseEvent):void {
    dragging = false;

    if (!crtDraggedObject.dropped) {
        if (crtDraggedObject.hitTestPoint(mcDropPoint.x, mcDropPoint.y)) {
            crtDraggedObject.dropped = true;
            loadGallery("galleryinteraction1.swf");
        }
    }
}
function moveBall1(event:Event):void {

    //We only move the ball when the user is dragging
    if (dragging) {

        //Calculate the x and y distances from the ball to the mouse
        var distanceX:Number = mouseX - crtDraggedObject.x;
        var distanceY:Number = mouseY - crtDraggedObject.y;

        //Update x and y accelerations
        accX = distanceX * springFactor;
        accY = distanceY * springFactor;

        //Add the acceleration to the speed
        speedX += accX;
        speedY += accY;

        //Add friction, otherwise the animation
        //would go on forever.
        speedX *= friction;
        speedY *= friction;

        //Move the ball to the new coordinates (closer to the mouse)
        crtDraggedObject.x += speedX;
        crtDraggedObject.y += speedY;
    }
}

/**********************************************************************/

//We use this timer to create a trail ball each 0.03 seconds
var timer:Timer = new Timer(10,1400000);//originally 30,400000
timer.addEventListener(TimerEvent.TIMER, createTrailBall);
timer.start();

//This function is called by the timer
function createTrailBall(e:Event):void {
    crtDraggedObject = null;
    
    //Create a new ball instance
    var trailBall1:Ball1=new Ball1();

    //Position the trail ball in the same position where the original ball is located
    trailBall1.x = crtDraggedObject.x;
    trailBall1.y = crtDraggedObject.y;

    //Add ENTER_FRAME to animate the trail ball
    trailBall1.addEventListener(Event.ENTER_FRAME,animateTrailBall);

    /*
    Add the trail ball on to the stage.
    We don't want to position the trail ball on top of the original ball.
    We use the addChildAt method to set the index to 0.
    */
    addChildAt(trailBall1,0);
}
function animateTrailBall(e:Event):void {

    //In each frame, reduce the alpha and the scale of the trail ball.
    e.target.alpha -= 0.1;
    e.target.scaleY -= 0.1;
    e.target.scaleX -= 0.1;

    /*
    If the alpha is less than 0, we remove the trail ball from the
    stage.
    */
    if (e.target.alpha < 0) {
        e.target.removeEventListener(Event.ENTER_FRAME,animateTrailBall);
        removeChild((MovieClip)(e.target));
    }
}
  1. var urlPaths:Array = Array("gallery1.swf", "gallery2.swf", "gallery3.swf", "gallery4.swf");
  2. var crtDraggedObject:MovieClip = null;
  3. var crtObject:MovieClip;
  4. for (var objIndex = 0; objIndex < objCount; objIndex++) {
  5.     crtObject = this.getChildByName("thumb"+objIndex+"_mc") as MovieClip;
  6.     crtObject.dropped = false;
  7.     crtObject.dragging = false;
  8.     crtObject.urlPath = urlPaths[objIndex];
  9.     crtObject.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  10. }
  11. var imageLoader:Loader = new Loader();
  12. function loadGallery(urlPath) {
  13.     imageLoader.unload();
  14.     var imageRequest:URLRequest = new URLRequest(urlPath);
  15.     imageLoader.load(imageRequest);
  16.     imageLoader.y = 59;
  17.     addChild(imageLoader);
  18. }
  19. /**********************************************************************/
  20. //This variable tells whether the user is dragging or not
  21. var dragging:Boolean = false;
  22. //Spring variable (how strong the spring effect is)
  23. var springFactor:Number = 0.2;
  24. //Friction for the animatiom
  25. var friction:Number = 0.59;//originally 0.9
  26. //x and y speeds
  27. var speedX:Number = 0.0005;//originally 0
  28. var speedY:Number = 0.0005;//originally 0
  29. //acceleration for x and y speeds
  30. var accX:Number = 0.0005;
  31. var accY:Number = 0.0005;
  32. //Overall speed
  33. var speed:Number = 0.5;//originally 10
  34. //Add event listeners for the MOUSE_DOWN and MOUSE_UP
  35. //events, so we know when to start/stop dragging.
  36. crtDraggedObject.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  37. stage.addEventListener(MouseEvent.MOUSE_UP, mouseReleasedHandler);
  38. //Add ENTER_FRAME which animates the ball movement
  39. addEventListener(Event.ENTER_FRAME, moveBall1);
  40. //This function is called when the user presses the mouse on the ball
  41. function mouseDownHandler(e:MouseEvent):void {
  42.     crtDraggedObject = e.target as MovieClip;
  43.     dragging = true;
  44.     crtDraggedObject.dropped = false;
  45. }
  46. //This function is called when the user releases the mouse
  47. function mouseReleasedHandler(e:MouseEvent):void {
  48.     dragging = false;
  49.     if (!crtDraggedObject.dropped) {
  50.         if (crtDraggedObject.hitTestPoint(mcDropPoint.x, mcDropPoint.y)) {
  51.             crtDraggedObject.dropped = true;
  52.             loadGallery("galleryinteraction1.swf");
  53.         }
  54.     }
  55. }
  56. function moveBall1(event:Event):void {
  57.     //We only move the ball when the user is dragging
  58.     if (dragging) {
  59.         //Calculate the x and y distances from the ball to the mouse
  60.         var distanceX:Number = mouseX - crtDraggedObject.x;
  61.         var distanceY:Number = mouseY - crtDraggedObject.y;
  62.         //Update x and y accelerations
  63.         accX = distanceX * springFactor;
  64.         accY = distanceY * springFactor;
  65.         //Add the acceleration to the speed
  66.         speedX += accX;
  67.         speedY += accY;
  68.         //Add friction, otherwise the animation
  69.         //would go on forever.
  70.         speedX *= friction;
  71.         speedY *= friction;
  72.         //Move the ball to the new coordinates (closer to the mouse)
  73.         crtDraggedObject.x += speedX;
  74.         crtDraggedObject.y += speedY;
  75.     }
  76. }
  77. /**********************************************************************/
  78. //We use this timer to create a trail ball each 0.03 seconds
  79. var timer:Timer = new Timer(10,1400000);//originally 30,400000
  80. timer.addEventListener(TimerEvent.TIMER, createTrailBall);
  81. timer.start();
  82. //This function is called by the timer
  83. function createTrailBall(e:Event):void {
  84.     crtDraggedObject = null;
  85.     
  86.     //Create a new ball instance
  87.     var trailBall1:Ball1=new Ball1();
  88.     //Position the trail ball in the same position where the original ball is located
  89.     trailBall1.x = crtDraggedObject.x;
  90.     trailBall1.y = crtDraggedObject.y;
  91.     //Add ENTER_FRAME to animate the trail ball
  92.     trailBall1.addEventListener(Event.ENTER_FRAME,animateTrailBall);
  93.     /*
  94.     Add the trail ball on to the stage.
  95.     We don't want to position the trail ball on top of the original ball.
  96.     We use the addChildAt method to set the index to 0.
  97.     */
  98.     addChildAt(trailBall1,0);
  99. }
  100. function animateTrailBall(e:Event):void {
  101.     //In each frame, reduce the alpha and the scale of the trail ball.
  102.     e.target.alpha -= 0.1;
  103.     e.target.scaleY -= 0.1;
  104.     e.target.scaleX -= 0.1;
  105.     /*
  106.     If the alpha is less than 0, we remove the trail ball from the
  107.     stage.
  108.     */
  109.     if (e.target.alpha < 0) {
  110.         e.target.removeEventListener(Event.ENTER_FRAME,animateTrailBall);
  111.         removeChild((MovieClip)(e.target));
  112.     }
  113. }
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

I just provided some hints, not the exact code for the multiple thumbs. Just make good use of your mind and put it together. I'm sure you can do that.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.