15 Replies Latest reply on Oct 17, 2013 11:06 AM by kimberlywall

    Edge Animate Button help please

    kimberlywall

      HI there, I have a question about buttons, trying to port my apps to Edge Animate from Flash.

      I have a non-linear application where I would like Button A on label 1 to onClick navigate to label X.  On label 2, Button A navigates to label Y, etc.

       

      The app is non-linear and if I use sym.stop("label1"); code for the button, I cannot change it in a different place in the timeline without bringing in another instance of the button.  In Flash, I just created keyframes for the same button, and on different keyframes the onClick code navigates to different labels.

       

      So in essence I need code for the button or in the Actions layer to say "when button 1 is on label X, onClick navigates to Label 2."

      Seems easy (?)... can anyone out there assist? 

       

      Many thanks,

      Kimberly

        • 1. Re: Edge Animate Button help please
          resdesign Adobe Community Professional & MVP

          instead  make an array of your label names and use them as needed.

          • 2. Re: Edge Animate Button help please
            resdesign Adobe Community Professional & MVP

            Another solution is to not use the main timeline but symbols that you load when needed. The advantage is that you can play any part of a symbol'  timeline at any desired time or label.

             

            For playing the main timeline, I have a sample on how to use next button and array here:

             

            http://www.edgehero.com/articles/interactivity

             

            This could be applied to a symbol too.

            • 3. Re: Edge Animate Button help please
              kimberlywall Level 1

              Thank for the reply, resdesign!  Ok, so I don't know what an "array" is.  :-)

               

              The project is a prototype for a television app.  It has a remote control in the corner with separate graphic buttons for up,down,left, and right arrow keys (like channel up, down, etc.).  Each time an arrow graphic is clicked, it moves to a different label in the timeline.  So you can see that each arrow behaves differently depending where one is in the timeline.

               

              With your second solution, are you saying embed the onClick code in each button, then bring them in when [in the timeline] you need them?  That would be many buttons!

               

              Any assistance or thoughts would be awesome!

               

              Kimberly

              • 4. Re: Edge Animate Button help please
                resdesign Adobe Community Professional & MVP

                No. If you use button state then you can actually track the clicks.

                Did you check the samples?

                 

                An array is a container for names like:

                 

                var animalName = ['cat','dog','elephant','mouse','elk'];

                 

                the first element is 0, the second 1, etc...

                 

                if you want to use the first one for example:

                alert(animalName[0];

                 

                you will get the answer: cat

                 

                So for labels, if you have 25 labels for examples you can enter the label names in the array.

                 

                var myLabels = ['label1Name','label2Name','label3Name',..... to 25 names];

                 

                Then you can set up your buttons to play these when needed.

                 

                I will try and post a sample soon.

                 

                Hope this makes sense.

                1 person found this helpful
                • 5. Re: Edge Animate Button help please
                  kimberlywall Level 1

                  Downloading the samples now.  A Sample from you would be great.

                  Many thanks!

                  • 6. Re: Edge Animate Button help please
                    pointseven

                    I just looked at your sample for the 1. on that website for the array thats conrolled by buttons. It looks like exactly what i was looking for. I havent tried it yet. If I want to apply it a deeply nested symbol where can I paste the code in the symbol itself? or can I only put this on the stage's CompositionReady?

                    • 7. Re: Edge Animate Button help please
                      resdesign Adobe Community Professional & MVP

                      You can get samples on my blog at edgeHero.com

                      http://www.edgehero.com/articles/scope

                      • 8. Re: Edge Animate Button help please
                        resdesign Adobe Community Professional & MVP

                        Wrong tutorial. Check out the one with the buttons on edgehero.com here: http://www.edgehero.com/articles/interactivity

                         

                        I prefer to put it in composition ready. Actually the first tutorial mentioned will help you understand how to target symbols. Let me know if you need more help.

                        • 9. Re: Edge Animate Button help please
                          pointseven Level 1

                          Okay i got it working in the symbol I put the code into CreationComplete of my symbol. Now there are 2 problems:

                          1. I tried getting the playreverse when you click on the backbutton to work like this: but it doesnt seem to work

                           

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

                               i--;

                               if (i<0){

                                                        i=0;

                               } else{

                                         sym.playReverse(myInfo[i+1].myLabel);

                           

                                              }

                          });

                           

                          2. I have thumbnails outside the symbol that are used as buttons to taget the labels inside. When I click on a thumbnail it will open up the slideshow with image ex. "f9" (label). The problem is that the array code doesnt know its there now and when I try to use the previous and next buttons it goes back to the beginning ("f1")

                          This is the code I use on one of the thumbnails outside the symbol:

                           

                           

                          sym.getComposition().getStage().getSymbol("detail_plx").getSymbol("detail").getSymbol("boa rdsCont").getSymbol("DriveinfoCont").play("f12");

                           

                          I assume I would have to add something that tells the symbol which array to be on.

                          like:

                           

                          sym.getComposition().getStage().getSymbol("detail_plx").getSymbol("detail").getSymbol("boa rdsCont").getSymbol("DriveinfoCont").play(myInfo[11].myLabel);

                          but that doesnt work.

                           

                          ---

                           

                           

                          This is my code in the CompositionReady for referance and below screenshots:

                           

                          var myInfo = [

                          {

                          'myLabel':'f1',

                          //'image':'images/cityhall.jpg',

                          //'name':'1'

                          },

                          {

                          'myLabel':'f2',

                          },

                          {

                          'myLabel':'f3',

                          },

                          {

                          'myLabel':'f4',

                          },

                          {

                          'myLabel':'f5',

                          },

                          {

                          'myLabel':'f6',

                          },

                          {

                          'myLabel':'f7',

                          },

                          {

                          'myLabel':'f8',

                          },

                          {

                          'myLabel':'f9',

                          },

                          {

                          'myLabel':'f10',

                          },

                          {

                          'myLabel':'f11',

                          },

                          {

                          'myLabel':'f12',

                          },

                          {

                          'myLabel':'f13',

                          },

                          {

                          'myLabel':'f14',

                          },

                          {

                          'myLabel':'f15',

                          },

                          {

                          'myLabel':'f16',

                          },

                          {

                          'myLabel':'f17',

                          },

                          {

                          'myLabel':'f18',

                          },

                          {

                          'myLabel':'f19',

                          },

                          {

                          'myLabel':'f20',

                          },

                          ];

                           

                          i=0;

                           

                          //sym.$('container').css({"background-image": "url('"+myInfo[i].image+"')", 'background-repeat':'no-repeat'});

                          //sym.$('myText').html(myInfo[i].name);

                           

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

                                              i++;

                           

                               if (i<myInfo.length){    

                           

                                              sym.play(myInfo[i].myLabel);

                           

                                              //sym.$('myText').html(myInfo[i].name);

                           

                                              //sym.$('container').css({"background-image": "url('"+myInfo[i].image+"')", 'background-repeat':'no-repeat'});

                               } else {

                           

                                              i=myInfo.length-1;

                               }

                           

                           

                          });

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

                               i--;

                           

                               if (i<0){

                           

                                                        i=0;

                               } else{

                           

                                         sym.playReverse(myInfo[i].myLabel);

                                              //sym.$('myText').html(myInfo[i].name); 

                                              //sym.$('container').css({"background-image": "url('"+myInfo[i].image+"')", 'background-repeat':'no-repeat'});

                                              }

                          });

                           

                           

                          Screenshot of my thumbnails:

                          Screen Shot 2013-10-10 at 2.31.24. Past Midday.jpg

                          Screenshot of the image gallery symbol:

                          Screen Shot 2013-10-09 at 9.03.21. Past Midday.jpg

                          1 person found this helpful
                          • 10. Re: Edge Animate Button help please
                            pointseven Level 1

                            ive tried the thumbnail code on the main timeline and it doesnt work either

                            • 11. Re: Edge Animate Button help please
                              resdesign Adobe Community Professional & MVP

                              You can PM a link to your files and I will look at it. You probably can use the same array for your labels and your thumbnails. No need to repeat.

                              • 12. Re: Edge Animate Button help please
                                kimberlywall Level 1

                                Ok, I simplified your file (I am a beginner) and the timeline a little.  "stop1" is now the first frame.  Upon launching, one must click the Next button twice for it to go to stop2, not sure why.  It navigates to stop3 smoothly, then to stop1 like a charm.  Then it seems to hesitate after that but does go to stop2, again not sure why. 

                                 

                                My second question is I created a btn_back also in 'container'.  I would like to add the code for btn_back to playReverse and when it gets to 'stop1' go to stop3.  How might I do that?

                                 

                                Thank you in advance, you are an EdgeHero.  :-)   I have the following code in the actions of the Stage:

                                 

                                 

                                // create a variable for the symbol named container.

                                var container = sym.getSymbol("container");

                                //************** Demo for symbol inside another symbol playing the Stage timeline **************

                                //                            and playing its own timeline on mouse events                     *

                                //                             by  Marie Goodwyn for EdgeHero                                  *

                                //**************************************************************************************** ******

                                // access the button inside symbol container and play the timeline of the Stage

                                var myLabels = ['stop1','stop2','stop3'];

                                // initialize i for button next

                                i=-1;

                                // the button event could be added in the action of the button instead.

                                // but any action can be in compositionReady.

                                container.$('btn').mousedown(function(){

                                    i++;

                                    if(i>myLabels.length){

                                    i=-1;

                                    }

                                    // access the Stage from the symbol with sym.getComposition().getStage()

                                    // and play the Stage timeline.

                                    sym.getComposition().getStage().play(myLabels[i]);

                                    // access the btn inside container to play its own timeline on mousedown

                                    // note: the animation timeline is played from the stage timeline

                                    sym.getSymbol('container').getSymbol('btn').play('down');

                                });

                                 

                                container.$('btn').mouseup(function(){

                                    sym.getSymbol('container').getSymbol('btn').play('up');

                                });

                                 

                                container.$('btn').mouseout(function(){

                                    sym.getSymbol('container').getSymbol('btn').stop('inactive');

                                });

                                • 13. Re: Edge Animate Button help please
                                  resdesign Adobe Community Professional & MVP

                                  You probably have an extra stop(). Unckeck autoplay so you can delete the first stop() otherwise it is redundant.

                                   

                                  Kim, you can use the same code with i--;

                                  • 14. Re: Edge Animate Button help please
                                    resdesign Adobe Community Professional & MVP

                                    Pont seven, Glad I could get this work with the file your PMed to me. I used a variable to check where you are so that you can click either way and be at the right place.

                                    • 15. Re: Edge Animate Button help please
                                      kimberlywall Level 1

                                      Will do.  Many thanks.