В предыдущем видео я показал вам, как реализовать основные элементы управления воспроизведением . Сегодня я собираюсь поговорить об использовании меток для маркировки и перехода к точным местам в TimelineLite. Метки в TimelineLite работают аналогично тому, как метки кадров работают на временных шкалах Flash IDE. Я покажу вам несколько способов добавления ярлыков и некоторые умные способы их использования. Мы также немного рассмотрим некоторые функции, специально предназначенные для TimelineMax.
TimelineLite в действии
Давайте посмотрим на пример, который мы будем строить на видео:
Вы можете найти все файлы, использованные для создания SWF выше, в исходных файлах для этого урока.
Смотреть скринкаст
Добавление меток в TimelineLite
Есть два метода, которые вы можете использовать для добавления меток в TimelineLite
addLabel(label:String, time:Number):void
Добавляет метку в определенное время. Чаще всего указывается текущая продолжительность временной шкалы как времени.
|
1
2
3
4
5
6
7
|
tl.append( TweenMax.to( align_mc, 1, { x:endX } ) );
tl.append( TweenMax.to( align_mc, .2, { autoAlpha:0 } ) );
// add a label named transform immediately after the previous tween is finished.
tl.addLabel(«transform», tl.duration)
tl.append( TweenMax.to( transform_mc, 1, { y:endY } ) );
|
insert(tween:TweenCore, timeOrLabel:* = 0):TweenCore
При использовании insert() для вставки анимации, анимация будет вставлена во время или метку, указанную во втором параметре. Если вы вставите метку, которой еще нет, она автоматически поместит эту метку в конец временной шкалы, а затем вставит анимацию движения. Этот метод заставляет insert() действовать как append() с добавленной стоимостью создания метки.
|
1
2
3
4
5
|
tl.append( TweenMax.to( align_mc, 1, { x:endX } ) );
tl.append( TweenMax.to( align_mc, .2, { autoAlpha:0 } ) );
//insert a tween and the transform label immediately after the previous tween is finished.
tl.insert( TweenMax.to( transform_mc, 1, { y:endY } ), «transform» );
|
Переход к ярлыкам
Интуитивно понятные gotoAndPlay() и gotoAndStop() TimelineLite работают точно так же, как и те же методы объекта MovieClip. Хотя в этом видео рассказывается об использовании gotoAndPlay с меткой, вы также можете пройти время.
|
1
2
3
4
5
|
//jump to the color label and play
tl.gotoAndPlay(«color»);
//jump 1 second into the timeline and stop
tl.gotoAndStop(1);
|
TimelineMax дает нам уникальную возможность играть на определенном лейбле с помощью tweenTo() . Если бы у MovieClips был такой метод, он был бы назван playTo() . В конце этой серии я tweenTo() вам, как добавить легкость в tweenTo() а также ряд других приемов.
Из-за вводного характера этой серии статей некоторые функции TimelineLite / Max, связанные с лейблами, я не рассмотрел. Опытные пользователи могут захотеть ознакомиться с необязательным параметром suppressEvents который можно использовать с документацией gotoAndPlay() и gotoAndStop() .
Помощники по меткам TimelineMax
TimelineMax имеет ряд функций для определения имен меток на основе их отношения к текущей позиции точки воспроизведения или заданному времени. Эти свойства и методы позволяют динамически рассчитывать ближайшую метку в любом направлении.
Свойство
currentLabel — ближайшая метка, которая находится в или перед текущим временем.
методы
getLabelBefore(time:Number) — возвращает предыдущую метку (если есть), которая встречается перед параметром time. Если вы не передадите время, будет использоваться currentTime.
getLabelAfter(time:Number) — возвращает следующую метку (если есть), которая появляется ПОСЛЕ параметра времени. Если вы не передадите время, будет использоваться currentTime .
Вывод
Благодаря мощным свойствам и методам TimelineLite / Max чрезвычайно легко перемещаться и контролировать ваши временные шкалы на основе сценариев. Обсуждаемые нами сегодня функции, связанные с метками, на самом деле просто показывают, что можно сделать. Как только вы овладеете этими основными приемами, вы обнаружите, что создаете временные шкалы с большим количеством динамических функций. Предположим, вы хотите запретить пользователю нажимать кнопку «библиотека», когда он находится в разделе библиотеки. Вы можете просто добавить логику в обработчик нажатия кнопки, который учитывает следующее:
Если предыдущая метка совпадает с меткой кнопки, которую только что нажали, ничего не делайте.
Не стесняйтесь конвертировать это в ActionScript, если вам нужен дополнительный кредит;)
В следующем уроке я собираюсь показать продвинутые методы для добавления тонн анимации к временной шкале с очень небольшим количеством кода и предельной точностью.
Если у вас есть какие-либо вопросы или комментарии к этому уроку, просто оставьте комментарий ниже.
Спасибо за просмотр!