set movie clip visibility to false

[DEBBORRAH5E2F]

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

[DEBBORRAH5E2F]

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

[CodeDeveloperOM]

this.,,,,,,,,,.addEventListener("mouseover", fl_mouseover.bind(this));
function fl_mouseover(evt) {

  this.myCoins[i].visible=false;
}

[DEBBORRAH5E2F]

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.

[resdesign]

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;
    }
}

[DEBBORRAH5E2F]

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

[ClayUUID]

There are multiple things wrong with this.

for (i = 0; i < 6; i++){
     myCoins[i].addEventListener("mouseover", function () {
          $myCoins[i].visible=false;
     }
)}

• You never declare i as a variable, so it goes into the global scope. Polluting the global namespace is bad.
• You iterate to a hard-coded value instead of just using the length of your array. This will immediately break when you change the number of items in your array.
• I have no idea why you put a dollar sign in front of myCoins inside your event handler.
• You seem to think that referencing a variable inside a function declaration will somehow capture its current value. No. JavaScript does not work that way. ActionScript doesn't work that way either. All this will do when it runs is use the current value of i. There is a way to capture the current value of a variable inside a new function, but it's much more complex than needed for something like this.

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

[DEBBORRAH5E2F]

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

[JoãoCésar]

Hi.

Are you enabling mouse over events? Like this:

stage.enableMouseOver();

[JoãoCésar]

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:

https://bit.ly/3nKO4CJ

I hope this helps.

Regards,

JC

[DEBBORRAH5E2F]

thanks hadn't thought of using parent/child.

Will give that a go.

[DEBBORRAH5E2F]

yes - it all works until I put it into a for loop to try and set the eventListener from an array