set movie clip visibility to false

New Here ,
Apr 26, 2021 Apr 26, 2021

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

Views

198

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 26, 2021 Apr 26, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 27, 2021 Apr 27, 2021

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 28, 2021 Apr 28, 2021

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 29, 2021 Apr 29, 2021

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





 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 29, 2021 Apr 29, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 29, 2021 Apr 29, 2021

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

 

  • 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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2021 May 03, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

Hi.

 

Are you enabling mouse over events? Like this:

stage.enableMouseOver();

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2021 May 03, 2021

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.

 

image.png

 

Download:

https://bit.ly/3nKO4CJ

 

I hope this helps.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

LATEST

thanks hadn't thought of using parent/child.

 

Will give that a go.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2021 May 03, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines