WebAnimator

О программе

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

Основные сущности

ПРОЕКТ
В модели процесса работы в программе проект – это набор сцен, таймлайнов, элементов.
В модели результата после экспорта ваш проект будет иметь представление в виде набора файлов: html, css, js, медиа.
У проекта есть некоторые настройки, которые будут общими для всех сцен. Это размер окна, в котором показ вашего проекта будет оптимальным. Это настройка адаптивности верстки для того, чтобы все размеры всех элементов изменялись красиво и пропорционально на разных экранах.

СЦЕНЫ
Сцена – это обособленная область показа с оригинальными для этой области элементами и правилами их поведения. В терминологии сайта сцены назывались бы страницами. В терминологии MS PowerPoint сцены назывались бы слайдами.
Сцен может быть много в проекте. Переход между сценами организуется по событию On mouse click на элементе. Этот переход можно облагородить каким-нибудь эффектом.
У цены также есть несколько своих настроек. Например, для каждой сцены можно задать свой фон. Для каждой сцены можно написать какие-то функции на языке Javascript, чтобы потом по событию на элементе обратиться к функции.

ТАЙМЛАЙНЫ
Это шкала времени. Слева дорожки с элементами, у каждого элемента по умолчанию на шкале только два свойства - Left и Top. Добавить на шкалу можно еще много других свойств по кнопочке [Add property] в строке имени элемента. Анимация какого-то свойства строится по ключевым кадрам: добавляете по кнопочке [+] в разных местах ключи и в них меняете свойство элемента. Теперь это свойство будет изменяться во времени.
При открытии сцены (уже в браузере после экспорта) основная шкала времени запустится автоматически, если проставлен флажок Auto Start на панели свойств сцены.
WebAnimator позволяет создавать несколько таймлайнов в одной сцене. Зачем? Затем, чтобы анимировать любой элемент сцены по событию, например, при клике на другой элемент. Для этого надо создать новую шкалу времени, именно на ней создать анимацию элемента, потом на другом элементе создать событие On mouse click и добавить для него действие Load timeline, выбрав второй таймлайн.

ЭЛЕМЕНТЫ
Элементами наполняется сцена. Это ваш контент. Слева вертикальная панелька – туда направляйте свою мышь для добавления текста, картинки с диска или интернета, видео, аудио, кнопки, фигуры.
Чем отличается элемент Button от Symbol, т.е., кнопка от фигуры? Не тем, что на кнопку можно повесить действие по событию (на каждый элемент можно), а тем, что у кнопки есть три состояния: Normal, Hover и Pressed. Это состояние покоя, состояние при нахождении курсора мыши над кнопкой и состояния нажатой кнопки. При выделении кнопки на сцене над кнопкой появляется переключатель между состояниями, так что, для каждого состояния можно определить разное оформление кнопки.

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

Спотыкач

Принявшись за обзор программы я решил сделать в ней же презентацию её самой. Наметил создание нескольких сцен и меню для переключения между сценами. Честно говоря, чертыхался всю первую половину процесса работы, подводные камни встречались частенько. Но к концу работы все более-менее выправилось и результат я получил, который вы можете посмотреть ниже. Это всё сделано в WebAnimator. В общем, программа вполне рабочая, но в удобстве использования, то, что назывется юзабилити, проигрывает своим одноклассникам: Saola Animate, Google Web Designer и Adobe Edge Animate.

Поэтому, вот основные мои затруднения при работе версии 3.0.6 на компьютере x86 в Windows 7:

• Более всего меня возмутило, что при редактировании текста в текстовом блоке при нажатии клавиши Del удаляется весь этот блок, а не символ справа! Есть два выхода из этой ситуации: а) вместо Del пользоваться клавишей BackSpace для удалении символа слева или б) пользоваться текстовым полем на правой панели свойств выделенного на сцене текстового элемента. Второй способ оказался полезным еще тем, что в этом поле можно применять html-тэги.
• Нельзя заниматься копипастом кнопки с тем, чтобы дубликат кнопки отредактировать на другую задачу на этой же сцене. Я замучился всё переделывать, экспериментируя с таким подходом. Глючит. Надо тупо для каждой задачи создавать новую кнопку с левой панели инструментов. И по-новой её оформять и настраивать. А вот копирование кнопок с одной сцены на другую проходит хорошо.
• При работе с ключевыми кадрами есть такое неудобство. Когда нажимаю [+] для создания нового ключа на шкале времени, то почему-то выделение материнского объекта на шкале пропадает и перемещается на его дочернее свойство. В связи с этим при попытке в только что добавленном ключе изменить значение свойства сталкиваешься с невозможностью этого. Сам элемент-то не выделен и это не сразу замечаешь. Поэтому, приходится все время переключаться между выделением ключа и выделением элемента, чтобы работа шла. Это муторно.
• Группировка элементов вызывает смех. Сгруппировать можно только для того, чтобы их совместно перетаскивать. Но на шкале времени элементы не перемещаются в отдельную папочку группы, как во всех(!) других программах.
• Программа не запоминает местоположение последних проектов на компьютере и всё время при Ctrl+O тырится в юзерскую папку Documents.

Резюме. Возможности в программе заложены вобщем-то неплохие, но есть непродуманные места, к которым, в случае отсутствия у вас альтернативы, привыкнуть можно. И результата добиваться можно. Вот пример презентации:

Скачать, почитать, посмотреть