Слои в анимации можно представить как стопку просвечивающихся листов бумаги. На каждом таком листе может быть одно или несколько изображений (рис. 1). Такой механизм организации рисунка позволяет изменить одно изображение не затрагивая другое, а также упрощает математическую модель анимации. В результате размер готового файла становится меньше.

Рис. 1. Слои в графике

Еще одно неоспоримое преимущество слоев в компьютерной графике: их можно перемещать относительно друг друга, выдвигая на передний план то или иное изображение.

2. Работа со слоями в Synfig

Несмотря на то, что на одном слое можно разместить несколько изображений, в Synfig Studio поддерживается идея «каждому примитиву отдельный слой». Поэтому новый слой автоматически создается при рисовании любой фигуры. Это неудобно для сложных изображений, например, изображения человека, которое может состоять из множества примитивов, а анимировать его необходимо целиком. Однако в Synfig можно группировать слои, а затем перемещать группу уже как единое целое.

Панель слоев «по-умолчанию» располагается в нижней части правого «плавающего» окна. Если нарисовать на холсте несколько фигур, то на данной панели будет отображен список слоев (рис. 2).

Рис. 2. Панель Layers
(а – обозначение панели, б - список слоев,
в - кнопки управления слоями, г - имена слоев)

Имя слоя можно изменить. Для этого необходимо выделить слой, затем щелкнуть по названию, вписать новое имя и нажать Enter. Снятие флажка (слева) делает слой невидимым. Часто это бывает удобно при редактировании изображения. Кнопки в нижней части панели предназначены для управления слоями. Например, первые две (со стрелками) позволяют перемещать слои относительно друг друга.

Рассмотрим практическое применение слоев: допустим нам необходимо создать изображение, как на рисунке 3.

Рис. 3. Изображение, созданное с помощью инструментов Circle, Rectangle и Polygon

Дом состоит из восьми прямоугольников, машина - из многоугольника и двух кругов, также на рисунке имеется изображение солнца в виде простого круга. После того, как данные изображения будут созданы, на панели Layers окажется двенадцать слоев (рис. 4.1). В таком виде понять, какой примитив, какому объекту принадлежит весьма затруднительно, а уж анимировать все это количество будет невероятно сложно. Поэтому объединим слои, формирующие дом в одну «капсулу», а машину - в другую. Для этого следует выделить слои всех «частей дома» (с помощью зажатой клавиши Shift или Ctrl) и выполнить команду Encapsulate (кнопка внизу панели Layers или через контекстное меню). Тоже самое необходимо сделать и по отношению к машине. Теперь картина слоев будет выглядеть немного лучше (рис. 4.2). Кроме того, неплохо бы переименовать слои (рис. 4.3). Следует иметь ввиду, что если щелкнуть по треугольнику слева от названия, то раскроется список слоев, входящих в объединение. Другими словами, фигуры все-равно сохраняют автономность, поэтому каждый элемент можно редактировать отдельно по-прежнему.

Рис. 4. Слои составного изображения
(1 - множество слоев, 2 - объединенные слои, 3 - переименованные слои)

Задание. Нарисуйте в Synfig Studio изображения солнца, дома и машины. Объедините и переименуйте слои.

Вопрос. В чем будет заключаться разница в анимации, если слой «Дом» будет находиться над слоем «Машина»?

3. Перемещение объектов, состоящих из нескольких слоев

В Synfig Studio существует одна особенность при перемещении составного изображения.

Когда мы выполняем инкапсуляцию несколько слоев, то у этого, нового слоя появляется «точка центра», за которую возможно переносить изображение (рис. 5). Эта точка всегда оказывается в центре холста. Однако само изображение может быть сбоку. В этом нет ничего страшного, но иногда бывает удобнее, чтобы центр был в центре самого изображения. Рассмотрим, как можно переместить «точку центра».

Рис. 5. Вид объекта на холсте при выделении составного слоя «Машина»
(а - точка для перемещения слоя)

Сначала необходимо раскрыть список слоев составного изображения на панели Layers. Выделить все вложенные слои и составной слой (рис. 6.1). С помощью инструмента Normal выделить все метки (легче это сделать с помощью рамки выделения) (рис. 6.2). Взять изображение за любую метку и переместить на центральную точку (рис. 6.3). После этого, уже за центральную точку можно перемещать изображение в любую часть холста.

Рис. 6. Этапы перемещения «точки центра» изображения

Задание. Переместите центральные точки машины и дома в центр самих изображений.

4. Анимация нескольких объектов

Итак, все подготовительные мероприятия завершены и теперь следует приступить к самой анимации. Допустим, что по сценарию за 5 секунд машина должна переместиться от левой границы холста до правой, а солнце за это же время совершить путь от левой границе до центра. Причем машина пусть едет так, чтобы за 4 секунды доехать только до середины, а за последнюю одну секунду преодолеть весь оставшийся путь. Начальное положение объектов должно быть примерно таким, как на рисунке 3.

Этапы создания анимации:

1. Включить режим анимации.
2. Создать ключевые кадры в начале 1-й и 5-й секунд.
3. Перейти в последний кадр.
4. Переместить изображение солнца в центр холста, а машины - на правую границу холста.
5. Создать ключевой кадр в начале 4-й секунды.
6. Переместить машину немного назад (в центр холста).

Задание. Создайте анимацию по плану описанному выше. Посмотрите ее с помощью команды File ? Preview.

5. Выводы

• Слои в компьютерной графике играют важную роль. Они позволяют менять одни объекты рисунка, не затрагивая другие.
• Обычно для работы со слоями в графических и анимационных средах предусмотрена специальная панель.
• Слои можно перемещать (поднимать и опускать). Верхний слой в списке образует передний план изображения.
• Часто в программах компьютерной анимации допускается группировка слоев.
• Каждый слой анимируется отдельно. Часть слоев может не содержать анимации.

6. Самостоятельная работа

Экспресс-план модуля:

• Слой-маска
• Анимированные маски
• Анимированная маска. Расчётная анимация типа Shape
• Анимированная маска. Расчётная анимация типа Motion
• Редактирование анимации.

Слой-маска

Слой-маска не может использоваться в одиночку, а должен быть связан с одним или несколькими обычными слоями, в отношении которых он даёт эффект маски. То есть, содержимое связанных слоёв видно только через «дырки» в маске, а вся остальная их часть остается невидимой. Более того, маска может иметь анимацию (кроме анимации, использующей направляющую для движения), что позволит создавать весьма необычные эффекты.

В ходе работы на слое маски, для создания «дырок», чаще всего используется графический примитив — заливка. В этом случае она играет роль очень ядовитой краски или кислоты разъедающей поверхность слоя. Линии таким свойством не обладают!

Итак, маска может быть создана на основе:

• графического примитива — заливки,
• текстового блока,
• экземпляра символа типа Graphic или Movie Clip, конечно же, при условии, что в этих символах имеются области заливки.

При работе с этими элементами следует учитывать, что на маскирующем слое одновременно можно помещать объекты только одного типа — либо только заливки, либо только текст, либо символы типа Graphic, либо символы типа Movie Clip. Причём «обычных» заливок может быть сколько угодно, а вот текстовой блок или символ может быть только один! Последовательность действий при создании маски следующая:

Если слой-маска уже существует, с ним можно связать дополнительные слои. Это можно сделать несколькими способами.

• Перетащить существующий слой так, чтобы он располагался прямо под слоем-маской.
• Создать новый слой непосредственно под слоем-маской.
• Masked (под действием маски).

Существующую связь со слоем-маской можно и разорвать. Эту операцию также можно выполнить несколькими способами.

• Перетащить маскированный слой так, чтобы он располагался выше слоя-маски.
• Открыть диалоговое окно свойств слоя и установить в нём переключатель Normal (обычный).

Поэкспериментируйте со слоями. Создайте маскирующие слои на основе заливки, блока текста, символа типа Graphic и Movie Clip и убедитесь в правоте изложенных выше утверждений.

Анимированные маски

Маску можно заставить перемещаться, используя как покадровую, так и расчётную анимацию.

С помощью расчётной анимации типа Motion можно «оживить» маску, созданную на основе текстового поля, заливки представленной в виде группы, символа типа Graphic или Movie Clip. Причём для символа типа Movie Clip можно с помощью ведущего слоя задать произвольную траекторию движения. Но сделать это нужно будет «внутри» самого символа!

С помощью расчётной анимации типа Shape можно «оживить» маску, созданную на основе графического примитива — заливки.

Кроме того, для анимирования масок можно применять сценарии ActionScript.

Нельзя маскировать слои внутри кнопок — символов типа Button. Кроме того, кнопка не может выступать в роли маски.

Рассмотрим несколько вариантов создания анимированной маски.

Анимированная маска: Расчётная анимация типа Shape

Создайте новый документ и сохраните его на диске. В ходе работы над роликом вам нужно будет создать на палитре Timeline три слоя:

Слой text . На этом слое разместите текстовой блок. Для того чтобы у вас появилась возможность применить к тексту градиентную заливку, «разбейте» текст, дважды обратившись к команде Break Apart меню Modify.

Слой shadow. Этот слой позволит вам создать эффект тени для текста. Для этого перейдите на слой с текстом и скопируйте его в буфер обмена. Затем, вернувшись на слой shadow, используйте команду Insert > Paste in Place, примените для этого текста заливку типа Solid (сплошной) тёмного цвета и немного сместите этот текст, используя управляющие клавиши клавиатуры. Получилась густая тень.

