Панель 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.