Некоторые технологии создания анимационной графики. Технологии создания анимации Технология построения анимационных изображений презентация

«Компьютерная анимация» - С помощью графических редакторов, например, AdobePhotoshop или GIMP. ПО для создания анимации: Анимация в презентациях; Gif-анимация; «Anima» - одушевление. Flash-анимация; Машина БЭСМ-4. Запись движения. «Multiplikato» - (лат.) умножение. Процедурная анимация. 1) объемная анимация. 2) живописная анимация. 3) перекладочная анимация. 4) компьютерная анимация.

«Технология в школе» - Еткс - единый тарифно-квалификационный справочник работ и профессий. Государственное регулирование. Организация. Условия успешности обучения. Перераспределение доходов за счет социальной поддержки. Начальное профессиональное образование. Основные виды работ и профессий. Факторы микросреды. Задачи профильного и предпрофильного образования.

«Анимации» - Удаляем ненужные узлы в иерархии. Первый вариант реализации. Избавляемся от дубликации в дисплей-листах. Варианты интерполяции матриц. Анимации геометрии (3 Мб). Содержание. Уменьшение частоты квантования: результат. Размеры анимаций на картридже огромны. Удаляем ненужные узлы в иерархии: результат.

«Технология 6 - 7 - 8 класс» - Где сливки отстоятся быстрее? Дипломат и способ приготовления селедки. Что приходит во время еды? То, из чего изготавливается одежда. В чём измеряется электрическая энергия? Слово, от которого не становится сладко во рту, сколько ни повторяй. Из какого семейства тюльпан? Что измеряет счетчик электрической энергии?

«Анимации по информатике» - Графическая информация и компьютер. Компьютерная графика. Одно из ведущих направлений развития современных информационных технологий. Под словом «мультимедиа» понимают воздействие на пользователя по нескольким информационным каналам. Области применения компьютерной графики. Используется в работе инженеров - конструкторов, изобретателей новой техники.

«Gif-анимация» - Технология создания gif-анимации в Photoshop или ImageReady. И так повторять, пока не поместим все необходимые слои. Что такое аватар? Изменение производим с помощью свободной трансформации. Переходим в Adobe Image Ready. Для запуска анимации необходимо установить время для смены кадров. Скопировать изображение на несколько слоев.

Содержание

Введение………………………………………………………1

История анимации……………………………………………2

Создание анимации…………………………………………..3

Microsoft Gif Animator………………………………………...5
Анимационные иконки……………………………… ……...6

Создание мультфильмов……………………………………..7

Заключение……………………………………………………9

Список литературы………………………………………….10

ВВЕДЕНИЕ

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

Гипотеза : Анимационные рисунки могут выполнять все мальчики и девочки, которые интересуются информационными технологиями.

Цель данной работы : Сформировать представление о возможностях программных средств обработки графической информации в Paint и GifAnimator; научиться самостоятельно создавать анимационные рисунки при помощи программы Gif Animator .

Задачи:

· Использование растровых и векторных графических редакторов;

· Оживление графических растровых рисунков с помощью GIF аниматора;

· Оживление графических векторных рисунков с помощью Macromedia Flash

· Привить практические навыки работы в данных программах;

Объект исследования: Технология создания анимации с помощью программы

Microsoft Gif Animator.

Предмет исследования : Анимационные рисунки.

Методы исследования : 1. Знакомство с программой Microsoft Gif Animator;

2. Знакомство с графическим редактором Paint.

3.Создание движущиеся рисунки с помощью данных программ.

Для решения данных задач я познакомился с одной из анимационных программ Microsoft Gif Animator. Это один из многих программных продуктов от Била Гейтса, главы корпорации Microsoft.

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

Алгоритм создания gif- анимации:

Открыть графический редактор Paint (создаем первый кадр, размер экрана не должен превышать 10х10 [Рисунок →Атрибуты ])
После завершения рисунка войти в меню Правка→Выделить все и Правка → Копировать.
Открыть WWWGIFA. Выполнить действие Edit → Paste
Вернуться в графический редактор Paint и изменить рисунок.
Повторить действия 2-4 несколько раз (в зависимости от задуманной анимации)
Для просмотра результата нажмите кнопку

С помощью программы Gif Animator я создал множество анимационных рисунков, иконок, которые могут использовать все желающие при создании презентаций и WEB сайтов, а также видеороликов и мультфильмов.

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

«Анимация – производное от латинского "anima" – душа, следовательно, анимация означает одушевление или оживление. В нашем кино анимацию чаще называют мультипликацией (дословно – "размножение"). Искусство анимации, как это ни парадоксально, старше самого кино, которое во многом именно ей обязано своим рождением». Художники всех времен и народов мечтали о возможности передать в своих произведениях подлинное движение жизни. Стремление человечества запечатлеть в рисунке движение, наблюдаемое в природе и жизни, мы находим в памятниках глубокой древности.

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

