-
1. Re: How to add a symbol event handler (on click or on mouseover) on the stage timeline
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
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
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
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
}
});