Trying to get multiple drag and drop items to point to specific frames on a movie

[jasonconway]

I have four movieclip buttons that when you drag and drop them onto a separate movieclip will play a video. There are four different movies in the movieclip that reside on the movieclips timeline at different frame numbers.
I need each drag and drop item to go to their assigned target frames.
Please see the code below which works great but only gets each button to go to one frame number and not the rest. I am unsure as to how to add the frame numbers to the below code. Please help.

function dragSetup(clip:MovieClip, targ:MovieClip) {

function startDragging(e:MouseEvent):void{

e.target.startDrag();
e.target.beingDragged=true;


}

function stopDragging(e:MouseEvent):void{

stopDrag();

e.target.beingDragged=false;
var theDrop:MovieClip
if (e.target.dropTarget!=null) {

theDrop=e.target.dropTarget.parent;
trace(theDrop);
} else {

theDrop=null;
}


if (theDrop == targ) {
e.target.onTarget = true;
targ.gotoAndStop(10);
} else {
e.target.onTarget = false;
targ.gotoAndStop(1);
}



}

clip.addEventListener(MouseEvent.MOUSE_DOWN,startD ragging)
clip.addEventListener(MouseEvent.MOUSE_UP,stopDrag ging)


//the variables below will store the clips starting position
clip.myHomeX = clip.x;
clip.myHomeY = clip.y;
//the variables below will store the clips end position
clip.myFinalX = targ.x;
clip.myFinalY = targ.y;

function slide(e:Event):void{
if (!e.target.beingDragged && !e.target.onTarget) {
e.target.x -= (e.target.x-e.target.myHomeX)/5;
e.target.y -= (e.target.y-e.target.myHomeY)/5;
//if the circle is dropped on any part of the target it slides to the center of the target
} else if (!e.target.beingDragged && e.target.onTarget) {
e.target.x -= (e.target.x-e.target.myFinalX)/5;
e.target.y -= (e.target.y-e.target.myFinalY)/5;
}


}
clip.addEventListener(Event.ENTER_FRAME,slide)

}

dragSetup(scroll_bearhug,selfdefencemovies);
dragSetup(scroll_headlock,selfdefencemovies);
dragSetup(scroll_hairgrab,selfdefencemovies);
dragSetup(scroll_grabpunch,selfdefencemovies);

[fruitbeard]

Hi,

Maybe try it like this using tweens and hitTest;

// *** Imports;
import flash.display.MovieClip;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

// *** Declare movieClips and frame numbers;
var targetClip:MovieClip = selfdefencemovies;
var scrollClips:Array = new Array(scroll_bearhug,scroll_headlock,scroll_hairgrab,scroll_grabpunch);
var clipFrames:Array = new Array(2,3,4,5);

// *** Declare Tweens;
var hitTween1:Tween;
var hitTween2:Tween;

var missTween1:Tween;
var missTween2:Tween;

// *** Set up drag drop functions for MovieClips;
for (var i:Number = 0; i < scrollClips.length; i++)
{
    var thisDragger:MovieClip = MovieClip(scrollClips[i]);
    thisDragger.buttonMode = true;
    thisDragger.homeX = thisDragger.x;
    thisDragger.homeY = thisDragger.y;
    thisDragger.frameNumber = clipFrames[i];
    thisDragger.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
    thisDragger.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
}

// *** Dragging;
function startDragging(e:MouseEvent):void
{
    e.currentTarget.startDrag();
    e.currentTarget.parent.setChildIndex(e.currentTarget,e.currentTarget.parent.numChildren - 1);
}

