4 Replies Latest reply on Mar 21, 2007 10:23 AM by essaeyu

    Better coding approach for ‘Drag and Drop’

    essaeyu Level 1
      Hi,

      I am designing an activity in flash where the user is supposed drag certain objects on the correct position. The code on all the objects is the same i.e. startDrag(), stopDrag(), checking the _droptraget etc. The only thing different is the value of drop target. Instead of writing code on each of the object, I was wondering whether the code can be written in a more efficient manner. For instance, I can declare global functions in the root timeline which can be accessed by each object. I also tried looking at possibility of making a custom drag/drop component which takes the value of _droptraget as its parameter. According to my findings, this approach can be good where the interface of the component remains same e.g. button, but not in my situation where each object has a different image.

      Any suggestions for writing a more efficient code?

      Thanks,

      Essaeyu
        • 1. Re: Better coding approach for ?Drag and Drop?
          Level 7
          There is a drag and drop learning sample that comes with Flash 8. I found
          that to be a great model in building a D&D interaction. Under 'Window'
          select 'common libraries.' Then select 'learning interactions.'

          "essaeyu" <webforumsuser@macromedia.com> wrote in message
          news:eshc3q$8k4$1@forums.macromedia.com...
          > Hi,
          >
          > I am designing an activity in flash where the user is supposed drag
          certain
          > objects on the correct position. The code on all the objects is the same
          i.e.
          > startDrag(), stopDrag(), checking the _droptraget etc. The only thing
          different
          > is the value of drop target. Instead of writing code on each of the
          object, I
          > was wondering whether the code can be written in a more efficient manner.
          For
          > instance, I can declare global functions in the root timeline which can be
          > accessed by each object. I also tried looking at possibility of making a
          custom
          > drag/drop component which takes the value of _droptraget as its parameter.
          > According to my findings, this approach can be good where the interface of
          the
          > component remains same e.g. button, but not in my situation where each
          object
          > has a different image.
          >
          > Any suggestions for writing a more efficient code?
          >
          > Thanks,
          >
          > Essaeyu
          >


          • 2. Re: Better coding approach for ‘Drag and Drop’
            Flash_Junction
            You can either write a class, or use a prototype method. The second is 'easier' for now. Try this

            quote:


            MovieClip.prototype.dragDropper = function(myTarget_mc:MovieClip){
            this.target_mc = myTarget_mc;
            this.onPress = function(){
            this.startDrag();
            }
            this.onRelease = function(){
            this.stopDrag();
            if(eval(this._droptarget)==this.target_mc){
            trace("yo dude!");
            }
            }
            }

            mc1_mc.dragDropper(mc2_mc);
            mc2_mc.dragDropper(mc3_mc);
            mc3_mc.dragDropper(mc1_mc);

            // or to save even more time

            for(var i:Number=0; i<100; i++){
            _root["mc"+i+"_mc"].dragDropper(_root["mc"+i+"_mc"]);
            }




            What this does is essentially create a new method of the MovieClip class, called dragDropper() which you can call for any movieclip. When you do, it will assign the onPress and onRelease events to itself, and in this case, assign a property which it can test against _droptarget. This saves you defining the code for each movieclip separately.

            You can do this all with code in your .fla. If you are feeling more adventurous, you could try defining an external class.

            quote:


            // In the external Class (DragDropper.as)
            //-------------------------------------------------------

            class DragDropper{

            var graphic_mc:MovieClip;
            var target_mc:MovieClip;

            function DragDropper(myGraphic_mc:MovieClip, myTarget_mc:MovieClip){
            graphic_mc = myGraphic_mc;
            target_mc = myTarget_mc;
            init();
            }

            function init(){
            graphic_mc.listener = this;
            graphic_mc.onPress = function(){
            this.startDrag();
            }
            graphic_mc.onRelease = function(){
            this.stopDrag();
            this.listener.checkDrop(this._droptarget);
            }
            }

            function checkDrop(dropTarget_mc:MovieClip){
            if(eval(dropTarget_mc)==target_mc) trace("yo dude!");
            }
            }

            //In the .fla
            //-------------------------------------------

            var dragDropper1 = new DragDropper(mc1_mc,mc2_mc);
            var dragDropper2 = new DragDropper(mc2_mc,mc3_mc);
            var dragDropper3 = new DragDropper(mc3_mc,mc1_mc);




            That'sa lot more code, but mainly because I don't agree with extending the MovieClip class, hence the reason for keeping the movieclip separate from the class which controls it. For now, using an external class might seem like overkill, but when you get into more complex behaviours, classes give you much more power and flexibility.

            I hope that gives some ideas.
            • 3. Re: Better coding approach for ‘Drag and Drop’
              essaeyu Level 1
              Marc, Flash Junction,

              Thanks a lot for the replies. They are very useful.
              • 4. Re: Better coding approach for ‘Drag and Drop’
                essaeyu Level 1
                Flash Junction,

                Regarding your code for class DragDropper, I was wondering about the logic behind the following:

                graphic_mc.listener = this;

                and then accessing the checkDrop function through this.listener as below:

                this.listener.checkDrop(this._droptarget);

                This could have been done with this as well. Anyone else is more than welcome to reply.

                Cheers!