7 Replies Latest reply: May 5, 2012 7:56 AM by maxwelladdicted RSS

    Load a draggable MovieClip from an DropDown menu

    maxwelladdicted

      hi all!

      I got stuck on this little interface I'm doing. It's the first time I seriously code in as3 and I guess this is over my possibility at the moment!

      What I'm trying to do is:

      1) a dropDown menu that loads an HTML file when clicked and also a movie clip onto the stage (this part works ok)

      2)the movieClip I loaded is draggable.... and here I rest my case!

      I'm thinking that the key to make it work is to embed the code that makes it draggable inside the movie clip itself; this way when I load the MC it comes already draggable... is that correct?

      The main code is this;

       

      import flash.net.URLRequest;

      import flash.events.Event;

      import flash.display.MovieClip;

      import flash.sampler.NewObjectSample;

       

       

      //define texts for the HEADING and for the PANEL's children (b1,2,3,4)

      menu_event.heading.myText.text = "EVENT";

      menu_event.panel.b1.myText.text = "press";

      menu_event.panel.b2.myText.text = "pressNeighbour";

      menu_event.panel.b3.myText.text = "bla";

      menu_event.panel.b4.myText.text = "blabla";

       

       

      menu_actions.heading.myText.text = "ACTIONS";

      menu_actions.panel.b1.myText.text = "ledOn";

      menu_actions.panel.b2.myText.text = "ledOff";

      menu_actions.panel.b3.myText.text = "ledFlash";

      menu_actions.panel.b4.myText.text = "ledDim";

       

       

      menu_blocks.heading.myText.text = "BLOCKS";

      menu_blocks.panel.b1.myText.text = "state";

      menu_blocks.panel.b2.myText.text = "broadcast";

      menu_blocks.panel.b3.myText.text = "onEntry";

      menu_blocks.panel.b4.myText.text = "onExit";

      //tell the MENU to do something depending on which target is clicked

      menu_event.addEventListener(MouseEvent.CLICK, clickHandler);

      menu_actions.addEventListener(MouseEvent.CLICK, clickHandler);

      menu_blocks.addEventListener(MouseEvent.CLICK, clickHandler);

       

       

       

       

      function clickHandler(event:MouseEvent):void

      {

                if (event.target == menu_event.panel.b1)

                {

                          navigateToURL(new URLRequest("event_1.html"));

                          // Create a new MovieClip

                          var myMovieClip:MovieClip = new event_obj();

                          // Add the new MovieClip to the MainTimeline

                          // so that we can see it.

                          addChild(myMovieClip);

                          // Set the location of the new MovieClip

                          myMovieClip.x = 150;

                          myMovieClip.y = 210;

                }

                if (event.target == menu_event.panel.b2)

                {

                          navigateToURL(new URLRequest("event_1.html"));

                }

                if (event.target == menu_event.panel.b3)

                {

                          navigateToURL(new URLRequest("event_2.html"));

                }

                if (event.target == menu_event.panel.b4)

                {

                          navigateToURL(new URLRequest("event_3.html"));

                }

                ////////////////////////////////////////////////////////////////////

                if (event.target == menu_actions.panel.b1)

                {

                          navigateToURL(new URLRequest("actions_1.html"));

                }

                if (event.target == menu_actions.panel.b2)

                {

                          navigateToURL(new URLRequest("actions_2.html"));

                }

                if (event.target == menu_actions.panel.b3)

                {

                          navigateToURL(new URLRequest("actions_3.html"));

                }

                if (event.target == menu_actions.panel.b4)

                {

                          navigateToURL(new URLRequest("actions_4.html"));

                }

                ////////////////////////////////////////////////////////////////////

                if (event.target == menu_blocks.panel.b1)

                {

                          navigateToURL(new URLRequest("blocks_1.html"));

                }

                if (event.target == menu_blocks.panel.b2)

                {

                          navigateToURL(new URLRequest("blocks_2.html"));

                }

                if (event.target == menu_blocks.panel.b3)

                {

                          navigateToURL(new URLRequest("blocks_3.html"));

                }

                if (event.target == menu_blocks.panel.b4)

                {

                          navigateToURL(new URLRequest("blocks_4.html"));

                }

      }

       

       

       

      kudos for the help

        • 1. Re: Load a draggable MovieClip from an DropDown menu
          Ned Murphy CommunityMVP

          You could place the code inside the loaded movieclip or you could assign the code in the same section where you load it.

          • 2. Re: Load a draggable MovieClip from an DropDown menu
            maxwelladdicted Community Member

            Hi Ned,

             

            Thanks for the suggestion... I fooled around a bit yesterday and I managed to something... It's a bit buggy but it's a first step... In the bit where I actually load the movieClip as an OBJ, I create a variable and that will initiate a new event_obj, and give it a position on screen...

            function clickHandler(event:MouseEvent):void

            {

                      if (event.target == menu_event.panel.b1)

                      {

                                navigateToURL(new URLRequest("event_1.html"));

                                // Create a new MovieClip

                                var myMovieClip:MovieClip = new event_obj();

                                // Add the new MovieClip to the MainTimeline

                                // so that we can see it.

                                addChild(myMovieClip);

                                // Set the location of the new MovieClip

                                myMovieClip.x = 150;

                                myMovieClip.y = 210;

                      }

             

            the event_obj is a movie clip that holds in this code:

             

            stop();

            buttonMode = true;

            // Register mouse event functions

            mc_test.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

            mc_test.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

            // Define a mouse down handler (user is dragging)

            function mouseDownHandler(evt:MouseEvent):void {

                      var object = evt.target;

                      object.startDrag();

            }

            function mouseUpHandler(evt:MouseEvent):void {

                      var obj = evt.target;

                                obj.stopDrag();

            }

             

            it's basically a chunk of code that turns on button mode (hand cursor) and makes the MC listen to mouse event; if there is a mouse down you drag ortherwise not...Simple as that!

            • 3. Re: Load a draggable MovieClip from an DropDown menu
              Ned Murphy CommunityMVP

              If you have that code inside the object, then you are not really dragging the object, you are dragging something inside it that has the instance name mc_test, and even then you might not be actually moving mc_test, but whatever graphic/object is inside of it..

               

              If you monitor the x and y properties of myMovieClip as you drag they probably don't change.  Put this listener at the end of the clickHandler functionto check that...

               

                   myMovieClip.addEventListener(MouseEvent.MOUSE_MOVE, checkXY);

               

              and add this function to process it... outside the function

               

                  function checkX(evt:MouseEvent):void {
                         trace(evt.currentTarget.x, evt.currentTarget.y)
                  }

               

              If your intention is to move the myMovieClip object, then you want to change that code inside the object to...

               

                   stop();

                   buttonMode = true;

               

                   // Register mouse event functions

                   addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

                   addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

                  

                   // Define a mouse down handler (user is dragging)

                   function mouseDownHandler(evt:MouseEvent):void {

                        this.startDrag();

                   }

               

                   function mouseUpHandler(evt:MouseEvent):void {

                        this.stopDrag();

                   }

               

              Just in case, assigning buttonMode is not necessary unless you wish to have the cursor change to a hand when moving over the object.

              • 4. Re: Load a draggable MovieClip from an DropDown menu
                maxwelladdicted Community Member

                The thing is that both ways work fine, but I corrected it with the this. option you suggested; I guess this way you only move myMovieClip instead of something inside it, aka one less "child" to deal with...

                 

                Since we are discussing it I'd like to ask something else... I'm trying to make a chunk of code to be put inside the event_obj class so that if the DEL key is pressed the last istance (myMovieClip) created is deleted...

                 

                so when ever I click on the menu I create an instance of event_obj called myMovieCLip
                var myMovieClip:MovieClip = new event_obj();

                 

                Inside event_obj I added this

                 

                    

                this.addEventListener(KeyboardEvent.KEY_DOWN, erase);

                          function erase(event:KeyboardEvent):void

                          {

                                    var object = event.target;

                                    if (event.keyCode == 8)

                                    {

                                                                  object.removeMovieClip;

                             }

                          }

                 

                it doesn't work of course... I tryed different commands and methids without succes....
                I'm starting to think I have to use an Array so that everytime i create an event_Obj, I place the instance in it... Then when ever I press delete Key the last instance is erased form the screen...

                The logical structure would be;
                Main menu > if clicked create Array> create an instance of event_obj inside Array...
                     if delete key is pressed> access the array and delete the last instance inserted.

                 

                Hope this makes sense...

                • 5. Re: Load a draggable MovieClip from an DropDown menu
                  maxwelladdicted Community Member

                  actually....
                  I just tried to move the chunk of code out of the movie clip like below and it kinda works...Problem is it erase all instances of myMovieClip and not the last created only... I guess it is because all new istances of myMovieClip share the same name, so if I say removeChild it erase them all...Is this correct?

                   

                  function newEventMc():void

                  {

                            var myMovieClip:MovieClip = new event_obj();

                            addChild(myMovieClip);

                            myMovieClip.x = 50;

                            myMovieClip.y = 350;

                   

                            this.addEventListener(KeyboardEvent.KEY_DOWN, erase);

                            function erase(event:KeyboardEvent):void

                            {

                                      if (event.keyCode == 8)

                                           {

                                                removeChild(myMovieClip);

                                                }

                                } 

                  }

                   

                  function clickHandler(event:MouseEvent):void

                  {

                            if (event.target == menu_event.panel.b1)

                            {

                                      newEventMc();

                            }

                  etc. etc.

                  • 6. Re: Load a draggable MovieClip from an DropDown menu
                    Ned Murphy CommunityMVP

                    First thing you need to do is avoid nesting functions within functions.  I know why you are probably doing it, but doing it is bad practice that will lead to troubles you will not understand how they happen when they do.

                     

                    Anything that involves managing the objects you create is better done outside of the objects.

                     

                    If you only want to remove that last child added, then you probably want to add them into an array and target the last element of the array.

                     

                    Another option could be to use removeChildAt(numChildren-1);, but the hazard there is that you could end up removing beyond the first one added as well.

                     

                    You do not need to be assigning that KEY_DOWN event listener more than once.  YOu do not need to create a new one each time you create an new instance.

                     

                    In any case, you seem to be willing to experiment, which is a good thing.  Try things and see what works and what doesn't... that's the best way to learn... having solutions handed to you doesn't have the same impact as something you struggle with and evolve.

                    • 7. Re: Load a draggable MovieClip from an DropDown menu
                      maxwelladdicted Community Member

                       

                      In any case, you seem to be willing to experiment, which is a good thing.  Try things and see what works and what doesn't... that's the best way to learn... having solutions handed to you doesn't have the same impact as something you struggle with and evolve.

                      I agree about having solutions haded out...
                      I'll keep on playing around...

                       

                      Thanks again!