Слой mask. На этом слое вам предстоит создать анимированную маску. Для этого на первом кадре этого слоя, используя инструмент Oval, нарисуйте круг сравнительно небольшого радиуса. Расположите круг по центру относительно сцены (не забывайте о прекрасной палитре Align). Затем перейдите к 25 кадру этого слоя и сделайте его ключевым. В этом кадре размер круга следует увеличить таким образом, чтобы он полностью закрывал ваш текст. Вернитесь к первому кадру и в палитре Properties задайте тип анимации Shape. Для того чтобы зафиксировать на некоторое время последний кадр анимации, перейдите на 40 кадр и используйте команду Insert > Frame.

Используя эту же команду, «растяните» до 40 кадра слой text и слой shadow.

Протестируйте свой ролик.

Если разорвать связь со слоем-маской и слоем shadow можно получить ещё один очень интересный эффект! Поэкспериментируйте с роликом — поменяйте зависимость слоёв, форму маски...

Анимированная маска: Расчётная анимация типа Motion

Создайте новый документ и сохраните его на диске. В ходе работы над этим роликом вам также нужно будет создать на палитре Timeline три слоя.

Слой text. На этом слое разместите текстовой блок. Можно использовать текст из предыдущей работы.

Слой image. На этом слое также размещён текст, при этом, как и в предыдущей работе, использована команда Insert > Paste in Place. Примените для этого текста заливку типа Solid, прозрачность которой уменьшите, используя палитру Color Mixer до 1%—10%. Вы должны создать иллюзию того, что в темноте виден некий образ.

Слой mask. На этом слое вам предстоит создать анимированную маску — смоделировать движение луча прожектора. Роль прожектора будет «исполнять» символ типа Graphic. Итак, создайте новый символ New Symbol типа Graphic. Внутри символа нарисуйте круг, диаметр которого немного превышает высоту букв в вашем тексте. Используя палитру Align, поместите круг в центр символа. Вернитесь на сцену, откройте библиотеку ролика и поместите на неё экземпляр, созданного вами символа, таким образом, чтобы он лишь касался левого края сцены. Затем перейдите к 30 кадру, сделайте его ключевым и переместите экземпляр-прожектор к правому краю сцены, как показано на рисунке. Вернитесь к первому кадру и в палитре Properties задайте тип анимации Motion. Для того чтобы зафиксировать на некоторое время последний кадр анимации и дать прожектору некоторое время «погулять» вне сцены, перейдите на 40 кадр и используйте команду Insert > Frame.

Используя эту же команду, «растяните» до 40 кадра слой image и слой text.

Затем перейдите на слой mask и, используя контекстное меню Mask, превратите его в маску.

Протестируйте свой ролик и полюбуйтесь полученным результатом.

Позвольте себе смелый эксперимент. Обязательно попробуйте использовать в качестве анимированной маски блок с текстом!

Анимированная маска. Использование символа типа Movie Clip для создания маски двигающейся по заданной траектории

Создайте новый документ и сохраните его на диске. Создайте новый символ типа Movie Clip, внутри которого вы должны будете организовать движение маски по заданной траектории. Для этого на палитре Timeline вашего символа создайте временный слой interim , на котором поместите некий пейзаж. Превратите пейзаж в группу, выровняйте группу относительно центра сцены, используя палитру Align. Этот слой в последующем будет удалён, но на этапе разработки ролика он сослужит нам добрую службу, позволив откорректировать движение «подзорной трубы» — маски.

Создайте новый слой binoculars , в котором нарисуйте круг (именно он в последующем будет играть роль динамической маски). Не забудьте превратить его в группу, так как анимация типа Motion не будет работать с графическим примитивом! Затем создайте для этого слоя слой Guide , на котором определитесь с траекторией движения маски. Обратите внимание на палитру Timeline этого символа. Для того чтобы уменьшить скорость движения маски ключевой кадр, на котором будет определено конечное положение маски, можно сдвинуть правее (например, в ролике, использованном в этой лекции это не 40 как на рисунке, а 100 кадр). Определившись с конечным положением маски, вернитесь к первому кадру и задайте в палитре Properties тип анимации Motion. Не забудьте «посадить» круг на линию траектории. «Растяните» слои Guide: binoculars и interim, используя команду Insert Frame. Если нужно откорректируйте траекторию движения, используя инструменты палитры Tools — Subselection, Pen и Arrow.

Вернитесь на сцену. Обратите внимание, что на палитре Timeline моего ролика только два слоя и всего один кадр. В слой landscape поместите пейзаж. А на новый слой, который в последующем будет определён как маска, поместите экземпляр созданного вами символа. Откорректируйте положение экземпляра символа таким образом, чтобы расположение пейзажа символа полностью совпадало с расположением пейзажа на сцене. Теперь обратитесь к библиотеке ролика и отредактируйте символ, щёлкните по нему правой кнопкой мыши и выберите команду Edit (редактировать). Удалите слой interim, на котором у вас размещён пейзаж. Вновь вернитесь на сцену и превратите слой mask, на котором вы расположили экземпляр символа, в маску.

Протестируйте свой ролик, полюбуйтесь полученным результатом и, если это необходимо, произведите коррекцию анимации.

Редактирование анимации