Отличием анимации от живого действия является процесс, при помощи которого создается изображение. Живое действие использует камеры для захвата изображений, которые после этого воспроизводятся. Для традиционной анимации необходимо нарисовать каждое изображение и затем сфотографировать его как один кадр для последующего воспроизведения. Каждое изображение или кадр фильма необходимо нарисовать, обвести и раскрасить вручную. Этот процесс заставляет аниматоров мыслить в кадрах: "Данное действие занимает такое-то количество кадров". "Такое-то должно произойти во время этого кадра". Представим себе, какой ответ режиссер получит от актера, если скажет: "Теперь побеги к крыльцу в течение 90 кадров, сделай паузу в 20 кадров, а затем бросайся открывать дверь". Мыслить в кадрах неестественно, но так мыслить нас заставляют ограничения технологии анимации. Было бы гораздо проще, если бы анимацию можно было выполнять в реальном времени: "Я хочу, чтобы это длилось четыре секунды, а затем через полсекунды я хочу, чтобы произошло это".

Создание анимации

Анимационные изображения в формате gif встречаются повсеместно в Internet. Банеры, кнопки, логотипы, все они, используя даже небольшую анимацию, вносят в содержание страницы некую динамику. Существует множество различных программ, направленных специально на создание анимационных gif-изображений. Однако, большинство из них могут работать только с готовыми изображениями, искажая их или перемещая в пространстве. Поэтому совершенно логично, создавать анимационные изображения, используя программу, с помощью которой можно еще и рисовать. Ниже я хочу показать, как легко можно создать эффект анимации, используя GIMP.

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

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

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

Первые два параметра задают общие свойства gif - это черезстрочность и комментарий. Нас больше интересуют параметры анимации:

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

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

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

Используем расположение слоев по умолчанию, а время между кадрами поставим 200. В результате должен получиться вот такой gif:

Если теперь открыть этот gif с помощью GIMP, то увидим, что в диалоге слоев в названии каждого слоя в скобках добавился параметр - время отображения. Таким образом, изменив значение в скобках можно задать каждому слою свое персональное время отображения. Например, установите значение 500 для последнего слоя, чтобы полная надпись оставалась на экране подольше.

Это был самый простой пример создания анимашки. Но нам всегда охота большего!

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

1. Каждый кадр анимации представляет собой отдельный слой изображения.

2. Каждому кадру можно указать два параметра: время показа в микросекундах и его тип, combine (объединение) или replace (замещение). Параметры задаются в имени слоя и заключаются в скобки, например: Слой1 (1000ms)(combine).

3. Оптимизация слоев позволяет заметно уменьшить размеры анимационного изображения.

Вот собственно и все об основных приемах создания анимационных gif изображениях с помощью GIMP.

Технология создания анимации с помощью программы
Microsoft Gif Animator

Запуск программы Microsoft Gif Animator.
ПУСК → ПРОГРАММЫ → Папка Microsoft GIF Animator → программа Microsoft GIF Animator.
Запуск программы Paint.

ПУСК → ПРОГРАММЫ → Папка СТАНДАРТНЫЕ → программа Paint
Настройка размера холста в графическом редакторе Paint.
Пункт меню РИСУНОК → АТРИБУТЫ… → ШИРИНА установить в зависимости от необходимых размеров → ВЫСОТА установить в зависимости от необходимых размеров. → ОК
Перенос кадра созданного в графическом редакторе Paint в Microsoft GIF Animator
Копирование рисунка в графическом редакторе Paint.

Пункт меню ПРАВКА → Пункт меню ВЫДЕЛИТЬ ВСЕ (о том, что произошло выделение фрагмента можно судить по появившейся вокруг рисунка пунктирной рамке) → Пункт меню ПРАВКА → Пункт меню КОПИРОВАТЬ
Вставка рисунка в Microsoft GIF Animator.
Перейти в программу Microsoft GIF Animator (дляэтого щелкните мышкой в окне программы, а если она свернута на кнопке программы, на панели задач) → щелкнуть мышкой на значке

Если все сделано правильно, должен появиться еще один кадр.

Настройка и просмотр готового ролика.

Выделить все кадры кнопкой

Перейти на закладку Image → в опции Duration (1/100 s) установить время демонстрации одного кадра (подбирается методом пробы)

Перейти на закладку Animation поставить галочку у пункта Looping – количество повторений.

Надпись Repeat Count – указывает сколько раз повторять.
Галочка у надписи Repeat Forever обозначает бесконечное повторение.
Для просмотра ролика необходимо щелкнуть мышкой на значке
Анимационная иконка

Создание анимационной иконки для сайта отличается от использования обычной иконки тем, что анимационная иконка обязательно должна иметь формат gif.

Для создания анимации подойдет любая программа, которая может создать анимационный рисунок из набора фреймов. Так например, можно использовать Macromedia Flash. Одним из распространенных инструментов для создания анимации является Adobe ImageReady

Создание анимационной иконки .

Для создания анимации необходимо создать рисунок размером 16x16 пикселей в Adobe Photoshop.

Создаем на одном изображении несколько слоев, которые будут имитировать анимацию (то есть изображение на слоях должны быть разнообразными). Сохраним изображение в формате PSD.

Перейдем в Adobe ImageReady и через меню Window/Animation откроем панелья анимации. Откроем сохраненное изображения в формате psd и добавим на панели такое количество кадров, сколько слоев имеет изображение. Для каждого кадра на панеле слоев включим только один слой (остальные должны быть скрыты). При необходимости для каждого кадра можно изменить время его отображения.

Примичание: в adobe photoshop CS3 - imageready нет, открыть окно анимации можно- меню- окна- анимация

Для этого под каждым кадром щелкните правой кнопкой мыши и выберем необходимый интервал.

Отображение анимации в адресной строке.

После загрузки рисунка на сайт, браузеру необходимо указать, что бы в качестве иконки он использовал не favicon.ico а рисунок gif. Для этого после описания мета тегов в файл необходимо включить строку: Code

В результате в адресной строке мы увидим свой анимационный рисунок.

Создание мультфильмов

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

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

Принцип стробоскопических "живых" картин и современной мультипликации один и тот же и основан на психофизиологической способности человека сохранять зрительные впечатления. При вращении стробоскопа глаз видит последовательно сменяющиеся рисунки. Скорость смены одного рисунка другим такова, что один рисунок за счет инерции зрительного впечатления не успевает исчезнуть из нашего сознания, как его место занимает другой с новой фазой движения. Глаз человека сохраняет зрительное впечатление примерно в течении 0,1 сек. Поэтому, если время между двумя зрительными впечатлениями не превышает 0,1 сек., впечатления сливаются, что и создает ощущение движения.

Таким образом, мультипликацию в том виде, в каком она впервые появилась, можно отнести к непосредственным предшественникам кинематографа. Первые мультипликационные фильмы появились в начале XX века, примерно в 1908-1910 годах. Их пионерами принято считать Эмиля Коля (в рисованном фильме) и Владислава Старевича (в кукольном фильме). Мультипликационная съемка объемных предметов и кукол во многом отличается от съемки рисунков. Поэтому кино-мультипликацию разделяют на два вида: плоскостную и объемную.

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

В наш век технического прогресса широкое применение нашла компьютерная мультипликация, которую также можно разделить на плоскостную или 2D-анимацию и объемную или 3D-анимацию.

Чтобы делать небольшие мультяшки нам понадобятся: Программа для рисования и Программа для компоновки кадров (аниматор).

В качестве программы для рисования можно использовать любой графический редактор: Paint, Paint PRO, Adobe Photoshop. В нем мы будем создавать кадры нашей будущей анимации. Записывать их лучше сразу в GIF- формате, но это не обязательно....
* Комментарии: Если вы собираетесь использовать анимированный GIF для своих web-страниц, то для того, чтобы анимация хорошо смотрелась на любом фоне, лучше делать рисунки-кадры на прозрачном фоне.

Затем в программе-аниматоре мы выставляем очерёдность кадров, устанавливаем время задержки для каждого из них,

И сводим все кадры в один файл, т.е. записываем как анимационный GIF (GIF89A Format).

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

Например, есть очень хорошие аниматоры:

ULEAD"s GIF Animator. GIF Construction

Основным достоинством этих программ является то, что анимацию можно создавать и из одной картинки!

Делается это с помощью эффектов прорисовки, которые на эту картинку накладываются.

Заключение

В последнее время, благодаря появлению мощных домашних компьютеров и распространению web-технологий, плоская компьютерная анимация стала доступна широкому кругу любителей. Самые простые анимационные ролики можно сделать, используя технологию gif-анимации – с помощью gif-аниматоров. Анимация такого рода представляет собой зацикленные растровые кадры, имеющие небольшой «вес» и применяемые для оживления баннеров, логотипов и т.п. Более широкие возможности предоставляет Flash-технология, которая базируется на векторной графике и позволяет создавать компактные файлы (следовательно, более длинные и сложные анимационные ролики), а также обеспечивает их быструю загрузку по сети. В gif-анимации используется возможность gif-формата хранить в файле несколько растровых изображений. Они представляют собой серию кадров, быстро сменяющих друг друга, за счет чего и достигается анимационный эффект. Чем проще рисунок и меньше количество задействованных цветов, тем лучше результат gif-анимации. Кадры отдельного изображения могут быть созданы в любом графическом пакете с помощью gif-аниматоров Flash анимация – это интерактивная анимация, изображение «живых» картинок, реагирующих на действия пользователя, а интерактивность – это свойство программного обеспечения, обеспечивающее реакции со стороны программы, в ответ на какие-либо действия пользователя.

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

Используемая литература

Шаханова Г.А., Карсыбаева З.С., Жубаева А.С., Утеев А.А. Методика создания и технические характеристики электронного учебника. Казахстанско-Рссийский университет, Кафедра информатики и прикладной математики. Астана, “САНАТ-Полиграфия”, 2005 г.
Соловьёва Л.Ф. Компьютерные технологии для учителя. Санкт-Петербург, “БХВ-Петербург”, 2003 г.
Верстак В. Анимация в 3D Max 8. Секреты мастерства. Москва, Санкт-Петербург, “Питер”2006 г.
Кёршан Б. Новембер А., Стоун Дж.Основы компьютерной грамотности. Москва, “Мир”, 1989 г.
Стефенс М., Триз Р. Компьютер для детей. Москва, “АСТ-ПРЕСС”, 2000 г.

Приложение 1

Практика по созданию анимационного рисунка

Итак, вы захотели своими руками сделать анимационную картинку.

Принцип ее работы, я думаю всем понятен - нужно создать последовательные кадры, после чего их нужно будет объединить в один файл - .gif - он и позволит "ожить" вашим рисункам. Что для этого нужно? Во- первых нужно иметь под рукой инструмент - графический редактор, например Photoshop9. Так же я рекомендую скачать программу Bannershop GIF Animator 5. Она была специально разработана для изготовления баннеров и быстрого анимирования картинок.

Итак, теперь когда у нас есть все необходимые программы - можно приступать к работе!

Давайте попробуем сделать простейшую анимацию из простой картинки babochka.jpg

В открывшимся окне вибираем инструмент "Дефомация"

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

Подводим инструмент (кружок) к крылу и плавно искажаем крылья, после чего нажимаем ОК и сохраняем нашу картинку под другим именем.

Например babochka2.jpg

Теперь нужно эти файлы соединить в один файл. Эту операцию можно выполнить и в Фотошопе, но боюсь что для начинающих это будет сделать довольно сложно...

Поэтому для сведения полученных кадров в единый файл я рекомендую использовать более простую программку - Bannershop GIF Animator

Перед нами откроется окно - выбираем в нем Open File

Выбираем наш первый кадр -у нас появится исходный файл - бабочка в первом фрейме.

После чего нужно добавить второй кадр - нажимаем New - появится новый кадр - вставляем туда второй файл через Image - Import Image.

File - Save GIF Animation

Открываем это файл...

Вот теперь наша бабочка ожила!!!

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

Приложение 2

Создание футбольного мяча

Возьмемся сымитиpовать вpащающийся футбольный мяч. Поскольку выpисовывать пятиугольники и шестигpанники нам не с pуки, найдем готовое изобpажение статичного мяча. Для поиска каpтинок я часто использую соответствующий сеpвис Google. На запpос "футбольный мяч" будет найдено большое количество каpтинок, можете выбpать любую. Дабы не листать далеко, я выбpал весьма подходящее изобpажение с пеpвой же стpаницы.

Исходное изобpажение мяча, на основе котоpого мы и сделаем анимацию:

Это ка p тинка 180 на 180 пикселей, фо p мата PNG. Что особенно пpиятно для нас - близка к монохpомной (когда пpисутствует всего два цвета, чеpный и белый) и с пpозpачной подложкой. Значит, пpеобpазования и потеpи будут сведены к минимуму.

Сохpанив выбpанную каpтинку, откpоем гpафический pедактоp и загpузим её туда. Допустим, это есть наш пеpвый кадp. Пеpесохpаним его как GIF. Все настpойки за исключением одной можем оставить по умолчанию. Единственное изменяемое нами значение - количество цветов. Выставляем его минимальным для получения минимального же по pазмеpу файла. Несмотpя на то, что в нашем изобpажении, кажется, пpисутствуют только два цвета (чеpный и белый), есть еще одно значение, для котоpого должен быть заpезеpвиpован цвет - это пpозpачная подложка pисунка - обpамление мяча. Сохpанили...

Сделаем тепеpь быстpо несколько следующих кадpов. Я pаботал в Adobe Photoshop. С помощью инстpумента Elliptical Marquee Tool выделим окpужность по контуpу мяча. Когда убедимся, что все его кpая захвачены в выделенную область, из контекстного меню (по клику пpавой кнопки мыши на выделенной области) выбиpаем пункт Free Transform. Появится пpямоугольник с несколькими опоpными точками. Используя окpужающее изобpажение пpостpанство с возникающими значками-подсказками пpеобpазований, повеpнем пpямоугольник пpимеpно на 45 гpадусов. "Поймать" это значение очень легко даже на глаз, а опоpные точки упpощают эту задачу до минимума. Подтвеpждаем повоpот. Это наш втоpой кадp. Сохpаняем его, как и пеpвый, в пункте Save for Web. Установки пpежние, количество цветов - 3.

