Gradient quality is poor (Flash vs. Photoshop)

[apdev]

Hi,

The quality of my gradients needs to be as good as in Photoshop. But no matter what I do, they look choppy (with banding). Here an example:

Flash (Timeline or AS3 the same) / Photoshop



Each box 200px x 200px

1. Box: 0x808080 -> 0xFFFFFF / horizontal
2. Box: 0x808080 -> 0xFFFFFF / vertical
3. Box: Both boxes merged with blend mode

What the heck is that? Can you guys reproduce that?

How can I get the best possible gradient quality with AS3?

thanks

[theCodeBot]

Presuming these are all actual size, I don't see the banding. The Flash IDE tends to band the gradients when you're authoring and sometimes when you're publishing so that it can increase speed. If you want it to stop banding, then you can convert the gradient in flash to a Bitmap (can't remember the menu option right now). It's the opposite of trace bitmap.

[apdev]

Hi, thanks for responding.

Well, you're sure that you don't see any difference between the merged boxes (the last ones)?

The gradients are actually created with ActionScript / BitmapData (create shape, draw gradient into shape.graphics, draw that into a bitmapData object).

[snickelfritz]

Your gradients all look absolutely smooth and identical on my 24" iMac.

[apdev]

Ok guys, you can do me a super big favor by downloading both images, open them in Photoshop, zoom to 200% (or more) and let me know if any banding appear.

I don't want to upload an upscaled version, since Photoshop will do some interpolation magic and might lead to inaccurate results.

[rumblesushi]

I see no banding at all, they look more or less identical.

[apdev]

You downloaded and zoomed it?

[creatify]

I barely / faintly see the banding, but none the less, know what you are talking about. What I've done to attempt to overcome banding is:

On your angled gradients, rotate the angle slightly, see if that helps.

Try to add more colors to the gradient, instead of black-white, try black-darkgrey-lightgrey-white

And a print technique back in the day was to blur the gradient in photoshop - you can alway apply a slight blur filter, playing with x/y amounts within a defined rectangle area on the bitmap.

I'm presuming that whatever handles gradients in Photoshop (and Illustrator for that matter), is quite a bit more powerful than how Flash defines/renders gradients - Since Flash 8 I've noticed gradients band in Flash. The above images though, if that's the worse you see the banding, I'm sure the majority of viewers looking at your app won't notice, as the other comments suggest .

[BoppreH]

I opened the last images images in different windows and zoomed in using Firefox.

The Photoshop gradient seems to take more time to get to black, making Flash's look "darker", specially in that points at a quarter distance from the middle either way.

But I think it's just a difference in the gradient algorithm, I see nothing that could be considered "poor quality".

[theCodeBot]

When zooming in to over 500% in chrome on my 22" monitors, both of them show the most minor differences. But as BoppreH (I spelled it right this time!) suggests, the algorithm is just a tiny bit different. Especially seeing as you're placing it into a BitmapData, you're practically creating the exact same thing - in the exact same way - Photoshop and Flash have some programmers in common, so it may have even been the same person that designed the two.

Either way, for all of us here, we had to zoom in pretty far and actually look for differences to find them. You're probably fine

[apdev]

Thanks for testing. On my Macbook screen I also don't see it neither, however I do on my 24" Dell.

I fully agree to you guys, the user wouldn't barely see any difference. If I would use the gradient as a visual element, I couldn't care less...

However, I'm using the gradient as a map for the DisplacementMapFilter. And here it's getting tricky. When using the gradient as a DisplacementMap, the banding is actually visible, especially when different gradient and merged together with blendmodes.

See example here:



The first row uses a gradient generated by Flash, the second by Photoshop (both 0x000000 -> 0x404040).

Not that big of a deal, you might say..? See the result, when it's getting animated:

--> Click to see animated example

As you see, the Flash example sticks to the banding, where the Photoshop leads to a smoother (although not perfect) result. And this is only one gradient. When you copy two (or more) together, the banding is obviouslly copied as well and the result looks even worst.

You see that too?

So again the question: Anyone knows how to get pixelperfect dynamiclly created gradient in Flash? (Maybe with pixel bender?)

[theCodeBot]

Well, when using it as a DisplacementMap, yeah, I can definitely see the difference.

Theoretically, you could create a custom algorithm to draw up the pixels yourself, but frankly, you're not going to be getting anything nearly as perfect as Flash or Photoshop can do that way. If you want it the way Photoshop does it, you're probably just going to have to use Photoshop. If you have to make them dynamically, I think you could possibly get away with creating the Gradient with AS3's methods, but scaled up to 400% or so, create the Bitmap, and scale that down. Maybe.