9 Replies Latest reply on Feb 28, 2014 8:33 AM by resdesign

    Order of elements messing up interaction

    Machu Picchu Ltd

      hi guys,

       

      this is litrally diving me crazy!!

       

      i've got 6 symbols all have there own symbols and animation and sounds etc etc.

       

      my navigation works fine and brings then symbols on to th screen as you would expect, my problem is i can only interact and play with which ever symbol is at the top of my elements panel!!

       

      its driving me round the bend! all my symbols are the same size and in the same postion and basically all do the same thing (just a simple jukebox), but i dont know why the hell i cant get anything to work which is under the first symbol in the elements panel.

       

      i've tried grouping each symbol into their own group and rearranging the elements panel but i'm not having any luck.

       

      if anyone can help me out i would be so greatful!

       

       

      heres a screen grab

       

       

      Screen Shot 2014-02-28 at 12.53.59 (2).png

       

       

      and heres the app with the only working screen

       

      Screen Shot 2014-02-28 at 12.59.50 (2).png

        • 2. Re: Order of elements messing up interaction
          resdesign Adobe Community Professional & MVP

          You need to change the z-index each time something plays in order for each screen to be on the top when you activate them and then put the other one back.

          • 3. Re: Order of elements messing up interaction
            resdesign Adobe Community Professional & MVP

            There are several ways to do this. I am pretty simple and my code is not sophisticated.

            Here is how I would do it:

            First I put all my code in compositionReady so I have everyting in the same place.

             

            // insert code to be run when the composition is fully loaded here

            var screens = ['loveScreen','desiciveScreen','speakingScreen','readSreen','memoryScreen'];

             

            sym.$('loveScreen').click(function(){

                      for (i=0;i<screens.lenght;i++){

                      sym.$(screen[i]).css({'z-index':10});

                      }

                      sym.$(screen[0]).css({'z-index':100});

                      sym.getSymbol(screen[0]).play();

            });

            sym.$('desiciveScreen').click(function(){

                      for (i=0;i<screens.lenght;i++){

                      sym.$(screen[i]).css({'z-index':10});

                      }

                      sym.$(screen[1]).css({'z-index':100});

                      sym.getSymbol(screen[1]).play();

            });

            sym.$('speakingScreen').click(function(){

                      for (i=0;i<screens.lenght;i++){

                      sym.$(screen[i]).css({'z-index':10});

                      }

                      sym.$(screen[2]).css({'z-index':100});

                      sym.getSymbol(screen[2]).play();

            });

            sym.$('readSreen').click(function(){

                      for (i=0;i<screens.lenght;i++){

                      sym.$(screen[i]).css({'z-index':10});

                      }

                      sym.$(screen[3]).css({'z-index':100});

                      sym.getSymbol(screen[3]).play();

            });

            sym.$('memoryScreen').click(function(){

                      for (i=0;i<screens.lenght;i++){

                      sym.$(screen[i]).css({'z-index':10});

                      }

                      sym.$(screen[4]).css({'z-index':100});

                      sym.getSymbol(screen[4]).play();

            });

            1 person found this helpful
            • 4. Re: Order of elements messing up interaction
              resdesign Adobe Community Professional & MVP

              Here is an old sample where I did it slightly differently:

              https://app.box.com/s/nx58tk4dcysq1iphnlu5

              • 5. Re: Order of elements messing up interaction
                Machu Picchu Ltd Level 1

                Hi ResDesign,

                 

                Thanks for this.

                 

                I've tried it out and its not working, i'm thinking it may have to do with how set the nav up.

                 

                Here's what ive got an creation complete,

                 

                sym.getComposition().getStage().setVariable("current","");

                 

                 

                 

                 

                var screens = ['createScreen','loveScreen','desiciveScreen','speakingScreen','readScreen','memoryScreen '];

                 

                 

                sym.$('createScreen').click(function(){

                          for (i=0;i<screens.lenght;i++){

                          sym.$(screen[i]).css({'z-index':10});

                          }

                          sym.$(screen[0]).css({'z-index':100});

                          sym.getSymbol(screen[0]).play();

                });

                sym.$('loveScreen').click(function(){

                          for (i=0;i<screens.lenght;i++){

                          sym.$(screen[i]).css({'z-index':10});

                          }

                          sym.$(screen[1]).css({'z-index':100});

                          sym.getSymbol(screen[1]).play();

                });

                sym.$('desiciveScreen').click(function(){

                          for (i=0;i<screens.lenght;i++){

                          sym.$(screen[i]).css({'z-index':10});

                          }

                          sym.$(screen[2]).css({'z-index':100});

                          sym.getSymbol(screen[2]).play();

                });

                sym.$('speakingScreen').click(function(){

                          for (i=0;i<screens.lenght;i++){

                          sym.$(screen[i]).css({'z-index':10});

                          }

                          sym.$(screen[3]).css({'z-index':100});

                          sym.getSymbol(screen[3]).play();

                });

                sym.$('readScreen').click(function(){

                          for (i=0;i<screens.lenght;i++){

                          sym.$(screen[i]).css({'z-index':10});

                          }

                          sym.$(screen[4]).css({'z-index':100});

                          sym.getSymbol(screen[4]).play();

                });

                sym.$('memoryScreen').click(function(){

                          for (i=0;i<screens.lenght;i++){

                          sym.$(screen[i]).css({'z-index':10});

                          }

                          sym.$(screen[4]).css({'z-index':100});

                          sym.getSymbol(screen[4]).play();

                });

                 

                 

                and heres how i clear out the current screen in place of another (if that makes sense),

                 

                var current = sym.getComposition().getStage().getVariable("current");

                if (current != "") {

                   sym.getComposition().getStage().getSymbol(current).play("out");

                   sym.getComposition().getStage().getSymbol("readScreen").play("in");

                }

                else {

                   sym.getComposition().getStage().getSymbol("readScreen").play("shortIn");

                }

                   sym.getComposition().getStage().setVariable("current", "readScreen");

                 

                 

                 

                 

                cheers

                • 6. Re: Order of elements messing up interaction
                  resdesign Adobe Community Professional & MVP

                  I think this should work:

                   

                   

                   

                  var current = sym.getComposition().getStage().getVariable("current");

                  if (current != "") {

                     sym.getComposition().getStage().getSymbol(current).play("out");

                      sym.getComposition().getStage().$(current).css({'z-index':10});

                     sym.getComposition().getStage().getSymbol("readScreen").play("in");

                      sym.getComposition().getStage().$("readScreen").css({'z-index':100});

                  }

                  else {

                     sym.getComposition().getStage().getSymbol("readScreen").play("shortIn ");

                  }

                     sym.getComposition().getStage().setVariable("current", "readScreen");

                  1 person found this helpful
                  • 7. Re: Order of elements messing up interaction
                    Machu Picchu Ltd Level 1

                    no still not working only playing the top symbol for me so frustraing!

                    • 8. Re: Order of elements messing up interaction
                      Machu Picchu Ltd Level 1

                      no, hang on it just did it but now i cant select anyother nav buttons besides the one i'm on, i know it worked as the loveScreen is number 2 in order and it just played - so getting there

                      • 9. Re: Order of elements messing up interaction
                        resdesign Adobe Community Professional & MVP

                        You will need to reset the others' z-index somehow. If you do not get it just PM me a link to your files.

                        1 person found this helpful