// *** Stop dragging;
function stopDragging(e:MouseEvent):void
{
    stopDrag();

    var stoppedDrag:MovieClip = MovieClip(e.currentTarget);

    stoppedDrag.buttonMode = false;
    stoppedDrag.removeEventListener(MouseEvent.MOUSE_DOWN,startDragging);
    stoppedDrag.removeEventListener(MouseEvent.MOUSE_UP,stopDragging);

    if (stoppedDrag.hitTestObject(targetClip))
    {
        trace("Hit");
        targetClip.gotoAndStop(stoppedDrag.frameNumber);

        hitTween1 = new Tween(stoppedDrag,"x",None.easeNone,stoppedDrag.x,targetClip.x,0.25,true);
        hitTween2 = new Tween(stoppedDrag,"y",None.easeNone,stoppedDrag.y,targetClip.y,0.25,true);
        hitTween2.addEventListener(TweenEvent.MOTION_FINISH, doEndMove(stoppedDrag));
    }
    else
    {
        trace("No Hit");
        targetClip.gotoAndStop(1);

        missTween1 = new Tween(stoppedDrag,"x",None.easeNone,stoppedDrag.x,stoppedDrag.homeX,0.5,true);
        missTween2 = new Tween(stoppedDrag,"y",None.easeNone,stoppedDrag.y,stoppedDrag.homeY,0.5,true);
        missTween2.addEventListener(TweenEvent.MOTION_FINISH, doEndMove(stoppedDrag));
    }
}

// *** End moves / re-add listeners;
function doEndMove(arg:MovieClip):Function
{
    return function(e:TweenEvent):void
    {
       arg.buttonMode = true;
       arg.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
       arg.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
    }
} 

It's not a good idea to nest functions really( as you did) as you can't get at them easily

[jasonconway]

Hi there and thanks so much for the advice, I pasted your code in place of mine and it does the same thing as mine in so far as all drag and drop clips play the same movie on seldefencemovies timeliness, i need each clip in the array to go to a different frame number on selfdefencemovies timeline , for example the clip bearing_mc goes to frame 10 of selfdefencemovies timeline and headlock_mc goes to frame 24 of that timeline, working on this for ages but as3 coding is hard for me.

[fruitbeard]

Hi,

I gave you the code to do that, you just need to change

var clipFrames:Array = new Array(2,3,4,5);

to

var clipFrames:Array = new Array(10,24,36,48); or whatever the number sequence is and make sure it is the same length as scrollClips array, the numbers are matched.

But anyway, as usual I have been messing around for my own purposes.

// *** Imports;
import flash.display.MovieClip;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

// *** Declare movieClips and frame numbers;
var targetClip:MovieClip = selfdefencemovies;
with (targetClip)
{
    frameText.text = currentFrame;
}

var scrollClips:Array = new Array(scroll_bearhug,scroll_headlock,scroll_hairgrab,scroll_grabpunch);
var clipFrames:Array = new Array(10,24,36,48);

// *** Declare Tweens;
var hitTween1:Tween;
var hitTween2:Tween;
var hitTweenTime:Number = 0.1;

var returnTween1:Tween;
var returnTween2:Tween;
var returnTweenTime:Number = 0.5;

var missTween1:Tween;
var missTween2:Tween;
var missTweenTime:Number = 0.5;

// *** Various vars;
var i:Number;
var timeOut:Number = 3000;// 3 seconds

var didHit:Boolean = false;
var disableHit:Boolean = false;

// *** Set up drag drop functions for MovieClips;
doListeners();

function doListeners():void
{
    for (i = 0; i < scrollClips.length; i++)
    {
        var thisDragger:MovieClip = MovieClip(scrollClips[i]);
        thisDragger.buttonMode = true;
        thisDragger.homeX = Number(thisDragger.x);
        thisDragger.homeY = Number(thisDragger.y);
        thisDragger.frameNumber = Number(clipFrames[i]);
        thisDragger.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
        thisDragger.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
    }
}

// *** Dragging;
function startDragging(e:MouseEvent):void
{
    e.currentTarget.startDrag();
    e.currentTarget.parent.setChildIndex(e.currentTarget,e.currentTarget.parent.numChildren - 1);
}

