Open ChrisCRMG opened 5 years ago
Danjuanlab
commented
5 years ago Your problem is not caused by bodymovin. When you convert AI into a shape layer, the group behind the same layer covers the before path, So you see anything. You don't need to convert text to a path when import AI file
.
ChrisCRMG
commented
5 years ago @Danjuanlab Sorry to be a newbie, but how do I prevent the group behind the same layer from covering the before path? Sorry I'm just not good with the AE terminology.
Danjuanlab
commented
5 years ago @Danjuanlab Sorry to be a newbie, but how do I prevent the group behind the same layer from covering the before path? Sorry I'm just not good with the AE terminology.
Design the template you want in illustrator, the font does not need to be converted into a shape, save it as AI file, then jump into AE, click File - Import - File - select your AI file - composititon retain layer size, select your composititon, right click to create a new shape from the vector. In addition,keep text as text layer so that the content can be dynamically changed in svg renderings.
ChrisCRMG
commented
5 years ago Now I really feel like I'm missing something simple here. I tried this process again with an entirely new file I created in PSD with 5 rasterized layers. I then loaded that PSD into AI, saved as a .ai.
Imported that .ai into AE following your import instructions as a composition retaining layer size. I selected my comp, but it will not let me create a shape from the composition as you can see in the screenshot below:
I also still get gray boxes when I try to add the individual layers from the .ai file and convert those to shapes:
What am I still doing wrong? please help :( thanks!
Is the issue because I am making the artwork as just random rasterized layers in PSD, and not starting in AI making them as shapes? But it looks like AI saves them as individual layer shapes when I convert the .PSD to .ai.
Even when I just try to convert the ellipse layers (and not the text layers like you recommended) to shapes within AE, I still get the gray boxes.
I attached all the files I was using in the Zip below. If you could try your own luck with my .ae file it would be much help. Thank you so much! dial.zip
Danjuanlab
commented
5 years ago I have already check your files. But I am very confused about your workflow. Firstly, you want to make a progress cycle, so that simple shapes can be drawn directly in AE/AI using vector tools, why you draw it in PS? There are all pixel images in your psd file,so that you lose the biggest advantage of SVG animation - the edge of the animation still clear when zoom out. Secondly, all the material in the PSD has been rasterized, losing the ability to edit, including text. So They all have lost their interactivity in AE. Third, the reason why AI is used when drawing shapes is because AI is easier to draw than AE, so the general shape drawing is directly designed in AI, and then directly save the file. Then import AE, and finally convert to the shape in AE. This process is to convert vector graphics into path in AE. Instead of converting the image into a vector path!
So, I think you shouldn't draw shapes in PS and then rasterize them, you should use their tools directly in AI or AE to draw the graphics you want.
ChrisCRMG
commented
5 years ago Disregard last message about the path issue… I think I was stuck with this same issue: https://github.com/airbnb/lottie-web/issues/957 So I downloaded mamp local server and the animation runs perfectly now! Thanks!
Hello Sir, Thank you very much for getting back to me. I appreciate your input, I am new to this process so I will adjust my workflow as you recommend to start with AI/AE for vector shapes instead of PS.
But now I have arrived at a different issue, for some reason, I can not get my animations to display when I call a data.json path. I have only gotten my bodymovin exports to play the animation if I keep the long animation json data code embedded within the html itself. Do you know what might be wrong with my code below calling the path?
The code below shows just a blank white screen, no animation: [cid:image001.jpg@01D459A6.8F8CF590]
Thank you very much sir! Also please send me your venmo so I can buy you a Starbucks coffee or something for your time!
I have already check your files. But I am very confused about your workflow. Firstly, you want to make a progress cycle, so that simple shapes can be drawn directly in AE/AI using vector tools, why you draw it in PS? There are all pixel images in your psd file,so that you lose the biggest advantage of SVG animation - the edge of the animation still clear when zoom out. Secondly, all the material in the PSD has been rasterized, losing the ability to edit, including text. So They all have lost their interactivity in AE. Third, the reason why AI is used when drawing shapes is because AI is easier to draw than AE, so the general shape drawing is directly designed in AI, and then directly save the file. Then import AE, and finally convert to the shape in AE. This process is to convert vector graphics into path in AE. Instead of converting the image into a vector path!
So, I think you shouldn't draw shapes in PS and then rasterize them, you should use their tools directly in AI or AE to draw the graphics you want.
Danjuanlab
commented
5 years ago I heard that you have successfully use it, congratulations! However, in the feature, you will encounter various animations that do not display, so I suggest you take some time to learn more about the official document of bodymovin, because currently bodymovin only Support for "light animation", most AE built-in effects and plugins are not available with bodymovin in IOS/Web. Good luck~
Tell us about your environment
What did you do? Please explain the steps you took before you encountered the problem.
Issue is: Text layers were not converted correctly, and the 'plus icon' layer does not convert to a shape.
What did you expect to happen? I thought my text and plus icon layer would convert nicely to vector shapes as well.
What actually happened? Please include as much relevant detail as possible. See explanation above and screenshots below Text layer seemed to convert to something just not sure what or how to use the resulting 'shape':
And the plus icon just turned to a gray box :(
Please provide a download link to the After Effects file that demonstrates the problem. TestAddQuestionAE File.zip
@bodymovin Please help! I have a feeling the issue is related to me just being uninformed about how text and clipart layers convert to shapes. Thanks!