Copy link to clipboard
Copied
I have been using Flash and CS3 for years and am now trying to get into Animate CC coding using HTML5 Canvas.
I have a simple movie clips dropping from the top of the screen and wanting to hide (visible=false) on mouse over.
Use the following code to loop through an array of objects set up as
var myCoins = [this.coin1, this.coin2 etc....]
for (i = 0; i < 6; i++){
myObj=myCoins[i];
myCoins[i].addEventListener("mouseover", function () {
$myCoins[i].style.visability=hidden;
}//end function
)//end listener
}//end loop
Copy link to clipboard
Copied
my bad the code i am using is as follows - please ignore my previous code as this was my mad testing and playing
for (i = 0; i < 6; i++){
myCoins[i].addEventListener("mouseover", function () {
$myCoins[i].visible=false;
}//end function
)}//end loop
Copy link to clipboard
Copied
this.,,,,,,,,,.addEventListener("mouseover", fl_mouseover.bind(this));
function fl_mouseover(evt) {
this.myCoins[i].visible=false;
}
Copy link to clipboard
Copied
Thank-you but this didn't work.
I tried the following code within my for loop instead of my code from above
this.myCoins.addEventListener("mouseover", fl_mouseover.bind(this));
function fl_mouseover(evt) {
this.myCoins[i].visible=false;
}
Error Message: Uncaught TypeError: Cannot read property 'addEventListener' of undefined
I am trying set the eventListener for mouseover on each object in my array.
I have been able work through the array to make the items appear in random positions and scroll down the screen.
Copy link to clipboard
Copied
Maybe use forEach() instead.
// code in frame 1 of main timeline
var root = this // make it global
[root.coin1, root.coin2 , root.coin3].forEach(useCoin);
function useCoin(coin) {
coin.addEventListener("mouseover", fl_mouseover.bind(this));
function fl_mouseover() {
coin.visible = false;
}
}
Copy link to clipboard
Copied
Sounds good in theory - and doesn't throw an automatic error but nothing happens all animation stops and when using does not go into fl_mouseover fuction.
--------------------------my code--------------
//var root=this;
//[root.coin1, root.coin2, root.coin3].forEach(useCoin);
//var myCoins = [root.coin1, root.coin2, root.coin3];
var myCoins = [this.coin1, this.coin2, this.coin3];
myCoins.forEach(useCoin);
function useCoin(coin) {
//alert('useCoin function'); //makes it here and alerts for each coin in array
coin.addEventListener("mouseover", fl_mouseover.bind(this));
function fl_mouseover() {
coin.visible = false;
alert('mouseover function'); //does not make it here
}}
-------------------------------
Have tried setting the array insead of using
:{
Have tried various combinations of concept replacing my for loop with foreach
Copy link to clipboard
Copied
There are multiple things wrong with this.
for (i = 0; i < 6; i++){
myCoins[i].addEventListener("mouseover", function () {
$myCoins[i].visible=false;
}
)}
This works:
for (var i = 0; i < myCoins.length; i++) {
myCoins[i].addEventListener("mouseover", function(evt) {
evt.currentTarget.visible = false;
});
};
Mouse event handlers are passed a mouse event object, which contains many useful values. One of them is a reference to the object that triggered the mouse event.
https://www.createjs.com/docs/easeljs/classes/MouseEvent.html
Copy link to clipboard
Copied
Firstly I have tryed declaring variable both as a local and global variable.
The $ was set when testing and when I put it into here forgot to update
Nope that doesn't work. Doesn't throw an error or change the visibility.
I am working in Adobe Animate HTML5 Canvas
I give up will set them individually
Copy link to clipboard
Copied
Hi.
Are you enabling mouse over events? Like this:
stage.enableMouseOver();
Copy link to clipboard
Copied
An alternative approach is to place all of your coins inside of the same container and then add the mouse over event listener to this container. For example:
this.coins.on("mouseover", function(e)
{
e.target.visible = false;
});
In this case, each coin must be a button symbol so that the Animate exporter automatically enables mouse over and roll over events for the default stage and also the mouseChildren property of a button instance is set to false by default which is necessary for the e.target property to reference the coin instance itself and not one of its children.
Download:
I hope this helps.
Regards,
JC
Copy link to clipboard
Copied
thanks hadn't thought of using parent/child.
Will give that a go.
Copy link to clipboard
Copied
yes - it all works until I put it into a for loop to try and set the eventListener from an array