Немного ранее мы писали о том, как создать анимированный баннер . Время не стоит на месте и мы, недовольны качеством обоих продуктов: html5maker.com и Adobe Edge, продолжали искать.

И в результате нашли инструмент для быстрого и качественного создания анимации от баннера для сайта до простых игр: Sencha Animator.
Sencha Animator  - десктопное приложение для создания CSS3 анимации. Позволяет создавать анимации для любых платформ и браузеров. Поддержка Chrome, Firefox, IE10 +, Safari, Android 3+, Apple iOS 4+ и BlackBerry OS6 +.

В Senсha можно легко создавать анимации, в режиме реального времени, получать обратную визуальную связь в процессе создания и редактирования, затем просто экспортировать проект в набор, состоящий из готовых JS и CSS-файлов.

Выходные JS и CSS файлы после экспорта вполне читабельны, что позволяет в дальнейшем легко управлять и изменять анимацию по мере необходимости. Все выходные файлы соответствуют любым мобильным стандартам рекламы. Всё это достигается при помощи мощного JS API, который встроен в Senсha.

Что касается самой работы в программе

Интерфейс программы очень похож на интерфейс Adobe Flash, но есть некоторые основные отличия .

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

В Senсha timeline имеет несколько удобных функциональных кнопок! Во Flash, чтобы масштабировать timeline нужно, кликнуть на выпадающее меню и выбрать один из нескольких представленных в списке масштабов отображения. В Senсha же у timeline есть небольшой scrollbar, перемещаясь по которому можно выбрать удобный масштаб отображения в процентном эквиваленте, где масштабов отображения гораздо больше. Это позволяет точнее во времени устанавливать анимацию.

Ещё у timeline есть кнопки управления предпоказом анимации: play stop, вернуться к началу, проиграть один раз, повторять бесконечно. Из всех этих функций самая полезная это " повторять бесконечно. Чем она удобна? Иногда, при создании анимации, состоящей из нескольких движущихся слоев может возникать проблема синхронного движения слоёв после первой итерации предпоказа. Функция полезна тем, что даёт возможность в реальном времени отследить асинхронность и сразу устранить её.

Что ещё о полосе timeline. Так как у нас каждый элемент на своём слое, удобно отслеживать движение каждого. Процесс добавления анимации к элементу осуществляется с помощью двойного клика, по сравнению с Adobe Flash, где добавление анимации осуществляется кнопкой F5 или из контекстного меню, что гораздо дольше по времени, чем 2 быстрых клика!

Что в итоге:

Если вам не принципиальная поддержка IE8 и IE9, то Sencha Animator отличный продукт. Будем пользоваться и всем рекомендуем.