Обзор WebAnimator plus 3. Программа для веб анимации

• Купить WebAnimator непосредственно у разработчика (со скидкой -15%).

• Видео обзор.
• Основные возможности.
• Сравнение версий.
• Подготовка и сценарий.
• Основные принципы работы.
• Интерфейс и инструменты.

WebAnimator plus – программа для создания анимированных объектов в HTML5 или GIF- формате без знаний HTML, CSS и JavaScript.

Видео обзор

• Создание баннера с плавающим фоном – с 00:00:59.
• Вставка баннера на сайт WebSite X5 – с 00:06:42.
• Вставка баннера на сайт Joomla – с 00:07:19.

Пример кода из видео для вставки анимации на страницу файла.

<iframe src="/images/animatsiya/aleksius-com.html" width="728" height="300" frameborder="0" align="middle">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

При помощи данного программного продукта можно создавать баннеры, слайд-шоу, интерактивные презентации, анимированные кнопки, красивые меню для сайта, анимированные иконки и так далее. Это можно сохранить в виде HTML- страницы с дополнительными файлами и вставить на страницу сайта. WebAnimator создаёт адаптивные анимационные объекты, которые будут адекватно отображаться как на обычных компьютерах, так и на планшетах и телефонах.

Разработчики ориентируют программу на дизайнеров, разработчиков, маркетологов, учителей/преподавателей и просто творческих людей, которым хочется проявить своё творчество.

Есть возможность вставки в программу видео, аудио, растровых и векторных объектов. Также в программе имеется ряд своих объектов со множеством настроек. Для упрощения работы и ознакомления с интерфейсом программы существует несколько готовых шаблонов. Те, кто знаком с HTML или JavaScript, смогут править код. А для программистов может быть полезным API функций WebAnimator.

Перед покупкой можно загрузить бесплатную пробную версию одной из версий программы: WebAnimator plus, WebAnimator now, WebAnimator go. Сравнение версий приведено ниже в статье.

Работа в WebAnimator чем-то напоминает работу в PowerPoint, Adobe Flash или видео редакторах типа Camtasia, Adobe Premiere. Есть англоязычная документация и техническая поддержка. Плюс, почерпнуть знания и найти ответы на вопросы можно на форуме.

Примеры созданной в WebAnimator анимации можно посмотреть на официальном сайте, а за дополнительную плату доступны наборы шаблонов. Их можно посмотреть тут и тут.

У программы достаточно скромные системные требования: Windows XP, Vista, 7, 8, 10, наличие ОЗУ не менее 2 Гб. Плюс, для активации программы понадобится подключение к интернету и адрес электронной почты. Сейчас программа доступна на английском, немецком, итальянском и японском языках.

В обзоре будет участвовать последняя, на момент написания статьи (27.09.2018), англоязычная версия WebAnimator plus 3.0.2 в Windows 10 х64.

Основные возможности

Общие возможности программы для веб анимации.

• Поддержка адаптивного дизайна для экспортируемой в HTML5 анимации.
• Для работы анимации в браузере пользователя не нужны дополнительные плагины.
• Удобный интерфейс (рисунок ниже).
• Поддержка сочетаний клавиш для ускорения выполнения различных действий (копирование, создание нового проекта и т.д.).
• Поддержка перетаскивания объектов мышью по рабочей области.
• Наличие англоязычной документации, технической поддержки от разработчика и форума.

Объекты и создание HTML анимации.

• Наличие шаблонов (пресетов). Возможность создания своих «настроек проектов» для их дальнейшего использования в разных проектах.
• Наличие анимационных эффектов с настройками.
• Текстовый объект с поддержкой HTML тегов и множеством настроек (рисунок ниже): тип шрифта (гарнитура), размер шрифта (кегль), начертание, цвет, прозрачность, расстояние между буквами (кернинг) и т.д. Включая настройки строк.

• Поддержка шрифтов Google (Google Fonts).
• Вставка растровых изображений типа PNG, JPG и т.д.
• Вставка векторных изображений формата SVG.
• Вставка бесплатных растровых и векторных изображений из онлайн библиотеки Pixabay.com.
• Вставка видео с YouTube или с Вашего компьютера (MP4, OGG).
• Вставка аудио файлов OGG, MP3, и WAV.
• Вставка кнопок с множеством настроек внешнего вида (отдельно по состояниям: нормальная, наведённая, нажатая) и действий по нажатию, наведению мыши и т.д.
• Более 80 простых векторных объектов с множеством настроек (рисунок ниже): квадратики, звёздочки, кружки, машинки, человечки и др.

• В зависимости от объекта будут доступны разные наборы опций, позволяющих менять внешний вид, «функционирование» объектов и их анимацию.
• При работе с объектами Вы сможете применять копирование, вставку, вырезание, удаление, группировку, сортировку/наложение (порядок «слоёв»), можно будет привязываться к сетке рабочей области и применять направляющие («линейки»).
• Наличие отдельных «сцен» (аналог слайдов в PowerPoint) и временной шкалы для работы с «событиями» (движение, изменение прозрачности).
• Возможность правки HTML и JavaScript кода (рисунок ниже).
• Наличие API для доступа к функциям.

Экспорт.

• После экспорта будет доступен основной HTML файл и папка с дополнительными объектами: картинки, CSS, jQuery и JavaScript.
• В GIF файл можно экспортировать далеко не всё, что можно экспортировать в HTML, так как есть ограничения по формату. Например, не работают ссылки. Плюс, GIF – растровый формат, он адаптируется под разрешение экрана с потерей качества, присущего всем подобным изображениям.
• Формат HTML5 анимации, который можно вставить на страницы сайта в программе WebSite X5 при помощи объекта Анимация HTML5.

