Как установить bodymovin в after effects
Это было для меня сюрпризом, но стикеры представляют собой довольно большой рынок, который активно растет, в том числе за счет перехода от статичных стикеров к анимированным.
Поэтому сейчас постоянная нехватка аниматоров и иллюстраторов, готовых этим заниматься. И часто их останавливают ограничения плагина Bodymovin из-за которых нельзя использовать привычные плагины, эффекты и инструменты для рига персонажей.
Все ограничения плагина можно уместить в одно предложение “Не используй ничего, кроме вкладки transform шейпов и анимации path”. И все равно есть тонкости и хитрости, упрощающие работу, которые я выработал во время работы над более чем 200-ми стикерами.
В Телеграм может делать стикеры кто угодно, поэтому я сосредоточусь на их варианте плагина Bodymovin, который немного отличается по возможностям от обычного Bodymovin.
Краткое описание запретов:
- Размер 512x512
- Длительность до 3-х секунд
- Никаких масок
- Никаких эффектов
- Никаких модификаторов шейпов
- Никаких экспрешенов
- Лучше не заходить за границы области, но иногда можно.
- Градиенты можно использовать, но осторожно, не всегда хорошо работают и непредсказуемо глючат.
- 30 или 60 FPS
- Только shape layers, никаких AI и jpeg в проекте
- Не поддерживаются Puppit Pin Tool, Duik и подобные инструменты для рига (работает Rubber Horse с базовыми настройками, но все это не стабильно)
Стикеры должны мало весить, чтобы быстро грузиться. В этом смысл всех ограничений. Иногда можно использовать rubber horse, но риг нужно перевести в ключи, то есть запечь анимацию, что усложняет изменения и утяжеляет стикер. Некоторые экспрешены тоже можно запечь и с плагином Easy Bake это делать более-менее удобно. Но самый легкий путь это привыкнуть к ограничениям и действовать по правилам.
1. Контролируйте количество точек и ключей.
Чем меньше и того и другого, тем легче стикер. И вам не придется анимировать массив точек. Поэтому об анимации нужно думать при отрисовке иллюстрации. Или учить своего иллюстратора как лучше рисовать и организовывать проект.
2. Не используйте режимы нажатия в иллюстраторе.
Доставляет проблем и сужающийся stroke. Из-за этого линия в After effect превращается в шейп, а не в обводку. И возникает куча лишних точек, которые тяжело контролировать.
3. Используйте рассинхрон ключей.
Это делает анимацию живее. Все покачивания стебельков, хвосты, руки легче всего делать с помощью сдвига rotation и path по отношению друг к другу.
Сначала поворачиваем руку влево, тут же изгибаем ее по path тоже влево. Повторяем в другую сторону. И сдвигаем на пару кадров, ура, анимация смотрится гораздо живее.
4. Учитывайте наклон иллюстрации.
Если на иллюстрации персонаж наклонен, перед экспортом в AE сделайте его перпендикулярным полу. Так боксы transform будут правильно расположены и scale будет корректно искажать объект.
5. Анимируйте от общего к частному.
Начинайте анимировать с основного объекта. Обычно это тело и голова. Отключите все лишние детали, чтобы не мешали. Если просто тело выглядит приятно в анимации, остальное уже легче подстроить под этот тайминг.
6. Эксперементируйте с таймингом.
Часто для резкого движения хватает 2–3 кадров. Хотя может казаться, что этого недостаточно, попробуйте и убедитесь.
7. Используйте null объекты.
Часто легче привязать слой к нулю, чтобы сделать, например, дрожание, чем пытаться сделать это на основном слое.
8. При анимации path можно выделять несколько точек.
Потом эти точки можно двигать и сжимать их одновременно. Если выделить пару точек и два раза кликнуть на них, появится бокс за который удобно двигать или менять масштаб.
9. Планируйте персонажа на этапе иллюстрации.
Для анимации лучше держаться простых форм персонажа и не усложнять его деталями. Если персонаж с тенью, то часто лучше сделать все тело цвета тени, а блик нанести сверху. Тогда не нужно подгонять постоянно тень по краю обводки.
10. Alpha Matte в новой версии плагина для Телеграма.
В новой версии плагина появилась поддержка Alpha Matte. Теперь наконец-то можно использовать это как маски и упрощать многие задачи. К сожалению поддержка этой функции появилась, но она сильно тормозит стикеры, поэтому лучше обходиться без нее.
11. Используйте размытие движения (smear).
Это называют мультяшный motion blur. Помогает сгладить резкое движение. Их можно делать по-разному. Растягивайте, искажайте, добавляйте экстра кадры. Тут нужно эксперементировать и смотреть, что выглядит гладко и приятно в каждом случае.
В будущем я буду дополнять эту статью когда открою для себя что-то новое или вспомню о другой хитрости.
Добавляйтесь в наш телеграм канал. Там мы с Аней, которая рисовала все эти прекрасные иллюстрации, рассказываем о создании стикеров:
Поэтапно разберемся во всех нюансах при разработке такого стикера. Начиная с программного обеспечения и заканчивая публикацией в Telegram.
Так что же из себя представляет этот анимированный стикер?
Это собственный формат Telegram — .tgs, который основан на технологии lottie.
Lottie — это движок от Airbnb, который позволяет проигрывать анимации на основе json, созданного с помощью плагина Bodymovin для Adobe After Effects. Такой же плагин существует и для стикеров Telegram и называется аналогично — Bodymovin-TG.
-
или другой векторный графический редактор. + плагин Bodymovin-TG.
Скачиваем с сайта разработчика плагин bodymovin-tg.zxp необходимый для экспорта анимации в формат .tgs.
Для установки потребуется ZXPInstaller — приложение для установки расширений для Adobe.
Открываем ZXPInstaller и переносим плагин в окно программы.
Открываем Adobe After Effects и заходим в раздел настроек — «сценарии и выражения».
Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».
Открываем Adobe Illustrator и выбираем в строке меню «файл» -> «новый».
Во всплывающем окне задаем параметр 512 на 512 пикселей, исходя из требований к размеру стикера.
Для рисования векторного стикера потребуются определенные навыки и знания основных инструментов, поэтому рекомендуется ознакомится с базовыми принципами рисования на сайте Adobe.
Изображение на стикере не должно выходить за края холста.
Существует альтернативный способ (Трассировка) с помощью которого любая картинка превращается в векторную. Будет очень полезно, для быстрого переноса своих растровых изображений в вектор.
В качестве примера возьмем изображение стикера из интернета.
Импортируем изображение в рабочую среду Adobe Illustrator (перенос в окно программы изображения). И проводим указанные действия из видео:
- Трассировка изображения. («Окно» -> «Трассировка изображения»)
- Разобрать. («Объект» -> «Трассировка изображения» -> «Разобрать»)
- Разгруппировать. («Объект» -> «Разгруппировать»)
Трассировка прошла успешно, но алгоритм не всегда точно угадывает форму объекта за элементом. С помощью встроенных инструментов можно устранить эти недостатки.
Выбираем в строке меню «файл» -> «Сохранить как». Сохраняемый тип файла .ai. Во всплывающем окне ставим галочку напротив «Создать PDF-совместимый файл».
Анимация должна быть цикличной , то есть первый кадр анимации должен совпадать с последним кадром.
Использование этих функций в Adobe After Effects приведет к критическим ошибкам при экспорте стикера:
Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers
Открываем Adobe After Effects и выбираем в строке меню «композиция» -> «Новая композиция».
Во всплывающем окне «Настройки композиции» указываем параметры стикера с учетом официальных требований к анимированным стикерам, такие как:
- Размер — 512 на 512 пикселей.
- Частота кадров — 30 или 60 кадров в секунду. Выбор частоты будет влиять на количество кадров в проекте. Лучше всего выбрать 60 — это обеспечивает большее пространство для анимации.
- Длительность — 3 секунды.
Переносим файл со стикером в рабочую среду Adobe After Effects.
Кликаем правой кнопкой по стикеру, выбираем «создать фигуры из векторного слоя».
Для примера произведем анимацию 3 элементов в стикере.
Разберем подробнее, как анимировать данные элементы в After Effects:
Раскрываем слой "Кривые Sticker" и находим группу с необходимым объектом, быстрее всего это можно сделать кликнув по элементу в окне предпросмотра.
Выбираем пункт "Положение" и активируем его нажав на значок секундомера. После двигаем временную шкалу чуть вперед и передвигаем объект с помощью мыши или вручную, изменяя численное значение "Положение".
Аналогично (1) пункту, за исключением того, что теперь изменять нужно масштаб , а не положение.
Выбираем пункт "Контур" и активируем его нажав на значок секундомера.
Для создания такой анимации потребуется тянуть за «синий квадратик», изменяя тем самым форму объекта и постепенно довести её до требуемого состояния.
Выбираем пункт «Расширения» и находим там плагин Bodymovin.
Отмечаем композицию и выбираем место сохранения нажатием на "троеточие".
После нажимаем на кнопку Render.
Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.
Открываем Telegram и находим в поиске бота @Stickers.
Для начала работы с ним отправляем команду /start.
У всех стикеров в наборе должна быть одинаковая частота кадров. Иначе придется делать два разных пака — для 30 и 60 кадров в секунду.
Отправляем команду /newanimated. После выбираем название и получаем следующую инструкцию:
Спасибо! Теперь отправьте мне, пожалуйста, будущий анимированный стикер — файл в формате TGS, созданный с помощью плагина Bodymovin-TG для Adobe After Effects.
Рекомендуем загружать изображения через десктопное приложение.
Бот Stickers предложит выбрать иконку для анимированных стикеров. Её нужно создать отдельно, но проще всего написать команду /skip, чтобы первый стикер показывался в качестве иконки.
Install and use the Bodymovin extension to export After Effects compositions as JSON files.
Bodymovin is a free extension that lets you export After Effects compositions as JSON files to embed in websites and add to apps. Let’s take a look at how to install the Bodymovin extension.
We’ll do this in 4 steps:
1. Install the Bodymovin extension
Head to Adobe Exchange and install the free Bodymovin extension.
Note: If you have multiple creative cloud subscriptions, make sure you’re logged into the right one before you add the extension so you can easily find it in the next step.
2. Verify After Effects preferences
Open After Effects and look for Bodymovin, listed under Window > Extensions.
If Bodymovin isn’t there, try quitting and restarting After Effects.
To make sure your file permissions are set up properly, click After Effects > Preferences > Scripting & Expressions (Edit > Preferences > Scripting & Expressions on Windows).
Look for Allow Script to Write Files and Access Network and make sure it’s checked.
3. Render an animation
Now we’ll export a composition using Bodymovin.
Open your animation in After Effects and to export it choose Window > Extensions > Bodymovin. Select your animation and any other compositions you want to render.
Note: If you have any rasterized images in your composition, make sure you Enable compression in the Settings menu.
Check the destination folder and while you’re there, name the JSON file you’re about to export, hit Save, and click Render.
Once that renders, you should now have a JSON file in the destination folder. And now we’ll place the animation on the site.
4. Place the animation in a site
We’ll use Webflow for this step, but the concept is the same hand coding or using another platform.
From the Assets panel on the left, drag the animation into your layout.
That’s it! When you publish, export, or preview, your animation should play automatically.
If you haven’t already, check out our full After Effects & Lottie in Webflow course.
See Airbnb’s Lottie site for a list of their currently supported After Effects features.
Telegram поддерживает анимированные стикеры начиная с версии 5.9. Любой пользователь может создать и управлять своим набором анимированных стикеров.
Telegram использует Lottie — свободный формат для создания анимаций. Ознакомиться с документацией и описанием формата можно тут.
Чтобы создать свой набор, вам понадобится:
- Приложение Adobe After Effects
- Любой графический редактор, который позволяет экспортировать векторные объекты в Adobe After Effects
- Плагин Bodymovin-TG — форк Bodymovin для Adobe After Effects, который позволит экспортировать анимацию в .TGS — специальный формат для Telegram.
Технические требования
- Стикер/холст должен быть размером 512х512 пикселей
- Изображение на стикере не должно выходить за края холста
- Анимация должна длиться не дольше 3 секунд
- Анимация должна быть зацикленной
- Стикер должен весить не более 64 кб
- У всех стикеров в наборе должен быть одинаковый FPS (30 или 60)
- В анимации нельзя использовать выражения (Expressions) и эффекты (Effects). В частности: Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers. Использование этих инструментов не позволит вам сохранить стикер в нужном формате .TGS.
Обратите внимание: если у вас не получается сохранить стикер, или если его не принимает бот значит, скорее всего вы нарушили одно из этих правил.
Загрузка стикеров
Как только ваши стикеры будут готовы, отправьте боту @stickers команду /newanimated , затем отправляйте ему файлы в формате .TGS.
Ещё вашему набору можно добавить иконку. Она должна быть 100х100 пикселей, с зацикленной анимацией длиной не более 3 секунд.
Установка плагина Bodymovin-TG
- Закройте After Effects, если он открыт
- Установите программу ZXP Installer
- Скачайте последнюю версию bodymovin-TG (bodymovin-tg.zxp)
- Откройте ZXP Installer и перетащите туда расширение bodymovin-tg
- В After Effects перейдите в меню Правка (Edit) >Настройки (Preferences) >Сценарии и выражения (Scripting & Expressions) и установите флажок «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети» (Allow Scripts to Write Files and Access Network).
- В меню Window > Extensions вы увидите Bodymovin for Telegram Stickers. Готово!
Сайт про Telegram на русском (неофициальный).
Здесь собраны приложения на базе MTProto, переведена некоторая документация с официального сайта, а также работает Webogram.
But the fact remains that I enjoy making things colorful and fun to look at.
To that end, I went to film school, I’ve put bread on my plate with photography, and I’ve spent a chunk of my adulthood making motion graphics and working in the trenches of post-production digital effects.
In the world of coding, it’s not an earth-shattering revelation that cool visuals occupy less mental real estate than functionality. This isn’t to ignore the obvious role of UX/front-end work, so much as it is to highlight that the parts of the program that can be seen are a conduit toward the behavior of the program and not an end to themselves. To wit, when the first three weeks of the Flatiron School coalesced into in a coding project, the pinnacles of our group’s visual flourish were a pizza emoji selection arrow and a chunk of text reformatted with ASCII characters.
Part of an undertaking like a coding boot camp is a willingness to surrender some parts of you that preceded the experience. By necessity, to take work as a full-time developer I am foreclosing on motion graphics gigs. Still, after spending so much time married to Adobe After Effects, it seemed a shame that I might need to surrender those skills entirely outside designing the odd CLICK HERE button in Illustrator.
And it turns out I won’t have to!
Wondering about how to apply motion graphics to my code led me to the point of this post, a very, very cool piece of software from Airbnb called Bodymovin.
Bodymovin is an extension for After Effects that allows users to export motion graphics from the After Effects client in JSON format to be used on a webpage through a library called Lottie. Throughout this article, I will use the terms Lottie and Bodymovin interchangably despite their distinct roles (Bodymovin does the exporting, Lottie translates the JSON result) because for my purposes, one can’t function without the other. Other developers can doubtless modify the Lottie library to suit their specific needs, though.
Right, so you can export animations from After Effects as JSON. This begs the question: why do this at all?
After all, it’s not like it’s hard to find jpgs, pngs, movies, or animated gifs of cats on the internet. Clearly humanity has the technology to render all sorts of images just fine and dandy.
Let’s find out from Airbnb directly why Bodymovin exists:
In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. One year ago, we set out to change that.
Let’s start by looking at some bits from the Google Home interface, which uses Bodymovin
Every step of those graphics is drawn by the Home software itself. No files are being called down. As a result, the animations can be shuffled around the interface in whatever way suits the designer with a far greater degree of flexibility than can be obtained with an equivalent movie file. The Google Home onboarding uses approximately 40 different animations. Sending each one to the user would make the Google Home application rapidly grow in size and cause it to be bloated in memory once it was in memory. As Lottie instructions, though, the same animations shrink enormously.
Let’s look again at the Bodymovin logo above:
The JSON of that animation is a little less than 1MB and because it outputs as an SVG (scalable vector graphics) file, it will look crisp and beautiful no matter where it lands. The gif above, by contrast, looks well enough for presentation purposes, but there is obvious artifacting and image degradation that no designer worth his salt would accept in a final product. If I wanted to output a version of the Bodymovin logo as perfect as the SVG animation yielded by Bodymovin’s JSON output, it would be several times larger than the gif above.
As developers we want to be conscious of how the resources we use impact the speed of our code and resulting applications. Even in that first Flatiron School project, the simple act of seeding our database with prototype data — all text — took a few seconds. The utility of Bodymovin is that a motion graphics artist or animator can create animated assets in a program like After Effects without necessarily knowing how to write a line of code, and those assets can be used by designers in the same way as any other code object, because the resulting JSON file will be treated as just another set of instructions to be executed by the app, phone, or browser, i.e. as another code object… And since those objects are not media files, they will invariably be significantly smaller in size than they would be if they were exported from After Effects as media assets.
All a designer or developer needs to do to use the resulting animation is to require the Lottie library (which can be exported along with any Bodymovin animation) on a page where you intend to deploy a BodyMovin asset, and… that’s it.
Lottie can also be insert into existing elements and can thus play with many of the same events and functions that apply to !
Bodymovin is in no way a perfect substitute for the sorts of media assets you can generate with After Effects. Since any effects outside basic transformations are not permitted during Bodymovin exports, artists have to carefully plan their animations to avoid some of the most basic tools.
The individual parts of this animation are pretty basic. There are a pair of solids with the radio wave effect under a time displacement adjustment layer mapped to a radial gradient. There are probably only about a dozen keyframes. The fact that I used effects AT ALL, though, meant the Bodymovin render I got from this was totally unrecognizable. While there is a way to make an animation like this in Bodymovin using just shape layers, the work required would be tenfold. Say goodbye to your fractal noise, your glow, and your luma mattes, folks! While Bodymovin can handle alpha channels to some extent, users have reported that it doesn’t always play nicely with masks — you can’t even feather masks!
In general, if you want a Bodymovin export file to look like the original animation, you’ll want to stick with basic shape layers and transformations. The Lottie homepage has some really useful tutorial on building out projects from Adobe Illustrator to After Effects so the resulting work is transmissible to Bodymovin.
Here’s the full list of what you can and can’t use in After Effects if you want to export your image through Bodymovin. Note in that link that many features are restricted by platform, so what looks awesome on MacBook Air may not load at all on your iPhone! Caveat animator!
Despite the software’s limitations, I’m really excited to use Bodymovin and Lottie to add some beauty and flexibility to the graphics I deploy in my software over the course of my nascent career as a developer.
Читайте также: