editor.Timeline
Для открытия окна Окно Анимации (Таймлайн), необходимо выделить на сцене объект MovieClip и нажать кнопку Open Timeline (Ctrl + L), которая появится в Редакторе свойств. Таймлайн окно имеет вид, представленный на Рис. 1.
Рис. 1
В данном окне отображаются анимированные свойства, выделенных на сцене MovieClip объектов.
Время на шкале измеряется в кадрах. 1 секунда времени анимации равна 60 кадрам на временной шкале.
В верхнем левом углу Таймлайна расположены кнопки вертикального и горизонтального зума шкалы анимации.
Вертикальная красная линия, присутствующая в окне Таймлайна, является маркером текущего времени. Перемещение этого маркера по шкале времени осуществляется путем его перетаскивания мышью, за его верхнюю расширенную часть, либо горячими клавишами <, >. При этом MovieClip на игровом экране анимируется, в соответствии с текущим временем маркера. Также, переместить маркер текущего времени можно кликом мыши по верхней желтой полосе Таймлана.
Для того, чтобы анимировать объект, необходимо установить маркер времени на то время, в котором необходимо создать ключевой кадр анимации:
После этого меняем значение свойства объекта в редакторе свойств, либо с помощью маркеров трансформации на Игровом экране. Например, перетаскиваем MovieClip по экрану:
При этом на Таймлайне для свойств x и y будут созданы две шкалы анимации, на которых будут записаны ключевые кадры (Keyframes):
Каждая шкала имеет график значения свойства, в виде горизонтальной изогнутой линии, помогающий визуально контролировать анимацию.
По умолчанию, для x, y свойств создаются ключевые кадры с типом SMOOTH (Смягченные). Анимация с ключевыми кадрами такого типа - имеет эффект инерции. Подробнее типы ключевых кадров и их свойства будут описаны ниже.
Перемещая маркер времени все дальше по шкале, и меняя свойства (x, y, rotation, image и другие) объекта через редактор свойств, можно создать бесконечно длинную анимацию, которая будет в последующем воспроизведена в игре, в реальном времени.
Для предварительного просмотра анимации необходимо двигать маркер времени по шкале.
Для просмотра финального варианта анимации в реальном времени, необходимо запустить сцену на выполнение (Ctrl + Space).
При воспроизведении анимации в работающей сцене, на таймлайне показываются маркеры воспроизведения, в виде вертикальных красных линий на каждой шкале анимации. Это позволяет отслеживать работу анимации, и получать представление о том, какой участок анимации воспроизводится в данный момент времени для каждого анимированного поля.
Любые манипуляции с анимацией могут быть в любой момент отменены либо повторены, нажатием кнопок Undo/Redo (Ctrl + Z), (Ctrl + Y).
Каждое свойство объекта имеет свою собственную шкалу анимации, которая создается для свойства при первой попытке его анимировать.
Если редактировать значение свойства MovieClip объекта, в то время как маркер времени стоит на нулевом кадре, то шкала анимации для этого свойства создана не будет. Считается что производится установка начальной позы для объекта. Анимация поля создается только когда маркер времени стоит на не нулевой отметке времени.
В левой части каждой шкалы анимации, отображается имя свойства, которому данная анимация принадлежит, и кнопки управления шкалой анимации: × - Remove field animation... - удаляет анимацию данного поля. < - Previous Keyframe - переход маркера времени к предыдущему ключевому кадру анимации данного поля (Действие данной кнопки похоже на действие горячей клавиши Ctrl + < ). ● - Toggle Keyframe - добавляет либо удаляет ключевой кадр в текущей отметке времени, на которую указывает маркер времени. > - Next Keyframe - переход маркера времени к следующему ключевому кадру анимации данного поля (Действие данной кнопки похоже на действие горячей клавиши Ctrl + > ).
Ключевые кадры, расположенные на шкале анимации, могут быть перемещены, скопированы, или удалены. Также каждый ключевой кадр имеет множество настроек, которые могут быть изменены для группы ключевых кадров, либо для отдельного ключевого кадра.
Для изменения положения ключевого кадра на временной шкале, необходимо перетащить его левой кнопкой мыши.
Перетаскивание ключевого кадра с зажатой клавишей Alt, создает копию ключевого кадра, при этом исходный кадр остается на месте.
Перетаскивать ключевые кадры можно как по отдельности, так и группой. Для выделения группы ключевых кадров, можно кликать по ним с нажатой клавишей Ctrl, либо выделить группу прямоугольной рамкой, начав перетаскивание с пустого участка Таймлайна.
Клик правой кнопкой по ключевому кадру удаляет его, а клик правой кнопкой по пустому участку шкалы анимации создает в месте клика новый ключевой кадр.
Для удаления всех ключевых кадров, выделенных в данный момент на таймлайне, нажмите клавишу Del на клавиатуре. Стоит напомнить, что нажатие клавиши Del, в то время как ни оного ключевого карда на Таймлайне не выделено, удаляет MovieClip объект со сцены полностью.
В таймлайне присутствует возможность копировать ключевые кадры между разными MovieClip объектами. Для этого нужно выделить группу ключевых кадров на таймлайне и нажать сочетание клавиш Ctrl + C, чтобы с копировать кадры в специальный буфер обмена. Затем необходимо выделить MovieClip, в который необходимо скопировать анимацию, и нажать клавиши Ctrl + V. Скопированные ключевые кадры будут вставлены на таймлайн, при этом уже существующие ключевые кадры, время и поле которых совпадает с одним из вставляемых кадров, будут замещены. Буфер обмена таймлана не перетирает системный буфер обмена и буфер обмена дерева сцены.
Перетащить или удалить ключевой кадр, находящийся на нулевой отметке времени (стартовый ключевой кадр), невозможно, однако возможно копирование таких ключевых кадров перетаскиванием с клавишей Alt.
При перетаскивании одного ключевого кадра поверх другого ключевого кадра, в одну и туже отметку времени, будет произведено затирание исходного ключевого кадра. Расположение двух ключевых кадров на одной отметке времени невозможно.
При выделении одного или нескольких ключевых кадров, в нижней части таймлайна отображаются панель редактируемых свойств ключевого кадра. Данные свойства будут описаны в порядке их расположения на панели, слева на право:
Данное поле позволяет привязать к ключевому кадру функцию (колбек), которая будет вызвана в момент прохождения анимации через данный ключевой кадр. Данное поле является Callback редактором, порядок работы с которым совпадает с редактором колбеков в редакторе свойств, например для события onClick компонента кнопки. Подробнее о работе c с редактором колбеков.
На ключевых кадрах, имеющих привязанное к ним действие Action, отображается буква 'A'.
Перечислим самые распространенные действия, назначаемые ключевым кадрам:
this.stop
останавливает воспроизведение анимации у данного MovieClip объекта. Ключевые кадры, которым присвоено данное действие, помечены символом квадрата.
this.remove
удаляет данный MovieClip объект со сцены. Это действие полезно, для автоматического удаления объекта со сцены в конце анимации.
this.gotoLabelIf`portrait-animation,isPortrait
переход на метку 'portrait-animation', в случае, если игра находится в портретном режиме.
Sound.play`click
воспроизводит звук с именем click.
Полный список функций, доступных для привязки к ключевому кадру, открывается при нажатии кнопки многоточия '...', расположенной справа от поля Action. К ключевому кадру могут быть привязаны функции как самого объекта, которому принадлежит анимация, так и методы соседних с ним объектов, либо глобальные функции встроенные в Thing-Engine, либо написанные разработчиком в javascript.
Тип ключевого кадра. Данное свойство представляет из себя выпадающий список, с выбором одного из пяти типов ключевых кадров, существующих в Thing-Engine:
Смягченный тип. Ключевые кадры данного типа работают с физически правильным просчетом движения. Учитывается масса объекта, сила, и трение, заданные через свойства Power и Damp и его инерция. Объект не движется к такому ключевому кадру детерминированно, а лишь на время, пока такой ключевой кадр является целевым, включается физическая сила (магнит), которая тянет объект к данной точке. При достижении анимацией данного ключевого кадра, не гарантируется что объект будет находиться в точке назначения.
Ключевые кадры такого типа позволяют делать движение объектов более естественным за меньшее число действий со стороны разработчика (аниматора). Не смотря на физически правильный просчет анимации, ключевые кадры данного типа не несут большой вычислительной нагрузки, и работают быстрее чем аналогичная Spline анимация.
Линейный тип. Ключевые кадры данного типа двигают объект по прямой, c равномерной линейной скоростью. При достижении анимацией данного ключевого кадра, гарантируется, что объект будет находиться точно в указанной точке.
Дискретный тип. Ключевые кадры данного типа перемещают объект без анимации, моментально, присваивая свойству объекта фиксированное значение, когда анимация проходит через данный ключевой кадр.
Для нечисловых свойств (String, Boolean), допустимы ключевые кадры только данного типа, так как Bool и String не могут иметь промежуточных значений.
Движение с отскоком. Ключевые кадры данного типа ускоряют объект в направлении заданной точки, и в момент, когда свойство объекта достигает заданного значения, происходит отскок, в обратном направлении. Сила отскока задается свойством ключевого кадра Bouncing, а сила ускорения свойством Gravity.
Если при использовании кадра данного типа анимация происходит дискретно, и отскока не происходит, необходимо сменить тип отскока на противоположный.
Данное свойство ключевого кадра доступно только для полей, имеющих числовой (Number) тип. Set speed устанавливает стартовую скорость анимации. Другими словами, Set speed похоже на придание объекту внешнего импульса (толчка) в момент, когда анимация проходит через ключевой кадр, у которого установлено Set speed свойство.
При изменении значения данного свойства, график значения, на шкале анимации, будет иметь преломление вверх или вниз, в зависимости от величины Set speed.
Для того чтобы свойство Set speed работало, необходимо, чтобы следующий ключевой кадр анимации имел тип SMOOTH или BOUNCE, так как только у этих типов скорость анимации является динамически рассчитываемой величиной.
Случайная задержка или ускорение времени. Данное свойство позволяет добавить вариативности (фактор случайности) в анимацию. При установке свойству Time random значения меньше нуля, анимация будет замедляться на данном ключевом кадре на случайное число кадров от 0 до n, и достигнет следующего ключевого кадра позже. Если Time random значение больше нуля, то анимация будет проскакивать случайное число кадров от 0 до n, и достигнет следующего ключевого кадра быстрее. Величина Time random отображается на шкале времени в виде синей линии над ключевым кадром:
Точка зацикливания или перехода. Loop задает время, на которое анимация перепрыгнет при достижении данного ключевого кадра. Если Loop значение совпадает со временем самого ключевого кадра, то считается что ключевой кадр не имеет точки перехода.
Точка перехода отображается на шкале анимации в виде зеленой стрелки под ключевым кадром:
При этом наконечник этой стрелки можно перетаскивать левой кнопкой мыши, и выделять в группе вместе с ключевыми кадрами. Правый клик по стрелке перехода удаляет переход.
Для быстрой установки точки перехода для всех выделенных в данный момент ключевых кадров, можно кликнуть по шкале анимации удерживая клавишу Ctrl.
Когда точка перехода у ключевого кадра задана, рядом с полем
Точка перехода влияет только на анимацию отдельного поля. Это позволяет устанавливать для каждого свойства свой период и время зацикливания. Анимация, в которой периоды зацикливания свойств не совпадают, получает бесконечное количество вариаций при воспроизведении, что может быть использовано для придания анимациям интересных непредсказуемых эффектов.
Если некоторые ключевые кадры на шкале анимации полупрозрачные, это значит что они находятся в недостижимой области анимации, которая образовалась за счет точки перехода или действия this.stop, привязанному к впереди стоящему ключевому кадру. Полупрозрачные ключевые кадры могут быть удалены без видимого эффекта на анимацию.
Точка зацикливания может иметь отрицательное значение. Такая точка будет невидима на таймлайне, но ее значение можно редактировать через свойства ключевого кадра.
Сила и трение. Данные свойства доступны только у ключевых кадров с типом SMOOTH. Эти свойства отвечают за инерционность и скорость объекта. Данные свойства являются глобальными для MovieClip, и их изменение у одного ключевого кадра, влечет изменение этих свойств у всех ключевых кадров данного MovieClip объекта.
Power - является показателем силы, которая тянет объект к целевой точке. Чем больше это значение, тем быстрее будет ускоряться объект. Damp - является показателем сопротивления среды, ограничивающим максимальную скорость объекта и ускорение. Чем больше это значение, тем сопротивление меньше, и тем больше инерции у объекта, тем дольше и сильнее он будет раскачиваться вокруг целевой точки (приходить в равновесие). Preset - выбор предустановленных настроек для Power и Damp. В этом выпадающем списке представлено несколько, часто используемых комбинаций, позволяющих быстро установить желаемую динамику для анимируемого объекта.
При настройке параметров Power и Damp, графики значений на шкалах анимаций пересчитываются с новыми настройками, что позволяет отслеживать примерную динамику объекта по форме графиков.
Сила тяжести и упругость отскока. Данные свойства доступны только у ключевых кадров с типом BOUNCE. Эти свойства отвечают за ускорение объекта, при движении к целевой точке, и коэффициент отскока.
Power - является показателем силы, которая тянет объект к целевой точке. Чем больше это значение, тем быстрее будет ускоряться объект. Damp - является показателем сопротивления среды, ограничивающим максимальную скорость объекта и ускорение. Чем больше это значение, тем сопротивление меньше, и тем больше инерции у объекта, тем дольше и сильнее он будет раскачиваться вокруг целевой точки (приходить в равновесие). Preset - выбор предустановленных настроек для Power и Damp. В этом выпадающем списке представлено несколько, часто используемых комбинаций, позволяющих быстро установить желаемую динамику для анимируемого объекта.
При настройке параметров Gravity и Bouncing, график значений на шкале анимации, пересчитывается с новыми настройками, что позволяет отслеживать примерную динамику и время прыжков объекта по форме графика.
На одном Таймлайне можно совмещать несколько анимаций, которые могут воспроизводиться по очереди, командой из javascript (методы gotoLabel, gotoLabelRecursive), любо по команде от другого объекта на сцене, например от объекта Button событие onClick с параметром all.myMovieClipName.gotoLabel`run.
Начало каждой анимации обозначается текстовой меткой. Новая метка создается правым кликом по верхней желтой линейке Таймлайна:
Метки можно перетаскивать левой кнопкой мыши, и выделять в группе с ключевыми кадрами. Правый клик по метке удаляет ее, а двойной клик - переименовывает.
При переходе на метку, во время работы игры, не происходит моментального переключения состояния анимации. Переход будет совершен плавно. Длительность перехода определяется расстоянием от точки перехода до следующего за ней ключевого кадра. Если точка перехода совершает переход на ключевой кадр с типом SMOOTH или BOUNCE, то в переходе будет учтена текущая инерция объекта в момент перехода. При переходе на ключевой кадр с типом LINEAR, переход будет линейным.
Нет строгого разделения таймлайна на отдельные анимации. В конце каждой анимации должна быть добавлена команда this.stop, в Action свойство одного из ключевых кадров, либо анимация полей должна быть зациклена, если не требуется переход одной анимации в другую. За счет точек перехода, можно сделать переходы из одной анимации в любую точку другой анимации. Все переходы будут бесшовными.
Для создания сложных анимированных объектов, состоящих из множества деталей, необходимо вкладывать MovieClip объекты один в другой (можно комбинировать их с объектами другого типа), и анимировать каждый MovieClip в отдельности. Можно выделять сразу несколько MovieClip объектов и редактировать и предварительно просматривать их анимации группой. Синхронизация анимированных объектов осуществляется за счет размещения в них меток с одинаковыми именами, благодаря чему, при вызове метода gotoLabelRecursive, у корневого объекта анимации, все MovieClip, имеющие указанную при вызове метода метку, начнут воспроизведение требуемой анимации синхронно. Такой подход позволяет гибко комбинировать анимации, создавая определенные метки только у части вложенных объектов.