11 Replies Latest reply on Aug 1, 2010 9:35 AM by Rezu

    how to change reply_txt.text to a graphic

    Rezu Level 1

      Howdy,

       

      When a user finishes a drag and drop activity, they get a text that says "Congrats, you're finished".

       

      How do I change the congrats text to celebratory image/graphic pop-up that appears after they've finished the activity? Keep in mind I know just enough as to be dangerous.

       

       

      Below is the script I'm using... Thanks!

       

       

       

      var startX:Number;
      var startY:Number;
      var counter:Number = 0;

       

      Cls_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      Cls_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      Dbdef_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      Dbdef_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      Subschema_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      Subschema_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      Programs_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      Programs_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      Showclone_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      Showclone_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
      Showschema_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      Showschema_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

       

      function pickUp(event:MouseEvent):void {
          event.target.startDrag(true);
          reply_txt.text = "";
          event.target.parent.addChild(event.target);
          startX = event.target.x;
          startY = event.target.y;
      }
      function dropIt(event:MouseEvent):void {
          event.target.stopDrag();
          var myTargetName:String = "target" + event.target.name;
          var myTarget:DisplayObject = getChildByName(myTargetName);
          if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
              reply_txt.text = "Good Job!";
              event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
              event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
              event.target.buttonMode = false;
              event.target.x = myTarget.x;
              event.target.y = myTarget.y;
              counter++;
          } else {
              reply_txt.text = "Try Again!";
              event.target.x = startX;
              event.target.y = startY;
          }
          if(counter == 6){
              reply_txt.text = "Congrats, you're finished!";
          }
      }

       

      Cls_mc.buttonMode = true;
      Dbdef_mc.buttonMode = true;
      Subschema_mc.buttonMode = true;
      Programs_mc.buttonMode = true;
      Showclone_mc.buttonMode = true;
      Showschema_mc.buttonMode = true;

        • 1. Re: how to change reply_txt.text to a graphic
          kglad Adobe Community Professional & MVP

          use:

           


           

           

           

          var startX:Number;
          var startY:Number;
          var counter:Number = 0;

           

          Cls_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          Cls_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
          Dbdef_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          Dbdef_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
          Subschema_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          Subschema_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
          Programs_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          Programs_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
          Showclone_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          Showclone_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
          Showschema_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          Showschema_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

           

          function pickUp(event:MouseEvent):void {
              event.target.startDrag(true);
              reply_txt.text = "";
              event.target.parent.addChild(event.target);
              startX = event.target.x;
              startY = event.target.y;
          }
          function dropIt(event:MouseEvent):void {
              event.target.stopDrag();
              var myTargetName:String = "target" + event.target.name;
              var myTarget:DisplayObject = getChildByName(myTargetName);
              if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
                  //reply_txt.text = "Good Job!";

          var congrats:Congrats = new Congrats():  // create a movieclip with this class

          addChild(congrats);

          congrats.x = whatever

          congrats.y = whatever;

                  event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
                  event.target.buttonMode = false;
                  event.target.x = myTarget.x;
                  event.target.y = myTarget.y;
                  counter++;
              } else {
                  reply_txt.text = "Try Again!";
                  event.target.x = startX;
                  event.target.y = startY;
              }
              if(counter == 6){
                  reply_txt.text = "Congrats, you're finished!";
              }
          }

           

          Cls_mc.buttonMode = true;
          Dbdef_mc.buttonMode = true;
          Subschema_mc.buttonMode = true;
          Programs_mc.buttonMode = true;
          Showclone_mc.buttonMode = true;
          Showschema_mc.buttonMode = true;

          • 2. Re: how to change reply_txt.text to a graphic
            Rezu Level 1

            Hi KGlad,

             

            As usual, you rock! Quick extra q's...

             

            Where do I place the graphic that will pop-up? Do I put it outside of the stage margin and it gets pulled in cuz of the mc instance link?

             

            Also, what would I add to the AS that you gave to make the graphic then disappear after a couple seconds?

             

            Thanks!

             

            Keith

            • 3. Re: how to change reply_txt.text to a graphic
              kglad Adobe Community Professional & MVP

              the congrats movieclip isn't on-stage until the code adds it to the stage.  just create a movieclip and assign it the class Congrats

              • 4. Re: how to change reply_txt.text to a graphic
                Karthikeyan Ramasamy

                Hi,

                 

                You can use Timer class to hide the congrats movie clip after some seconds. You have to select export 'Congrats' movie clip for action script (right click on movie clip in library, click 'properties' and check 'Export for ActionScript' option). I have added code for Timer class below.

                 

                Thanks

                Karthikeyan R.

                 

                var startX:Number;
                var startY:Number;
                var counter:Number = 0;

                 

                var myTimer:Timer = new Timer(3000);

                myTimer.addEventListener(TimerEvent.Timer, handleTimerComplete);

                 

                var congrats:Congrats;  // create a movieclip with this class

                 

                 

                Cls_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                Cls_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                Dbdef_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                Dbdef_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                Subschema_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                Subschema_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                Programs_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                Programs_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                Showclone_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                Showclone_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                Showschema_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                Showschema_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                 

                function pickUp(event:MouseEvent):void {
                    event.target.startDrag(true);
                    reply_txt.text = "";
                    event.target.parent.addChild(event.target);
                    startX = event.target.x;
                    startY = event.target.y;
                }
                function dropIt(event:MouseEvent):void {
                    event.target.stopDrag();
                    var myTargetName:String = "target" + event.target.name;
                    var myTarget:DisplayObject = getChildByName(myTargetName);
                    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
                        //reply_txt.text = "Good Job!";

                     showCongrats();

                        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
                        event.target.buttonMode = false;
                        event.target.x = myTarget.x;
                        event.target.y = myTarget.y;
                        counter++;
                    } else {
                        reply_txt.text = "Try Again!";
                        event.target.x = startX;
                        event.target.y = startY;
                    }
                    if(counter == 6){
                        reply_txt.text = "Congrats, you're finished!";
                    }
                }

                 

                Cls_mc.buttonMode = true;
                Dbdef_mc.buttonMode = true;
                Subschema_mc.buttonMode = true;
                Programs_mc.buttonMode = true;
                Showclone_mc.buttonMode = true;
                Showschema_mc.buttonMode = true;

                 

                function showCongrats():void {

                     myTimer.start()    

                     congrats = new Congrats();

                     addChild(congrats);

                     congrats.x = whatever

                     congrats.y = whatever;

                }

                 

                function handleTimerComplete(e:TimerEvent):void {

                     myTimer.stop();

                     removeChild(congrats);

                }

                • 5. Re: how to change reply_txt.text to a graphic
                  Rezu Level 1

                  Hi KGlad,

                   

                  I added the script per your suggestions (see below), but when I test the swf I can't grab any of the drag&drop mc's to drop on the targets. I'm using a different fla file, but it's the exact same AS, just different mc names and target names.

                  What should I do?   Here's what I did...

                   

                  1. I added the script that you suggested, in the same location and gave x&y numbers.

                   

                  2. I created a new symbol in the Library and made it a movie clip. In its properties down where it says Class: I typed 'congrats' and noticed that just below Class: is Base Class: flash.display.MovieClip. Is this ok?

                  3. Do I need to give this movie clip and instance name? Or I can't do that unless it's on the stage?

                  4. Do I need to give this movie clip a name or just stick with what it came with 'Symbol 1'?

                  5. When I close this mc's properties I get a message "A definition for the class path cannot be found...one will be         generated for you during swf export". Is this normal?

                   

                  6. Also I noticed on the version you pasted, you put a couple of // in front of  //reply_txt.text = "Good Job!";     it renders the line gray? Was this an accident or should I do that too? I tried both with and without the // in the area you put it but the swf still won't work.

                   

                  7. Lastly, in the 'Compiler Errors', I get "Frame 1, Line 35, 1086: Syntax error: expecting semicolon before colon". Is this normal?

                   

                  Thank you so much for your help!!!

                   

                   

                  var startX:Number;
                  var startY:Number;
                  var counter:Number = 0;

                   

                  b_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  b_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  e_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  e_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  n_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  n_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  j_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  j_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  a_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  a_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  m_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  m_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  i_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  i_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
                  n2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                  n2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                   

                  function pickUp(event:MouseEvent):void {
                      event.target.startDrag(true);
                      reply_txt.text = "";
                      event.target.parent.addChild(event.target);
                      startX = event.target.x;
                      startY = event.target.y;
                  }
                  function dropIt(event:MouseEvent):void {
                      event.target.stopDrag();
                      var myTargetName:String = "target" + event.target.name;
                      var myTarget:DisplayObject = getChildByName(myTargetName);
                      if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
                          reply_txt.text = "Good Job!";
                  var congrats:Congrats = new Congrats():  // create a movieclip with this class
                  addChild(congrats);
                  congrats.x = 250
                  congrats.y = 200;

                          event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
                          event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
                          event.target.buttonMode = false;
                          event.target.x = myTarget.x;
                          event.target.y = myTarget.y;
                          counter++;
                      } else {
                          reply_txt.text = "Try Again!";
                          event.target.x = startX;
                          event.target.y = startY;
                      }
                      if(counter == 8){
                          reply_txt.text = "Congrats, you're finished!";
                      }
                  }

                   

                  b_mc.buttonMode = true;
                  e_mc.buttonMode = true;
                  n_mc.buttonMode = true;
                  j_mc.buttonMode = true;
                  a_mc.buttonMode = true;
                  m_mc.buttonMode = true;
                  i_mc.buttonMode = true;
                  n2_mc.buttonMode = true;

                  • 6. Re: how to change reply_txt.text to a graphic
                    kglad Adobe Community Professional & MVP

                    this is the first error:

                     

                    2. I created a new symbol in the Library and made it a movie clip. In  its properties down where it says Class: I typed 'congrats'

                     

                    that should be Congrats.  case counts.

                    • 7. Re: how to change reply_txt.text to a graphic
                      Rezu Level 1

                      Hi KGlad,

                       

                      Thank you very much for your continued help.

                       

                      I changed the case to 'Congrats' in the mc Class: and even called the mc name Congrats. I see Congrats where it says 'Linkage' in the Library, but unfortunately, the drag&drop feature still doesn't work.

                       

                      Thanks for any help you can give!

                       

                      Sincerely,

                       

                      Keith

                      • 8. Re: how to change reply_txt.text to a graphic
                        kglad Adobe Community Professional & MVP

                        does your drag code work?  if not, did it ever work?

                        • 9. Re: how to change reply_txt.text to a graphic
                          Rezu Level 1

                          Oooo ok I think I'm on the track now...

                          Before there was a colon after the (): but I changed it to ; and now it works.

                           

                          var congrats:Congrats = new Congrats();  // create a movieclip with this class
                          addChild(congrats);
                          congrats.x = 250
                          congrats.y = 200;

                           

                          Was this the other problem in addition to my case?

                           

                           

                          Now the problem is, I'd like the image to popup after the user drags all 8 items onto the targets.

                           

                          Does that mean I put the new script after line 52? And do I need to change the script to something different or do I just use the same script in this new area?

                           

                          Thanks!

                          • 10. Re: how to change reply_txt.text to a graphic
                            Rezu Level 1

                            I guess that shoudl be line 48? Still had the added script in.

                            • 11. Re: how to change reply_txt.text to a graphic
                              kglad Adobe Community Professional & MVP

                              i can't see your line numbers.

                               

                              you can use the count variable to determine when all the correct drops have been made.