dcsimg
A Flash Developer Resource Site

Results 1 to 10 of 10

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

  1. #1
    Junior Member
    Join Date
    Apr 2015
    Posts
    9

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

    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);

  2. #2
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    Maybe try it like this using tweens and hitTest;
    PHP Code:
    // *** 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 0scrollClips.lengthi++)
    {
        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_FINISHdoEndMove(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_FINISHdoEndMove(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
    Last edited by fruitbeard; 05-07-2015 at 12:52 PM.

  3. #3
    Junior Member
    Join Date
    Apr 2015
    Posts
    9
    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.

  4. #4
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    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.

    PHP Code:
    // *** 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 (
    0scrollClips.lengthi++)
        {
            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_FINISHdoEndMove(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_FINISHdoEndMove(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_FINISHdoEndMove(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.
    Last edited by fruitbeard; 05-09-2015 at 01:26 AM.

  5. #5
    Junior Member
    Join Date
    Apr 2015
    Posts
    9
    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?

  6. #6
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    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.

  7. #7
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

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

  8. #8
    Junior Member
    Join Date
    Apr 2015
    Posts
    9
    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.

  9. #9
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    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.

  10. #10
    Junior Member
    Join Date
    Apr 2015
    Posts
    9
    Hi Fruitbeard -

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

    Jason

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center