Плюсы векторной анимации неоспоримы - ничтожный вес, адаптивность без потерь качества, прозрачный фон.
Бла-бла-бла
Короче делаю я значит сайт-визитку для клиента и в блоке с описанием его главного продукта образовалось пустое место. Ну как "образовалось"... писать туда особо и нечего... А фантазии организовать пространство как-нибудь иначе, чтобы не было такой дыры, не хватило. Да и лень😑Ясно-понятно надо бы картинкой проиллюстрировать или что-то в этом вроде (ну ты, как риал_тру_дизайнер понимаешь о чем я). И так как недавно я стал изучать анимацию, то само собой решил в Adobe Animate CC запилить летающие и соединяющиеся молекулы. Ничего сверхестесственного, просто круги с палками, я ж настоящий хОдОжнег.
Не повезло, не фортануло
Спустя 999 часов рисования и анимации кругов, довольный собой я жму Экспорт в SVG на рабочий стол и.... тихо ах*еваю... Этот сучий "Анимэйт" вместо того, чтобы сделать мне анимацию в одном файле, просто засрал весь рабочий стол сотней файлов анимации в формате SVG из расчета 1 кадр - 1 файл.
Как я выяснил позже на форуме Adobe, оказывается программа для создания векторных анимаций для web... НЕ УМЕЕТ делать экспорт этой самой анимации в SVG (Что блэт?!). Если кто не в курсе, SVG - весьма популярный ныне формат векторной графики для сайтов. Раньше проблема решалась дополнениями к программе, но в новой версии разработчики решили поводить нам по бороде...
Хорош трындеть, как делать-то?
- спросишь ты. И так... Сперва нужно учесть несколько неудобных нюансов:
- Меньше матрёшек, т.е. символ внутри символа > внутри символа > внутри символа ....
- Если нужен прозрачный фон - настрой это заранее в параметрах цвета сцены.
- по окончанию процесса анимации переведи все (motion tween) во всех символах, и на главном таймлайне в покадровую анимацию!
не сделав этого, я столкнулся с тем, что анимация корректно отображалась только в MS EDGE. Хромиум-подобные браузеры показывали пустоту.
- Постарайся не использовать растровые изображения в своей анимации.. от слова "совсем". В экспортированной для веб анимации они живут своей жизнью.
- И самое главное. Создавая новый проект в Animate выбери HTML5 Canvas! Если ты уже прое...ался и сделал анимацию в ActionScript3.0 то в меню File>Convert to можешь конвертировать свой днищенский шедевр в требуемый тип документа. Но учти, что многие эффекты, которые доступны для обычной flash анимации будут не доступны в режиме анимации под HTML5, например режим наложения слоя, размытие итд.
Настраиваем экспорт
Наконец-то добрались до самого главного. Вот только меню экспорта нам ничем не поможет. Ну вот такая креативная программа, чё тут сделать...
Тыкаем File > Publish Settings (в русской версии "Параметры публикации")
и выставляем настройки как у меня на скрине. Ниже я кратко опишу основные настройки здесь
- Output name выбираем папку куда Animate будет экспортировать анимацию и задаем имя файла(ов). Выбирай пустую папку.
- JavaScript\HTML - проще говоря выбираем контейнер под нашу анимацию. Это будет файл html в связке с файлом JS. Тут и будут хранится все наши хОдОжества.
- Loop Timeline зацикливает воспроизведение анимации.
- Include hidden layers включает в анимацию скрытые слои.
- Make responsive делает анимашку адаптивной. Так же под ней есть настройка масштабирования при растяжении.
- Include preloader добавляет значок загрузки, пока собственно загружается анимация. Нах не нужен, если только ты не запихал туда растр.
- Export image assets (!) Очень важная настройка! Выбираем последний пункт - image assets, иначе хОета получится!
- Export sounds assets экспортирует звуки, если они есть.
- Export CreateJS assets при необходимости создаст файл для управления объектами и интерактивным содержимым. Да я тоже не особо понял. Ставь галку и забей.
Всё! жмем PUBLISH! На выходе получаем файлы. Обычно это 2 файла html (контейнер) и JS в котором собственно и творится вся магия.
Далее просто встраиваем html файл как обычный <iFrame> в нужном месте на основной веб странице.
Ну собственно вот и весь процесс. Если что - спрашивай в комментах, чем смогу - помогу; и не забудь ткнуть лайк (иначе он ткнёт тебя😁)