Панель Timeline (шкала времени) во Flash CS6
На этом уроке курса о Flash CS6 мы поговорим о панели Timeline
(шкала времени). Это один из ключевых моментов изучения этой программы и создания анимации, поэтому отнеситесь к материалу этого урока очень внимательно. Добейтесь его полного понимания и в конце закрепите изученное созданием собственных простых примеров.
Шкала времени Flash CS6 находится под главным меню программы (если выбрано рабочее пространство — Classic
).
По аналогии с кинопленкой, Flash измеряет время в кадрах. Во время воспроизведения флеш-ролика, головка плейера (красная вертикальная линия) перемещается вдоль кадров на шкале времени.
Для различных кадров содержание сцены может быть разным. Чтобы увидеть содержание определенного кадра на сцене переместите головку плейера на этот кадр на шкале времени.
В нижней части панели Timeline
Flash CS6 показывает номер выбранного кадра, частоту воспроизведения кадров (сколько кадров проигрывается в секунду) и сколько времени прошло с момента запуска анимации (в секундах).
В панели Timeline
также находятся и слои, которые помогают организовать элементы в документе. К этому моменту в вашем проекте есть только один слой с именем Layer 1
.
Думайте о слоях, как о множестве кинопленок, которые расположены одна над другой. Каждый слой может содержать различные картинки, которые появляются на сцене.
Вы можете рисовать и редактировать объекты на одном из слоев, не затрагивая при этом объекты на других. Слои распологаются в определенном порядке, перекрывая друг друга — объекты, расположенные на самом нижнем слое шкалы времени будут самыми последними в стеке на сцене.
Содержание слоев можно скрывать, блокировать от воздействия (lock) или показывать в виде контуров, кликая на точках, расположенных под иконками опций слоя.
Переименование слоя во Flash CS6
Хорошей практикой считается разделение содержания анимации по слоям и присваивание этим слоям имен, которые помогают быстро найти нужный слой в дальнейшем.
1. Выделите существующий слой на шкале времени, который называется Layer 1
.
2. Дважды кликните на имени слоя, чтобы переименовать его и введите слово background
.
3. Кликните вне поля с именем, чтобы присвоить новое имя.
4. Кликните на точке, которая находится под иконкой с замком. Блокирование слоя предотвращает случайное воздействие на него во время редактирования объектов на других слоях.
Иконка с перечеркнутым карандашом, которая появилась рядом с именем слоя, говорит о том, что вы не сможете производить изменения на слое, поскольку он блокирован.
Добавление слоя
Новый документ во Flash CS6 содержит только один слой, но при необходимости вы можете добавить их столько сколько нужно. Объекты на верхних слоях будут перекрывать объекты на нижних.
1. Выберите на шкале времени слой background
.
2. Выберите Insert > Timeline > Layer
. Чтобы создать новый слой вы можете также кликнуть на иконке New Layer
в нижней части шкалы времени. Новый слой появится над слоем background
.
3. Дважды кликните на имени нового слоя, чтобы переименовать его и введите photo1
. Кликните вне поля с именем. Новое имя присвоится этому слою.
Теперь на вашей шкале времени два слоя. Слой background
содержит фоновую картинку, а вновь созданный слой photo1
пока пуст.
4. Выберите слой photo1
.
5. Выберите Window > Library
, чтобы открыть панель Library
(Библиотека), если она еще не открыта.
6. Кликнув на файле photo1.jpg
и удерживая левую кнопку мыши перетащите его на сцену.
photo1.jpg
появится на сцене и перекроет фоновую картинку background.jpg
.
7. Выберите Insert > Timeline > Layer
или кликните на иконке New Layer
(новый слой) в нижней части шкалы времени, чтобы добавить третий слой на шкалу времени.
8. Присвойте третьему слою имя photo2
.
Если вы больше не нуждаетесь в каком-то слое, то вы можете легко его удалить, кликнув на кнопке Delete
(мусорная корзина) внизу шкалы времени. Чтобы изменить положение слоя в стеке нужно кликнить на нем и перетянуть на новую позицию в стеке.
Создание (вставка) новых кадров
К настоящему моменту на сцене находятся картинка с фоном и перекрывающая ее photo1.jpg
, но вся существующая анимация существует лишь в одном кадре. Для того, чтобы увеличить время анимации нужно добавить дополнительные кадры на шкалу времени.
1. Выделите 48-й кадр на слое background
.
2. Выберите Insert > Timeline > Frame
(F5
) или кликните на выделенном кадре правой кнопкой мыши (Windows) и в появившемся контекстном меню выберите Insert Frame
(вставить кадр).
Flash добавит кадры на слое background
до выделенной точки включительно, кадр 48
.
3. Выделите 48-й кадр на слое photo1
.
4. Выберите Insert > Timeline > Frame
(F5
) или кликните правой кнопкой мыши и в появившемся контекстном меню выберите Insert Frame
.
Flash добавит кадры на слое photo1
до 48-го кадра.
5. Выделите 48-й кадр на слое photo2
и вставьте кадры на этот слой.
Теперь на шкале времени три слоя, у каждого из которых 48 кадров. Поскольку частота кардов у этого ролика равна 24 кадра в секунду, следовательно общая продолжительность ролика равна 2 секундам.
Выделение нескольких кадров
Для того, чтобы выделить несколько кадров на шкале времени нужно удерживать нажатой клавишу Shift
во время этого выделения.
Если вы хотите вставить несколько кадров сразу на несколько слоев, то нажмите клавишу Shift
и выберите точку, до которой вы хотите вставить новые кадры на всех слоях.
Затем выберите Insert > Timeline > Frame
.
Создание ключевого кадра
Ключевой кадр указывает на изменение содержания сцены. На шкале времени ключевые кадры выглядят в виде кружков. Пустой кружок означает отсутствие какого-либо содержания на данном слое в конкретный момент времени.
Например, на слое background
первый кадр — ключевой и на нем изображена черная точка. Это значит, что слой не пустой, на нем находится какая-то информация.
У слоя photo1
также первый ключевой кадр не пустой. Оба слоя background
и photo1
содержат фотографии.
Однако, слой photo2
пустой. На это указывает пустой кружок его первого ключевого кадра.
Давайте вставим ключевой кадр на слое photo2
именно там, где должно появиться вторая фотография.
1. Выделите 24-й кадр на шкале времени слоя photo2
. После выделения этого кадра Flash CS6 его номер в нижней части шкалы времени.
2. Выберите Insert > Timeline > Keyframe
(F6
).
Новый ключевой кадр под номером 24
с пустым кружком появится на слое photo2
.
3. Выделите 24-й кадр на слое photo2
.
4. Перетащите photo2.jpg
из библиотеки на сцену.
Пустой кружок в 24 кадре станем черным, указывая на то, что на слое photo2
произошли изменения. Вторая фотография появилась на сцене. Кликните на головке плейера и перетащите ее вправо, чтобы увидеть, что происходит на сцене в любой точке шкалы времени. Вы увидите, что фоновая картинка и photo1.jpg
будут показываться на всем протяжении анимации, тогда как photo2
начнет отображаться, только начиная с 24 кадра.
Понимание того, что такое кадры и ключевые кадры — это очень важный момент для успешного освоения Flash CS6. Убедитесь в том, что вы хорошо поняли почему слой photo2
содержит 48 кадров с двумя ключевыми из них: первый — пустой, 24-й — заполненный.
Перемещение ключевого кадра на шкале времени
Если вы хотите, чтобы photo2.jpg
появлялся раньше или позже, то нужно переместить ключевой кадр, в котором эта картинка появляется на шкале времени. Это легко сделать, выделив этот кадр и перетащив его затем в новую позицию.
1. Выделите 24-й кадр на слое photo2
.
2. Слегка переместите курсор мыши и вы увидите, что рядом с ним появилась иконка с прямоугольником, указывающая на то, что можно перемещать этот ключевой кадр.
3. Кликните левой кнопкой мыши и перетащите ключевой кадр на 12-й кадр этого же слоя.
Теперь photo2.jpg
появляется на сцене немного раньше чем прежде.
Удаление ключевых кадров
Если вы хотите удалить ключевой кадр, то не нажимайте клавишу Delete
! Сделав это вы удалите содержание слоя, которое находится в этом ключевом кадре. Вместо этого, выделите ключевой кадр и выберите Modify > Timeline > Clear Keyframe
(Shift+F6
). Этот кадр будет удален со шкалы времени.
На следующем уроке я вам расскажу как правильно организовывать слои в панели Timeline.