Я уже говорила вам о том, что анимацию можно откорректировать, используя дополнительные ключевые кадры. Сегодня я хотела бы дать вам ещё несколько практических советов по этому поводу.

Чтобы переместить кадр или последовательность кадров, просто «перетащите» их мышкой.

Чтобы «превратить» ключевой кадр в обычный кадр используйте команду Clear Keyframe. Очищенный ключевой кадр и все кадры до следующего ключевого кадра заменятся содержимым предшествующего очищенному ключевого кадра.

Чтобы «зеркально отразить» анимацию во времени (начало сделать концом, а конец началом, естественно, в начале и в конце должны быть ключевые кадры), выделите необходимые вам кадры и используйте команду Reverse Frames.

Применение эффекта Onion skinning (луковая шелуха)

Работая в обычном режиме, Flash отображает на сцене содержимое только одного кадра анимации, в данный момент времени.

Чтобы лучше позиционировать относительно друг друга объекты, расположенные на разных кадрах при создании покадровой анимации или при коррекции расчётной анимации вы можете «вывести» на сцену изображения сразу нескольких кадров. Для того чтобы перевести Flash в этот режим работы следует обратиться к кнопочке Onion Skin, которую вы без труда найдёте в нижней части палитры Timeline. В этом режиме элементы текущего кадра будут отображены в полном цвете, а элементы соседних кадров будут полупрозрачными. Можно немного трансформировать этот режим с помощью кнопки Onion Skin Outlines позволяющей представить элементы соседних кадров в виде силуэтов. Чтобы увеличить область захвата кадров для любого из этих режимов необходимо «переместить» маркер режима вправо. Режим Onion Skinning позволяет редактировать только текущий кадр. В том случае если вам необходимо откорректировать сразу несколько слоёв включите режим Edit Multiple Frames.

Обратите внимание, что перечисленные выше режимы нельзя применить для блокированных слоёв. Чтобы не запутаться при многокадровом редактировании, закрывайте или отключайте не нужные в данный момент слои!

Домашнее задание: Основы создания анимации в Macromedia Flash MX

Во-первых, вам необходимо продублировать анимационные flash-ролики, представленные в материале этой лекции.

Во-вторых, создать ролик, позволяющий проиллюстрировать замечательные строки из стихотворения Сергея Александровича Есенина:

Синий май. Заревая теплынь.
Не прозвякнет кольцо у калитки.
Липким запахом веет полынь.
Спит черёмуха в белой накидке.

В деревянные крылья окна
Вместе с рамами в тонкие шторы
Вяжет взбалмошная луна
На полу кружевные узоры…

Попробуйте соединить в своём ролике два эпизода — два четверостишия, используя знания, полученные в рамках изучения способов анимации. Для того чтобы обеспечить плавный переход от одного эпизода к другому используйте маску.

Итого: с вас четыре файла в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.

Желаю Вам успехов в самостоятельном изучении Macromedia Flash MX!

Добавление второго символа или текстового поля в диапазон анимации движения приведет к замене исходного символа в анимации движения. Изменить целевой объект анимации движения можно любым из следующих способов:

• перетащите другой символ из библиотеки в диапазон анимации на временной шкале;
• используйте команду Изменить > Символ > Заменить символ .

Символ можно удалить из слоя анимации, не удаляя и не разделяя саму анимацию. Позже в анимацию можно будет добавить другой экземпляр символа. Также можно в любое время изменить символ или его тип.

См. также

Компоненты анимации движения

• Это последовательность кадров на временной шкале, в которой одно или несколько свойств объекта на временной шкале меняются со временем.
• Диапазон анимации движения выглядит на временной шкале как группа кадров на одном слое с фоновым цветом.
• Эти диапазоны анимации можно выделять как один объект, перетащить из одного места на временной шкале в другое и даже в другой слой.
• В каждом диапазоне анимации может быть анимирован только один объект в рабочей области. Этот объект называется целевым объектом диапазона анимации.

• это кадр в диапазоне анимации движения, где явно определены одно или несколько значений свойств для целевого анимационного объекта.
• Эти свойства могут включать положение альфа (прозрачность), оттенок цвета и т. д.
• Для каждого определенного свойства создается отдельный ключевой кадр свойства.
• Если во одном кадре задать более одного свойства, то ключевые кадры для каждого из этих свойств будут размещены в этом кадре.
• Используйте редактор движения, чтобы просмотреть каждое свойство диапазона анимации и его ключевые кадры свойств.
• Чтобы выбрать, какие типы ключевых кадров свойств отображать на временной шкале, из контекстного меню диапазона анимации, щелкните правой кнопкой мыши ключевой кадр свойства и выберите «Просмотреть ключевые кадры».

Целевой объект анимации

Анимация движения имеет один объект в диапазоне анимации, который называется ее целевым объектом. Использование одного целевого объекта в анимации обеспечивает несколько преимуществ:

