Highlighted

Change color tint/fill of a symbol in an Animate Canvas document?

New Here ,
Sep 12, 2018

Copy link to clipboard

Copied

Hi, how do I change the color tint of a symbol/shape in a HTML5 Canvas document (with code)? *

Alternatively how do I change the fill-color inside a symbol/shape (with code)? **

My case is that I have to import a svg/ai-file into a movie-clip and that svg/ai-file consists of 20-100 elements. I've made each element mid-grey, so it's possible to tint them easily. I manually have to create a button of each element (since they have to be clickable) and I also have to give each one a unique instance name. That procedure is far from ideal but it still goes pretty quick. For the record, yes I have to get the elements from an svg/ai-file and they are all different in terms of shape and placing. I will also have to repeat this process every time I get a new project (new project means a new svg/ai-file).

I'm going to put the instance names of these 20-100 elements in an array and read in data from a csv/xls-file. Depending on which value each element is given from the csv/xls-file I want them to be filled/tinted with 1 of 3 specific colors.***

* I've read that color tinting is demanding in terms of performance and somewhat limited in usage.

** I've found guides on how to generate a shape and set the fill color of that shape, but haven't figured out how to apply it on a shape that's already created.

*** Sure, I can make 3 different keyframes for each element with different colors and correspond the frame number with the data in the csv/xls-file, but if I manually have to do that for 20-100 elements, on each project, that's not a viable option.

I'm not looking for a solution to my entire case, I just want to be able to switch the tint/fill of my symbols/shapes! It shouldn't be rocket science, right?

I've searched and searched but had no luck. Sorry if my English is bad. Thanks for any support!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

You can use the shape property for the stroke and the shape_1 for the fill. Like this:

this.button.shape.graphics._stroke.style = "rgb(128,22,35)"; // 'button' is the instance name

this.button.shape_1.graphics._fill.style = "rgb(20,22,36)";

I hope this helps.

Regards,

JC

Views

2.2K

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

Change color tint/fill of a symbol in an Animate Canvas document?

New Here ,
Sep 12, 2018

Copy link to clipboard

Copied

Hi, how do I change the color tint of a symbol/shape in a HTML5 Canvas document (with code)? *

Alternatively how do I change the fill-color inside a symbol/shape (with code)? **

My case is that I have to import a svg/ai-file into a movie-clip and that svg/ai-file consists of 20-100 elements. I've made each element mid-grey, so it's possible to tint them easily. I manually have to create a button of each element (since they have to be clickable) and I also have to give each one a unique instance name. That procedure is far from ideal but it still goes pretty quick. For the record, yes I have to get the elements from an svg/ai-file and they are all different in terms of shape and placing. I will also have to repeat this process every time I get a new project (new project means a new svg/ai-file).

I'm going to put the instance names of these 20-100 elements in an array and read in data from a csv/xls-file. Depending on which value each element is given from the csv/xls-file I want them to be filled/tinted with 1 of 3 specific colors.***

* I've read that color tinting is demanding in terms of performance and somewhat limited in usage.

** I've found guides on how to generate a shape and set the fill color of that shape, but haven't figured out how to apply it on a shape that's already created.

*** Sure, I can make 3 different keyframes for each element with different colors and correspond the frame number with the data in the csv/xls-file, but if I manually have to do that for 20-100 elements, on each project, that's not a viable option.

I'm not looking for a solution to my entire case, I just want to be able to switch the tint/fill of my symbols/shapes! It shouldn't be rocket science, right?

I've searched and searched but had no luck. Sorry if my English is bad. Thanks for any support!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

You can use the shape property for the stroke and the shape_1 for the fill. Like this:

this.button.shape.graphics._stroke.style = "rgb(128,22,35)"; // 'button' is the instance name

this.button.shape_1.graphics._fill.style = "rgb(20,22,36)";

I hope this helps.

Regards,

JC

Views

2.2K

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 12, 2018 0
Adobe Community Professional ,
Sep 12, 2018

Copy link to clipboard

Copied

Hi.

You can use the shape property for the stroke and the shape_1 for the fill. Like this:

this.button.shape.graphics._stroke.style = "rgb(128,22,35)"; // 'button' is the instance name

this.button.shape_1.graphics._fill.style = "rgb(20,22,36)";

I hope this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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 12, 2018 2
New Here ,
Sep 12, 2018

Copy link to clipboard

Copied

Wonderful, thank you for your quick reply!! That helped 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 12, 2018 1
Adobe Community Professional ,
Sep 12, 2018

Copy link to clipboard

Copied

Excellent! You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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 12, 2018 0
New Here ,
May 21, 2019

Copy link to clipboard

Copied

i get Uncaught TypeError: Cannot read property 'graphics' of undefined

this.Red.addEventListener("click", RedColour.bind(this));

/*this.Yellow.addEventListener("click", YellowColour.bind(this));

this.Blue.addEventListener("click", BlueColour.bind(this));

this.Green.addEventListener("click", GreenColour.bind(this));*/

function RedColour(evt){

this.ball.shape_1.graphics._fill.style = "#fff";

}

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...
May 21, 2019 1
Community Beginner ,
Nov 21, 2019

Copy link to clipboard

Copied

Hi JoãoCésar, I used your above code for changing the stroke and shape fill, and it works perfectly.

 

Just wondering how would you change the alpha/opacity of the fill?

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...
Nov 21, 2019 0
Adobe Community Professional ,
Nov 21, 2019

Copy link to clipboard

Copied

The canvas drawing API uses CSS-style parameters for colors, so for transparency you'd just use the rbga() syntax.

 

https://www.createjs.com/docs/easeljs/classes/Graphics.html#method_beginFill

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

 

 

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...
Nov 21, 2019 0
Community Beginner ,
Nov 21, 2019

Copy link to clipboard

Copied

That works, thanks for your help.

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...
Nov 21, 2019 0
Community Beginner ,
Mar 24, 2020

Copy link to clipboard

Copied

Hi

I had the same problem and tried this but didn't work.

I have a button named "StroboON" formed of a dynamic text named "ONOFF" and a rectangle named "BG", so I wrote in the code:

this.StroboON.BG.shape_1.graphics._fill.style = "rgb(20,22,36)";

but it didn't work

Thank you in advance

 

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...
Mar 24, 2020 0
Adobe Community Professional ,
Mar 24, 2020

Copy link to clipboard

Copied

Hi.

By default, Animate CC exports everything as texture. For being able to change a color of a shape created in the IDE at runtime you must do one of the following steps:

 

- Selectively set a single symbol instance to not be exported as a texture. For this, you must go to File > Publish Settings... > JavaScript/HTML > Image Settings > Symbols > Change... and uncheck the symbol you want to change the fill color via code;

image.png

 

- Or export everything as vectors by going to File > Publish Settings... > JavaScript/HTML > Image Settings, and in the Export as dropdown menu choose Image Assets and then uncheck Export Image assets. Even unchecking Export Image assets is necessary to choose Image Assets in the dropdown menu first due to a bug.

image.png

 

I hope this helps.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Mar 24, 2020 0
fminawi LATEST
Community Beginner ,
Mar 25, 2020

Copy link to clipboard

Copied

It didn't work either

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...
Mar 25, 2020 0