Saola Animate

О программе

Saola Animate - очень удобная программа для создания анимации и экспортирования результата в HTML5 проект. Это значит, что вашу анимацию можно внедрить на любой сайт в интернете. Проектом может быть простая анимированная картинка, рекламный или презентационный баннер, игра или целое приложение. Есть шкала времени (таймлайн) и не одна, есть поддержка Javascript, есть инструменты рисования векторных фигур или совершенно свободного рисования. Естественно, на объекты сцены можно навешивать гиперссылки и действия. Анимации поддаются самые разнообразные параметры сцены и объектов, включая перемещение в трехмерном пространстве.

Это продукт вьетнамской компании ATOMI, с которой посетители нашего сайт знакомы по программе для создания интерактивных презентаций ActivePresenter. Многие инструменты для создания и редактирования фигур в этих программах похожи. Еще Saola Animate по своей идеологии, функционалу и интерфейсу очень напоминает Adobe Edge Animate.

Эгоистическое описание

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

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

Анимация вдоль произвольного пути - второе приятное открытие. Вы можете создать любую форму пути и запустить по нему объект. Путь будет состоять из ключевых и обычных точек. Их можно добавлять, удалять перемещать. Обычные точки обладают двумя контролами, потянув за которые вы меняете форму линии, соединяющей две соседние точки. Ключевую точку можно превратить в обычную с контролами путем нажатия клавиши Alt и одновременным протягиванием мыши. В настройках пути на закладке "Позиция и размер" есть опция "Автоматически ориентировать Путь движения" - если ее отметить, то объект будет передвигаться вдоль пути с изменением угла наклона в соответствии с зигзагами линии пути.

Некоторое затруднение вызвала расстановка ключевых кадров анимации на таймлайне. По аналогии с другими программами я сначала расставлял ключи, потом пытался на каждый ключ задать свое оригинальное значение. Так не получалось - изменение значения параметра на одном ключе приводило к изменению значения на всех ключах. Надо действовать по другому сценарию: поставить первый ключевой кадр (кнопка ) на таймлайне. Потом перейти на панель свойств объекта, и поставить ключевой кадр на нужном параметре (там тоже есть кнопки ), потом тут же значение этого параметра изменить.
Кроме того, если вы анимируете местоположение объекта по координатам X и Y, то удобнее воспользоваться кнопкой , которая включает режим автоматической расстановки ключевых кадров по мере перетаскиванияя объекта мышкой.

Не теряйтесь в свойствах выделенного объекта на панели справа. Эта панель состоит из закладок и на каждой закладке свой набор параметров. например, для выделенной фигуры кнопки закладок выглядят так: - это соответственно "Основные параметры", "Позиция и размер", "Заливка и рамка" и "Эффекты".

Обработчик событий вызывается по кнопке . Его можно вызывать для объекта, сцены, документа. Событиями могут быть: клик мыши, наведение мыши, отвод мыши... На события можно назначать действия для: таймлайна, элемента, медиа... Действием могут быть: запуск/остановка таймлайна, скрыть/отобразить элемент, воспроизвести/пауза/остановить медиа, перейти к URL, изменить текст, запустить код Javascript... Событий и действий много, читайте руководство пользователя или изучайте программу методом тыка.

В качестве примера результата работы Saola посмотрите рекламный баннер 240x400px детской библиотеки на этой странице справа. Это мой первый проект, сделанный в описываемой программе. Второй проект (рекламный баннер 240x400px самой программы) я предлагаю к загрузке по ссылке в разделе "Скачать". Третий проект 3D куба смотрите и пробуйте ниже в разделе "Пример".

Подводные камни и неочевидности

За начальное время знакомства с программой наткнулся на такие подводные камни:
- Saola не дружит с установленным на вашем компьютере Punto Switcher. Поэтому, если используете Punto Switcher, то добавьте Saola в программы-исключения, чтобы Punto Switcher в ней не работал. Иначе происходит падение Saola при попытке конвертировать текст горячими клавишами Punto Switcher.
- Saola что-то не очень любит переименования элементов до группировки. То есть, если надо элементы сгруппировать, то сначала их сгруппируйте, а потом уж переименовывайте при необходимости. В противном случае вас ждет падение программы. Переименование происходит не на таймлайне, а на панели "Элемент" (внизу справа). Конечно, в таком режиме не удобно работать. Тогда предлагаю переключить программу на английский интерфейс в котором, в отличие от русского, подобного бага не наблюдается.
- Для задания оси вращения, вокруг которой будет происходить поворот элемента в 3d пространстве, надо использовать параметры "Начальная" (Origin) для X, Y или Z. Благодаря этому ось вращения будет смещаться на величину от 0 до 100% от размера элемента вдоль настраиваемой координаты.
- Не начинайте работать с функционалом Символов, пока не поймете, как и для чего он работает. Я экспериментировал и создавал символы, потом символы удалял co сцены, но как-то неправильно. Файлы символов у меня оставались в папке *_res (это папка ресурсов проекта, где * - имя проекта).
- При необходимости написать Javascript для более гибкого управления объектами проекта вам необходимо знать API, который описан в руководстве пользователя. Но в этом документе нет первоначального базового тезиса - для всех объектов родительским является объект doc. Чтобы, например, скрыть элемент с именем Nav_D надо написать doc.getElement("Nav-D").show(0);
- Задавать глобальную переменную для нужд Javascript нужно так:
Документ > Обработчик событий > Готово > [+] > Другие действия > Использовать Javascript
В функции documentEventHandler(doc, e) объявлять переменную без оператора var, тогда переменная, объявленная в этой функции, будет глобальной.

Пример

Drag&Drop в Saola

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

• Подключить два скрипта по url: http://code.jquery.com/jquery-2.1.3.min.js и https://code.jquery.com/ui/1.12.1/jquery-ui.min.js (именно в такой последовательности!). Это делается на панели Resourses (в русской версии Средства).
• Те элементы, которые должны быть перетаскиваемы, осчастливить классом, например, "drag".
• Создать функцию, например, по готовности сцены, в которую записать $('.drag').draggable(); - теперь эти элементы веб-приложения можно перетаскивать мышкой с места на место.
• Можно также определить цель на холсте, куда разрешается перетаскивать элемент. Присвоить, допустим, такому блоку класс "drop".
• Запишем в той же функции готовности сцены: $('.drop').droppable({accept:$('.drag'), tolerance:'pointer'}); - теперь все элементы с классом "drag" можно складировать в элемент с классом "drop".
• Чтобы draggable-элемент возвращался на место при неудачном бросании в droppable-элемент (пользователь промахнулся) надо строку для draggable-элемента переписать так: $('.drag').draggable({revert:'invalid'});
• У виджетов draggable() и droppable() есть много параметров, о которых вы можете почитать на страницах их API по ссылкам, которые я повесил на их названия.

На практике при создании викторины по английскому у меня возникла необходимость для 10 разных draggable-элементов создать каждому свой droppable-элемент. Названия классов были разные, отличавшиеся лишь номерами. Очевидно, их хотелось засунуть в цикл, чтобы не писать один и тот же код для каждого, меняя лишь номер. Оказалось, что это сделать можно и для draggable- и для droppable-элементов за одним существенным исключением: если в droppable-элементе есть параметр drop:function(), то это в цикле не сработает, надо для каждого отдельного droppable-элемента создавать свой оригинальный код типа $('.drop_1').droppable({drop:function(){...}});

Скачать

📥 Saola Animate 2.7 - это репак (пароль для архива newart.ru). После распаковки и запуска файла Saola.Animate.2.7.1.exe вам будет предложен выбор - установить ли инсталляционную версию, или распаковать портабельню. Итак в архиве:
[[ Репак Saola Animate 2.7.1 ]] с необязательными командными файлами, по названиям которых можно понять из предназначение.
[[ Руководство пользователя Saola Animate ]] в PDF на английском языке.
[[ Проект рекламного баннера ]] Вы можете его изучить для лучшего понимания принципа работы программы. Как выглядит результат - см. на этой странице (справа - нижний баннер со спутником).