• Анимацию можно сохранить как для повторного использования.
• Можно легко перемещать анимацию движения на временной шкале (перетаскивать диапазон анимации в другое место) или в рабочей области.
• Чтобы применить новый экземпляр к существующей анимации движения, выполните следующие действия:
  • вставьте его в анимацию с целью замены;
  • перетащите новый экземпляр из библиотеки;
  • используйте команду «Заменить символ».

Объекты и свойства, для которых возможна анимация движения

В число типов объектов, к которым можно применить анимацию движения, входят фрагменты роликов, графические объекты, символы кнопок, а также текстовые поля. Эти объекты могут иметь следующие свойства:

• Положение по осям X и Y на плоскости

Положение по оси Z в трехмерном пространстве (только фрагменты роликов)

Вращение на плоскости (вокруг оси z)

Вращение вокруг осей X, Y и Z в трехмерном пространстве (только фрагменты роликов): указывает, что FLA-файл предназначен для ActionScript 3.0 и Flash Player 10 или более поздней версии в параметрах публикации. Adobe AIR также поддерживает трехмерное движение.

Наклон по осям X и Y

Масштаб по осям X и Y

Цветовые эффекты: включает в себя альфа-канал (прозрачность), яркость, тон и расширенные параметры для цветов. Цветовые эффекты можно анимировать только для символов и текста TLF. Анимируя эти свойства, можно добиться плавного появления или изменения цвета объекта. Чтобы создать анимацию движения цветового эффекта для классического текста, преобразуйте текст в символ.

Свойства фильтров (фильтры нельзя применять к графическим символам)

Создание анимации движения

Анимацию движения можно создать одним из трех способов:

• Создайте графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши кадр и выберите Создать анимацию движения .
• Выберите графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши кадр и выберите Вставка > Анимация движения .
• Создайте графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши экземпляр в рабочей области и выберите Создать анимацию движения .

Создание анимации движения

Анимация движения других свойств с помощью инспектора свойств

Используйте команду Создать анимацию движения , чтобы анимировать большинство свойств экземпляра символа или текстового поля. К таким свойствам относятся, например, поворот, масштабирование, прозрачность или оттенок (только для символов и текста TLF). Например, можно изменить свойство альфа-прозрачности экземпляра символа, чтобы он плавно появлялся на экране. Список свойств, к которым можно применять анимацию движения, приведен в разделе Анимируемые объекты и свойства .

Выделите экземпляр символа или текстовое поле в рабочей области .

Если выделенный фрагмент содержит другие объекты или содержит несколько объектов из слоя, то Animate предлагается преобразовать его в символ фрагмента ролика.

Выберите Вставка > Анимация движения .

Если появится диалоговое окно Преобразовать выделенный фрагмент в символ для анимации , нажмите кнопку «ОК» для преобразования выделенного фрагмента в символ фрагмента ролика.

Когда анимация движения применяется к объекту, который существует только в одном кадре, точка воспроизведения перемещается в последний кадр новой анимации движения. В противном случае точка воспроизведения не перемещается.

Поместите точку воспроизведения в кадр диапазона анимации, для которого необходимо указать значение свойства.

Точку воспроизведения можно поместить в любой другой кадр диапазона анимации. Анимация движения начинается со значений свойства в первом кадре диапазона анимации, который всегда является ключевым кадром свойств.

PHOTOSHOP . Работа со слоями, анимация.

Создайте новый документ размерами 150x150 пикселей.

Фон залейте темно-голубым цветом .
.gif" width="152" height="152">

Зажмите Ctrl и кликните по звезде в палитре слоев, тем самым звезда будет выделена.

Снимите выделение Ctrl + D.
Нажмите на Тиснение" (Bevel and emboss). Примените такие настройки:

Звезда должна выглядеть вот так:

Создайте новый слой.
Установите цвета: 05E7FF - основной, E0EBEC - фоновый.
Загрузите выделение (Ctrl + клик по первой звезде в палитре слоев) Возьмите линейный градиент и проведите его сверху вниз, как показано на рисунке а).
Далее, возьмите https://pandia.ru/text/78/164/images/image013_20.gif" width="152 height=152" height="152"> б)

Вот что должно получиться:

Теперь мы приступаем к созданию крошечных звездочек.
Создайте новый слой. Масштабируйте изображение.
.gif" width="152" height="152">.gif" width="213" height="161">

Теперь нужно эту звездочку продублировать и распределить по главной звезде..gif" width="152" height="152">

Для анимации мы будем создавать 3 кадра, поэтому сейчас нужно сделать 3 группы слоев, где звезды будут находиться в разных положениях.

Дублируйте папку со звездочками(Set 2). Удалите из нее все слои, кроме одного. Этот слой продублируйте, причем звездочки размещайте на других местах.
Повторите действия для третьей папки.

Теперь у вас три папки с маленькими звездочками: "Set 1", "Set 2", "Set 3", в каждой папке звездочки расположены по-разному.

