Skip to main content
jonh15311545
jonh15311545
Known Participant
November 7, 2020
Question

Beginner function help

What is wrong with this code? (HTML5 canvas) The first way works, but the second way doesn't. 

var _this = this;
stage.enableMouseOver(3);
_this.icon_1.on('mouseover', function(){
	_this.icon_1.gotoAndPlay('over');
	_this.icon_1.cursor = "pointer"; 
});

_this.icon_1.on('mouseout', function(){
	_this.icon_1.gotoAndPlay('out');
});

I need to do this for over 10 icons so I wanted to make it more module so I tried to convert it like this but it does nothing - 

var _this = this;
stage.enableMouseOver(3);
_this.icon_1.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
    gotoAndPlay('over');
	cursor = "pointer"; 
}

_this.icon_1.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOutHandler()
{
    gotoAndPlay('out');
}

 

This topic is closed to new replies. Start a new post to keep the conversation going.

26 replies

kglad
Community Expert
kgladCommunity Expert
Community Expert
November 7, 2020

i don't seen anything modular about your attempted change, but the problem is there's a loss of "scope" in your functions.

 

use:

 

stage.enableMouseOver(3);

for(var i = 1;i<11;i++){  // icon_1, icon_2 etc

this["icon_"+i].addEventListener("mouseover", overF.bind(this));

this["icon_"+i].addEventListener("mouseout", outF.bind(this));

}

function overF(e){

e.target.gotoAndPlay("over");

this.cursor = "pointer";

}

function outF(e){

e.target.gotoAndPlay("out");

//this.cursor = ?

}

Translate
jonh15311545
jonh15311545Author
Known Participant
November 7, 2020

Tried this and just shows a blank white pag when clearing publish cache and previewing.

Translate
kglad
Community Expert
kgladCommunity Expert
Community Expert
November 7, 2020

do you have movieclips named icon_1, icon_2, ... icon_10 on stage when that code executes?

Translate
jonh15311545
jonh15311545Author
Known Participant
November 7, 2020

Also tried this - 

var _this = this;
stage.enableMouseOver(3);
_this.icon_1.addEventListener("mouseover", fl_MouseOverHandler.bind(this));
function fl_MouseOverHandler()
{
    gotoAndPlay('over');
	cursor = "pointer"; 
}

_this.icon_1.addEventListener("mouseout", fl_MouseOutHandler.bind(this));
function fl_MouseOutHandler()
{
    gotoAndPlay('out');
}
Translate
ClayUUID
Legend
November 7, 2020

First, when something isn't working in a Canvas document, always check the browser developer console for errors.

 

In your case you'll be seeing errors because you're telling nothing to play. So in a sense the code is working perfectly.

 

Second, why are you rolling your own mouseover/mouseout effects? Button symbols have that all built in.

Translate
jonh15311545
jonh15311545Author
Known Participant
November 7, 2020

Using movie clips, not buttons. I did this becuase I wanted an animation on over and out.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices