Обзоры расширений Joomla

 

 

WebAnimator plus – программа для создания анимированных объектов в HTML5 или GIF- формате без знаний HTML, CSS и JavaScript. При помощи данного программного продукта можно создавать баннеры, слайд-шоу, интерактивные презентации, анимированные кнопки, красивые меню для сайта, анимированные иконки и так далее. Это можно сохранить в виде 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.

Видео обзор

В данном видео показаны некоторые моменты, описанные в статье.

  • Создание баннера с плавающим фоном – с 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, Rutube и Mail.ru.

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

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

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

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

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

WebAnimator now

WebAnimator plus

Цена (на 27.09.2018)

€ 24,99

1850 р.

860 грн.

€ 59,99

4490 р.

1991 грн.

€ 89,99

6740 р.

2988 грн.

Возможности по редактированию

Изменение настроек анимированных шаблонов

Создание полноценной анимации

Создание полноценной анимации

Входящие в стоимость программы шаблоны

4 стандартных шаблона и коллекция шаблонов №1

4 стандартных шаблона

4 стандартных шаблона

Экспорт в

HTML5, GIF, WAX5, WebAnimator now, WebAnimator plus

HTML5, GIF, WAX5

HTML5, GIF, WAX5

Сцены, временная шкала и панели инструментов (палитры)

-

+

+

Несколько сцен и временных шкал

-

+

+

Настройки длительности эффектов (времени)

-

-

+

Создание анимированных кнопок

-

-

+

Вставка аудио и видео

-

-

+

Редактирование JavaScript кода

-

-

+

Использование «живой анимации»

-

-

+

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

Перед непосредственным созданием веб анимации в самой программе 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
Интерфейс WebAnimator plus 3

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

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

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

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

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

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

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

Похожие материалы

 

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

При скачивании файлов менеджерами загрузок возможны проблемы.
ФайлОписание
Скачать этот файл (primer-eksportirovannogo-proekta-webanimator-plus-3.zip)Пример проектаWAX5, GIF и HTML анимация из WebAnimator plus 3.0.2