15 Replies Latest reply on Jun 11, 2013 6:29 AM by MichaelRix

    How to reuse 1 button for multiple selections?

    MichaelRix Level 1

      simpleScreenShot.JPG

       

      I have a simple menu that I am trying to figure out how to reuse these 3 buttons to move the black bar up and down plus use the enter button to be able to select the highlighted item. There is actually 10 items in the menu but you must scroll down to to show them. The Back item has to stay on the screen. As you single click down the text should change as if the your scrolling down. When you hit enter it should drive to another screen.

       

      I'm not to sure on arrays and indexing the selected item. I think is the best way just not sure how to implement that.

      My first attempt I created like 10 up buttons and 10 down buttons and 10 enter buttons gets confusing. Plus it gets conflicting when you scroll down then back up 1 the enter button usually is triggering the wrong one when your toggling hide/show....

       

      I wiped the slate clean and starting over any help would be great. This is the basic starting point so far.

      simpleListFile

        • 1. Re: How to reuse 1 button for multiple selections?
          resdesign Adobe Community Professional & MVP

          I will post your corrected file shortly. Basically you need a symbold and then increment on click events.

          • 2. Re: How to reuse 1 button for multiple selections?
            resdesign Adobe Community Professional & MVP

            Here is a possible way but you may come up with something else.

             

            https://www.box.com/s/zs8xl01n5l1xb75dkoo8

            • 3. Re: How to reuse 1 button for multiple selections?
              resdesign Adobe Community Professional & MVP

              Oops - A little error in the code:

              replacein compostion ready:

              var myLabels = ['p1','p2', 'p3', 'p4', 'p5', 'p6', 'p7', 'p8', 'p9', 'p10'];

              i=0;

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

                        i++;

                        sym.getSymbol('labels').play(myLabels[i]);

                        if (i>9){

                        i=0;

                        }

               

               

              });

               

               

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

                        i--;

                        sym.getSymbol('labels').play(myLabels[i]);

                        if (i<0){

                        i=0;

                        }

               

               

              });

              • 4. Re: How to reuse 1 button for multiple selections?
                MichaelRix Level 1

                Oooo that's purty..

                 

                Great Place to start thank you so much!

                This looks a little easier (cleaner) then my aproach by far!! It might just work..

                 

                I will come back and post the final project when it's done.

                • 5. Re: How to reuse 1 button for multiple selections?
                  resdesign Adobe Community Professional & MVP

                  hey Here is the code for the enter button:

                   

                   

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

                   

                   

                            if (i==0){

                   

                   

                  window.open("http://www.adobe.com", "_self");

                   

                   

                            }

                            if (i==1){

                  window.open("http://www.adobe.com", "_self");

                   

                   

                            }

                            if (i==2){

                   

                   

                            }

                  });

                   

                  you can also have the same open url on the click event of each label.

                   

                  I will update the file shotly.

                  • 7. Re: How to reuse 1 button for multiple selections?
                    MichaelRix Level 1

                    I really appreciate this..

                     

                    I do have a small questions 2 actually to understand this better?

                     

                    1. How is it that only the 5 labels are visible? with out hide/show

                    2. Can I start on p5 and still have it increment? Or does the mouse clicks assign that i to the variable?

                    • 8. Re: How to reuse 1 button for multiple selections?
                      resdesign Adobe Community Professional & MVP

                      The labels are in the square div and the square div has overflow hidden.

                      If you want to start at p5, you could change the order in the array, I think.

                      • 9. Re: How to reuse 1 button for multiple selections?
                        resdesign Adobe Community Professional & MVP

                        Change the code to:

                        var myLabels = ['p5', 'p6', 'p7', 'p8', 'p9', 'p10','p1','p2', 'p3', 'p4'];

                                  sym.getSymbol('labels').play(myLabels[0]);

                        i=0;

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

                                  i++;

                                  sym.getSymbol('labels').play(myLabels[i]);

                                  if (i>9){

                                  i=0;

                                  }

                         

                         

                        });

                         

                         

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

                                  i--;

                                  sym.getSymbol('labels').play(myLabels[i]);

                                  if (i<0){

                                  i=0;

                                  }

                         

                         

                        });

                         

                         

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

                         

                         

                                  if (i==0){

                         

                         

                        window.open("http://www.adobe.com", "_self");

                         

                         

                                  }

                                  if (i==1){

                        window.open("http://www.google.com", "_self");

                         

                         

                                  }

                                  if (i==2){

                        window.open("http://www.bing.com", "_self");

                                  }

                        });

                        • 10. Re: How to reuse 1 button for multiple selections?
                          resdesign Adobe Community Professional & MVP

                          Oops. I think it is kind of brokn now. I will try to fix this shortly.

                          • 11. Re: How to reuse 1 button for multiple selections?
                            MichaelRix Level 1

                            Haha

                            I was just thinking it's acting like mine was earlier...but at least your break still looked cleaner then my mess.

                            • 12. Re: How to reuse 1 button for multiple selections?
                              resdesign Adobe Community Professional & MVP

                              Try this:

                              var myLabels = ['p1','p2', 'p3', 'p4','p5', 'p6', 'p7', 'p8', 'p9', 'p10',];

                              sym.getSymbol('labels').stop(myLabels[4]);

                              i=3;

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

                                        i++;

                               

                               

                                        if (i>9){

                                        i=0;

                                        }

                                        sym.getSymbol('labels').play(myLabels[i]);

                              });

                               

                               

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

                                        i--;

                                        if (i<0){

                                        i=0;

                                        }

                                        sym.getSymbol('labels').play(myLabels[i]);

                              });

                              • 13. Re: How to reuse 1 button for multiple selections?
                                MichaelRix Level 1

                                HeHe brilliant...changed i=3 to i=4; works like a charm! 3 skipped one going up.

                                 

                                 

                                Thank you again,

                                • 14. Re: How to reuse 1 button for multiple selections?
                                  resdesign Adobe Community Professional & MVP

                                  Glad I could help a little.

                                  • 15. Re: How to reuse 1 button for multiple selections?
                                    MichaelRix Level 1

                                    OK I have updated it a lil as to the way I am driving this to repsond. The bar is supposed to move and what it rest on indicates the selection. I was playing with it for a bit and have 2 things I'm trying to wrap my head around....

                                     

                                    1.) The label that says Back should remain stationary always at the bottom of the display. So only four labels should scroll up and down and display above the Back Label.

                                     

                                    My Thoughts were to do this:

                                          A.) Make it apart of the display to hide the Label group

                                              1a.) Problem with that I don't think the increment will work by detaching it from the group.

                                              2a.) The other issue is the bar will move up when <p4 [according to the timeline - I might be           confusing myself with how I am laying it out] but when you drill down and then come up the black bar should move up to be able to select the current four labels on y.....make sense? Then when you scroll back down the Back button should highlight and scroll the labels.

                                                        hmmm this is the tricky one for me which is why I got lost and used multiple hide/show buttons it kinda worked for the look but back end was rather difficult to select the label to go to the next scene.

                                     

                                         B.) Instead of the enter button opening a new window good it grab another Stage or Symbol.

                                              example: sym.getComposition().getStage().getSymbol("example");

                                              Basically I have several of the menus that you have greatly helped me with going a better direction to implement. It starts with a main one then drives into several sub menus. The labels either drive deeper to another Menu or when selected it goes back to the prior Menu.

                                     

                                    Main1- SubLabel

                                                SubLabel

                                    Main2- SubLabel

                                                SubLabel

                                    Main3- SubLabel

                                                SubLabel

                                    Main4- SubMenu1-SubMenuLabel

                                                                  SubMenuLabel

                                                       

                                                SubMenu2-SubMenuLabel

                                                                  SubMenuLabel

                                                SubMenu3-SubMenuLabel

                                                                  SubMenuLabel

                                                SubMenu4-SubMenuLabel

                                                                  SubMenuLabel

                                                SubMenu5-SubMenuLabel

                                                                  SubMenuLabel

                                                SubMenu6-SubMenuLabel

                                                                  SubMenuLabel

                                                SubMenu7-SubMenuLabel

                                                                  SubMenuLabel

                                                SubMenu8-SubMenuLabel

                                                                  SubMenuLabel

                                                Back- Goes Back to Main Menu

                                     

                                    Back- Goes to a default display

                                     

                                    I tried to make to Symbols (Menu's) that when you select the label it shows the next Symbol(Menu) didn't work to good for me.

                                     

                                     

                                    If I lost you sorry that is were I'm driving this project...you have been great providing info it has helped..The more I think about it's like a mini webSite within a website....I just have to change the graphic layout to match the display I'm working with that is animated.

                                     

                                    Updated File

                                     

                                     

                                    Thank you again so much for your help it's a learning curve for me and much appreciated any direction and help I get.