Oпеpация повоpота мяча "вpучную" в Adobe Photoshop
Далее действия повтоpятся. Выбиpаем Free Transform и повоpачиваем еще на 45 гpадусов. Сохpаняем. Легко подсчитать, что нам потpебуется, таким обpазом, 8 кадpов, ведь 8 pаз по 45 получается pовно 360 гpадусов или полный обоpот. Конечно, если сделать не 8, а 16 кадpов (тогда повоpот потpебуется совеpшать с шагом 22 гpадуса 30 минут) движение мяча будет более плавным. Итак, все кадpы готовы. Закpываем Photoshop, откpываем GIF Movie Gear и пpиступаем к "склейке". Для этого поочеpедно добавляем все сохpаненные каpтинки-кадpы. Либо выделяем сpазу все и мышкой пеpетаскиваем в pабочую область - опеpация Drag-and-Drop здесь как всегда эффективна.

Добавленные 8 каpтинок составят полноценную анимацию

Мы только начали, а ведь почти готово! Остается лишь выставить интеpвалы между сменой кадpов. Сделаем мяч, вpащающийся с постоянной скоpостью, то есть, все задеpжки у нас будут одинаковыми. Подбиpаются они экспеpиментально в окне пpедваpительного пpосмотpа. Мне понpавилось движение пpи задеpжке в 13 (сотых секунды).

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

Вот что у нас получилось. Довольно кpупный pисунок-анимация в 12 килобайтах.

Готово, не более чем за полчаса мы сделали весьма сносную анимацию, котоpую можно pазместить где-нибудь в дальнем углу своего сайта, чтобы мало-мальски оживить скучную стpаничку. Если же вы хотите, чтобы мячик не пpосто вpащался, а полноценно "катился" по стpанице, вам потpебуется всего лишь длинная pейка-баннеp. Pазместите пеpвый кадp в пpавом ее конце, а все следующие - с небольшим смещением влево. Хотя вследствие угла зpения, под котоpым была взята пеpвая каpтинка, мяч не является катящимся, а скоpее "пpокpучивающимся", тепеpь он будет ближе к тому, чтобы стать пеpемещающимся. Лучших pезультатов (и по степени сжатия, и по визуальному эффекту) можно добиться, если дополнительно отpетушиpовать одиночные кадpы или подобpать лучшую каpтинку. Также pазмеp можно уменьшить, если отказаться от пpозpачной подложки и заменить ее белым фоном.
Пpиведенный выше пpимеp не отличается элегантностью pешения, однако является достаточно пpостым и показательным. Сейчас же посмотpим еще один, буквально двухкопеечный по своей пpостоте - "мигающий" баннеp. Хотя это может быть и кнопка, и любой дpугой элемент на web-стpанице. Подобный эффект достигается контpастной сменой цветов каpтинки.

Запустим MS Paint для создания шаблона. Откpоем новый документ с pазмеpами, нужными для изобpажения, скажем, 160 на 40 пикселей. Заливаем весь фон зеленым цветом и на него наносим надпись белыми буквами. Сохpаняем pисунок. Кстати, совсем не обязательно сохpанять его в GIF, поскольку многие пpогpаммы-аниматоpы поддеpживают большое количество входных фоpматов, в том числе и популяpные bmp и jpeg. Далее заливаем все белым (либо выделяем все и жмем Delete), и в том же месте, где и в пеpвый pаз - наносим ту же надпись, только тепеpь с зеленым цветом фона.

Стpого говоpя, все то же можно сделать и на одном pисунке, пpосто залив дpугими цветами фон и надпись, либо же в Photoshop, пpименив 2 слоя. В любом случае сохpаняем под новым именем. Втоpой и последний кадp готов, дpугих у нас не будет. Можно пpиступать к сбоpке. Этот этап будет совсем пpостым, ведь у нас всего два кадpа. Но если это совсем неинтеpесно, можно поигpать и с ними. Pазместим, к пpимеpу, несколько pаз подpяд эту маленькую последовательность. Выставим pавные малые вpеменные пpомежутки между ними, скажем, по десять сотых. А на гpанице пеpехода от пеpвого выставим большую задеpжку, напpимеp, секунду. В pезультате получим уже иной баннеp.

Мигающий баннеp даже небольшого pазмеpа сpазу бpосается в глаза

Учтите, использовать подобные pешения надо очень аккуpатно и огpаниченно. Вместе с тем, что мигающие элементы хоpошо пpивлекают внимание, их обилие быстpо надоест и будет только pаздpажать пользователя, особенно если он опpеделенное вpемя что-то читает на стpанице, а не быстpо пеpеходит по ссылкам...

