Первая страница

Saola Animate

создание HTML5 анимации
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О программе

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

Saola Animate

Это продукт вьетнамской компании 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, тогда переменная, объявленная в этой функции, будет глобальной.

Пример

Слева вы видите пример небольшого проекта, сделанного в Saola Animate. Это имитация 3D куба. Совершайте клик по навигационным кнопкам и куб будет поворачиваться в заданном направлении на одну позицию. Как это примерно сделано в программе:

Создано 6 граней куба в виде фигур. Каждая фигура повернута в 3d координатах так, чтобы составить статичный куб. Потом эти фигуры объеденены в группу, для того, чтобы всей группе задавать анимацию движения. Созданы таймлайны для вертикального и горизонтального движений группы. На таймлайне помещены отдельные анимации для каждого поворота и тригер паузы между ними. С помощью Javascript написана логика того, что предпринимать при каждом повороте, а именно - какие навигационные кнопки скрывать/показывать, какие тексты скрывать/показывать.

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

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 ]] (пароль для разархивирования: newart.ru).
[[ Руководство пользователя Saola Animate ]] в PDF на английском языке.
[[ Проект рекламного баннера ]] Вы можете его изучить для лучшего понимания принципа работы программы. Как выглядит результат - см. на этой странице (справа - нижний баннер со спутником).

Видео:
Быстрый старт в Saola Animate - 6-и минутный обзор от разработчика на английском.
Интерфейс Saola Animate - 4-х минутный тур на английском.
Основы анимации в Saola Animate - 4-х минутный ролик на английском.

Ещё программы для анимации:
ActivePresenter // создание интерактивных и анимированных презентаций и тестов
Algodoo // симулятор реального физического мира
Animiz // создание анимированных презентаций с персонажами
Aurora 3D Animation Maker // создание и анимирование 3d текстов и фигур
Camtasia Studio - видеоредактор с анимационными инструментами
Corel PhotoMirage // производство стильных фото-анимаций
DP Animation Maker // "оживление" фотографий анимационными эффектами
Explaindio Video Creator // программа для создания рисованного видео
Express Animate // After Effects Lite с экспортом в Video, HTML5, GIF
Hippani Animator // удобная анимационная студия с экспортом в HTML, video, анимированный gif
Piskel // крайне привлекательная программа для создания и редактирования анимаций в стиле pixel art
VoxEdit // воксельный редактор для моделирования и анимации
Онлайн-сервисы для создания анимации // работают в браузере без загрузки на компьютер
Новости
Реклама
Как пройти в библиотеку
Объявление
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь