Illustrator Vector Art become Misshaped when Exported from Animate

Explorer ,
Sep 03, 2021 Sep 03, 2021

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. 

 

Adobe Animate Vector Art Preview vs Export Comparison.png

 

 

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.

  • Breaking and redefining the graphic symbols in Adobe animate
  • Slightly adjusting the anchors and anchor handles of the art
  • Tried importing the Illustrator File to different versions of Adobe Animate: 2021, 2018,  Adobe Flash CS6

 

 

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. 

Views

111

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
community guidelines

correct answers 1 Correct answer

Mentor , Sep 03, 2021 Sep 03, 2021
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.

Likes

Translate

Translate
Mentor ,
Sep 03, 2021 Sep 03, 2021

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.

 

Nick - Character Designer and Animator, Flash user since 1998
Member of the Flanimate Powertools Team - extensions for character animation

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
community guidelines
Explorer ,
Sep 03, 2021 Sep 03, 2021

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.

 

https://youtu.be/3rsixe-3lpM

 

Thanks for leading me to a solution!  

 

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
community guidelines
Mentor ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

LATEST

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!

 

Nick - Character Designer and Animator, Flash user since 1998
Member of the Flanimate Powertools Team - extensions for character animation

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
community guidelines