Сохраните файл в формате Фотошоп (.psd) и откройте его в Image Ready. Откройте палитру "Анимация" через меню Окно, если ее нет на рабочем пространстве.
Пока у вас там высветится только один кадр.
Перейдите в палитру слоев и отключите глазики напротив папок, оставьте только у "Set 1"

Создайте новый кадр Set 2"

То же самое для 3-го кадра: https://pandia.ru/text/78/164/images/image027_9.gif" width="152" height="152"> и и

Вы узнаете:

• Как открыть и закрыть и настроить панель анимации.
• Как добавлять, удалять и редактировать ключевые и кадры анимации.
• Для чего нужна кнопка Tween (Создание промежуточных кадров).
• Как сделать простую анимацию рисования звезды.
• Как настроить интервалы времени для каждого кадра анимации.
• Как оптимизировать анимацию для уменьшения размера Gif файла.
• Как импортировать Gif файлы в программу.
• Как переключаться с покадровой анимации на временную шкалу.

Урок состоит из следующих разделов:

1. Обучающее видео.
2. Что такое анимация.
3. Часть 1. Покадровая анимация.
4. Настройка интервалов.
5. Настройка периодичности повторов.

7. Оптимизация анимации.
8. Сохранение анимации.

10. Открытие GIF-файлов.
11. Кнопки унификации слоев анимации.
12. Закрытие панели анимации.
13. Вопросы.
14. Домашнее задание.

Что такое анимация

Анимация – это последовательная смена изображений, в результате которой нам кажется что объект движется, изменяет форму, появляется и исчезает, а так же с ним могут происходить другие динамичные действия.

При помощи анимации в программе Photoshop можно создавать слайд-шоу из фотографий или картинок, делать аватарки, баннеры, заставки для веб-страниц, динамичные открытки и различные презентации. Следует иметь в виду, что Photoshop все-таки графический редактор, и не рассчитан на сложные анимационные процессы. В программе есть два способа создания анимации – это покадровая анимация и анимация в режиме временной шкалы. Мы последовательно рассмотрим оба вида анимации. Весь 36 урок мы посвятим изучению покадровой анимации. А в 37 уроке займемся временной шкалой. Некоторые простые задачи удобнее выполнять именно в режиме покадровой анимации. Даже если вы умеете работать с временной шкалой из других программ, все равно, я вам советую попробовать выполнить задания из этого урока. Исходя из полученных знаний вы сможете принять решение о том какой метод вы будете использовать в каждом конкретном случае.

Часть 1. Покадровая анимация

Панель Frames (Покадровая) появилась уже давно. Рассмотрим ее настройки на примере анимации рисования звездочки.

Создайте новый документ размером 800 на 800 пикселей, разрешение 72, цветовой режим RGB. Создайте новый слой, щелкнув по значку внизу палитры Layers (Слои). Или нажмите Shift +Ctrl +N.

На панели инструментов выберите инструмент кисть черного цвета, диаметром 35 пикселей с размытыми краями. Нарисуйте первую наклонную линию (поставьте точку, нажмите Shift и поставьте следующую точку - линия получится прямой).

Создайте второй слой. Начертите следующую линию . Затем третий слой
и еще одну линию и т. д. У вас должно получиться шесть слоев, включая фоновый слой.

Чтобы открыть панель Animation (Анимация), щелкните в меню Window (Окно) по пункту Animation (Анимация). Или в меню Window (Окно) установите Workspace (Рабочая среда) на Video and Film/Video (Видео). Убедитесь, что панель находится в режиме именно покадровой анимации.
В противном случае щелкните по значку в правой нижней части панели анимации.

Отключите видимость всех слоев кроме фонового слоя в палитре Layers (Слои), нажав на значок слева от миниатюры слоя. Это будет первый кадр нашей анимации.

Нажмите значок внизу панели Animation (Анимация). Появится второй кадр (копия первого кадра). Чтобы его изменить включите видимость первого слоя в палитре Layers (Слои). Снова нажмите на значок и включите видимость второго слоя.

Продолжайте создавать новые кадры и включать видимость следующих слоев до тех пор, пока в последнем кадре не появится вся звездочка.

В нижней части панели Animation (Анимация) находятся инструменты добавления, удаления и просмотра анимации.

- преобразование в анимацию по временной шкале.

- Tween (Создание промежуточных кадров).

- Duplicate сurrent frame (Создание копии выделенных кадров).

- Кнопки воспроизведения (Как на любом магнитофоне).

Selects First Frame (Выбрать первый кадр ); Selects Previews Frame (Выбрать предыдущий кадр );

Play (Запуск анимации);

Selects Next Frame (Выбрать следующий кадр).

- Удаление выделенных кадров. Следует иметь в виду, что клавиша Del на клавиатуре не удаляет выделенный кадр, а удаляет выделенный слой с палитры Layers (Слои).

Настройка интервалов.

Теперь настроим интервалы времени, в течении которых будут видны кадры анимации.

Под каждым кадром внизу написано 0 с. и стоит стрелка. Нажмите на стрелку и выберите частоту смены кадров. Выберите значение 0,5 для всех кадров (это значит, что через половину секунды произойдет смена кадров).

