Adobe Community: Message List - How to add a symbol event handler (on click or on mouseover) on the stage timeline

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

forums_noreply@adobe.com — Fri, 17 Oct 2014 14:02:11 GMT

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

}

});

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

forums_noreply@adobe.com — Fri, 17 Oct 2014 13:21:43 GMT

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

}

});

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

forums_noreply@adobe.com — Fri, 17 Oct 2014 13:20:27 GMT

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

}

});

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

forums_noreply@adobe.com — Thu, 16 Oct 2014 23:22:39 GMT

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

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

forums_noreply@adobe.com — Thu, 16 Oct 2014 15:06:52 GMT

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?