Copy link to clipboard
Copied
I've designed an animated character in Illustrator 2020 (ver. 24.3) and have been testing it out in Adobe Animate but find that its vector art becomes misshaped upon being exported to Swf and Video regardless of looking perfectly fine on Adobe Animate's stage.
My character's art is very simple as it just uses filled shaped with strokes which I then have defined as graphic symbols in Illustrator before importing to Animate (for rigging purposes). In the above image, the character's eye lid symbol contains a white fill shape with a varying stroke width which gets converted to a fill when imported to Animate, and the eye brow symbol contains a fill shape with the default uniform stroke width and no brush style, yet it too becomes distorted upon export. I'm not using any tweens or animation, just exporting the static art from the stage as swf and mp4 files.
The most success I've had in preventing the misshaped art was to ungroup, outline strokes, and break apart any symbols in Illustrator before importing to Animate, but when I redefine the art as symbols in Animate, they become misshapen when exported again.
I've also tried the following but none have reliably worked every time.
Even when I just break the vector art down to just being a fill and paste it into an new document I still get some mishappening when I zoom in on the art.
Is this just something that Adobe Animate does occasionally for compression or optimization reasons, and there's no real way to force graphics to retain their perfect vector art upon export?
I feel this is a hindrance for more simple character designs since the imperfections can really stand out when you do close-ups on the character's face.
Hi mate, the only thing that comes to my mind is that your art may be too small to render well.
You can try to scale everything up at shape level and see if that will give a different result.
In CS6 you can also try to switch the document to AS2. This usually renders differently.
Copy link to clipboard
Copied
Hi mate, the only thing that comes to my mind is that your art may be too small to render well.
You can try to scale everything up at shape level and see if that will give a different result.
In CS6 you can also try to switch the document to AS2. This usually renders differently.
Copy link to clipboard
Copied
Hey Nick,
From my testing I think you're right, the art is too small.
I designed the character on a 1920x1080 canvas in Illustrator which caused the eyes and eye brows to be around 20px wide and the stroke width around 1px. So I broke all my symbols in illustrator, scaled up my character, redefined the symbols, imported it to Animate and did a test export and the art work is no longer mishaped!
I'm just amazed that the scale seems to matter in this case because vector art is supposed to look good no matter how big/small you design your artwork at.
From my video test below, it looks like if I design my vector art at a small scale, make a symbol out of it and then afterwards scale the symbol, the art work becomes mishaped when exported. So I guess from now on I'll have to make larger characters in Illustrator if I want to avoid this issue.
Thanks for leading me to a solution!
Copy link to clipboard
Copied
I'm glad to have pointed you in the right direction! 🙂
Pixel dimensions are somehow important even though all is still vector internally. Maybe it has something to do with rounding or the way vector is rasterised during SWF playback.
Best would be to design everything a little larger from scratch.
If you already have done a lot of work, you can try our Zero Transform. You should be able to scale symbols up all at once and then Zero T them one by one. If the shapes inside are just raw that should be enough. If they are Drawing Objects you may need to double-click each one of them to reset its matrix.
Good luck with your work!