Файл: Лабораторная работа 1 Технология создания компьютерной анимации. Приемы компьютерной анимации и области применения.pdf

Лабораторная работа № 1
Технология создания компьютерной анимации. Приемы
компьютерной анимации и области применения
Теоретическая часть
Понятие анимации
Анимация (от фр. animation — оживление, одушевление) — западное название мультипликации: вид киноискусства и его произведение
(мультфильм), а также соответствующая технология.
Компьютерная анимация — последовательный показ (слайд-шоу) заранее подготовленных графических файлов, а также компьютерная имитация движения с помощью изменения (и перерисовки) формы объектов или показа последовательных изображений с фазами движения.
Существует множество различных программ, предоставляющих возможность создания анимационных gif-изображений, к которым также можно отнести GIMP.
Идея анимационного gif.
Формат gif позволяет хранить изображение в виде нескольких слоев, каждый из которых может представлять собой отдельное изображение.
Каждому слою в gif-изображении, можно задать время, в течении которого он будет отображаться. Таким образом, чередуя слои можно получить анимацию.
Создание анимации
Основные принципы создания анимационных gif с помощью GIMP.
1.Каждый кадр анимации представляет собой отдельный слой изображения.
2. Каждому кадру можно указать два параметра: время показа в микросекундах и его тип, combine (объединение) или replace (замещение).
Параметры задаются в имени слоя и заключаются в скобки, например: Слой1
(1000ms)(combine).
3. При создании анимации целесообразно выполнение оптимизации слоев, что позволяет заметно уменьшить размеры анимационного изображения.
Фильтры анимации
Активизация инструмента: меню Фильтры - Анимация. Оно содержит три основных пункта - Воспроизведение, Оптимизация и Разоптимизация
(рис. 1).
Воспроизведение. Этот пункт позволяет нам воспроизводить свежеполученное анимационное изображение. При выборе этого пункта запускается проигрывание изображения. Кнопка Воспроизведение начинает показ анимации, кнопка Перемотка возвращает на первый кадр изображения, кнопка Шаг позволяет менять кадры вручную.
Оптимизация. Каждый слой в анимационном gif-е представляет собой, по сути, отдельное изображение и сохраняя gif как анимацию, мы сохраняем сразу несколько изображений. Таким образом, при большом количестве

слоев размер анимационного gif будет увеличиваться. Одним из выходов из положения, может быть уменьшение в ручную размеров каждого слоя и уничтожение лишних кусков. Однако этот процесс достаточно трудоемкий.
Помощь в оптимизации изображения как раз оказывает применение этого фильтра.
Рис. 1. Фильтры анимации
Разоптимизация. Фильтр обратный оптимизации. Он позволяет внести изменения в оптимизированное изображение.
Рассмотрим использование других фильтров анимации.
Волны
Позволяет создавать эффект волн на поверхности воды из однослойного изображения. Используя данный фильтр можно задавать количество кадров в будущей анимации, а также параметры волн - длину и размах.
Вращающийся шар
Позволяет создать анимацию изображения, проецируя его на вращающийся шар. Фильтр дает возможность устанавливать количество кадров в изображении и направление поворота
Выжигание
Создает промежуточные слои для перехода в виде внимированного выжигания между двумя слоями. Позволяет добавлять свечение и послесвечение к объекту, задавать их размеры и т.д.
Плавный переход
Создает промежуточные слои для анимации двух или более слоев, находящихся выше фонового. Позволяет задавать количество кадров необходимых для перехода от одного слоя к другому а также радиус их размывания.
Параметры сохранения анимации
Теперь сохраним полученное изображение как gif (Файл - Сохранить как). После этого GIMP предложит Вам экспортировать изображение в gif.
При этом он даст выбрать, объединять ли слои в одно изображение или