ЛЕКЦИЯ

Тема: Средства и технологии работы с графикой

План:

1. Средства обработки графической информации

2. Графические редакторы

3. Аниматоры

4. Трёхмерная анимация

5. Программы двумерного и трёхмерного моделирования

Графика, картинки, фотографии - для компьютера это тоже знаки. Их преобразование производится с помощью очень интересных, но иногда весьма непростых технологий.

Средства обработки графической информации

Аппаратные средства

К аппаратным средствам создания и обработки графических изображений (рисунков, схем, фотографий и пр.) относятся в основном:

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

Программные средства

К программным средствам создания и обработки графических изображений относятся:

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

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

По своему профессиональному назначению средства компьютерной графики и анимации можно подразделить на следующие группы:

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

2. Графические редакторы

Графические редакторы (Painter, Adobe Photoshop, Adobe Illustrator, Corel Draw!, FreeHand, Picture Man и другие) предназначены преимущественно для просмотра, создания и редактирования плоскостных (двумерных) статичных изображений.

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

Этот класс программ часто носит название 2Б-графика (D от англ. dimension - размерность). Они моделируют различные изобразительные инструменты (карандаш, ручка, уголь, аэрограф и др.), позволяют имитировать рисунки акварелью и маслом, а также создавать эффект натуральной среды. На рис. 1 показан рисунок, созданный в графическом редакторе.

Рис. 1. Рисунок, созданный в графическом редакторе

Пользовательское меню графического редактора чаще всего включает в себя возможность выбора:

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

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

Пример. Графический редактор Photoshop 5.0 включает в себя в качестве инструментов для обработки изображений разнообразные эффекты.

1. Применяя последовательно поворот изображения на 90°, эффект «Ветер», обратный поворот на 90°, эффект «Дрожание», эффект «Размытие», и смену палитры, можно из обычного текста получить изображение «огненной» надписи (рис. 2).

Рис. 2. «Огненная» надпись из обычного шрифта

2. Последовательно применив к белому листу фильтр «Облака», стиль «Найти края» и выбрав режим автоматического подбора уровней чёрного и белого цвета, можно получить вполне реалистичное изображение каменистой поверхности (рис. 3).

Рис. 3. «Каменистая» поверхность

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

Настоящее объёмное (трёхмерное, 3D) изображение проще создать с помощью векторной графики. Этот метод больше походит на черчение, причём часто трёхмерное. С помощью векторной графики объекты строятся из так называемых примитивов - линий, окружностей, кривых, кубов, сфер и т. д. Примитив не нужно рисовать - выбрав пиктограмму с изображением или названием, например, сферы, вы просто задаёте её параметры (координаты центра, радиус, количество граней, составляющих трёхмерные поверхности и т. п.), а уж компьютер чертит её сам.

Технологию создания трёхмерного изображения можно разделить на три основных этапа.

Этап 1 . На этом этапе, который называется каркасной аппроксимацией, строится каркас будущего изображения - производится представление всех криволинейных поверхностей в виде пространственной сети, состоящей из двумерных граней. Чем мельче это разбиение, тем более правдоподобно будет выглядеть картинка.

Этап 2 . Этап геометрических построений поверхностей включает построение сцены: заполнение поверхностей, создание перспективы, учёт влияния источников света и пр.

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

Процесс создания трёхмерного объекта и его преобразование в двумерное представление осуществляется совместно центральным процессором и графическим процессором, расположенным на карте видеоадаптера или 3D-акселератора. При этом координаты объекта сначала преобразуются в физические, а затем в 2D-координаты экрана монитора (путём построения различных ортогональных и аксонометрических проекций). После этого 3D-акселератор выполняет раскраску и заполнение каждого пикселя изображения. Этапы создания трёхмерного изображения проиллюстрированы на рис. 4.

3. Аниматоры

Аниматоры (Animator Pro, Power Animator, Animation Works Interactive, Animo и др.) могут работать как с двумерными, так и с трёхмерными изображениями.

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

Рис. 4. Поэтапное создание трёхмерного изображения

Пример. Используя специальные инструменты пользовательского меню программы-аниматора, можно задать движение по траектории (программа создаст соответствующие промежуточные кадры - рис. 5) или плавно изменить палитру в течение нескольких кадров (например, постепенно затемнить изображение или убрать часть цветов).

Рис. 5. Задание движения выделенного объекта-спрайта

Некоторые технологии создания анимационной графики

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

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

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

Анимация цветом. Положение объектов не изменяется, меняется лишь цвет.

4. Трёхмерная анимация

Трёхмерная анимация (программы 3D Studio, Power Animator, Truespace, Prisms, Three-D, RenderMan, Crystal Topas и др.) по технологии напоминает кукольную: вы создаете каркасы объектов, накладываете на них материалы, компонуете всё это в единую сцену, устанавливаете освещение и камеру, а затем задаёте количество кадров в фильме и движение предметов. Посмотреть происходящее можно с помощью камеры, которая тоже может двигаться.

