Итак, мы научились изображать простые (и не очень) векторные объекты, редактировать их форму, работать с группами… Пора от статичной неподвижной графики переходить к движению - анимации.
Что же такое компьютерная анимация? Анимация - это процесс создания множества изображений, демонстрирующих изменение объекта во времени, и воспроизведение их с такой скоростью, что создается иллюзия непрерывного (плавного) движения.
Вы можете создать фильм, в котором в течение 3 минут один и тот же шарик будет неподвижно лежать на столе. В этом случае все кадры фильма будут похожи друг на друга больше, чем близнецы, и зритель не сможет отличить ваш "мультик" от статичного изображения. С другой стороны, можно изготовить несколько замечательных кадров и... воспроизвести их почти в один и тот же момент времени (например, с частотой кадра 60 кадров в секунду!). Результат будет прежним - зритель не сможет увидеть происходящее.
С какой же именно скоростью (частотой кадров) необходимо демонстрировать наблюдателю меняющиеся изображения, чтобы у него создалась иллюзия непрерывного движения? Ответ на этот вопрос определяется целью создания анимации и ее последующего воспроизведения.
Наиболее часто используются следующие варианты частоты смены кадров анимации:
Во Flash по умолчанию предлагается частота кадров 12 кадров в секунду, что вполне подходит для компьютерной анимации (обычно достаточно 12-15 кадров в секунду).
Компьютерную анимацию разделяют на покадровую (отрисовывается каждый кадр) и автоматическую (программа сама создает промежуточные кадры между ключевыми кадрами). Независимо от того, какой механизм используется для создания отдельных кадров, суть анимирования заключается в том, чтобы отразить изменение объекта во времени.
Для создания анимации нам потребуется панель временной шкалы. Это основной инструмент для создания анимации. Найдите ее на рабочем столе. На панели временной шкалы могут быть представлены следующие элементы (рис. 5.1):
(рис 5.1) Панель временной шкалыКадры, создаваемые на каждом слое, имеют различное предназначение и внешне отличаются друг от друга.
Ключевой кадр. Кадр, который редактируется и в автоматической анимации является исходным.
Последовательность промежуточных кадров. Промежуточный кадр редактировать нельзя.
Пустой ключевой кадр. В кадре нет ни одного объекта.
Раскадровка автоматической анимации между двумя ключевыми кадрами.
Для создания кадров команды удобно выбирать в контексном меню по правой кнопке мыши (когда курсор выделяет кадр на шкале) (рис. 5.2). Также существуют "горячие клавиши" фактически для всех этих команд. Поскольку при создании анимации работа с кадрами занимает большую часть времени, стоит выучить эти комбинации клавиш:
(рис 5.2) Выпадающее меню редактирования кадровДля создания покадровой анимации требуется предварительно подготовить (или, по крайней мере продумать) каждый кадр фильма. При этом необходимо учитывать следующее обстоятельство: плавность перехода от одного кадра к другому и, соответственно, плавность и естественность движений персонажей зависят от того, насколько отличается следующий кадр от предыдущего (а не от скорости смены кадров, как иногда полагают). Другими словами, чем больше кадров содержит "мультик", тем ближе движения персонажей к естественным. А частота смены кадров влияет на скорость воспроизведения анимации.
Мультик, созданный с применением покадровой анимации, представляет собой последовательность ключевых кадров, с каждым из которых связано некоторое изображение (картинка) на столе.
Создадим простейшую покадровую анимацию, применяя на практике знания о создании различных типов кадров.
Наш первый мультик будет прост и примитивен. Предположим, что "героем" фильма будет шар, который падает и разбивается на три части. Будем считать, что для раскрытия столь "сложного" сюжета достаточно пяти кадров:
С учетом описанного сюжета последовательность работы должна быть следующей.
После завершения работы нужно проверить, все ли получилось так, как вы хотели. Чтобы воспроизвести фильм, достаточно просто нажать клавишу Enter (альтернативный вариант - выбрать в меню "Управление" команду "Воспроизвести"). При этом считывающая головка панели временной диаграммы автоматически перемещается от текущего к последнему ключевому кадру. Вы можете принудительно выбрать любой кадр для просмотра, щелкнув в соответствующей ячейке временной диаграммы левой кнопкой мыши.
Чтобы просмотреть анимацию "глазами пользователя", т. е. как она будет выглядеть в итоге, нажмите комбинацию клавиш CTRL+Enter или Shift+CTRL+Enter (в меню "Управление" - "Тестировать ролик" или "Тестировать сцену").
Просмотрев полученный мультик, мы имеем два вывода:
Исправим некоторые недочеты. Для этого:
(рис 5.3) Общий вид временной линейки для анимации шараРассмотрение возможностей временной шкалы нельзя считать полным без упоминания о пяти кнопках, расположенных в низу линейки кадров.
a)
b)
(рис 5.4) Режимы "Шлейф" и "Контуры шлейфа"С помощью кнопок "Шлейф" или "Контуры шлейфа" можно проконтролировать анимационное преобразование. При нажатии на одну из них на рабочее поле выводится содержание не только текущего кадра, но и нескольких соседних. "Шлейф" - выводит содержание соседних кадров в полупрозрачном виде, а "Контуры шлейфа" - в виде контуров. рис. 5.4 иллюстрирует возможность увидеть на рабочем поле сразу несколько кадров созданной нами анимации.
Итак, первая анимация готова. У вас в руках есть все возможности ее редактирования (кадры, слои, объекты).
Сохраняйте промежуточный результат! Сохраненный файл будет иметь расширение .fla. Это формат редактируемого файла во Flash.
Чтобы сохранились только результаты нашей работы, законченный файл должен пройти процесс компиляции. Такая компиляция происходит, когда мы нажимаем комбинацию клавиш CTRL+Enter. При этом создается файл с расширением .swf. Если файл .fla уже был ранее сохранен в какой-нибудь папке, то в той же папке сохраняется и вновь созданный SWF-файл. Его можно открыть для просмотра двойным щелчком в "Проводнике". На любом этапе создания анимации, в том числе и на любом этапе рисования, можно посмотреть на свой труд глазами "пользователя". Для этого нужно всего лишь нажать комбинацию клавиш CTRL+Enter. Чтобы продолжить работу над роликом, закрываем окно тестирования и возвращаемся в среду разработки.
Уже по первому опыту становится ясно, что создание покадровой анимации - длительный и трудоемкий процесс. Для уменьшения трудоемкости применяется автоматическая анимация. Учтите: автоматизация не решит всех проблем, иногда не даст желаемого результата - для создания хорошего мультфильма "только компьютера" недостаточно.
Рассмотрим первый вид автоматической анимации - анимацию формы.
Используя анимацию трансформации, вы можете создавать эффект плавного "перетекания" объекта из одной формы в другую. Причем результирующая форма может не иметь абсолютно ничего общего с исходной. Кроме изменения формы можно получить эффект изменения цвета (и контура, и заливки) (рис. 5.5).
(рис 5.5) Пример трансформации объекта и трансформации цветаРассмотрим анимацию формы на примере.
(рис 5.6) Вид временной диаграммы при анимации формы объектаКлючевые кадры для анимации формы (трансформации) обозначаются как черные точки, соединенные линией со стрелкой, на светло-зеленом фоне (линия со стрелкой заменяет все промежуточные кадры). Если у вас между кадрами появилась пунктирная линия, значит, или конечный (заключительный) ключевой кадр отсутствует, или в настройках анимации что-то сделано не так.
Выбор пункта "Форма" в списке "Анимация" приводит к изменению формата панели свойств. С ее помощью могут быть установлены следующие дополнительные параметры анимации трансформирования объекта:
По умолчанию Flash пытается произвести переход от одной формы к другой "кратчайшим путем". Поэтому промежуточные кадры могут оказаться весьма неожиданными для вас - приходится редактировать изображения или искать другие способы анимации.
a)
b)
(рис 5.7) Пример трансформации без расстановки и с расстановкой контрольных точекДля управления более сложными изменениями формы используются так называемые контрольные точки. Они определяют те точки исходной формы, взаимное расположение которых требуется сохранить при переносе в новую форму.
Контрольные точки обозначаются на изображении небольшими кружками с буквами. Каждой метке-точке на исходном изображении должна соответствовать точка с тем же именем на результирующем изображении. Всего для одной фигуры может быть использовано не более 26 контрольных точек (по числу букв латинского алфавита). Метки на исходном изображении окрашены в желтый цвет, на результирующем - зеленым.
Для расстановки контрольных точек требуется выполнить следующие действия:
После расстановки контрольных точек целесообразно провести тестовый запуск фильма и при необходимости скорректировать их расстановку и выбор. Всегда можно удалить лишние метки или добавить новые (в первом ключевом кадре анимации). После того как результат вас удовлетворит, вы можете "спрятать" контрольные точки. Перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, следует щелкнуть на одной из меток правой кнопкой мыши.
Анимация формы просто завораживает подростков - они могут по несколько минут любоваться самыми простыми преобразованиями. При этом, как показывает опыт, они в большинстве своем не видят нелогичности и "неправильности" преобразований, когда все находится в движении.
Особенность применения автоматической анимации состоит в том, что с ее помощью можно анимировать только один объект на слое. Для создания сцены, в которой предполагается наличие нескольких анимированных объектов, требуется разместить каждый из них на отдельном слое.
Выполним мини-упражнение: нарисуем рожицу и анимируем ее мимику.
При выполнении этого задания можно долго биться над преобразованием, если всю рожицу нарисовать в ключевом кадре одного слоя, а в другом ключевом кадре этого же слоя нарисовать преобразованную рожицу. В принципе задание может получиться, но слишком много факторов при этом надо учесть. Ведь придется расставлять контрольные точки для всех основных элементов.
А можно выполнить эту работу быстро, "полушутя": посчитаем, сколько "объектов" должны двигаться в мимике рожицы - например, само "лицо" (смена цвета и формы), рот (смена формы), глаза - два, брови две (!) - всего 6 объектов, значит должно использоваться 6 слоев (рис. 5.8).
(рис 5.8) Анимация "…вышла рожица кривая…"Чем проще объекты в ключевых кадрах, тем проще программе создать "правильные" промежуточные кадры при просчитывании анимации формы. Осталось только не перепутать слои при рисовании (будьте внимательнее!).
Мы научились импортировать растровую графику и рассмотрели возможности ее применения. Однако импортированная растровая графика порой занимает слишком много места и часто стилистически не подходит к нарисованным объектам. Выходом из этой ситуации может служить трассировка - преобразование растровой графики в векторную. (Иногда такое преобразование также называют векторизацией.)
При трассировке происходят замены группы пикселей, близких по цвету, в объекты, залитые похожим цветом.
Чтобы выполнить трассировку, надо выполнить следующие действия.
Путем подбора установок в диалоговом окне "Векторизация" можно найти компромисс между размером файла и качеством изображения (рис. 5.9).
(рис 5.9) Окно "Векторизация"
(рис 5.10) Результат преобразования растрового изображения в векторное при различных значениях параметровПолучившиеся в результате векторизации контуры можно увидеть воочию, включив контурный режим отображения содержимого кадров (цветной квадратик рядом с именем слоя на временной шкале). Глядя на их количество (см. рис. 5.11), становится ясно, что если потребовать слишком высокого качества векторизации, то количество контуров, а с ним и размер файла, может не только не уменьшиться, но даже возрасти!
(рис 5.11) Контурный режим просмотра дает представление о количестве объектов результата трассировкиЧасто для трассированных изображений не помешает процедура сглаживания и оптимизации. Эта процедура вызывается командой меню Изменить/ Форма/ Оптимизировать. В появившемся диалоговом окне предлагается указать степень желаемого сглаживания и оптимизации кривых.
Итак, мы получили оригинальное векторное изображение. Где и как оно может нам пригодиться?
Итак, мы научились изображать простые (и не очень) векторные объекты, редактировать их форму, работать с группами… Пора от статичной неподвижной графики переходить к движению - анимации.
Что же такое компьютерная анимация? Анимация - это процесс создания множества изображений, демонстрирующих изменение объекта во времени, и воспроизведение их с такой скоростью, что создается иллюзия непрерывного (плавного) движения.
Вы можете создать фильм, в котором в течение 3 минут один и тот же шарик будет неподвижно лежать на столе. В этом случае все кадры фильма будут похожи друг на друга больше, чем близнецы, и зритель не сможет отличить ваш "мультик" от статичного изображения. С другой стороны, можно изготовить несколько замечательных кадров и... воспроизвести их почти в один и тот же момент времени (например, с частотой кадра 60 кадров в секунду!). Результат будет прежним - зритель не сможет увидеть происходящее.
С какой же именно скоростью (частотой кадров) необходимо демонстрировать наблюдателю меняющиеся изображения, чтобы у него создалась иллюзия непрерывного движения? Ответ на этот вопрос определяется целью создания анимации и ее последующего воспроизведения.
Наиболее часто используются следующие варианты частоты смены кадров анимации:
Во Flash по умолчанию предлагается частота кадров 12 кадров в секунду, что вполне подходит для компьютерной анимации (обычно достаточно 12-15 кадров в секунду).
Компьютерную анимацию разделяют на покадровую (отрисовывается каждый кадр) и автоматическую (программа сама создает промежуточные кадры между ключевыми кадрами). Независимо от того, какой механизм используется для создания отдельных кадров, суть анимирования заключается в том, чтобы отразить изменение объекта во времени.
Для создания анимации нам потребуется панель временной шкалы. Это основной инструмент для создания анимации. Найдите ее на рабочем столе. На панели временной шкалы могут быть представлены следующие элементы (рис. 5.1):
(рис 5.1) Панель временной шкалыКадры, создаваемые на каждом слое, имеют различное предназначение и внешне отличаются друг от друга.
Ключевой кадр. Кадр, который редактируется и в автоматической анимации является исходным.
Последовательность промежуточных кадров. Промежуточный кадр редактировать нельзя.
Пустой ключевой кадр. В кадре нет ни одного объекта.
Раскадровка автоматической анимации между двумя ключевыми кадрами.
Для создания кадров команды удобно выбирать в контексном меню по правой кнопке мыши (когда курсор выделяет кадр на шкале) (рис. 5.2). Также существуют "горячие клавиши" фактически для всех этих команд. Поскольку при создании анимации работа с кадрами занимает большую часть времени, стоит выучить эти комбинации клавиш:
(рис 5.2) Выпадающее меню редактирования кадровДля создания покадровой анимации требуется предварительно подготовить (или, по крайней мере продумать) каждый кадр фильма. При этом необходимо учитывать следующее обстоятельство: плавность перехода от одного кадра к другому и, соответственно, плавность и естественность движений персонажей зависят от того, насколько отличается следующий кадр от предыдущего (а не от скорости смены кадров, как иногда полагают). Другими словами, чем больше кадров содержит "мультик", тем ближе движения персонажей к естественным. А частота смены кадров влияет на скорость воспроизведения анимации.
Мультик, созданный с применением покадровой анимации, представляет собой последовательность ключевых кадров, с каждым из которых связано некоторое изображение (картинка) на столе.
Создадим простейшую покадровую анимацию, применяя на практике знания о создании различных типов кадров.
Наш первый мультик будет прост и примитивен. Предположим, что "героем" фильма будет шар, который падает и разбивается на три части. Будем считать, что для раскрытия столь "сложного" сюжета достаточно пяти кадров:
С учетом описанного сюжета последовательность работы должна быть следующей.
После завершения работы нужно проверить, все ли получилось так, как вы хотели. Чтобы воспроизвести фильм, достаточно просто нажать клавишу Enter (альтернативный вариант - выбрать в меню "Управление" команду "Воспроизвести"). При этом считывающая головка панели временной диаграммы автоматически перемещается от текущего к последнему ключевому кадру. Вы можете принудительно выбрать любой кадр для просмотра, щелкнув в соответствующей ячейке временной диаграммы левой кнопкой мыши.
Чтобы просмотреть анимацию "глазами пользователя", т. е. как она будет выглядеть в итоге, нажмите комбинацию клавиш CTRL+Enter или Shift+CTRL+Enter (в меню "Управление" - "Тестировать ролик" или "Тестировать сцену").
Просмотрев полученный мультик, мы имеем два вывода:
Исправим некоторые недочеты. Для этого:
(рис 5.3) Общий вид временной линейки для анимации шараРассмотрение возможностей временной шкалы нельзя считать полным без упоминания о пяти кнопках, расположенных в низу линейки кадров.
a)
b)
(рис 5.4) Режимы "Шлейф" и "Контуры шлейфа"С помощью кнопок "Шлейф" или "Контуры шлейфа" можно проконтролировать анимационное преобразование. При нажатии на одну из них на рабочее поле выводится содержание не только текущего кадра, но и нескольких соседних. "Шлейф" - выводит содержание соседних кадров в полупрозрачном виде, а "Контуры шлейфа" - в виде контуров. рис. 5.4 иллюстрирует возможность увидеть на рабочем поле сразу несколько кадров созданной нами анимации.
Итак, первая анимация готова. У вас в руках есть все возможности ее редактирования (кадры, слои, объекты).
Сохраняйте промежуточный результат! Сохраненный файл будет иметь расширение .fla. Это формат редактируемого файла во Flash.
Чтобы сохранились только результаты нашей работы, законченный файл должен пройти процесс компиляции. Такая компиляция происходит, когда мы нажимаем комбинацию клавиш CTRL+Enter. При этом создается файл с расширением .swf. Если файл .fla уже был ранее сохранен в какой-нибудь папке, то в той же папке сохраняется и вновь созданный SWF-файл. Его можно открыть для просмотра двойным щелчком в "Проводнике". На любом этапе создания анимации, в том числе и на любом этапе рисования, можно посмотреть на свой труд глазами "пользователя". Для этого нужно всего лишь нажать комбинацию клавиш CTRL+Enter. Чтобы продолжить работу над роликом, закрываем окно тестирования и возвращаемся в среду разработки.
Уже по первому опыту становится ясно, что создание покадровой анимации - длительный и трудоемкий процесс. Для уменьшения трудоемкости применяется автоматическая анимация. Учтите: автоматизация не решит всех проблем, иногда не даст желаемого результата - для создания хорошего мультфильма "только компьютера" недостаточно.
Рассмотрим первый вид автоматической анимации - анимацию формы.
Используя анимацию трансформации, вы можете создавать эффект плавного "перетекания" объекта из одной формы в другую. Причем результирующая форма может не иметь абсолютно ничего общего с исходной. Кроме изменения формы можно получить эффект изменения цвета (и контура, и заливки) (рис. 5.5).
(рис 5.5) Пример трансформации объекта и трансформации цветаРассмотрим анимацию формы на примере.
(рис 5.6) Вид временной диаграммы при анимации формы объектаКлючевые кадры для анимации формы (трансформации) обозначаются как черные точки, соединенные линией со стрелкой, на светло-зеленом фоне (линия со стрелкой заменяет все промежуточные кадры). Если у вас между кадрами появилась пунктирная линия, значит, или конечный (заключительный) ключевой кадр отсутствует, или в настройках анимации что-то сделано не так.
Выбор пункта "Форма" в списке "Анимация" приводит к изменению формата панели свойств. С ее помощью могут быть установлены следующие дополнительные параметры анимации трансформирования объекта:
По умолчанию Flash пытается произвести переход от одной формы к другой "кратчайшим путем". Поэтому промежуточные кадры могут оказаться весьма неожиданными для вас - приходится редактировать изображения или искать другие способы анимации.
a)
b)
(рис 5.7) Пример трансформации без расстановки и с расстановкой контрольных точекДля управления более сложными изменениями формы используются так называемые контрольные точки. Они определяют те точки исходной формы, взаимное расположение которых требуется сохранить при переносе в новую форму.
Контрольные точки обозначаются на изображении небольшими кружками с буквами. Каждой метке-точке на исходном изображении должна соответствовать точка с тем же именем на результирующем изображении. Всего для одной фигуры может быть использовано не более 26 контрольных точек (по числу букв латинского алфавита). Метки на исходном изображении окрашены в желтый цвет, на результирующем - зеленым.
Для расстановки контрольных точек требуется выполнить следующие действия:
После расстановки контрольных точек целесообразно провести тестовый запуск фильма и при необходимости скорректировать их расстановку и выбор. Всегда можно удалить лишние метки или добавить новые (в первом ключевом кадре анимации). После того как результат вас удовлетворит, вы можете "спрятать" контрольные точки. Перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, следует щелкнуть на одной из меток правой кнопкой мыши.
Анимация формы просто завораживает подростков - они могут по несколько минут любоваться самыми простыми преобразованиями. При этом, как показывает опыт, они в большинстве своем не видят нелогичности и "неправильности" преобразований, когда все находится в движении.
Особенность применения автоматической анимации состоит в том, что с ее помощью можно анимировать только один объект на слое. Для создания сцены, в которой предполагается наличие нескольких анимированных объектов, требуется разместить каждый из них на отдельном слое.
Выполним мини-упражнение: нарисуем рожицу и анимируем ее мимику.
При выполнении этого задания можно долго биться над преобразованием, если всю рожицу нарисовать в ключевом кадре одного слоя, а в другом ключевом кадре этого же слоя нарисовать преобразованную рожицу. В принципе задание может получиться, но слишком много факторов при этом надо учесть. Ведь придется расставлять контрольные точки для всех основных элементов.
А можно выполнить эту работу быстро, "полушутя": посчитаем, сколько "объектов" должны двигаться в мимике рожицы - например, само "лицо" (смена цвета и формы), рот (смена формы), глаза - два, брови две (!) - всего 6 объектов, значит должно использоваться 6 слоев (рис. 5.8).
(рис 5.8) Анимация "…вышла рожица кривая…"Чем проще объекты в ключевых кадрах, тем проще программе создать "правильные" промежуточные кадры при просчитывании анимации формы. Осталось только не перепутать слои при рисовании (будьте внимательнее!).
Мы научились импортировать растровую графику и рассмотрели возможности ее применения. Однако импортированная растровая графика порой занимает слишком много места и часто стилистически не подходит к нарисованным объектам. Выходом из этой ситуации может служить трассировка - преобразование растровой графики в векторную. (Иногда такое преобразование также называют векторизацией.)
При трассировке происходят замены группы пикселей, близких по цвету, в объекты, залитые похожим цветом.
Чтобы выполнить трассировку, надо выполнить следующие действия.
Путем подбора установок в диалоговом окне "Векторизация" можно найти компромисс между размером файла и качеством изображения (рис. 5.9).
(рис 5.9) Окно "Векторизация"(рис 5.10) Результат преобразования растрового изображения в векторное при различных значениях параметровПолучившиеся в результате векторизации контуры можно увидеть воочию, включив контурный режим отображения содержимого кадров (цветной квадратик рядом с именем слоя на временной шкале). Глядя на их количество (см. рис. 5.11), становится ясно, что если потребовать слишком высокого качества векторизации, то количество контуров, а с ним и размер файла, может не только не уменьшиться, но даже возрасти!
(рис 5.11) Контурный режим просмотра дает представление о количестве объектов результата трассировкиЧасто для трассированных изображений не помешает процедура сглаживания и оптимизации. Эта процедура вызывается командой меню Изменить/ Форма/ Оптимизировать. В появившемся диалоговом окне предлагается указать степень желаемого сглаживания и оптимизации кривых.
Итак, мы получили оригинальное векторное изображение. Где и как оно может нам пригодиться?
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.