4 Replies Latest reply on Oct 17, 2014 7:02 AM by QuadrantProductions

    How to add a symbol event handler (on click or on mouseover) on the stage timeline

    QuadrantProductions Level 1

      Is it possible to add an event handler on Animates main stage that controls a symbol?  So for example, if you had mulitple symbols on the stage, each with their own unique names and then on the main stage you wanted to add a list of event handlers specific to those symbols to affect a change when you interacted with that symbol.

       

      For example when you click the symbol a couple of things would happen like...

       

      1) On click (symbol name) the symbol animation starts

      2) On roll out (symbol name) the symbol animation stops

      3) The symbols background image is set on the main timeline.

       

      All of these can easily be done on the symbol itself, but can those be done from the main timeline (the stage).  does anyone know a solution?

        • 1. Re: How to add a symbol event handler (on click or on mouseover) on the stage timeline
          heathrowe Most Valuable Participant

          Yes

          1. Add jquery min CDN (https://code.jquery.com/jquery-2.1.1.min.js) to the Scripts library (from the 'Add js from URL' option.

          2. In compositionReady event handler try something like this - the 'Many Event Handlers section' located here: http://learn.jquery.com/events/handling-events/

           

           

          //Sample Code

           

               element = sym.$("btn");

           

               element.on({

                   mouseenter: function() {

                       // Do something

                       alert( "hovered over a div" );

                   },

                   mouseleave: function() {

                       // Do something

                       alert( "mouse left a div" );

                   },

                   click: function() {

                       // Do something

                       alert( "clicked on a div" );

                   }

               });

          // end sample code

           

          One way to do it among many. In the above use case pay particular attention to the comma separator between 'chained' events.

           

          hth

          Darrell

          • 2. Re: How to add a symbol event handler (on click or on mouseover) on the stage timeline
            QuadrantProductions Level 1

            So this is great!  Same result in less code.  Thanks to Joel.  But I couldn't figure out what he meant by "Jquery light provided by Edge 5.0"  I did a search but didn't find any clear instructions on how to load it.  Your solution worked with the Jquery 2.1.1 lib loaded in the scripts as per the earlier recommendation in this post.

             

                  //Sample Code #1:

             

                 element = sym.$("portfolioHT2");

                 element.bind({

                     mouseenter: function() { sym.getSymbol("portfolioTH2").play();  // Do something

                     },

                     mouseleave: function() { sym.getSymbol("portfolioTH2").playReverse(); // Do something

                     },

                     click: function() { // Do something

                    }

                 });

            • 3. Re: How to add a symbol event handler (on click or on mouseover) on the stage timeline
              QuadrantProductions Level 1

              So this is great!  Same result in less code.  Thanks Joel!  But I couldn't figure out what you meant by "Jquery light provided by Edge 5.0"  I did a search but didn't find any clear instructions on how to load it.  Your solution worked with the Jquery 2.1.1 lib loaded in the scripts as per the earlier recommendation in this post.

               

                    //Sample Code #1:

               

                   element = sym.$("portfolioTH2"); // correct spelling of the symbol here.

                   element.bind({

                       mouseenter: function() { sym.getSymbol("portfolioTH2").play();  // Do something

                       },

                       mouseleave: function() { sym.getSymbol("portfolioTH2").playReverse(); // Do something

                       },

                       click: function() { // Do something

                      }

                   });

              • 4. Re: How to add a symbol event handler (on click or on mouseover) on the stage timeline
                QuadrantProductions Level 1

                So here's the finished product.  I'll Upload a file for anyone who is new at this (like me!)

                 

                // This is the original code block provided by heathrowe

                 

                  /*element = sym.$("portfolioTH1");

                     element.on({

                 

                         mouseenter: function() {

                             // Do something

                             //alert( "hovered over a div" ) !!! This worked ;//

                                sym.getSymbol("portfolioTH1").play();

                                },

                 

                         mouseleave: function() {

                             // Do something

                                sym.getSymbol("portfolioTH1").playReverse();

                         },

                         click: function() {

                             // Do something

                             alert( "clicked on a div" );

                         }

                     });

                     */

                // Arrived at this solution with help from heathrowe and joel_pau on adobe communities. see post

                // Step 1. Load jquery from here (https://code.jquery.com/jquery-2.1.1.min.js) via scripts pane

                // Step 2. create variables setting up the portfolio thumbs here.

                 

                var myp1 = sym.$("portfolioTH1");

                var myp2 = sym.$("portfolioTH2");

                var myp3 = sym.$("portfolioTH3");

                var myp4 = sym.$("portfolioTH4");

                var myp5 = sym.$("portfolioTH5");

                 

                // Step 3. call background images to stage symbols.  Note symbol is one symbol repeated with unique id's

                 

                     sym.$(myp1).css({ "background": "url(images/tiles/blue.jpg) repeat ","opacity" : "0.80"}); //check file directory locations

                     sym.$(myp2).css({ "background": "url(images/tiles/charcoal.jpg) repeat ","opacity" : "0.80"});

                     sym.$(myp3).css({ "background": "url(images/tiles/chemical-green.jpg) repeat ","opacity" : "0.80"});

                     sym.$(myp4).css({ "background": "url(images/tiles/grey.jpg) repeat ","opacity" : "0.80"});

                     sym.$(myp5).css({ "background": "url(images/tiles/lightblue-dd.jpg) repeat ","opacity" : "0.80"});

                    

                    

                // Step 4 set up the mouse events for portfolio buttons.  There must be a better way to iterate these.  Somehow with a variable loop up top?

                      // This method was provided by joel_pau I added the variable names instead of individual symbol syntax.

                     

                      //======================================================================================= ==========//

                 

                element = myp1;  //note if you don't call a variable but direct symbol add quotes like this sym.$("symbolname");

                     element.bind({

                         mouseenter: function() { sym.getSymbol(myp1).play();  // Do something

                         },

                         mouseleave: function() { sym.getSymbol(myp1).playReverse(); // Do something

                         },

                         click: function() { // Do something

                        }

                     });

                //======================================================================================== =========//

                element = myp2; //note if you don't call a variable but direct symbol add quotes like this sym.$("symbolname");

                     element.bind({

                         mouseenter: function() { sym.getSymbol("portfolioTH2").play();  // Do something

                         },

                         mouseleave: function() { sym.getSymbol("portfolioTH2").playReverse(); // Do something

                         },

                         click: function() { // Do something

                        }

                     });

                //======================================================================================== =========//

                element = myp3; //note if you don't call a variable but direct symbol add quotes like this sym.$("symbolname");

                     element.bind({

                         mouseenter: function() { sym.getSymbol(myp3).play();  // Do something

                         },

                         mouseleave: function() { sym.getSymbol(myp3).playReverse(); // Do something

                         },

                         click: function() { // Do something

                        }

                     });

                //======================================================================================== =========//

                element = myp4; //note if you don't call a variable but direct symbol add quotes like this sym.$("symbolname");

                     element.bind({

                         mouseenter: function() { sym.getSymbol(myp4).play();  // Do something

                         },

                         mouseleave: function() { sym.getSymbol(myp4).playReverse(); // Do something

                         },

                         click: function() { // Do something

                        }

                     });

                //======================================================================================== =========//

                element = myp5; //note if you don't call a variable but direct symbol add quotes like this sym.$("symbolname");

                     element.bind({

                         mouseenter: function() { sym.getSymbol(myp5).play();  // Do something

                         },

                         mouseleave: function() { sym.getSymbol(myp5).playReverse(); // Do something

                         },

                         click: function() { // Do something

                        }

                     });

                1 person found this helpful