Настройка периодичности повторов.

Следующим этапом будет настройка периодичности повторов анимации. Щелкните по стрелочке в нижней части панели анимации. Появится меню выбора периодичности.

Если выбрать Forever (Навсегда/Постоянно), то анимация будет повторяться снова и снова. Этот процесс называется зацикливание.

Если выбрать Once (Однократно), то анимация проиграется один раз и остановится на последнем кадре.

При выборе пункта Other (Другое) можно задать другое количество повторов в пределах (от 1 до 999).

Теперь давайте проиграем созданную анимацию. Для этого нажмите кнопку Play (Запуск анимации). Если вам все нравится, переходите к следующему этапу, если нет, то подкорректируйте анимацию по своему усмотрению.

Перейдите в панель анимации. Нажмите на значок Duplicate сurrent frame (Создание копии выделенных кадров). Выделите все слои, кроме фонового слоя.
Отключите видимость фонового слоя. Нажмите Ctrl + Shift + Alt + E. Появится новый слой, на котором будут отпечатаны все выбранные слои.
На миниатюре слоя будет изображена звезда на прозрачном фоне. Назовите этот слой Звезда.

Дважды щелкните по слою для перехода в настройки стиля. Задайте тень и наложение цвета. Цвет выберите по своему желанию.

Вернитесь к первому кадру анимации
и снимите видимость слоя со звездой
в палитре Layers (Слои).

Выделите последний кадр. В палитре Layers (Слои) оставьте видимыми только слой Звезда и фоновый слой.

Скопируйте этот слой и измените настройки стиля: Поменяйте цвет, задайте тиснение или обводку. Перейдите в панель анимации. Нажмите значок Duplicate сurrent frame (Создание копии выделенных кадров). Вернитесь к первому кадру в панели анимация и снимите видимость этого слоя в палитре.

Еще раз скопируйте слой и поменяйте стиль. Выберите инструмент Move (Перемещение) или нажмите Ctrl +T , для перехода к инструменту Свободное трансформирование. Измените масштаб. Перейдите в панель анимации. Нажмите значок. Вернитесь к первому кадру и снимите видимость этого слоя.

Снова скопируйте слой и еще немного увеличьте масштаб, а также поменяйте стиль. И добавьте кадр анимации. У вас должна получиться примерно такая раскадровка:

Нажмите кнопку Play (Запуск анимации) и посмотрите на результат проделанной работы.

Оптимизация анимации.

Нажмите на значок в правой верхней части панели анимации. Появится дополнительное меню.

После завершения работы следует оптимизировать анимацию для уменьшения размера Gif файла и лучшей загрузки веб-браузером. Уменьшение происходит за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

Выберите Optimize Animation…(Оптимизировать анимацию) . Отметьте галочками оба пункта.
Bounding Box (Ограничительная рамка) - обрезает кадры по измененной области по сравнению с предыдущим кадром.

Redundant Pixel Removal (Удаление лишних пикселов). Если пиксель не изменился по сравнению с предыдущим кадром, он становится прозрачным.

Чтобы PhotoShop сохранял кадры, включающие прозрачность, выберите параметр «Автоматически». Для этого выберите один или несколько кадров. Щелкните правой кнопкой мыши по миниатюре кадра. Выберите один из трех параметров:

Automatic (Автоматически) — текущий кадр отбрасывается, если следующий кадр содержит прозрачность слоя.,

Do not dispose (Не располагать) -Текущий кадр виден через прозрачные участки следующего кадра.,

Dispose (Располагать) — текущий кадр не виден через прозрачные участки следующего кадра.

Сохранение анимации.

Теперь пришло время сохранить анимацию. Конечно, в процессе работы нужно было сохранять файл в формате PSD, чтобы не попасть в ситуацию с внезапным отключением электроэнергии или неожиданной перезагрузкой компьютера. Но сейчас я имею в виду другое сохранение. Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды Save for Web (Сохранить для Web и устройств).

Выберите в меню File (Файл) пункт Save for Web (Сохранить для Web и устройств). Установите в настройках формат Gif. Обратите внимание на размер будущего файла. По возможности уменьшите его размер. Как это сделать мы подробно разбирали в уроке Image Size (Размер изображения). При оптимизации используйте модель редукции цвета Адаптивная, Перцепционная или Селективная, чтобы обеспечить согласованность цветов во всех кадрах. Нажмите Save (Сохранить), введите имя, путь и еще раз нажмите Save (Сохранить).

Раньше, чтобы записать анимацию мы переходили в приложение ImageReady.

В Photoshop CS2 появилась панель Анимации. Но, чтобы сохранить анимированный файл, все равно приходилось переходить в ImageReady. Для перехода служила кнопка внизу панели инструментов или меню File (Файл)- Edit in ImageReady (Перейти в ImageReady).

