Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

JavaScript code for Animate Color Effects > Advanced settings

Engaged ,
Feb 19, 2022 Feb 19, 2022

Hi Animate support community,

Is there a way to access the Animate Color Effects > Advanced panel settings with JavaScript code?  I have an old project written in ActionScript 2.0 that I am trying to convert to HTML5 Canvas.  This project contains many images of flowers as movie clips and I want to change the color of these flowers from a button click.

 

The base drawing objects of these flowers is done in grayscale gradients and the color is applied using the Color Effects > Advanced panel (see attached JPG) which shows the settings and results.  The code below doesn’t work to change the color because it’s not accessing the Color Effects > Advanced settings.  Is there a way to access these settings with JavaScript?  Thanks.

Zaffer

this.yellow_btn_1.addEventListener("click", change_color_yellow.bind(this));

function change_color_yellow()
{
	bellFrontLt.petals_mc_1.shape.graphics._fill.style = "rgb(255,255,0)";
}

Animate color effects.jpg

TOPICS
Code , How to
1.0K
Translate
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

correct answers 1 Correct answer

Community Expert , Feb 19, 2022 Feb 19, 2022

Hi.

 

You need to apply a color filter. Like this:

var colorFilter = new createjs.ColorFilter(1, 1, 1, 1, 46, -14, 255, 0);
var bounds = this.flower.nominalBounds;

this.flower.filters = [ colorFilter ];

// in this case, the registration point of the flower is in the middle, so the initial x
// is half of the width to the left and the initial y is half of the height to the top
this.flower.cache(-bounds.width * 0.5, -bounds.height * 0.5, bounds.width, bounds.height);

 

I hope it helps.

 

Regards

...
Translate
Community Expert ,
Feb 19, 2022 Feb 19, 2022

Hi.

 

You need to apply a color filter. Like this:

var colorFilter = new createjs.ColorFilter(1, 1, 1, 1, 46, -14, 255, 0);
var bounds = this.flower.nominalBounds;

this.flower.filters = [ colorFilter ];

// in this case, the registration point of the flower is in the middle, so the initial x
// is half of the width to the left and the initial y is half of the height to the top
this.flower.cache(-bounds.width * 0.5, -bounds.height * 0.5, bounds.width, bounds.height);

 

I hope it helps.

 

Regards,

JC

Translate
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
Engaged ,
Feb 19, 2022 Feb 19, 2022

Thanks so much for your help João.  Here's the code I used and it works!  I changed the color of the flower from lavender to yellow.

Zaffer

 

var colorFilter = new createjs.ColorFilter(1, 1, 1, 1, 255, 255, 0, 0);
var bounds = bellFrontLt.petals_mc_1.nominalBounds;

this.yellow_btn_1.addEventListener("click", change_color_yellow.bind(this));

function change_color_yellow()
{
	alert("yellow button clicked");	
	bellFrontLt.petals_mc_1.x = 300;
	
	bellFrontLt.petals_mc_1.filters = [ colorFilter ];
	bellFrontLt.petals_mc_1.cache(-bounds.width * 0.5, -bounds.height * 0.5, bounds.width, bounds.height);	
}

 

 

Translate
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
Community Expert ,
Feb 19, 2022 Feb 19, 2022

Hi.

 

Great!

 

You're welcome.

 

Where is bellFrontLt defined? If bellFrontLt is the name of a instance that is placed directly on the timeline where you script is, then you should refer to it using the this keyword: this.bellFrontLt.

 

Please let us know.

 

Regards,

JC

Translate
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
Engaged ,
Feb 19, 2022 Feb 19, 2022

I declared bellFrontLt at the top.  Thanks again JC!

let bellFrontLt = this.bellFrontLt_mc; 

 

Translate
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
Community Expert ,
Feb 20, 2022 Feb 20, 2022

Nice.

 

It should be working. I've tested your code and it worked without a problem.

 

Can you provide more details? Some screenshots or your FLA?

Translate
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
Engaged ,
Feb 20, 2022 Feb 20, 2022

Hi JC,

Thanks for getting back to me.  I don't have any problems with the code.  It works perfectly, thanks to you.  Below is the code I used to change two different flowers (one lavender and one pink) to yellow or orange by clicking a yellow or orange button (see JPG).  This is "proof of concept" code.  Eventually I'll use an array and a for loop.  Thanks so much for you help.

Zaffer

let bellFrontLt = this.bellFrontLt_mc; 
let bellSideLt = this.bellSideLt_mc;

var colorFilter_yellow = new createjs.ColorFilter(1, 1, 1, 1, 79, 79, -255, 0);
var bounds_yellow = bellFrontLt.petals_mc_1.nominalBounds;

var colorFilter_orange = new createjs.ColorFilter(1, 1, 1, 1, 255, -51, -255, 0); 
var bounds_orange = bellFrontLt.petals_mc_1.nominalBounds;

this.yellow_btn_1.addEventListener("click", change_color_yellow.bind(this));

function change_color_yellow()
{
	//alert("yellow button clicked");	
	bellFrontLt.petals_mc_1.filters = [ colorFilter_yellow ];
	bellFrontLt.petals_mc_1.cache(-bounds_yellow.width * 0.5, -bounds_yellow.height * 0.5, bounds_yellow.width, bounds_yellow.height);
	bellSideLt.petals_mc_1.filters = [ colorFilter_yellow ];
	bellSideLt.petals_mc_1.cache(-bounds_yellow.width * 0.5, -bounds_yellow.height * 0.5, bounds_yellow.width, bounds_yellow.height);	
}

this.orange_btn_1.addEventListener("click", change_color_orange.bind(this));

function change_color_orange()
{
	//alert("orange button clicked");	
	bellFrontLt.petals_mc_1.filters = [ colorFilter_orange ];
	bellFrontLt.petals_mc_1.cache(-bounds_yellow.width * 0.5, -bounds_yellow.height * 0.5, bounds_yellow.width, bounds_yellow.height);	
	bellSideLt.petals_mc_1.filters = [ colorFilter_orange ];
	bellSideLt.petals_mc_1.cache(-bounds_orange.width * 0.5, -bounds_orange.height * 0.5, bounds_orange.width, bounds_orange.height);		
}

 flower color change.jpg

Translate
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
Community Expert ,
Feb 21, 2022 Feb 21, 2022
LATEST

Amazing!

 

And I'm sorry I didn't understand that you had already made it! -_-'

 

Anyway: congratulations!

Translate
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