8 Replies Latest reply on Nov 20, 2015 6:39 AM by resdesign

    On click load different frames

    chijiokeokafo

      Hey Everyone,

      So I'm trying to build out a set of banners that ask the user their age, the user inputs the number into a textfield and depending on what the number is, different end frames will show. The numbers are between 18-99, and for like 18-22, banner end frame 1 will show, 23-27 banner end frame 2 will show, and so on. I haven't the slightest idea of how to implement this. I was thinking of using JS if/else if statements, but then I'd need to build 15 different end frames. The only difference in the end frames is a single image in the same place. Any help would be really appreciated, I'm starting to run out of time and I have no idea what to do. Thanks in advance!

        • 1. Re: On click load different frames
          resdesign Adobe Community Professional & MVP

          If you end frame is an image, you can change it with either attr or css background image.

          Then you can write a conditional according to their response.

          get the value of your input field and change the image accordingly.

           

          to change your image:

          var images = ['18-22','23-27','18-99'];

          // you will need to write your conditional then change the image.

          sym.$('seedImage').attr('src','images/' + images[i] + '.png');

           

          Let me know if you need help with the input text and the value.

          • 2. Re: On click load different frames
            chijiokeokafo Level 1

            Sorry, I should have been more specific. The final frame is the exact same for all of them, and the only thing that changes is an image of text (the client wants all copy as image files, not as text). So would I be able to swap that image specifically out? Would the method above work for that too? Sorry, I'm pretty new with EA, and my JS isn't super strong

            • 3. Re: On click load different frames
              resdesign Adobe Community Professional & MVP

              Even easier. Just just the code I gave you to change the image. You will need to select the image in your comp and change div to img and change your image according to your input value.

              div.pngimg.png

               

              // the array contains the name of the images

              var images = ['18-22','23-27','18-99']; 

              // N1 is the input text

              sym.$('N1').html("<input type='text' id='N1' placeholder=''" + " maxlength='2' dir='ltr' tabindex='1' " + " style='background-color:rgba(255,255,255,0.00); border:0px solid #124a7b; width:72px; height:72px; padding-left:1px; text-align:center; font-size:72px;'>")

              if(N2.value == "18-22"{

                   sym.$('seedImage').attr('src','images/' + images[0] + '.png');

              }

              • 4. Re: On click load different frames
                chijiokeokafo Level 1

                Sorry I'm having a really hard time with this. So the person types in say 24, then I want the current frame to fade out, then have the proper end frame fade in. So I'd have to animate both, will this method still work? I'm having a bit of trouble understanding. This is what I have so far, code wise. Really sorry for being a pain in the ***, but I really appreciate all the help!


                So I have my input field appended onto my div on the project, it validates properly but this is where I'm stuck


                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) {

                         var inputField = $('<input type="text" id="inputField" placeholder="Enter your current age">').css({

                          width: '100%',

                          height: '100%',

                          margin: 0,

                          padding: 0,

                          border: 0,

                          textAlign: 'center',

                          fontSize: 9,

                          color: '#333333',

                          fontFamily: 'Arial, Helvetica, "sans serif"'

                         });

                         $('#Stage_inputBox').append(inputField);

                      });

                      //Edge binding end

                 

                      Symbol.bindElementAction(compId, symbolName, "${button}", "click", function(sym, e) {

                                  var x = document.getElementById("inputField").value;

                                  var validate = "Enter a number between 18 and 99";

                                      if (isNaN(x) || x < 18 || x > 99) {

                                      document.getElementById('inputField').value = 'Enter a number between 18 and 99';

                                      };

                      });

                • 5. Re: On click load different frames
                  resdesign Adobe Community Professional & MVP

                  Yes, whatever method you are using to bring your image in is fine. You still need to use the code that change the image depending on the value.

                  • 6. Re: On click load different frames
                    resdesign Adobe Community Professional & MVP

                    Here is an example I made for you in 2014.0.1 but you should be able to use that in your version if it is different.

                    Choices with Input.zip - Box

                    • 7. Re: On click load different frames
                      chijiokeokafo Level 1

                      Thanks so much, Redesign! You're a life saver

                      • 8. Re: On click load different frames
                        resdesign Adobe Community Professional & MVP

                        Thanks! My pleasure.

                        Mark as correct so that others can find it better in their search when they need to same thing.