В предыдущей сессии я рассказал о том, как создать базовый TimelineLite . Сегодня я покажу вам методы и свойства, которые вы будете использовать для управления воспроизведением вашей TimelineLite. Комбинируя эти методы и свойства, вы можете расширить встроенную функциональность TimelineLite для создания элементов управления перемоткой вперед и воспроизведением / паузой. Я также покажу вам, как легко настроить компонент Slider для использования в качестве скребка TimelineLite.
TimelineLite в действии
Давайте посмотрим на конечный результат, к которому мы будем стремиться:
Вы можете найти все файлы, использованные для создания SWF выше, в исходных файлах этого урока .
Смотреть скринкаст
Методы воспроизведения TimelineLite
Следующие методы дают вам точный контроль над воспроизведением вашей TimelineLite
- play () — начинает воспроизведение вперед с текущей позиции.
- Пауза () — Останавливает временную шкалу.
-
reverse () — заставляет временную шкалу двигаться назад. Если вы хотите изменить только направление временной шкалы и не продолжать воспроизведение в обратном направлении, вы можете передать параметру forceResume значение false — то есть
reverse( false ). - resume () — Начинает воспроизведение с текущей позиции без изменения направления (вперед или назад).
- restart () — воспроизводит временную шкалу с начала
Пользовательские элементы управления воспроизведением
Комбинируя встроенные методы и свойства, можно легко создавать расширенные функциональные возможности:
Перемотка вперед — вы можете создать элемент ускоренной перемотки вперед, увеличив свойство timeScale и принудительно timeScale воспроизведение в прямом направлении.
|
1
2
3
4
5
|
private function fastForwardHandler(e:MouseEvent):void
{
tl.timeScale = 4;
tl.play();
}
|
Play / Pause Toggle — Для переключения между режимами воспроизведения и паузы просто отмените свойство paused . Важно убедиться, что timeScale и reversed свойства установлены на нормальные значения, поскольку они могут быть изменены с помощью кнопок ускоренной перемотки вперед и назад соответственно.
|
1
2
3
4
5
6
|
private function playPauseHandler(e:MouseEvent):void
{
resetTimeScale();
tl.reversed = false;
tl.paused = !tl.paused;
}
|
Компонент Slider Scrubber — Компонент Slider позволяет довольно легко перемещаться по временной шкале, изменяя currentProgress временной шкалы. Ползунок настроен на вывод значений от 0 до 100. В коде это значение преобразуется в число от 0 до 1.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
import fl.controls.Slider;
import fl.events.SliderEvent;
slider.addEventListener(SliderEvent.THUMB_DRAG, sliderChange);
private function sliderChange(e:SliderEvent):void
{
tl.currentProgress = slider.value * .01;
//forces the timeline to stop when the scrubber is released.
tl.pause();
}
|
Домашнее задание
Какая? Вы даете мне домашнее задание? Да! Я хочу, чтобы ты был лучшим Согните мышцы разума с этим небольшим испытанием.
- Создайте TimelineLite, который анимирует шесть элементов
- Создайте кнопки воспроизведения, паузы и реверса, как в демонстрационном файле выше
- Создавайте кнопки со сложными функциями, такими как быстрая перемотка вперед и назад
Чтобы по-настоящему выучить этот материал, нет ничего лучше, чем погрузиться и немного испачкать руки.
Вывод
До сих пор я давал вам достаточное количество информации о создании и управлении анимациями TimelineLite. Хотя есть некоторые очевидные сходства в том, как вы управляете анимациями временной шкалы TimelineLite и Flash IDE, мне очень нравится, как TimelineLite дает аниматорам гораздо больше контроля с помощью методов reverse() , restart() и resume() . timeScale и timeScale открывают некоторые действительно интересные возможности, которые будут обсуждаться еще больше в будущем.
В следующем видео я покажу вам, как добавлять метки к экземплярам TimelineLite, чтобы вы могли легко переходить к определенным разделам ваших временных шкал. Метки TimelineLite работают очень похоже на метки кадров в Flash IDE, но с некоторыми дополнительными функциями. Это будет очень весело.
Если у вас есть какие-либо вопросы или комментарии к этому уроку — или ваша домашняя работа;) — не стесняйтесь оставлять комментарии ниже.
Спасибо за просмотр!