Начиная с Photoshop CS3 и выше, для записи анимации не нужны дополнительные программы. Для редактирования теперь служит панель Анимации, а для записи приспособили в меню File(Файл) пункт Save for Web (Сохранить для Web ) .

Рассмотрим еще один маленький пример создания покадровой анимации, в котором разберем для чего нужна кнопка Tween (Создание промежуточных кадров) .

Создайте новый документ размером 500 на 250 пикселей. Выберите инструмент Type (Текст), шрифт Impact, размер 150 пт. и напишите любое слово. Задайте непрозрачность 100 %. Добавьте стили слоя: тень, градиент и тиснение. Можете выбрать другой стиль, не обязательно делать как у меня. Деформацию текста также можно анимировать. В панели анимации задайте интервал 0,2 сек. Нажмите кнопку , чтобы скопировать первый кадр. Перейдите в палитру Layers (Слои) и уменьшите непрозрачность до 0. Поменяйте стиль слоя (например, вместо наложения градиента добавьте наложение цвета). Переключаясь между кадрами, вы сможете наблюдать, как меняется изображение.

Добавим перемещение. Выберите инструмент Move (Перемещение) и передвиньте текст вниз, за пределы листа. Перейдите в панель анимация и нажмите кнопку

В появившемся окне можно настроить количество добавляемых кадров. Чем их больше, тем равномернее будет переход. В графе Tween With (Промежуточные кадры) можно выбрать из списка, куда будут вставлены кадры:

Last (Последний кадр); Selection (Выделение); Previous Frame (Предыдущий кадр); First Frame (Первый кадр); Next Frame (Следующий кадр). Список меняется в зависимости от выделенного кадра.

Оставьте все настройки по умолчанию. Нажмите ОК.

Нажмите на Play (Запуск анимации). Если все устраивает, то переходите к сохранению анимации.

Открытие GIF-файлов.

В Photoshop CS3 и CS44 видео и GIF-файлы анимации не открываются через меню File (Файл) – Open (Открыть). При попытке открыть появляется окно:

Обязательно установите QuickTime Pro 7.1 или выше.

В Photoshop CS5 этой проблемы нет. Файлы легко открываются обычным способом.

Выберите в меню File (Файл) –Import (Импортировать) - Video Frames to Layers (Кадры видео
в слои…). У Вас будет недоступен выбор GIF файлов в поле тип файла. Однако этот недочет можно легко обойти, если предварительно скопировать название файла.gif и вставить его в поле имя файла или вручную набрать наименование в этом поле. Или введите * в поле Имя файла и нажмите Load (Загрузить), тогда
наименование gif файла станет видимым и его можно открыть (Видимыми станут и другие файлы, даже те которые нельзя открыть в программе).

Настройки в появившемся окне оставьте по умолчанию. Отмеченными должны быть пункты From Beginning To End (От начала до конца) и Make Frame Animation (Создать покадровую анимацию). К сожалению, файлы, открытые таким способом, не будут содержать прозрачного фона – вместо него будет белый цвет. При открытии такого файла в CS5 прозрачный фон сохранится.

Кнопки унификации слоев анимации.

Посмотрите внимательно, как изменилась палитра Layers (Слои) при работе с покадровой анимацией. Появились кнопки позволяющие применять изменения в текущем кадре ко всем остальным кадрам. Отметьте галочкой пункт Propagate Frame 1 (Распространить кадр 1).

Посмотрим как они действуют… Откройте файл с анимацией рисования звезды. Выберите любой кадр и отключите видимость фонового слоя. Нажмите Play (Запуск анимации). Прозрачным стал только выбранный кадр. Нажмите кнопку Unify layer visibility (Унифицировать видимость слоя). Появится окно: .

Нажмите Match (Синхронизировать) и снова запустите анимацию . Рисование звездочки будет проходить на прозрачном фоне на протяжении всей анимации. Прозрачность первого кадра теперь присвоена всем кадрам анимации. Аналогичным образом вы можете управлять положением и стилем слоя.

В палитре Layers (Слои) выберите пункт Animation Options (Параметры анимации). По умолчанию кнопки унификации слоев появляются Automatic (Автоматически) при включении покадровой панели анимации. Вы можете изменить это правило, выбрав пункт Always Show (Всегда показывать) или Always Hide (Всегда скрывать).

Закрытие панели анимации.

Закрыть панель анимации можно разными способами:

Вы можете свернуть или закрыть панель анимации, а также перейти в Preferences (Установки), щелкнув по User Interface Preferences (Параметры интерфейса).

Вопросы:

1. Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?

Выделенный кадр будет удален.

Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.

Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.

Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.

1. У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
   5 промежуточных кадров между последним и первым кадрами?

Выбрать первый кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).

Выбрать последний кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).

Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).

1. Для чего нужна оптимизация анимации?

Для преобразования в анимацию по временной шкале.

Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

Для настройки периодичности повторов анимации.

Домашнее задание:

1)Выполнить покадровую анимацию рисования звезды (по уроку).

2) Выполнить покадровую анимацию текста.