Adobe Animate Canvas (HTML5) Show-hide object with one button.

[Liereman]

I use a button (name = Knop) to show an object (name = Afbeelding).

You can see the script below:

this.Afbeelding.visible = false;

this.Knop.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
{

  this.Afbeelding.visible = true;

}

}

How can I use the same button (Knop) to hide the object (Afbeelding) after showing it?

[JoãoCésar · Accepted solution]

Hi.

Invert the visibility of a display object using the logical NOT ( ! ) operator. Like this:

function fl_MouseClickHandler()
{
    this.Afbeelding.visible = !this.Afbeelding.visible;
}
this.Afbeelding.visible = false;
this.Knop.addEventListener("click", fl_MouseClickHandler.bind(this));

I hope this helps.

Regards,

Jc

[Liereman]

Hi JoãoCésar,

The script you mentioned just works perfect.

Many thanks!!!

[JoãoCésar]

You're welcome!

[Liereman]

If I may ask another question (as I am a HTML5 newby..).

If I have another button (Knop2) on the stage and another object (Afbeelding2), what script should/could I use?

I tried:

function fl_MouseClickHandler()
{
    this.Afbeelding.visible = !this.Afbeelding.visible;
this.Afbeelding2.visible = !this.Afbeelding.visible;
}

this.Afbeelding.visible = false;
this.Knop.addEventListener("click", fl_MouseClickHandler.bind(this));
this.Afbeelding2.visible = false;
this.Knop2.addEventListener("click", fl_MouseClickHandler.bind(this));

But that obviously doesn't work .

And is it also possible to hide 'Afbeelding' when pressing button 'Knop2'?

[Liereman]

OK, I managed to get 2 buttons on the same stage working, see:

function fl_MouseClickHandler()
{
    this.Afbeelding1.visible = !this.Afbeelding1.visible;
}

this.Afbeelding1.visible = false;
this.Knop1.addEventListener("click", fl_MouseClickHandler.bind(this));

function f2_MouseClickHandler()
{
    this.Afbeelding2 = !this.Afbeelding2.visible;
}

this.Afbeelding2.visible = false;
this.Knop2.addEventListener("click", f2_MouseClickHandler.bind(this));

But...........How can  I hide 'Afbeelding1' when I click on 'Knop2'?

So when I click on 'knop2' 'Afbeelding1' will hide and 'Afbeelding2' will show?

[JoãoCésar]

Hi.

Please check if this is what you want:

function fl_MouseClickHandler(e)
{
    var button = e.target;
    var target1;
    var target2;
    if (button == this.Knop1)
    {
          target1 = this.Afbeelding1;
          target2 = this.Afbeelding2;
    }
    else
    {
          target1 = this.Afbeelding2;
          target2 = this.Afbeelding1;
    }
    target1.visible = !target1.visible;
    target2.visible = !target1.visible;
}
this.Afbeelding1.visible = false;
this.Knop1.addEventListener("click", fl_MouseClickHandler.bind(this));
this.Knop2.addEventListener("click", fl_MouseClickHandler.bind(this));

Regards,

JC

[Liereman]

Hi JoãoCésar,

The script you suggested is almost perfect .

The only thing is that at the start of the animation you should only see the buttons 'Knop1' and 'Knop2'.

Now at the start of the animation also see 'Afbeelding2'.

'Afbeelding2' should be hidden untill I hit 'Knop2'.

[Liereman]

Another thing is that if you hit 'Knop1' the first time 'Afbeelding1' shows up, but when you hit 'Knop1' again 'Afbeelding1' hides, but 'Afbeelding2' shows up.

'Afbeelding1' should only show up when using 'Knop1'.

'Afbeelding2' should only show up when using 'Knop2'.

The main goal is that every time you use a button (f.e. 'Knop1' or 'Knop2') the last object on the screen should disappear, and the new one is shown.

Buttons should be visible all the time.

[Liereman]

OK, I managed to hide both 'Afbeelding1' and 'Afbeelding2' at the start of the animation (thanks to your example).

Now the only thing that should be realised/changed is the button click action:

When click on 'Knop1' 'Afbeelding1' should appear.

When click again on 'Knop1' 'Afbeelding1' should dissapear.

If 'Afbeelding2' was allready shown on the screen 'Afbeelding 2' should dissapear when you click on 'Knop1'.

'Afbeelding2' should only appear again when I click 'Knop2' again.

Button 'Knop2' should have the same behaviour as mentioned above.

function fl_MouseClickHandler(e)
{
    var button = e.target;
    var target1;
    var target2;

    if (button == this.Knop1)
    {
          target1 = this.Afbeelding1;
          target2 = this.Afbeelding2;
    }
    else
    {
          target1 = this.Afbeelding2;
          target2 = this.Afbeelding1;
    }

    target1.visible = !target1.visible;
    target2.visible = !target1.visible;
}

this.Afbeelding1.visible = false;
this.Afbeelding2.visible = false;

this.Knop1.addEventListener("click", fl_MouseClickHandler.bind(this));
this.Knop2.addEventListener("click", fl_MouseClickHandler.bind(this));