В конце статьи, над комментариями, Вы сможете найти архив с проектом, сделанном в WebAnimator plus 3.0.2 и экспортированным в HTML, GIF и WAX5 файлами.

Сравнение версий

Подготовка и сценарий

Перед непосредственным созданием веб анимации в самой программе WebAnimator рекомендую всё продумать и создать «сценарий». Рассмотрим план действий на примере рекламного баннера для сайта. Предполагается, что Вы знаете свою целевую аудиторию и определились с задачами, которые будет решать баннер. Например, баннер, ведущий на страницу с подробным описанием видео уроков по WebSite X5.

1. Изучить сайт и место на нём, где будет располагаться баннер. Нужно знать размеры для баннера и общее цветовое оформление сайта.
2. Продумать общую идею баннера. Определиться, как будет отслеживаться его эффективность. Например, подсчёт количества переходов по ссылке с баннера на страницу с описанием видео уроков.
3. Написать максимально подробный «сценарий» анимации. Например: на красном фоне слева направо выезжает картинка с коробкой видео уроков, в это же время справа налево выезжает белая надпись «Видео уроки WebSite X5». Шрифт надписи – Arial не менее 14 пунктов. Продолжительность появления коробки и надписи - 2 секунды. По нажатию на надпись должен происходить переход по ссылке с UTM меткой – «https://magazin.aleksius.com/?utm_source=aleksius&utm_medium=modul&utm_campaign=170». Возможно, понадобится писать разные сценарии для разных устройств.
4. Подготовить все необходимые объекты согласно сценарию: картинки, тексты, ссылки, видео и т.д. Возможно, понадобится подготавливать разные объекты с учётом сценариев для разных устройств.
5. Создать HTML анимацию в WebAnimator.
6. Протестировать созданную веб анимацию (лучше на разных устройствах). При необходимости внести изменения и повторить тесты.
7. Разместить экспортированную анимацию на сайте.
8. Отслеживать эффективность анимации и на основании этого менять её элементы или сценарии для получения более качественного результата.

Как видите, программа для веб анимации – это только инструмент воплощения идеи. Для достижения качественного результата может понадобиться ряд специалистов:

• Маркетолог, менеджер, SEO-специалист (один или несколько человек). Для генерации идей, анализа аудитории, постановки задач, управления командой «разработчиков» и анализа результатов.
• Веб-дизайнер (художник-мультипликатор). Для создания изображений. Возможно ещё понадобятся те, кто будут создавать видео, аудио, фото и писать тексты. Всё зависит от масштабов и сценария.
• «Веб-аниматор». Для создания анимации в WebAnimator и её размещения на сайте. Не нашёл подходящего названия для данного рода занятия, но ранее таких людей называли «Flash-аниматор».

Основные принципы работы

В WebAnimator plus 3, как и в большинстве аналогичных программ всё начинается с создания проекта и задания его основных характеристик (рисунок ниже). От этого будет зависеть размер рабочей области проекта и конечный размер (ширина, высота) объекта анимации.

Проект можно создать на основании готовых шаблонов (рисунок ниже).

У всех добавляемых объектов в область проекта есть свойства. Достаточно выделить объект мышью и рядом с ним появятся панели с доступными настройками (рисунок ниже). У разных объектов могут быть разные настройки. В этих же настройках можно назначать действия по нажатию, наведению курсора мыши на объект.

Также в настройках можно применять к объектам анимацию и эффекты. У них тоже есть свои настройки.

Над объектами можно производить различные действия, доступные в контекстном меню и в верхнем меню программы. Для этого выделите один или несколько объектов и нажмите правую кнопку мыши (рисунок ниже).

Просматривать проекты можно в установленных у Вас браузерах (пункт меню Preview).

Для экспорта готового проекта нужно выбрать подходящий вариант в меню Export.

Интерфейс и инструменты

Условно интерфейс WebAnimator можно разделить на 6 областей (рисунок ниже).

1. Верхнее меню (на рисунке ниже обведено синим).
2. Панель элементов (на рисунке ниже обведено зелёным).
3. Панель сцен (на рисунке ниже обведено жёлтым).
4. Палитры настроек (на рисунке ниже обведено красным). Всего 5 палитр: проект, сцена, элементы, анимации, эффекты.
5. Временная шкала (на рисунке ниже обведено белым).
6. Рабочая область проекта (в центре окна программы).

Также есть ещё линейка, сетка и направляющие. Они отображаются внутри рабочей области и помогают управлять элементами.

В WebAnimator plus 3 шесть основных элементов (в панели элементов):

1. Текстовая область.
2. Изображение.
3. Видео.
4. Аудио.
5. Кнопка.
6. Символы.

Для добавления того или иного элемента на рабочую область сперва нажимаете на него в панели объектов, а затем нажимаете на ту часть рабочей области, где хотите разместить элемент. После этого у элемента можно изменять разные параметры в палитре настроек.

Выделяя один или несколько элементов, можно применять к ним действия при помощи контекстного меню (открывается по нажатию правой кнопкой мыши) и верхнего меню.

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

Как видите, WebAnimator весьма функциональная программа для создания HTML5 и GIF анимации. Но не стоит забывать, что конечный результат достаточно сильно зависит от идеи и исходных элементов, типа изображений, видео и т.д..

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Купить WebAnimator непосредственно у разработчика (со скидкой -15%).