12 Replies Latest reply on Dec 8, 2014 2:32 AM by joel_pau

    Using if statements in Edge

    meowbastard

      My interactive program runs as follows...

       

      There are 6 hidden items you need to find within an image. After you find an item a checkmark appears checking that item off of a checklist (listing all 6 items). I would like for my program to end after all six items are found and display an end screen. To see my current progress you can visit www.atxmusicinfographic.com.

       

      In order to get this end screen to show I need to use an if statement. I want the statement to say something like...

       

      If checkmark1 & checkmark2 & checkmark3 & checkmark4 & checkmark 5 & checkmark 6 are visible show end screen

       

      but I don't know the proper language to use. Please help

        • 1. Re: Using if statements in Edge
          vivekuma Adobe Employee

          Can you share the composition so that we can take a closer look at it?

          • 2. Re: Using if statements in Edge
            meowbastard Level 1

            Sure! here is a link to the dropbox folder containing the file

             

            Dropbox - interactive site

            • 3. Re: Using if statements in Edge
              vivekuma Adobe Employee

              Check this modified version out: Dropbox - multipleCheck.rar

               

              When all the checkbox are checked, then in the compositionReady for the stage, I have outputted a console message.

              You can comment that out, and do whatever effect you want to have for endScreen.

               

              Changes are in:

                   1. stage compositionReady

                   2. For each of the 6 clickable click event handler

               

              hth,

              Vivekuma

              • 4. Re: Using if statements in Edge
                Robyn_cpl Level 2

                if you set variables in the composition ready for each click.

                 

                e.g. click_1 =0;

                 

                Then in each click event change it to 1

                 

                e.g. click_1 =1;

                 

                Then in your composition somewhere have this if statement

                 

                if (click_1 ==1 && click_2 ==1 && click_3 ==1 && click_4 ==1 && click_5 ==1)

                {

                      DO SOMETHING

                }

                 

                this if statement will need to go after every click since they can click them in any order.

                 

                Hope this helps

                • 5. Re: Using if statements in Edge
                  cater_tot

                  Thank you so much for your help Vivekima! For some reason when I try to run it with your edits I'm not seeing the message you added. Am I not supposed to see the message?

                  • 6. Re: Using if statements in Edge
                    cater_tot Level 1

                    Hi Robyn_cpl! I love this idea. However, I'm struggling with executing it.

                     

                    Here's what I've done, on the composition ready screen I added:

                     

                    sym.setVariable("click_1", "0");

                    sym.setVariable("click_2", "0");

                    sym.setVariable("click_3", "0");

                    sym.setVariable("click_4", "0");

                    sym.setVariable("click_5", "0");

                    sym.setVariable("click_6", "0");

                     

                    Then for each of the six click events I added:

                     

                    sym.setVariable("click_1", "1");

                    if (click_1 ==1 && click_2 ==1 && click_3 ==1 && click_4 ==1 && click_5 ==1){sym.$("end_screen").show()};

                    else sym.play(x);

                     

                     

                    Now my program won't start. Do you have any idea why it's not running?

                    • 7. Re: Using if statements in Edge
                      resdesign Adobe Community Professional & MVP

                      You need to have some consistency. Though JS does not differential between "1" and 1 I would use the same in all the code.

                      Also, you have errors in your code: missing }

                       

                      sym.setVariable("click_1", "1");

                      // need the click event in compositionReady to start here

                      if (click_1 ==1 && click_2 ==1 && click_3 ==1 && click_4 ==1 && click_5 ==1){sym.$("end_screen").show()};   // error here

                      else sym.play(x); // error here

                      // corrected

                      sym.setVariable("click_1", 1);

                      sym.$('btn').bind('click',function(){

                      if (click_1 ==1 && click_2 ==1 && click_3 ==1 && click_4 ==1 && click_5 ==1){

                      sym.$("end_screen").show();

                      } else {

                      sym.play(x);

                      }

                      });

                      • 8. Re: Using if statements in Edge
                        meowbastard Level 1

                        Thanks for your help resdesign! The good news is that the program is now running again...the bad news is it is still not running the way I'd like it to. For some reason the end screen still does not play when all six boxes are checked. Although it does play every time I click one of the particular hidden items. I had to change somethings around in to make everything to occur in the correct order. Was I supposed to add something to composition ready? Here's where I'm at now...

                         

                        In composition ready I still have

                         

                         

                        sym.setVariable("click_1", 0);

                        sym.setVariable("click_2", 0);

                        sym.setVariable("click_3", 0);

                        sym.setVariable("click_4", 0);

                        sym.setVariable("click_5", 0);

                        sym.setVariable("click_6", 0);

                         

                         

                        And for each item that needs to be found I have a click event

                         

                         

                        sym.setVariable("click_1", 1);

                        sym.$('btn').bind('click',function(){

                        if (click_1 ==1 && click_2 ==1 && click_3 ==1 && click_4 ==1 && click_5 ==1 && click_6==1){sym.play(40000);} });

                         

                        Did I miss something? Here is the file if anyone is able to take a look Dropbox - interactive

                        • 9. Re: Re: Using if statements in Edge
                          joel_pau Level 5

                          Hi,

                           

                          It's easier and simpler using a class. You add a class using the Edge UI (picture below)

                          checkmarkClass.jpg

                          And you add a dot before the name to call a class: sym.$(".checkmark")


                          Demo file here: https://app.box.com/s/928e2apup3oggihn12x7

                           

                          I look at your file now.


                          1) Trigger @0.


                          • Old trigger @0 (before):

                          // Hide an element

                          sym.$("checkmark3").hide();

                          // Hide an element

                          sym.$("checkmark6").hide();

                          // Hide an element

                          sym.$("checkmark2").hide();

                          // Hide an element

                          sym.$("checkmark").hide();

                          // Hide an element

                          sym.$("checkmark4").hide();

                          // Hide an element

                          sym.$("checkmark5").hide();

                           

                          sym.play();

                           

                          • New trigger @0 (after):

                          sym.$( ".checkmark" ).hide(); // all checkmarks are hidden, now.

                          sym.play();

                           

                          2) Test.


                          • Old test (before):

                          if (click_1 ==1 && click_2 ==1 && click_3 ==1 && click_4 ==1 && click_5 ==1 && click_6==1){sym.play(40000);}

                          • New test (after):

                          var visibles = sym.$( ".checkmark" ).show().length; // How many checkmarks are displayed?

                          if ( visibles == 6 ) { sym.play(40000) } // if (all checkmarks are displayed) then play "40000"

                          • 10. Re: Using if statements in Edge
                            resdesign Adobe Community Professional & MVP

                            I also think you needed an else statement but using a class as Joël said is a great idea. I use class a lot but forgot to mention that just answering your specific question.

                            • 11. Re: Re: Using if statements in Edge
                              cater_tot Level 1

                              Thanks Joel! This makes a lot of sense. I've just tested it and found when I run the program, as soon as I click one of the hidden items all 6 checkmarks are shown and 40000 ms plays. It as if this is being interpreted as: show all 6 checkmarks and end show when only one checkmark is visible. I'm not sure what could be missing.

                              • 12. Re: Re: Using if statements in Edge
                                cater_tot Level 1

                                Is the class "checkmark" stored as a string?

                                • 13. Re: Using if statements in Edge
                                  joel_pau Level 5

                                  My starting point: i looked at this website atxmusicinfographic.com and i saw:

                                  interactive.jpg

                                  sym.showEnd = function() {

                                                      if ( sym.$( ".checkmark" ).show().length == 6 ) { sym.play(40000) } ;

                                                     // We have 6 checkmarks. if (all checkmarks are displayed) then play "40000"

                                  }

                                   

                                  Some events:

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

                                                  sym.play(21500);

                                                  sym.$("bar_circle").show();

                                                  sym.$("checkmark2").show();

                                                  sym.showEnd();

                                              });

                                              //Edge binding end

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

                                                  sym.play(25500);

                                                  sym.$("clock_circle").show();

                                                  sym.$("checkmark4").show();

                                                  sym.showEnd();

                                              });

                                              //Edge binding end

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

                                                  sym.play(29500);

                                                  sym.$("line_circle").show();

                                                  sym.$("checkmark5").show();

                                                  sym.showEnd();

                                              });

                                              //Edge binding end

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

                                                  sym.play(36500);

                                                  sym.$("stage_circle").show();

                                                  sym.$("checkmark6").show();

                                                  sym.showEnd();

                                              });