Highlighted

HTML 5 canvas not supporting gradients, showing black patches in preview

Community Beginner ,
May 18, 2019

Copy link to clipboard

Copied

Dear all, '

I am unable to find a standard and defined solution for this. I have to convert several .fla files done with older versions in to HTML5. So I used the Animate's 'Convert to other document formats' option. It successfully converts but with warning "Only circular (not oval) radial gradients are supported."

When I preview it shows black color where the gradients were applied. I was successful to individually change them to solid color with outline. Yet there must be a way to apply gradients (including radial) to animate symbols so that it will work fine in HTM5 animations. If anybody had come across this situation and suggestions welcome.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

var g = new createjs.Graphics();

g.beginRadialGradientFill(["#FF0000", "#00FF00"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);

var s = new createjs.Shape(g);

s.x = 100;

s.y = 100;

stage.addChild(s);

stage.update();

Views

262

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

HTML 5 canvas not supporting gradients, showing black patches in preview

Community Beginner ,
May 18, 2019

Copy link to clipboard

Copied

Dear all, '

I am unable to find a standard and defined solution for this. I have to convert several .fla files done with older versions in to HTML5. So I used the Animate's 'Convert to other document formats' option. It successfully converts but with warning "Only circular (not oval) radial gradients are supported."

When I preview it shows black color where the gradients were applied. I was successful to individually change them to solid color with outline. Yet there must be a way to apply gradients (including radial) to animate symbols so that it will work fine in HTM5 animations. If anybody had come across this situation and suggestions welcome.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

var g = new createjs.Graphics();

g.beginRadialGradientFill(["#FF0000", "#00FF00"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);

var s = new createjs.Shape(g);

s.x = 100;

s.y = 100;

stage.addChild(s);

stage.update();

Views

263

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
May 18, 2019 0
Adobe Community Professional ,
May 19, 2019

Copy link to clipboard

Copied

var g = new createjs.Graphics();

g.beginRadialGradientFill(["#FF0000", "#00FF00"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);

var s = new createjs.Shape(g);

s.x = 100;

s.y = 100;

stage.addChild(s);

stage.update();

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 19, 2019 0
Community Beginner ,
May 19, 2019

Copy link to clipboard

Copied

Hi kglad,

Can you elaborate your reply please. What you seem to suggest is draw new gradient filled shapes. My issue is converting existing flash project with gradients.

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 19, 2019 0
kglad LATEST
Adobe Community Professional ,
May 19, 2019

Copy link to clipboard

Copied

if you have a radial gradient already assigned to an on-stage object, that will get converted during the conversion process or, at least, it does for me using animate 19.2/windows.

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 19, 2019 1