Пример. Программа 3D Studio позволяет работать с неограниченным числом камер с масштабированием изображения в реальном времени, подвижными камерами; возможно управление углом зрения, а также моделирование крупноформатной камеры с изменяющейся перспективой. 3D Studio позволяет использовать несколько впечатляющих способов работы со светом, например, может задать лучевой источник света, имитирующий падение солнечного света с образованием теней; подсветку неподвижных и движущихся цветных растровых образов и т. д. Движение объектов в трёхмерном пространстве задаётся по траекториям, ключевым кадрам и с помощью формул , связывающих движение частей сложных конструкций. Подобрав нужное движение, освещение и материалы, вы запускаете процесс визуализации. В течение некоторого времени компьютер просчитывает все необходимые кадры и выдаёт вам готовый фильм. Недостаток, следующий из такой техники создания изображения, - это чрезмерная гладкость форм и поверхностей и некоторая механистичность движения объектов. Правда, эти проблемы преодолимы. В анимационных пакетах улучшаются средства визуализации, обновляются инструменты для создания спецэффектов и увеличиваются библиотеки материалов. Для создания «неровных» объектов, например, волос или дыма, используется технология формирования объекта из множества частиц. Вводятся разнообразные методы «оживления», разрабатываются новые технологии совмещения видеозаписи и анимационных эффектов, используются инструменты точной синхронизации звука и изображения, что позволяет сделать сцены и движения более реалистичными.

Пример. Программа Power Animator использует движение по подобию как один из методов «оживления». Записав на цифровую видеокамеру движения живого актёра, можно «заставить» созданный в аниматоре персонаж повторять их с помощью специальной функции. В результате гном из «Белоснежки» будет двигаться с изяществом выбранного актёра. А если что-то не понравится, есть возможность подредактировать всё по ходу дела.

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

5. Программы двумерного и трёхмерного моделирования

Программы двумерного и трёхмерного моделирования (AutoCAD, Sketch!, Ray Dream Designer, Crystal 3D Designer, AutoStudio и др.) применяются для дизайнерских и инженерных разработок.

Пример. Программу AutoCAD часто рассматривают как графическое ядро систем автоматизированного проектирования (САПР): она реализует основные операции по созданию и редактированию линий, дуг и текста, создает 2D- и ЗБ-модели; автоматизирует решение многих расчётных задач, возникающих в процессе проектирования. В программе Auto Studio к традиционным методам трёхмерной графики добавлены средства редактирования моделей и анимации, разработанные специально для дизайнеров автомобилей.

Средства компьютерного графического моделирования используются конструкторами и архитекторами. Широко применяются они и в научных исследованиях (рис. 4.5.6).

6. Программы для научной визуализации

Программы для научной визуализации (Surfer, Grapher, IRIS Explorer, PV-Wave, Khronos, Data Visualizer, MapViewer и др.) могут быть предназначены для различных целей - от решения проблем муниципального планирования до визуализации солнечных взрывов.

Наиболее часто они применяются:

для создания поверхностей, описываемых функциями типа z=f(x,y), и графиков, описываемых функциями типа у= f(x);
для построения цветных карт;
для создания моделей погодных условий и океана и т. п.

Пример. Пакет Map Viewer позволяет вводить и корректировать карты - изменять масштаб, преобразовывать координаты, а также обрабатывать и выводить в графическом виде числовую информацию, связанную с картами - например, демографические данные.

С помощью пакета Earth Watch можно моделировать и демонстрировать трёхмерную картину метеоусловий над Землей, строить топологические поверхности по космическим снимкам и давать прогноз погоды на неделю вперед (рис. 7).

знать

Каппаратным средствам создания и обработки графических изображений (рисунков, схем, фотографий и пр.) относятся в основном:

Монитор и видеокарта, поддерживающая графический режим отображения;

Видеоадаптеры (видеоускорители);

3D-акселераторы;

Манипуляторы «мышь»;

Сканеры;

Дигитайзеры;

Принтеры и графопостроители (плоттеры).

К программным средствам создания и обработки графических изображений относятся:

Программы двумерной компьютерной живописи - графические редакторы, предназначенные преимущественно для создания и обработки плоскостных (двумерных) статичных изображений;

Средства деловой графики;

Пакеты компьютерной графики для полиграфии - позволяют дополнять текст иллюстрациями разного формата, создавать дизайн страниц и выводить полиграфическую продукцию на печать с высоким качеством;

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

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

Программы для двумерного и трёхмерного моделирования, применяемые для дизайнерских и инженерных разработок;

Пакеты трёхмерной анимации, используемые для создания рекламных и музыкальных клипов и кинофильмов;