сохранить их как анимацию. Т.к. нас интересует именно анимация, выберем второе и нажмем "Экспорт". После этого откроется меню выбора параметров анимационного gif. Первые два параметра задают общие свойства gif - это черезстрочность и комментарий. Нас больше интересуют параметры анимации (рис. 2).
Бесконечный цикл.При включении этого параметра, чередование слоев будет выполняться бесконечно, т.е. после отображения последнего слоя будет отображен первый. Если этот параметр будет отключен, то анимация будет проиграна один раз и остановится на изображении последнего слоя.
Рис.2. Параметры сохранения
Задержка между кадрами - время в микросекундах, которое по умолчанию будет отображаться каждый слой.
Расположение кадра - имеет три режима. Первый (по умолчанию) - I
Don`t Care (неважно), говорит GIMP распорядиться самостоятельно. Второй -
Combine (наложение слоев), накладывает один слой на другой не убирая предыдущие, т.е. объединяет их. Таким образом, если у вас есть прозрачные места в слоях, предыдущие слои будут сквозь них проглядывать. По умолчанию GIMP обычно использует именно этот режим как наиболее гибкий. Третий режим - Replace (один кадр на слой), замещает предыдущий слой на новый.
Если теперь открыть этот gif с помощью GIMP, то увидим, что в диалоге слоев в названии каждого слоя в скобках добавился параметр - время отображения. Таким образом, изменив значение в скобках можно задать каждому слою свое персональное время отображения.
Практическая работа
Рассмотрим создание анимации на простом примере.

1. Откроем изображение и с помощью инструмента Передний план выделим часть цветка (рис. 3).
2. Скопируем и вставим выделенную область, образуя новый слой.
3. С помощью инструмента Масштабирования поменяем размеры цветка в новом слое (рис. 4).
4. Повторим операции 2 и 3. Панель Слои, Каналы, Контуры будет представлена в виде рис. 5.
Рис. 3. Выделение цветка
Рис. 4. Масштабирование цветка

Рис. 5. Три слоя изображения
5. Через меню Фильтры → Анимация → Оптимизация (для GIF).
6. Можно посмотреть на результат наших действий через меню:
Фильтры → Анимация → Воспроизведение.
Остается только сохранить в нужном формате — gif.
7. Файл → Сохранить как. При сохранении выбираем формат .gif.
8. Нажимаем Сохранить и в появившемся диалоге выбираем Сохранить как анимацию (рис. 6).
Рис. 6. сохранение анимации
9. Нажимаем кнопку Экспорт и устанавливаем задержку 430 миллисекунд. Вы можете выбрать другое число.
В результате можно получить анимированное изображение, на котором цветок увеличивается дискретно (ступенчато). Если в пункте 6 вместо
Воспроизведение выбрать Плавный переход и сохранить изображение с расширением gif, получим плавное увеличение цветка.

Задание для самопроверки
Попробуйте сделать анимации, состоящие из следующих кадров (рис.
7):
Рис .7. Кадры анимации
Вопросы для самоконтроля
1. Что такое компьютерная анимация?
2. Назовите основную идею создания анимации.
3. Назовите фильтры анимации.
4. Какой эффект анимации дает фильтр Выжигание?
5. Как установить задержку между кадрами?

Лабораторная работа № 3-4. Использование компьютерной анимации в
синтезе с векторной и растровой видами графики для создания
мультимедийного проекта
Порядок выполнения работы
Анимационные изображения в формате gif встречаются повсеместно в
Internet. Банеры, кнопки, логотипы, все они, используя даже небольшую анимацию, вносят в содержание страницы некую динамику. Существует множество различных программ, направленных специально на создание анимационных gif-изображений. Однако, большинство из них могут работать только с готовыми изображениями, искажая их или перемещая в пространстве. Поэтому совершенно логично, создавать анимационные изображения, используя программу, с помощью которой можно еще и рисовать. Можно создать эффект анимации, используя GIMP.
Формат gif позволяет хранить изображение в виде нескольких слоев, каждый из которых может представлять собой отдельное изображение. Идея в том, что каждому слою в gif-изображении, можно задать время, в течении которого он будет отображаться. Таким образом, чередуя слои можно получить анимацию.
1. Создание «бегущей строки»
Создайте анимированное изображение (рис 1). Для этого выберите
произвольное слово (например, ваше имя, фамилию и т.д.), которое будет выполнять роль бегущей строки. В нашем описании это слово "GIMP" (слово "GIMP" не повторять). Выберите любой тип шрифта, и размер символов больше, чем предлагается по умолчанию. Каждому символ вашего слова подберите разные цвета. Цвет фона (или тип заливки фона) тоже можете выбрать произвольный, например, градиентную или текстурную. Обратите внимание, что описание предлагается для создания бегущей строки слова из четырех символов.
В программе GIMP один слой играет роль одного кадра будущей анимации. Если целью является получение поочередно появляющихся символов, то на каждом новом слое следует размещать по одному символу.
Если символы должны добавляться к предыдущим, то на каждом последующем слое нужно дописать следующий символ к уже имеющимся.
Удобнее это выполнять копированием предыдущего слоя и его редактированием.

Рис 1(а). Общий вид
Рис. 1(б). Анимация "Бегущая строка".
Для просмотра анимации нажмите на изображении (рис.1(б)).
Ход работы:
1. Создайте новое изображение (Файл - Создать). Размер изображения выберите на свое усмотрение.
2. Самый нижний (первый) слой залейте произвольным цветом, текстурой или градиентом на ваш вкус.
3. На новом (втором) слое разместите свой логотип: Файл - Открыть
как слои. Выберите свой файл с логотипом. Разместите его в удобном месте, предварительно отредактировав его размер. Затем сведите слой с фоном и логотипом в один: Слой - Объединить с предыдущим.
4. Напишите первый символ вашего слова, воспользовавшись инструментом Текст. В нашем примере это символ G. Для этого:
- Выберите инструмент Текст.
- Нарисуйте текстовую рамку, где будет располагаться символ. При этом откроется диалоговое окно для ввода буквы (рис. 2). Введите первую букву слова. В рассматриваемом примере буква "G". В диалоговом окне инструмента Текст измените атрибуты шрифта на свое усмотрение.
Примечание 1: текстовая рамка изменяется за угловые маркеры.
Примечание 2: атрибуты текста (в том числе вид шрифта, размер шрифта, цвет символа) расположены в меню слева.
Примечание 3: для перемещения текста используйте инструмент
Перемещение
.

Рис. 2. Окно редактирования текста Рис. 3. Редактор атрибутов шрифта
Рис. 4.
5. Чтобы многократно не выполнять одни и те же настройки шрифта, вы можете скопировать имеющийся слой еще несколько раз (в нашем примере три раза) и на копиях изменить предыдущий символ на следующий.
Разместите символы один относительно другого так, чтобы слово читалось правильно. Таким образом получится слоев на один больше, чем символов в выбранном вами слове (рис 4).
6. Теперь сохраните полученное изображение как gif . Для этого: o
Выполнить команду Файл - Сохранить как. В новых версиях редактора формат "GIF" находится в окне "Файл -
Экспортировать", внизу нужно выбрать пункт "Выберите тип файла".

o
В открывшемся диалоговом окне выбрать тип файла Gif (Gif
image). И нажать кнопку Сохранить. o
После этого GIMP предложит Вам экспортировать изображение в gif. При этом он даст выбрать, объединять ли слои в одно изображение (свести изображение) или сохранить их как
анимацию. Так как нас интересует именно анимация, выберем второе и нажмем кнопку "Экспорт". o
После этого откроется меню выбора параметров анимационного
gif (Рис 5-а, Рис 5-б).
Рис. 5-а
Рис. 5-б

Первые два параметра задают общие свойства gif - это
черезстрочность и комментарий. Нас больше интересуют параметры анимации:
- Бесконечный цикл. При включении этого параметра, чередование слоев будет выполняться бесконечно, т.е. после отображения последнего слоя будет отображен первый. Если этот параметр будет отключен, то анимация будет проиграна один раз и остановится на изображении последнего слоя.
- Задержка между кадрами - время в микросекундах, которое по умолчанию будет отображаться каждый слой.
- Расположение кадра - имеет три режима. Первый (по умолчанию) - I
Don`t Care (Не важно), говорит GIMP распорядиться самостоятельно.
Второй - Combine (наложение слоев / объединение), накладывает один слой на другой не убирая предыдущие, т.е. объединяет их. Таким образом, если у вас есть прозрачные места в слоях, предыдущие слои будут сквозь них проглядывать. По умолчанию GIMP обычно использует именно этот режим как наиболее гибкий. Третий режим - Replace (один кадр на слой / замена), замещает предыдущий слой на новый.
o
Используйте расположение слоев по умолчанию, а время между кадрами поставьте 200. o
Если теперь закрыть созданный файл, а затем открыть его
(открыть файл gif) с помощью GIMP, то увидим, что в диалоге слоев в названии каждого слоя в скобках добавился параметр - время отображения (рис 7). Таким образом, изменив значение в скобках можно задать каждому слою свое персональное время отображения. Установите значение 500 для последнего слоя, чтобы полная надпись оставалась на экране подольше (рис 5).
Для этого надо изменить атрибуты текста и вместо 200 - напечатать 500.

