Lottie-web: Bodymovin export from After Effects : ai images converted into low quality PNG. Why ?

[Nuggette]

Hi,

I've made an animation in After Effects importing AI files.
I've installed the Bodymovin plugin to get a JSON file.

As a result, I get a .json file but also a "images" file in which all my vectors elements are converted into low quality PNG...

When I export a demo of my animation, it's all pixelated and ugly :(

I couldn't find any settings to adjust the export in order not to generate PNG images.

Can anyone help ? Thanks !

[Nuggette]

Hi again,

I found out that I can convert my .AI elements into shapes in After Effects, and that it would solve the PNG problem. But allas, it breaks all my complex AI elements... Should I simplify my vectors in Illustrator ? Or is there another solution ?

Thanks.

[bodymovin]

You probably need to erase the merge paths of your shape layers. AE adds
unnecessary square extra paths that are merged with the real path. Since
bodymovin doesn't support merge paths yet they break. So you need to erase
these square paths from your AE layers.

On Aug 17, 2017 5:30 AM, "Nuggette" [e-mail] wrote:

Hi again,

I found out that I can convert my .AI elements into shapes in After
Effects, and that it would solve the PNG problem. But allas, it breaks all
my complex AI elements... Should I simplify my vectors in Illustrator ? Or
is there another solution ?

Thanks.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/bodymovin/bodymovin/issues/589#issuecomment-323018389,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKlSH9Gg086o7BIIhFHTesV70u9uNDKKks5sZAhBgaJpZM4O59x5
.

[Nuggette]

Yes, I'll do that : I will simplify as much as I can my illustrations.
It's a little bit of extra work but I'll be aware for next time :)

Thanks for your answer ! Have a good day.

[greg-althoff]

@Nuggette I actually have full solution that you might not have noticed when importing into After Effects.

You were correct in getting all of your layers to be created as Shapes from Vector Layer, which was probably the hardest bit of info to come across when doing this, that way you won't get the /images folder to show up anymore on the BodyMovin' export.

In order to save yourself some time make sure you imported your .ai file correctly. Here's the step by step that will work with the latest After Effects CC.

Illustrator Preparation

1. In Illustrator take all the layers and make them into their own layers. ‘Release to Layers’ (right click after selecting them all)
2. Make sure the Illustrator file had the ‘Create PDF Compatible File’ checked when saving
3. Save as .ai file type (for importing into AE)

After Effects

1. Create a composition
2. Import file: as Composition (not footage) / Create Composition (from checkmark)
3. Drag the composition (that is made from Illustrator) This way you don’t need to use the individual layers)
4. Drag onto the art board/comp
5. In the layer of the animation pane, double click that composition. You’ll then see inside of it will all the .ai / vector files.
6. Select all layers and go to Layer>Create Shapes from Vector Layer

If you make sure to import with the 'Create Composition' check marked, you'll be able to just drag that comp onto the stage (then edit the layers inside of it to shapes) .. and edit the composition as a whole, rather than the layers individually for vector output.

Hope that helps!

[LincMitch]

@gregoryalthoff Finally got it working. Really helpful thanks!

[greg-althoff]

Yes no problem! It wasn't an easy process for sure..

[espedale]

@gregoryalthoff The main issue I'm having is that even though I've followed your excellent instructions to the letter, the individual layer objects are all sized according to the original Illustrator artboard once they are converted to shapes in After Effects. When the shape is selected, the outline is as though the original invisible artboard was included in the shape making process by After Effects. Any ideas on a solution?

[paulus1502]

@Nuggette I actually have full solution that you might not have noticed when importing into After Effects.

You were correct in getting all of your layers to be created as Shapes from Vector Layer, which was probably the hardest bit of info to come across when doing this, that way you won't get the /images folder to show up anymore on the BodyMovin' export.

In order to save yourself some time make sure you imported your .ai file correctly. Here's the step by step that will work with the latest After Effects CC.

Illustrator Preparation

1. In Illustrator take all the layers and make them into their own layers. ‘Release to Layers’ (right click after selecting them all)
2. Make sure the Illustrator file had the ‘Create PDF Compatible File’ checked when saving
3. Save as .ai file type (for importing into AE)

After Effects

1. Create a composition
2. Import file: as Composition (not footage) / Create Composition (from checkmark)
3. Drag the composition (that is made from Illustrator) This way you don’t need to use the individual layers)
4. Drag onto the art board/comp
5. In the layer of the animation pane, double click that composition. You’ll then see inside of it will all the .ai / vector files.
6. Select all layers and go to _Layer>Create Shapes from Vector Layer_

If you make sure to import with the 'Create Composition' check marked, you'll be able to just drag that comp onto the stage (then edit the layers inside of it to shapes) .. and edit the composition as a whole, rather than the layers individually for vector output.

Hope that helps!

thank you soooo much!

[sonianaz-byyte]

Hello All, I am having a problem, everything looks fine in AE, but when i convert the AE file into JSON the shapes don't appear in its original colors, it turns into black & white. Help me please

[sonianaz-byyte]

@Nuggette I actually have full solution that you might not have noticed when importing into After Effects.

You were correct in getting all of your layers to be created as Shapes from Vector Layer, which was probably the hardest bit of info to come across when doing this, that way you won't get the /images folder to show up anymore on the BodyMovin' export.

In order to save yourself some time make sure you imported your .ai file correctly. Here's the step by step that will work with the latest After Effects CC.

Illustrator Preparation

1. In Illustrator take all the layers and make them into their own layers. ‘Release to Layers’ (right click after selecting them all)
2. Make sure the Illustrator file had the ‘Create PDF Compatible File’ checked when saving
3. Save as .ai file type (for importing into AE)

After Effects

1. Create a composition
2. Import file: as Composition (not footage) / Create Composition (from checkmark)
3. Drag the composition (that is made from Illustrator) This way you don’t need to use the individual layers)
4. Drag onto the art board/comp
5. In the layer of the animation pane, double click that composition. You’ll then see inside of it will all the .ai / vector files.
6. Select all layers and go to _Layer>Create Shapes from Vector Layer_

If you make sure to import with the 'Create Composition' check marked, you'll be able to just drag that comp onto the stage (then edit the layers inside of it to shapes) .. and edit the composition as a whole, rather than the layers individually for vector output.

Hope that helps!

Hello All, I am having a problem, everything looks fine in AE, but when i convert the AE file into JSON the shapes don't appear in its original colors, it turns into black & white. Help me please