Highlighted

Glow Effect while Mouseover

Community Beginner ,
Sep 17, 2019

Copy link to clipboard

Copied

Hello,

I am struggling with creating an effect on an object. It is supposed to glow while the mouse is hovering over it. Below is the code I was able to produce, but it is not properly working and I am running out of ideas (as well as google results to this issue) what the remedy to the problem is.

 

stage.enableMouseOver(30);
var _this = this;
this.bug.addEventListener('mouseover', function(){
	var glow = new createjs.Shadow("rgba(255,0,0,1)", 0, 10, 20);
	_this.bug.shadow = [glow];
	_this.bug.cache(0,0,222,248);
	
});
this.bug.addEventListener('mouseout', function(){
	var glow = new createjs.Shadow("rgba(0,0,0,1)", 1, 0, 1);
	_this.bug.shadow = [glow];
	_this.bug.cache(0,0,222,248);
});

 

 Thank you for any help in advance.

Hi, 

You need to use the event's target in the event handler functions:

 

 

stage.enableMouseOver(30);


this.circle.addEventListener('mouseover', function( obj ){
	obj.target.shadow = new createjs.Shadow("rgba(255,0,0,1)", 0, 0, 20 );
});
this.circle.addEventListener('mouseout', function( obj ){
	obj.target.shadow = null;
});

 

 

 

Here is a working example:

https://cloud.vectorworks.net/links/11e9da0bffa1b992905d0e7947a8ce60/

 

 

TOPICS
Code

Views

477

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

Glow Effect while Mouseover

Community Beginner ,
Sep 17, 2019

Copy link to clipboard

Copied

Hello,

I am struggling with creating an effect on an object. It is supposed to glow while the mouse is hovering over it. Below is the code I was able to produce, but it is not properly working and I am running out of ideas (as well as google results to this issue) what the remedy to the problem is.

 

stage.enableMouseOver(30);
var _this = this;
this.bug.addEventListener('mouseover', function(){
	var glow = new createjs.Shadow("rgba(255,0,0,1)", 0, 10, 20);
	_this.bug.shadow = [glow];
	_this.bug.cache(0,0,222,248);
	
});
this.bug.addEventListener('mouseout', function(){
	var glow = new createjs.Shadow("rgba(0,0,0,1)", 1, 0, 1);
	_this.bug.shadow = [glow];
	_this.bug.cache(0,0,222,248);
});

 

 Thank you for any help in advance.

Hi, 

You need to use the event's target in the event handler functions:

 

 

stage.enableMouseOver(30);


this.circle.addEventListener('mouseover', function( obj ){
	obj.target.shadow = new createjs.Shadow("rgba(255,0,0,1)", 0, 0, 20 );
});
this.circle.addEventListener('mouseout', function( obj ){
	obj.target.shadow = null;
});

 

 

 

Here is a working example:

https://cloud.vectorworks.net/links/11e9da0bffa1b992905d0e7947a8ce60/

 

 

TOPICS
Code

Views

478

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
Sep 17, 2019 0
Participant ,
Sep 18, 2019

Copy link to clipboard

Copied

Hi, 

You need to use the event's target in the event handler functions:

 

 

stage.enableMouseOver(30);


this.circle.addEventListener('mouseover', function( obj ){
	obj.target.shadow = new createjs.Shadow("rgba(255,0,0,1)", 0, 0, 20 );
});
this.circle.addEventListener('mouseout', function( obj ){
	obj.target.shadow = null;
});

 

 

 

Here is a working example:

https://cloud.vectorworks.net/links/11e9da0bffa1b992905d0e7947a8ce60/

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Sep 18, 2019 1
Community Beginner ,
Sep 18, 2019

Copy link to clipboard

Copied

You're the man! It worked. Thanks a lot

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
Reply
Loading...
Sep 18, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Sep 18, 2019

Copy link to clipboard

Copied

Be aware that filter effects in Canvas documents can be very slow, because they're implemented in runtime JavaScript code instead of natively supported by the browser.

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
Reply
Loading...
Sep 18, 2019 0