Рис. 7
6. Это был самый простой пример создания анимации. o
Обратимся к специальному пункту меню Фильтры - Анимация.
Оно содержит три пункта - Воспроизведение, Оптимизация и
Разоптимизация. o
Воспроизведение. Этот пункт позволяет нам воспроизводить свежеполученное анимационное изображение (Рис 8-а, Рис 8-б)
Рис. 8-а

Рис. 8-б o
Кнопка
Пуск/Стоп
(Воспроизвести) запускает проигрывание изображения. Она же его останавливает. Кнопка Перемотка (Назад) возвращает на первый кадр изображения, кнопка Шаг позволяет менять кадры вручную. o
Но все это далеко не самые интересные возможности этого фильтра. Если щелкнуть мышкой на проигрываемое изображение, то Вы увидите, как курсор измениться на вертикальную стрелочку. Теперь вы можете перетащить анимашку в любое(!) место экрана, например в окно браузера, чтобы посмотреть, как будет выглядеть этот анимационный рисунок на Вашей страничке. o
Оптимизация. Каждый слой в анимационном gif-е представляет собой, по сути, отдельное изображение и сохраняя gif как анимацию, мы сохраняем сразу несколько изображений. Таким образом, при большом количестве слоев размер нашего анимационного gif будет расти прямо на глазах. Фильтр
Оптимизация делает следующее: он просчитывает каждый слой и находит изменившиеся точки, относительно предыдущего и оставляет только их, изменяя размер слоя на минимально возможный (т.е. обрезая по крайним изменившимся точкам). При этом все неизменившиеся точки внутри этого слоя будут заменены на прозрачные. Возьмите недавно созданный gif с надписью GIMP и примените этот фильтр (рис 9).