// *** Stop dragging;
function stopDragging(e:MouseEvent):void
{
    stopDrag();

    var stoppedDrag:MovieClip = MovieClip(e.currentTarget);
    
    stoppedDrag.buttonMode = false;
    stoppedDrag.removeEventListener(MouseEvent.MOUSE_DOWN,startDragging);
    stoppedDrag.removeEventListener(MouseEvent.MOUSE_UP,stopDragging);

    if (stoppedDrag.hitTestObject(targetClip) && !disableHit)
    {
        //trace("Hit" + stoppedDrag.frameNumber);
        
        targetClip.gotoAndStop(stoppedDrag.frameNumber);
        targetClip.frameText.text = targetClip.currentFrame;

        hitTween1 = new Tween(stoppedDrag,"x",None.easeNone,stoppedDrag.x,targetClip.x,hitTweenTime,true);
        hitTween2 = new Tween(stoppedDrag,"y",None.easeNone,stoppedDrag.y,targetClip.y,hitTweenTime,true);
        hitTween2.addEventListener(TweenEvent.MOTION_FINISH, doEndMove(stoppedDrag,true));
        
        disableHit = true;
        setTimeout(enableHit,timeOut);
    }
    else
    {
        //trace("No Hit");
        
        //targetClip.gotoAndStop(1);// !! why return if already playing another clip;

        missTween1 = new Tween(stoppedDrag,"x",None.easeNone,stoppedDrag.x,stoppedDrag.homeX,missTweenTime,true);
        missTween2 = new Tween(stoppedDrag,"y",None.easeNone,stoppedDrag.y,stoppedDrag.homeY,missTweenTime,true);
        missTween2.addEventListener(TweenEvent.MOTION_FINISH, doEndMove(stoppedDrag,false));
    }
}

// *** End moves / re-add listeners;
function doEndMove(arg:MovieClip,didClipHit:Boolean):Function
{
    return function(e:TweenEvent):void
    {
        didHit = didClipHit;
        if(didHit)
        {
            arg.buttonMode = false;
            arg.removeEventListener(MouseEvent.MOUSE_DOWN,startDragging);
            arg.removeEventListener(MouseEvent.MOUSE_UP,stopDragging);
            // *** If hit return back after timeout of x seconds;
            setTimeout(
            function():void
            {
                returnTween1 = new Tween(arg,"x",None.easeNone,arg.x,arg.homeX,returnTweenTime,true);
                returnTween2 = new Tween(arg,"y",None.easeNone,arg.y,arg.homeY,returnTweenTime,true);
                returnTween2.addEventListener(TweenEvent.MOTION_FINISH, doEndMove(arg,false));
            }
            ,timeOut);
        }
        else
        {
            arg.buttonMode = true;
            arg.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
            arg.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
        } 
    }
}

function enableHit():void
{
    disableHit = false;
} 

This one disables drop if already hit for a few seconds, infact here is the fla, mess around with it.

[jasonconway]

Hi Fruitbeard, thankyou so very much, it not only works it's also runs faster with your code. Just one more thing, the movie clips that I drag are visible if you go to other frames in the timeline. Is there a way to unload or cloak the mc's so that they only appear on their own frame?

[fruitbeard]

Hi,

There are two certain movieclip states of alpha and visible.
There is also removeChild() and addChild() but that would be slightly more troublesome, I shall let you try from here on.
Glad I helped some.

[fruitbeard]

Hi,

I am sure you can get what you need from this file

[jasonconway]

Thanks a million that is really snazzy with the opacity adjusted. have a look at my zipped fla on the Dropbox link below you will see what i mean when you go to the scrolls section and drag a movieclip to play a video, it all works great but when you go to a different sections of the flash movie the dragged scroll is still there yet it is on its own frame and placed on a layer below everything else. i can't get it to stay on its own frame. here is the link minus the videos.
https://www.dropbox.com/s/162mg7ja66...ortal.zip?dl=0

and thanks once again for all the help.

[fruitbeard]

Hi,

The offeding line of code is

function startDragging(e:MouseEvent):void
{
e.currentTarget.startDrag();
e.currentTarget.parent.setChildIndex(e.currentTarg et,e.currentTarget.parent.numChildren - 1);
}

That code basically makes each dragged box go on to the upper level, it however makes the boxes stay there.

You can comment that out if you are not so concerned about each box being on top when dragged, perhaps many people wont even notice, the other way would be to have each section inside containers, that way you can set each container to the top level when visted from the menu.

The way you have it set up at the moment would entail redoing a lot of you file.

[jasonconway]

Hi Fruitbeard -

That worked amazingly well, thankyou. Its time for me to bury myself into an as3 book or two.
Best regards

Jason