Программы для научной визуализации.

Контрольные вопросы

1. Что относится к аппаратным средствам создания и обработки графических изображений (рисунков, схем, фотографий и пр.)?

2. Какие программные средства создания и обработки графических изображений Вы знаете?

3. Определите, с каким типом графики - векторной или растровой - работает графический редактор, установленный на вашем компьютере. Обладает ли он хотя бы некоторыми функциями аниматора?

Создание анимации – довольно сложная задача. Для ее решения нужны специальные компьютерные продукты. Мультимедийные технологии сейчас развиваются быстрыми темпами. Существует много программ для создания флеш и гиф анимации. Талантливые специалисты разрабатывают новые идеи и внедряют их в жизнь. Создание компьютерной анимации – распространенное направление, на которое обращают внимание владельцы веб-ресурсов. Также создание анимации интересует руководителей компаний, занимающихся продажей товаров. Создание трехмерной анимации – востребованная услуга. Они получила широкое распространение, потому что презентационные ролики, видеоклипы, мультфильмы используются в производственной, научной и деловой сфере.

Мы живем в век мультимедийных технологий. Бумажные носители постепенно вытесняются. На смену приходят компьютерные продукты. Поэтому создание трехмерной анимации – достаточно популярная услуга. Опытные специалисты создают запоминающийся интерактивный контент, способствующий повышению продаж. Анимация для создания фильма, ролика, презентации предполагает подготовку материалов, написание скриптов, разработку отдельных элементов. Оригинальность подачи информации – залог успеха. Поэтому процесс создания анимации должен проводиться со знанием дела. Если все сделано правильно, динамичные элементы привлекают внимание потенциальных клиентов. Также они вызывают повышенный интерес к товару, услуге. Создание анимации для сайта выполняется в разных техниках, стилях. Наиболее подходящие варианты выбираются с учетом конкретных задач. Существуют разные технологии создания анимации: рисованная, кукольная, морфинг, классическая, цветовая. Каждая технология имеет специфические особенности. Создание простой анимации – процесс, под которым подразумевается поочередная смена рисунков. Создание покадровой анимации - трудоемкая работа, потому что каждое изображение делается отдельно. Например, кукле придают определенное положение, а потом фотографируют. На следующем этапе аниматор придает кукле другую позу и снова делает снимок. Создание анимации 2D – творческий процесс, при выполнении которого используются специальные программы. Такой вид работы дал начало объемной графике. Создание анимации движения – процесс, применяемый к группам, текстовым блокам, экземплярам. Популярные программы поддерживают расчет промежуточных кадров и обеспечивают возможность изменения цвета объектов.

Создание 3D анимации. Создание анимации в 3DS MAX

Создание компьютерной анимации в трехмерном пространстве набирает все большую популярность. Ключевыми особенностями такого процесса является то, что каждая сцена – это набор объектов, текстур и источников света. Компьютерные продукты разрабатываются с помощью функциональных программ. Например, возможно создание анимации в 3ds max. В этой программе содержатся современные инструменты для специалистов в сфере мультимедиа. Cоздание анимации в 3ds max проводится на высшем уровне. Для создания трехмерных компьютерных моделей применяются различные техники, механизмы. Программа обладает широкой базой стандартных средств. С их помощью достигаются интересные эффекты: водяные брызги, струи фонтана, падающий снег, звездное небо, дым. Создание анимации в 3ds max – захватывающий процесс, от которого невозможно оторваться. Помимо стандартного набора инструментов, существуют дополнительные плагины. Они расширяют возможности специалистов. При создании трехмерной анимации моделируются любые объекты: растения, цветы, широколиственные деревья, облака, ландшафты, горы, разнообразные атмосферные эффекты. С помощью такой программы создание анимации 3D превращается в интересный процесс. Cоздание анимации в 3d max - увлекательная работа. Ее выполняют архитекторы, дизайнеры интерьеров, художники. Современный графический редактор содержит в себе комплект необходимых инструментов. По данной причине создание 3Д анимации проводится на профессиональном уровне. Графический редактор 3d max – комплексное решение для моделирования, рендеринга, визуализации эффектов. Создание анимации к видео занимает много времени, но окончательный результат превосходит ожидания. Технологии создания анимации развиваются быстрыми темпами. Появляются принципиально новые решения, идеи. Создание 2d анимации постепенно уходит в прошлое, потому что существуют более продвинутые технологии. Имеется в виду создание анимации 3D. Живые персонажи, впечатляющие спецэффекты, потрясающий реализм – основополагающие достоинства такой технологии. Создание анимации 3D – современное искусство. Оно основывается на разных сценах и красивых эффектах. Мультфильмы, презентационные ролики, фильмы, созданные с помощью инновационной технологии, обладают огромной силой воздействия на зрителя.