Главная -> Блоги о HTML5 -> Первая анимация в Sencha Animator

Первая анимация в Sencha Animator

Итак, сегодня я хотел бы испытать недавно вышедший продукт Sencha Animator. Как уже было сказано - он позволяет создавать анимацию средствами HTML5.

При запуске программы - она требует ввести Ваш логин и пароль от форума Sencha.com. Если Такой у Вас есть то введите его, если нет то создать Вашу учетную запись можно по следующей ссылке: http://www.sencha.com/forum/register.php

После процедуры несложной регистрации - мы попадаем в главное окно программы.

Окно SEncha Animator

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

Создадим новый проект: File - New Project. В появившемся меню выберем к примеру Medium (640x480).

Создание нового проекта в Sencha Animator

После нажатия кнопки Create появится окно с новым проектом. Сверху расположена панель с примитивами - квадратом (Square), кругом (Circle), линией (Line), Текстом (Text), Изображением (Image) и контейнером (Container). При щелчке на каком-либо из них, внизу - в области рисования появится соответствующий примитив, а на временной шкале появится запись с именем нашего объекта:

Создание нового объекта в Sencha Animator

Заметим, что интерфейс системы пока не самый удобный, и в области рисования Вы можете только перемещать объект, т.е. масштабировать его Вы можете только в правой панели.

Итак, теперь переместите полученный объект по Вашему усмотрению и задайте ему начальные значения в правой панели.

Задание параметров объекта

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

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

Создание ключевого кадра

Вот и все - Ваша первая анимация в Sencha Animator создана! Кликнув на кнопке Play Вы увидите что Ваш объект переместится из положения которое Вы задали в первом кадре в состояние последнего кадра.

Если создать еще один кадр то появится возможность перемещать объект в одно место, затем в другое. Кроме того Вы можете помимо координат объекта менять и другие его свойства - например прозрачность (Opacity), фоновый цвет (Background Color) или толщину рамки. Никто не запрещает Вам вставить еще один объект в Ваш проект и для него также создать контрольные точки.

Первая анимация в Sencha Animator

Таким образом Вы можете создавать практически любую анимацию. То что получилось у нас Вы можете посмотреть по этой ссылке: http://html5blog.ru/examples/sencha-animator-first-project.php

Остается последний вопрос: какие современные браузеры смогут воспроизвести полученный результат? Были проведены тесты в Firefox 3.6, Internet Explorer 9 Beta, Google Chrome 7 и Opera 11 Alpha. Из всех браузеров анимация проигралась только в Google Chrome 7, так что еще рано внедрять в свои сайты баннеры на HTML 5 - на данный момент лучше использовать Flash.