Skip to main content
DigitalDesignDude
DigitalDesignDude
Inspiring
September 3, 2021
Answered

Illustrator Vector Art become Misshaped when Exported from Animate

  • September 3, 2021
  • 1 reply
  • 1109 views

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.

  • 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. 

      Correct answer n. tilcheff

      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.

       

      1 reply

      n. tilcheff
      n. tilcheffCorrect answer
      Legend
      September 4, 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.

       

      Nick - Character Designer and Animator, Flash user since 1998 | Member of the Flanimate Power Tools team - extensions for character animation
      DigitalDesignDude
      DigitalDesignDudeAuthor
      Inspiring
      September 4, 2021

      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!  

       

      n. tilcheff
      n. tilcheff
      Legend
      September 4, 2021

      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 Power Tools team - extensions for character animation
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices