---
title: HTML анимация в WebAnimator plus 3
description: Программа для создания HTML5 и GIF анимации. Поддержка адаптивного дизайна, вставка видео, звука, множество объектов, эффекты, возможность правки JavaScript
canonical_url: https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3
language: ru-RU
date: 2023-11-05T17:33:18Z
notice: This is a machine-friendly version of the page at https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3.
markdown-tokens: 3197
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3. Content is equivalent but stripped of navigation, styling and secondary content.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.
# Обзор WebAnimator plus 3. Программа для веб анимации
- [Купить WebAnimator непосредственно у разработчика (со скидкой -15%)](https://shop.incomedia.eu/order/checkout.php?PRODS=39655089&QTY=1&CART=1&CARD=2&SHORT_FORM=1&COUPON=affwa2023&AFFILIATE=38667 "Купить WebAnimator без посредников и переплат").
- [Видео обзор](https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3#video-obzor "Видео обзор").
- [Основные возможности](https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3#osnovnye-vozmozhnosti "Основные возможности").
- [Сравнение версий](https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3#sravnenie-versij "Сравнение версий").
- [Подготовка и сценарий](https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3#podgotovka-i-stsenarij "Подготовка и сценарий").
- [Основные принципы работы](https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3#osnovnye-printsipy-raboty "Основные принципы работы").
- [Интерфейс и инструменты](https://aleksius.com/raznoe/programmy-windows/webanimator-plus-3#interfejs-i-instrumenty "Интерфейс и инструменты").
WebAnimator plus – программа для создания анимированных объектов в HTML5 или GIF- формате без знаний HTML, CSS и JavaScript.
## Видео обзор
- Создание баннера с плавающим фоном – с 00:00:59.
- Вставка баннера на сайт WebSite X5 – с 00:06:42.
- Вставка баннера на сайт Joomla – с 00:07:19.
Пример кода из видео для вставки анимации на страницу файла.
```
```
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в [YouTube](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") и [Mail.ru](http://my.mail.ru/v/aleksius.com/ "Канал сайта Aleksius.com на Mail.ru").
При помощи данного программного продукта можно создавать баннеры, слайд-шоу, интерактивные презентации, анимированные кнопки, красивые меню для сайта, анимированные иконки и так далее. Это можно сохранить в виде HTML- страницы с дополнительными файлами и вставить на страницу сайта. WebAnimator создаёт адаптивные анимационные объекты, которые будут адекватно отображаться как на обычных компьютерах, так и на планшетах и телефонах.
Разработчики ориентируют программу на дизайнеров, разработчиков, маркетологов, учителей/преподавателей и просто творческих людей, которым хочется проявить своё творчество.
Есть возможность вставки в программу видео, аудио, растровых и векторных объектов. Также в программе имеется ряд своих объектов со множеством настроек. Для упрощения работы и ознакомления с интерфейсом программы существует несколько готовых шаблонов. Те, кто знаком с HTML или JavaScript, смогут править код. А для программистов может быть полезным API функций WebAnimator.
Перед покупкой можно загрузить бесплатную пробную версию одной из версий программы: [WebAnimator plus](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=https%3A%2F%2Fwww.webanimator.com%2Fen%2Fform-email-demo.html%3Fr%3Dicmwaplusen%26AFFILIATE%3D38667 "Загрузить демонстрационную версию с сайта разработчика"), [WebAnimator now](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=https%3A%2F%2Fwww.webanimator.com%2Fen%2Fform-email-demo.html%3Fr%3Dicmwaen%26AFFILIATE%3D38667 "Загрузить демонстрационную версию с сайта разработчика"), [WebAnimator go](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=https%3A%2F%2Fwww.webanimator.com%2Fen%2Fform-email-demo.html%3Fr%3Dicmwagoen%26AFFILIATE%3D38667 "Загрузить демонстрационную версию с сайта разработчика"). Сравнение версий приведено [ниже в статье](#sravnenie-versij "Сравнение версий").
Работа в WebAnimator чем-то напоминает работу в PowerPoint, Adobe Flash или видео редакторах типа Camtasia, Adobe Premiere. Есть англоязычная документация и техническая поддержка. Плюс, почерпнуть знания и найти ответы на вопросы можно на [форуме](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=http%3A%2F%2Fforum.webanimator.com%2F%3FAFFILIATE%3D38667 "Англоязычный форум разработчика программы").
Примеры созданной в WebAnimator анимации можно посмотреть [на официальном сайте](https://www.webanimator.com/en/animation-gallery.html?AFFILIATE=38667 "Примеры созданной в WebAnimator анимации"), а за дополнительную плату доступны наборы шаблонов. Их можно посмотреть [тут](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=https%3A%2F%2Fwww.webanimator.com%2Fen%2Ftc1_1_transition.html%3FAFFILIATE%3D38667 "Template Collection 1") и [тут](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=https%3A%2F%2Fwww.webanimator.com%2Fen%2Ftc2_1_intro.html%3FAFFILIATE%3D38667 "Template Collection 2").
У программы достаточно скромные системные требования: Windows XP, Vista, 7, 8, 10, наличие ОЗУ не менее 2 Гб. Плюс, для активации программы понадобится подключение к интернету и адрес электронной почты. Сейчас программа доступна на английском, немецком, итальянском и японском языках.
В обзоре будет участвовать последняя, на момент написания статьи (27.09.2018), англоязычная версия WebAnimator plus 3.0.2 в Windows 10 х64.
## Основные возможности
**Общие возможности программы для веб анимации.**
- Поддержка адаптивного дизайна для экспортируемой в HTML5 анимации.
- Для работы анимации в браузере пользователя не нужны дополнительные плагины.
- Удобный интерфейс (рисунок ниже).
- Поддержка сочетаний клавиш для ускорения выполнения различных действий (копирование, создание нового проекта и т.д.).
- Поддержка перетаскивания объектов мышью по рабочей области.
- Наличие англоязычной документации, технической поддержки от разработчика и форума.
[](https://aleksius.com/images/raznoe/programmy-windows/webanimator-plus-3/webanimator-plus-3-b.png "WebAnimator plus 3") WebAnimator plus 3 **Объекты и создание 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](https://aleksius.com/sozdanie-sajtov/incomedia-website-x5/ "Incomedia Website Х5") при помощи объекта *Анимация 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](https://shop.incomedia.eu/affiliate.php?ACCOUNT=INCOMEPZ&AFFILIATE=38667&PATH=https%3A%2F%2Fwww.webanimator.com%2Fen%2Ftc1_1_transition.html%3FAFFILIATE%3D38667 "Template Collection 1") | 4 стандартных шаблона | 4 стандартных шаблона |
| Экспорт в | HTML5, GIF, WAX5, WebAnimator now, WebAnimator plus | HTML5, GIF, WAX5 | HTML5, GIF, WAX5 |
| Сцены, временная шкала и панели инструментов (палитры) | - | + | + |
| Несколько сцен и временных шкал | - | + | + |
| Настройки длительности эффектов (времени) | - | - | + |
| Создание анимированных кнопок | - | - | + |
| Вставка аудио и видео | - | - | + |
| Редактирование JavaScript кода | - | - | + |
| Использование «живой анимации» | - | - | + |
## Подготовка и сценарий
Перед непосредственным созданием веб анимации в самой программе WebAnimator рекомендую всё продумать и создать «сценарий». Рассмотрим план действий на примере рекламного баннера для сайта. Предполагается, что Вы знаете свою целевую аудиторию и определились с задачами, которые будет решать баннер. Например, баннер, ведущий на страницу с подробным описанием [видео уроков по WebSite X5](https://magazin.aleksius.com/video-uroki-website-x5-sozdanie-sajta-s-nulya "Видео уроки 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. Рабочая область проекта (в центре окна программы).
[](https://aleksius.com/images/raznoe/programmy-windows/webanimator-plus-3/interfejs-webanimator-plus-3-b.png "Интерфейс WebAnimator plus 3") Интерфейс WebAnimator plus 3 Также есть ещё линейка, сетка и направляющие. Они отображаются внутри рабочей области и помогают управлять элементами.
В WebAnimator plus 3 шесть основных элементов (в панели элементов):
1. Текстовая область.
2. Изображение.
3. Видео.
4. Аудио.
5. Кнопка.
6. Символы.
Для добавления того или иного элемента на рабочую область сперва нажимаете на него в панели объектов, а затем нажимаете на ту часть рабочей области, где хотите разместить элемент. После этого у элемента можно изменять разные параметры в палитре настроек.
Выделяя один или несколько элементов, можно применять к ним действия при помощи контекстного меню (открывается по нажатию правой кнопкой мыши) и верхнего меню.
На временной шкале располагаются различные события, которые происходят с элементами. Например, появление, перемещение, затухание. При помощи шкалы можно менять продолжительность событий.
Как видите, WebAnimator весьма функциональная программа для создания HTML5 и GIF анимации. Но не стоит забывать, что конечный результат достаточно сильно зависит от идеи и исходных элементов, типа изображений, видео и т.д..
| Похожие материалы |
|---|
| |
| Автор статьи – Хорошевский Алексей |
|---|
| [](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Позвонить в Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Позвонить в Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Позвонить в WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написать письмо") **Социальные сети:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") |
**Полезные** **ссылки:**
- [Купить WebAnimator непосредственно у разработчика (со скидкой -15%)](https://shop.incomedia.eu/order/checkout.php?PRODS=39655089&QTY=1&CART=1&CARD=2&SHORT_FORM=1&COUPON=affwa2023&AFFILIATE=38667 "Купить WebAnimator без посредников и переплат").
| Скачать файл | Описание |
|---|---|
| [ zip ](https://aleksius.com/fajli/181/obzor-webanimator-plus-3-programma-dlya-eb-animaczii/893/primer-proekta) [Пример проекта](https://aleksius.com/fajli/181/obzor-webanimator-plus-3-programma-dlya-eb-animaczii/893/primer-proekta) | WAX5, GIF и HTML анимация из WebAnimator plus 3.0.2 |