Canvas gradient animation problem

[Falrinth]

Seems Animate cant handlen animating gradients. Whenever i create shape tween for a shape with gradient it will be published as some flat changed in gradient, black shape or some other unintended glitches.

1. When will it be fixed?

2. Whats the workaround?

[kglad]

shape tweening a radial gradient works for me in html5/canvas.

1. create a keyframe and add a shape with a gradient

2. create a new keyframe several frames later and adjust the gradient

3. add a shape tween

[Falrinth]

Ok i have did another tests, and it seems only gradients without transparency/alpha animates well (i should have been more specific, but i did tests on gradients with alphas). The ones with transparency are resulting in mentioned glitches. So my 2 questions still stands. Only workaround i have found so far is using png.

@nick28, that could work in some cases, but wont in others and its very awkward to do in many cases. For example radial gradient that creates a transparent "hole". If you want to animate it so the hole gets smaller, coming from the very edges of the screen into a very little hole somewhere on the screen. My tests resulted in very low quality gradient bending when i scaled the object and very hard to control precisely (as opposite to gradient transform tool which can be precise).

Funny thing is that in Animate, the process of animating that radial gradient is very smooth and easy, and works in viewport flawlessly. Only after export it gets obliterated into some glitched code.

[kdmemory]

Hi Fairinth

Is it the case that you publish to HTML5 Canvas? If so did you select Export document as texture in the Publish Settings?

This would be necessary for using shape tweening in a published canvas.

I made a simple test with radial gradient including alpha changes and it works fine. But I got 3 myfile_atlas_n.png files which amount to a data size of 1.8 MB. And it's only a small animation.

It's expensive!

Klaus

[Falrinth]

Yes, thats why its no go for most of the cases, while it can be done with proper code and weight like nothing. Also friend told me that in previous Animate versions there was no such problem with animating alpha gradients and publishing it as html with js information instead of what you suggest (basically frame by frame animation, but much heavier).

[ClayUUID]

kdmemory  wrote

Is it the case that you publish to HTML5 Canvas? If so did you select Export document as texture in the Publish Settings?

This would be necessary for using shape tweening in a published canvas.

Since when? I just tested a canvas shape tween in Animate 18.0.2 and it works perfectly well without exporting as texture.

[kglad]

with an alpha tween, i think you have to tick that.

[Falrinth]

@CLay: 19.2.1 (408)

@kglad: Well, thats not viable solution. Better workaround is to just use 1 png in that case and animating its scale. At least when you are working with creatives that have specifications and weight limits. Unless you want to deal with Animate as a tool for animated movies only. But then you would need to ask yourself why doing animated movies in a soft that cant render videos very well.

[Nicktendo28]

Maybe make your gradient into a symbol and the then move it that way with a tween?