5 Replies Latest reply on Jan 13, 2018 3:57 AM by JoãoCésar

    Help: A simple Text input and dynamic output (HTML5)

    smsali Level 1

      Hey guys! I'm looking for codes to input text and output it on another frame. I'm not a coder but I tried and made it work on .fla format using this code:

       

      Input:

       

      var nameTXT:String;

      nameTXT_button.addEventListener(MouseEvent.CLICK, nextClick);

       

      function captureText(): void

      {nameTXT=name_TXT.text

          }

       

      function nextClick(e:MouseEvent):

          void

          {

              captureText(); nextFrame();

              }

       

      Output:

       

      nameoutputTXT.text=nameTXT;

       

      platform_button.addEventListener(MouseEvent.CLICK, platformClick);

       

      function platformClick(e:MouseEvent):

          void

          {

              nextFrame();

              }

             

      products_button.addEventListener(MouseEvent.CLICK, productClick);

       

      function productClick(e:MouseEvent):

          void

          {

              gotoAndStop(15);

             

              }

       

      And its working perfectly fine. But i require this same function on HTML framework. Can someone please write this short code for me? Again, I'm not at all a coder but open to learn more as i proceed. i have seen people doing it using java and other languages but it's all going over my head.

        • 1. Re: Help: A simple Text input and dynamic output (HTML5)
          JoãoCésar Adobe Community Professional

          Hi.

           

          Notice that I had to put each text field inside of a Movie Clip because I was getting reference errors on the second frame. I'm not pretty sure why.

           

          Frame 1:

          var that = this;
          this.nameTXT = 2;
          
          function captureText()
          {
              that.nameTXT = that.text1.name_TXT.text;   
          }
          
          function nextClick(e)
          {
              captureText();
              that.gotoAndStop(that.timeline.position + 1);
          }
          
          this.stop();
          this.nameTXT_button.addEventListener("click", nextClick);
          

           

          Frame 2:

          var that = this;
          
          function platformClick(e)
          {
              that.gotoAndStop(that.timeline.position + 1);
          }
          
          function productClick(e)
          {
              that.gotoAndStop(14); // Frame numbers in EaselJS start at 0 instead of 1
          }
          
          this.text2.nameoutputTXT.text = this.nameTXT;
          
          this.platform_button.addEventListener("click", platformClick);
          this.products_button.addEventListener("click", productClick);
          

           

          Anyway, you could just extend your text field until the frame 15 (14) and you wouldn't have to worry about this text input and output thing.

           

          Regards,

          JC

          1 person found this helpful
          • 2. Re: Help: A simple Text input and dynamic output (HTML5)
            smsali Level 1

            Thanks for the code Cesar! That was really a good help, appreciate it! I can read and understand the flow it is making but unfortunately it doesn't work with the current frames i designed and moved ahead. these are the frame codes i have in the current flow.

             

            Frame 1:

            this.stop();  

             

            this.nameTXT_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

             

            function fl_ClickToGoToAndStopAtFrame_4()

            {

                this.gotoAndStop(1);

            }

             

            Frame 2:

             

            this.stop();

             

            this.products_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

             

            function fl_ClickToGoToAndStopAtFrame() {

                this.gotoAndPlay(2);

            }

             

            I know it may look like a joke but as i said, not a coder. Just going ahead on path i get lol. Do you think you can add a few text to these codes to make text field work?

             

            Regards.

            • 3. Re: Help: A simple Text input and dynamic output (HTML5)
              JoãoCésar Adobe Community Professional

              Hi again!

               

              I'm glad it helped you!

               

              Here is:

               

              Frame 1:

              var that = this;
              this.nameTXT = "";
              
              function captureText()
              {
                  that.nameTXT = that.text1.name_TXT.text;   
              }
              
              function fl_ClickToGoToAndStopAtFrame_4()
              {
                  captureText();
                  this.gotoAndStop(1);
              }
              
              this.stop();
              this.nameTXT_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));
              

               

              Frame 2:

              function fl_ClickToGoToAndStopAtFrame()
              {
                  this.gotoAndPlay(2);
              }
              
              this.text2.nameoutputTXT.text = this.nameTXT;
              this.products_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));
              

               

              Once again, please notice it that I put each text field inside of Movie Clips, called "text1" and "text2".

               

              Please don't hesitate to ask if you stil have any further question.

               

               

              Regards,

              JC

              1 person found this helpful
              • 4. Re: Help: A simple Text input and dynamic output (HTML5)
                smsali Level 1

                Hey JC! Thanks so much again for coding down completely for me. Unfortunately i'm not able to get the output as needed. I understood your code and seems perfect to me but still not happening.

                 

                This code in Frame 1:

                 

                that.nameTXT = that.text1.name_TXT.text;

                 

                is that 'name_TXT' on purpose or a typo? i can't figure out why '_' is between nameTXT element. If i keep it that way, i'm not able to go to frame 2. Although changing it back from 'name_TXT' to 'nameTXT' lets me get through but no output in the Frame 2. In Frame 2, i created a dynamic text box, named it as nameoutputTXT and made it a movie clip named text2 (similarly done in Frame 1 for Text Input field i.e. nameTXT and created it movie clip naming text1). Am i doing this the right way?

                 

                Thanks!

                • 5. Re: Help: A simple Text input and dynamic output (HTML5)
                  JoãoCésar Adobe Community Professional

                  Hi again.

                   

                  nameTXT is a variable to store the text field's text.

                  name_TXT is the text filed on the stage.

                   

                  And these are the names that you assigned. I just followed. rs

                   

                  Anyway, here is a working FLA to clariy your doubts: text_input_output.zip - Google Drive .