Aphalina

О программе

Aphalina Animator – это удобная оконная программа для создания анимации на базе SVG и сохранения ее в разные форматы: HTML5, GIF, видео. Композиционная структура проекта состоит из сцен, сцена содержит различные элементы, элементы можно анимировать с помощью таймлайна и задавать действия на события, в сцене допускается присутствие больше одного таймлайна. Таким образом, в программе создается современный контент для интернета – от анимированных иконок до веб-приложений.

Об SVG

SVG – это стандарт векторной графики, широко используемый в интернете для статических и анимированных изображений. Качество отображения векторных изображений не зависит от масштабирования и весят они, как правило, меньше аналогичных растровых. Впрочем, в контейнер SVG могут быть включены растровые изображения, а также стили CSS и скрипты Javascript, что позволяет в одном файле иметь сложносочиненный проект, который будет действовать как автономное веб-приложение.

С помощью Javascript можно манипулировать различными параметрами элементов SVG, что эксплуатируется программой Aphalina, которая позволяет вам настроить интерактивность и анимацию даже без знания программирования. Но если вы Javascript знаете, то ваша компетенция вебаниматора заметно повышается.

P.S. Любопытным ссылка на статью, как с помощью кода создавать эффект рисования в SVG.

Работа

СЦЕНЫ. Для чего они нужны в количестве больше одной? Их можно сравнить со страницами сайта или со слайдами презентации. Они облегчают понимание и работу со структурой проекта. По событию мыши можно осуществлять переход между сценами с применением анимации перехода. Список сцен находится над таймлайном слева – там они перечислены по именами и между ними можно переключаться. Пользователь также может вывести отдельное окно сцен через меню Window > Scenes и закрепить его в любом месте интерфейса отдельной панелью.

ЭЛЕМЕНТЫ. Различные фигуры добавляются на холст по кнопке [+]. Также можно нарисовать фигуру любой формы по кнопке . На закладке Inspector размещаются параметры оформления выделенного элемента (для открытия Inspector выделите элемент инструментом Select ). Также в здесь поле Name при желании задается ID элемента, по которому к нему может обратиться Javascript. Этот параметр также является именем элемента на таймлайне, когда на него заводится анимация.

ТАЙМЛАЙНЫ. Чем хороши эти шкалы времени. В них можно хранить различные анимации различных элементов, которые без активации таймлайна будут статичны. Когда же по клику или при наведении мыши на какой-то элемент нужно что-то оживить (не обязательно этот же элемент), то можно вызвать соответствующий таймлайн. Это делается на закладке Actions при выделенном элементе: нажмите (+) на нужном событии мыши и выберите нужное действие.

АНИМАЦИЯ. Чтобы какой-то параметр элемента изменялся со временем (что будет видно также на таймлайне) надо выделить элемент на холсте, нажать на таймлайне иконку ключевого кадра , выбрать параметр для анимации. На таймлайне будет создан блок этого элемента с доступными для анимации параметрами. Теперь, последовательно выделяя на таймлайне ключевые кадры (кружочки) параметра и меняя его значение на холсте или в Inspector, можно добиться его анимирования.
Есть интересные фичи svg-анимации: движение по пути и эффект рисования.

СКРИПТЫ. На событие мыши можно навесить программный код Javascript. Это делается в Инспекторе – по кнопке (+) надо выбрать Execute JScript и написать его. Тут скорее всего вам понадобиться знание объектной модели SVG или библиотеки TweenMax, но в задачи этой ознакомительной статьи такое не входит. Ну, разве что, маленький пример:

document.getElementById("Podskaz").setAttribute("fill","#00F");

Есть еще СЛОИ и ГРУППЫ – для чего они нужны, понятно на интуитивном уровне.

Ограничения

Программа проприетарная, но есть бесплатная версия, которая имеет ограничения. Эти ограничения не столь существенны для человека с головой. А именно:

1. Нельзя сохранять проект. Так звучит в описании бесплатной версии. Ну да, соответствующие пункты меню не активны. На самом деле Aphalina всегда держит актуальным последние редактируемые проекты в профиле пользователя Windows и открывает их автоматически при очередном запуске программы. Так что, те проекты, которые открыты в программе в виде закладок, сохраняются. Это важно для большого проекта, который делается не один день.
C:\Users\YOUR_USER_NAME\AppData\Roaming\Aphalina\Animator\ApplicationState\ – в этой папке находятся именно проекты, имена файлов которых выглядят как 7d051a92-3dc9-4985-8e81-f3fda117ac5d. Этот файл достаточно переименовать и дать ему расширение apha – вот вам и сохраненный проект, который потом можно открыть в любое время.
Таким образом, совет простой – программу закрывайте, но нужные проекты в ней не удаляйте пока не доведете их до нужного результата. Когда доведете, то файл проекта переименуйте и пересохраните в надежное место.
Но даже если бы и такого сохранения не было, то открытый проект всегда можно экспортировать в конечный вид (html с svg внутри, анимированный gif, видео) по кнопке .

2. При экспорте тоже есть засада. Программа добавляет свой водяной знак в виде одной строки "created with Aphalina Animator". Легче всего он побеждается в HTML. Там за водяной знак отвечает блок div, который просто удаляется в любом текстовом редакторе.
Для удаления водяного знака в GIF посоветую программу ScreenToGif – в ней надо воспользоваться инструментом кадрирования или наложения фигуры.
Для удаления водяного знака из видео могут помочь многие видеоредакторы, например, Camtasia Studio.

Вообще, разработчики программы как-то слабо контролируют введенные ограничения. Так, если проект запустить на предпросмотр по кнопке , то он открывается по пути: C:\Users\YOUR_USER_NAME\AppData\Roaming\Aphalina\Animator\temp\export.html
И в этом файле нет блока с водяным знаком. В нем и в законно экспортируемом html есть одна зависимость – js-библиотека: https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
Для перфекционистов, желающих иметь полнейшую автономию, советую файл TweenMax.min.js скачать и в html изменить путь к нему.

Скачать

📥 Страница скачивания инсталятора для Windows с официального сайта.
📥 Скачать портабельную версию Aphalina 1.5 (пароль для разархивирования newart.ru). Проверял на Windows 10 x64. В архиве программа весит 7 мб, после разархивирования – 15 мб.

Видео:
📺 Как в Aphalina анимировать процесс рисования фигуры (на русском).
📺 Как в Aphalina задать движение объекта вдоль пути (на русском).