Gradient problem -> better quality?

[Underbox]

Hi everybody

We're creating an animation shortfilm in Animate CC and use a lot of gradient background. The problem is that the gradient is not smooth enough (see beneath). You see stripes (pic.1) and circles (pic. 2) We want a smooth gradient background. What can be the problem?

Thank you!

[ClayUUID]

AS3 or Canvas would be useful to know.

[kdmemory]

Hi Underbox

Check and experiment with the following settings:

1 Publish Settings / Basic

- look for if Export document as texture is ticked

- and look for if Combine images into spritesheet is ticked

2 Publish Settings / Image Settings

- look for Format and Quality

If i.e. Export as texture (which it is by default in v19) is selected then Combine images into spritesheet (default as well) is pre-selected. Or if only spritesheet yes and texture no, it depends what in Image Settings the quality settings are. Imagine it's only 8 Bit + Texture and Spritesheet there will not be enough palette color space avail for several images with color-hungry gradients. It might be necessary to uncheck Texture as well as Spritesheet in order to export each image seperately.

In any case experimenting and publishing several distiguished versions will eventually give you better results. It's of course also a question of file size. You have to work out a compromise.

klaus

[Underbox]

Thank you for your reply!

I can't find the settings that you recommend (dutch version). I have version v19.1. It looks very differently.

Am I missing something?

[ClayUUID]

It looks different because KD is talking about Canvas documents, but you're in an AS3 document. That's why I asked which kind of document you're working in.

It might also be helpful if you told us HOW you're creating those gradients.

[Underbox]

Thank you ClayUUID

I just asked the animator. It's an AS3 document.

We're working on a sci-fi shortfilm. It's 2D animation. We want to submit the project to the filmfestival of Cannes in March. That's why it's important to have clean backgrounds.

Is it possible to Skype with one of you guys? This is very difficult and technical. You could safe us a lot of time. Thank you!

Greetings.

[ClayUUID]

Yes, we know it's an AS3 document now. You posted a screenshot of an AS3 publish properties dialog.

Telling us it's 2D is not useful information. How are you generating those gradients? Are they made with Animate's gradient fill tool? Imported from Illustrator? ActionScript code? A bitmap? Give us some actual information to work with.

[Underbox]

I just asked. They are made with the Animate gradient fill tool.

[ClayUUID]

Cannot reproduce. I get nice smooth gradients in AS3.

[Underbox]

What can be the problem? Some settings? Where do we need to look?

[JoãoCésar]

Hi.

Can you show us a screenshot of your Color panel with a shape using a gradient color selected?

Regards,

JC

[Underbox]

Do you mean a screenshot like this one? Tnx!

[JoãoCésar]

Thanks.

I think this is a monitor or OS color issue.

I compared the same artwork here, side by side, using my laptop and a TV.

In my laptop the gradient fill looks great. But in my TV I can see the stripes.

Do you see this problem in any device/screen?

Regards,

JC

[Underbox]

Hi JC

I have samples of the gradients video's on my Macbook 12 inch (2015). Even on this pretty powerful laptop I see the stripes.

What can we do? Can we send you a working file with a small part of the animation?

Thank you!

[JoãoCésar]

Sure!

Please send me a sample and I'll take a look.

Thanks!

[Underbox]

Thank you!

I asked her to make an Animate file with a few frames of the most important backgrounds. I'll drop a link asap.

Greetings

Rocky

[Underbox]

Hi

Here's the link to the sample:

https://drive.google.com/open?id=18WwKB13Vdz2kxk9ubI5jRqFFN0tcObsP

I'll hope you can find the problem!

Thank you!

[ClayUUID]

That's a hundred-megabyte FLA. You appear to have included the entire thing.

So, at a quick look, I'm guessing part of the problem is that your alpha gradient overlays don't use a consistent color. For example on the circle gradient on the stage of your example FLA, the first two stops are white, but the second two stops are black. Changing them all to black produces a noticeably more smooth alpha gradient.

[Underbox]

The animator checked your suggestion. Thank you for the tip!

See told me that the result is better, but not there's still banding. We want to send the shortfilm to filmfestivals all over the world, so the result must be perfect.

Solving the problem via a discussion group is very difficult. Is it possible to Skype with you? I can give you eternal fame, by putting your name on the credits.