Анимация

Концепция SVG и Adobe Flash CS3

В рассмотренных примерах можно выделить одну важную деталь – для применения параметров данной анимации к нескольким объектам достаточно выделить и скопировать соответствующий фрагмент кода. Эта концепция нашла применение в программе Adobe Flash CS3. Пользователи прошлых версий Macromedia Flash^{1В 2005 году корпорация Adobe Systems купила компанию Macromedia и теперь "Macromedia Flash" выпускается под именем "Adobe Flash".} заметили новую особенность – теперь можно записывать в виде XML-файлов параметры анимации! Создадим новый документ и назовем его "Ball.fla". Рисуем окружность, группируем и устанавливаем ее размеры (рис. 11.1):

Рис. 11.1. Установка параметров окружности (выделено рамкой)

В 20 кадре щелкаем правой кнопкой и в появившемся контекстном меню выбираем "Insert Keyframe" ( или нажимаем кнопку F6). Щелкаем мышью на окружности для выделения ее свойств и устанавливаем следующие параметры (рис. 11.2):

Рис. 11.2. Свойства окружности в двадцатом кадре

Далее выделяем щелкаем в первый кадр и в его свойствах выбираем из выпадающего списка "Tween:" значение "Motion" (рис. 11.3):

Рис. 11.3. Установка свойства "Motion" для кадра

Добавляем вращение шарика (свойство "Rotate" ) и замедление его в конце траектории (Свойство "Ease", рис. 11.4):

Рис. 11.4. Свойства анимации шарика

Нажимаем сочетание клавиш "Ctrl+Enter" – появляется ролик, в котором шарик двигается по диагонали (рис. 11.5):

Рис. 11.5. Готовый ролик

Конечно, мы не заметим вращения шарика – для этого следует добавить на него, например цифру. Для сохранения созданных параметров анимации в главном меню программы выбираем "Commands\ Export Motion XML" (рис. 11.6):

Рис. 11.6. Экспорт настроек анимации в виде XML – файла

В появившемся диалоговом окне сохранения файла вводим название "Ball_animation.xml". Содержимое этого файла можно просмотреть в любом текстовом редакторе:

<Motion duration="1"
     xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
     <source>
          <Source frameRate="12" x="25" y="25" scaleX="1" scaleY="1" rotation="0" elementType="group">
               <dimensions>
                    <geom:Rectangle left="0" top="0" width="50" height="50"/>
               </dimensions>
               <transformationPoint>
                    <geom:Point x="0.5" y="0.5"/>
               </transformationPoint>
          </Source>
     </source>

     <Keyframe index="0" rotateDirection="cw" rotateTimes="1">
          <tweens>
               <SimpleEase ease="1"/>
          </tweens>
     </Keyframe>
</Motion>

Форма записи имеет сходство с SVG – графикой – можно понять значение элементов и атрибутов. Создадим новый проект и назовем его "Rect.fla". Нарисуем прямоугольник, устанавливая для него схожие свойства (рис. 11.7):

Рис. 11.7. Свойства прямоугольника

В главном меню выбираем "Commands\ Import Motion XML", в появившемся диалоговом окне выбираем файл "Ball_animation.xml". Дополнительное окно позволяет задать дополнительные опции импортируемой анимации. Для данного примера можно просто нажать "ОК" (рис. 11.8):

Рис. 11.8. Дополнительное окно опций анимации

В результате для прямоугольника появляется тот же самый тип анимации "Motion", c замедлением и вращением (рис. 11.9):

Рис. 11.9. Импортированные свойства анимации

Осталось только установить ключевой кадр и определить конечное положение объекта. Все остальные свойства уже определены. Теперь заметно вращение (рис. 11.10):

Рис. 11.10. Готовая анимация "Rect.fla"

Понятно, что исходный файл "Ball_animation.xml" может неоднократно применяться для задания свойств анимации других объектов.

К сожалению, эта версия программы не позволяет представлять весь код в виде XML – файла. По-видимому, появления этой возможности можно ожидать в следующих версиях программы.