GIF-анимация
В этом разделе мы
немного поговорим о представлении во Всемирной сети анимированной графики,
или, кратко, о web-анимации. Возможностей применения движущихся изображений
существует великое множество: их можно разместить в заголовках web-страниц
в качестве управляющих навигацией элементов, вместо кнопок, вызывающих
почтовый клиент или заносящих ярлык ресурса в системную папку «избранное»
с помощью специального скрипта, выполненного на языке Java. Но чаще
всего анимированная графика встречается в размещаемой на интернетовских
сайтах рекламе, то есть в виде разнообразных баннеров. Использование
в рекламных изображениях движущихся элементов стало на сегодняшний день
повсеместной традицией.
Во Всемирной сети
ныне применяют несколько видов анимации. Среди более или менее современных
подходов следует упомянуть технологию Macromedia Flash, оперирующую
векторными графическими объектами, и технологию Java, когда графика
и текст перемещаются посредством включения в html-документспециального
кода, обрабатываемого клиентским броузером совместно с кодом самой web-страницы.
Оба эти варианта не лишены целого ряда недостатков. Прежде всего, это
пропорциональное увеличение времени загрузки html-доку-мента, которое
к тому же чрезвычайно плохо поддается регулировке. Болеетого, для отображения
элементов flash требуется специальная надстройка для пользовательского
броузера, а скрипт Java не будет обработан броузерами старых версий
и броузерами, в которых отключена поддержка компиляции этого языка.
Обе технологии подробно рассматриваются в соответствующих справочниках
и журнальных публикациях, поэтому я остановлюсь на наиболее традиционном
способе передачи движения на web-странице, а именно — на GIF-анимации.
Вскоре после появления
стандарта Compu Serve GIF было замечено, что принцип записи графической
информации в файл этого формата позволяет помещать под одним заголовком
последовательность отдельных кадров, которые можно чередовать на экране
с определенным временным интервалом. Именноэта особенность файлов GIF,
точнее — модификации данного стандарта, известной под названием GIF89a,
и легла в основу анимации, исторически первой появившейся в Интернете.
Для того чтобы пользователи Всемирной сети могли наблюдать GIF-анимацию,
не требуется какого-либо дополнительного программного обеспечения, помимо
любого стандартного броузера, поддерживающего отображение графики.
Процесс подготовки
анимированного GIF можно условно разделить на несколько этапов: создание
отдельных кадров, генерация движущегося изображения и оптимизация целевого
файла. Базовые кадры формируются в любом графическом редакторе и сохраняются
на диске в формате GIF, их изготавливают приблизительно по такому же
принципу, по которому создается обычная мультипликация (рис. 5.9). Рекомендуется
заранее нарисовать соответствующий вашей задумке шаблон — файл, содержащий
изображение фиксированного размера суже нанесенным на него неподвижным
фоном, однотонным или текстурным, поверх которого будут перемещаться
движущиеся объекты. При подготовке рисунков следует обращать внимание
на то, чтобы подвижный элемент смещался в каждом кадре на равное расстояние
и именно в том направлении, в котором необходимо. Если, например, какой-то
объект должен перемещаться строго по горизонтали, но в одном из кадров
вы разместите его чуть ниже или выше первоначального положения, траектория
его движения получится ломаной. Для того чтобы избежать этого, используют
имеющиеся в составе большинства профессиональных графических редакторов
линейки и направляющие. Если фон будущей анимации предполагается сделать
однотонным, можно нанести на ранее созданную заготовку шаблонную сетку,
которая по окончании работы без труда удаляется замещением соответствующей
цветовой маски фоновым цветом.
Рис. 5.9. Подготовка
кадров GIF-анимации
Уже в процессе работы
над исходными кадрами следует подумать о сокращении размера будущего
файла. Во-первых, постарайтесь не включать в анимациюбольшое количество
цветов: чем меньше их число, тем меньше килобайт необходимо будет впоследствии
перекачать пользователю с сервера, на котором размещен ваш сайт. Однако
простого сокращения числа оттенков, составляющих изображение, как правило,
недостаточно: необходимо уменьшить соответствующее значение в используемой
файлом цветовой палитре. Это лучше делать путем редактирования палитры
вручную, а не с помощью стандартных средств, поскольку в этом случае
автоматическое уменьшение, скорее всего, приведет к некорректной замене
некоторых оттенков участком из нескольких используемых цветов. Необходимо
на глаз определить количество составляющих рисунок оттенков, при переводе
изображения в индексированный формат указать эту цифру в параметрах
сохраняемого файла (пункт Цвета диалогового окна Индексированный цвет
в меню Изображение/Режим/Индексированные цвета редактора AdobePhotoshop),
после чего откорректировать элементы палитры (например, с помощью инструмента
пипетка в меню Изображение/Режим/Таблица цветов того же редактора).
Использование прозрачного фона также уменьшает размер целевого файла.
Программа
Ulead GIF Animator
Анимация собирается
из готовых кадров в любой предназначенной для этого специализированной
программе, например, с помощью наиболее популярного и удобного инструмента
— условно-бесплатной программы Ulead Gif Animator, которую можно загрузить
с сайта фирмы-разработчика (http://www.ulead.com).Gif
Animator позволяет не только создавать новое анимированное изображение,
но и генерировать его из импортированных видео файлов формата AVI, множество
дополнительных фильтров позволяют добиться огромного количества различных
визуальных эффектов, а встроенный оптимизатор графики — сократить размер
целевого файла до возможного минимума. Имеется возможность задавать
различные временные интервалы между сменой кадров, записывать в файл
комментарии и добавлять произвольный текст.
Оптимизация GIF-анимации
достигается удалением из изображения неиспользуемых цветов и замещением
статичных участков картинки прозрачным фоном(рис. 5.10). Иными словами,
после оптимизации картинки все неподвижные фрагменты изображения остаются
только на первом кадре, а остальные кадры содержат лишь динамические
объекты, наложенные на прозрачную подложку. Существует множество программ
для сжатия анимированной графики, их можно найти на серверах, предлагающих
бесплатное программное обеспечение. Однако опыт показывает, что гибко
настраиваемый оптимизатор, интегрированный в Ulead Gif Animator, позволяет
добиться в этом наилучшего результата.
Рие. 5.10. Замещение
статичных участков прозрачным фоном в файле анимации
Внешний вид программы
Ulead Gif Animator версии 4.0 показан на рис. 5.11.
Рис. 5.11. Интерфейс
программы Ulead Gif Animator .Рассмотрим элементы управления данной
программой более подробно (рис. 5.12).
Рис. 5.12. Элементы
управления программой Ulead Gif Animator
Стандартное меню
File — работа
с файлами
New — создать новый
файл;
Open GIF — открыть
готовый файл в формате GIF;
Open Video — открыть
готовый файл в форматах Microsoft AVI или Autodeskanimation;
Animation Wizard
— разработка GIF-анимации из готовых файлов с помощью специального мастера;
Restore — отмена
внесенных изменений;
Save — сохранить
файл в формате GIF;
Save AS — сохранить
файл в формате GIF под другим именем;
Optimization Wizard
— мастер оптимизации, автоматически уменьшает размерыфайла;
Batch process — оптимизация
в пакетном режиме;
Export — сохранение
GIF-файла в виде кода HTML или видеофайла;
Preferences — свойства
программы (общие настройки);
Recent — вызвать
на редактирование файл, который открывался последним.
Меню Edit
— редактирование файлов
Undo moving — отменить
перемещение;
Redo moving — повторить
перемещение;
Cut — вырезать в
буфер обмена;
Сору — скопировать
в буфер обмена;
Copy HTML code —
копировать в код HTML;
Paste comment — вставить
комментарий;
Delete — удалить;
Select all — выделить
все;
Invert selection
— инвертировать выделение;
Duplicate — создать
копию изображения как еще одного кадра анимации;
Crop — создать копию
выделенной части изображения как еще одного кадраанимации;
Resample — изменить
размеры кадра;
Rotate and flip —
развернуть изображение на определенный угол и создать зеркальное отражение
кадра;
Regenerate frames
— регенерация кадров;
Global attribute
change — смена общих атрибутов изображения.
Меню View
— просмотр изображения
Actual view — просмотр
в масштабе 1:1;
Zoom in — просмотр
в увеличенном виде;
Zoom out — просмотр
в уменьшенном виде;
Start preview — предварительный
просмотр движущегося изображения в окнепрограммы;
Full screen preview
— предварительный просмотр изображения в полноэкранномрежиме;
Layer panel — показать/убрать
панель слоев;
Thumbnail size —
изменить размер изображения для предварительного просмотра;
Previous image —
вернуться к предыдущему изображению;
Next image — перейти
к следующему изображению;
Properties — ввести
свойства изображения (размеры и скорость загрузки);
Standard toolbar
— показать/убрать стандартную панель инструментов;
Attribute toolbar
— показать/убрать панель атрибутов файла;
Palette toolbar —
показать/убрать панель палитры;
Status bar — показать/убрать
панель статуса.
Меню Layer
— слои анимации
Add blank image —
добавить пустой кадр;
Add image — добавить
изображение;
Add video — добавить
видео;
Add comments — добавить
комментарий;
Add banner text —
добавить текст поверх изображения;
Add simple transition
— смена кадров с эффектом типа «жалюзи»;
Add color animation
— появление цветов в заданном порядке;
Add cube effect —
смена кадров с эффектом «вращение куба»;
Add scrolling — смена
кадров с эффектом «вращение»;
Move layer up — передвинуть
слой вверх;
Move layer down —
передвинуть слой вниз;
Reverse order — поменять
порядок кадров.
Меню Filters
— фильтры
About filters — информация
о фильтрах, имеющихся в программе.
Меню Video
F/X
Включает следующие
анимационные графические фильтры.
3D
Gate 3D — эффект
«открывание ворот».
Build
Diagonal build —
построение изображения по диагонали.
Clock
Sweep clock — смена
изображения по (против) часовой стрелки.
F/X
Diamond a-f/x — смена
кадров в форме граней алмаза;
Iris f/x — смена
кадров в форме раскрывающегося цветка;
Mosaic f/x — смена
кадров в форме мозаики;
Power off f/x — смена
кадров в виде постепенного гашения экрана.
Film
Flap b-film — смена
кадров в виде постепенного «отрывания» частей изображения;
Progressive film
— смена кадров в виде постепенного замещения частей изображения;
Turn page film —
смена кадров в виде переворачивания страницы.
Peel
Turn page peel —
смена кадров в виде переворачивания страницы.
Push
Run and stop push
— смена кадров в виде «выталкивания» изображения с экрана.
Roll
Side roll — смена
кадров в виде «скатывания» изображения за пределы видимости.
Slide
Bar slide — смена
кадров в виде «раздвигания» изображения.
Stretch
Cross zoom-stretch
— смена кадров в виде увеличения масштаба изображения.
Wipe
Star wipe — вырезание
изображения в форме звезды.
2D mapping
Crop — рамка.
Camera lens
Gradient — изменение
оттенков цвета;
Mirror — эффект «отражение
в воде (рябь)»;
Zoom motion — приближение
изображения в движении.
Dark room
Hue, saturation —
смешение цветов.
Natural painting
Charcoal — рисунок
углем.
Special
Add noise — добавление
«шумовых» пикселов;
Wind — эффект «флаг
на ветру»;
About video f/x —
меню содержит информацию о видеоэфектах.
Панель инструментов
Add blank image —
добавить пустой кадр;
Add image — добавить
изображение;
Add video — добавить
видео;
Add comments — добавить
комментарий;
Move layer up — передвинуть
слой вверх;
Move layer down —
передвинуть слой вниз;
Preview in Internet
Explorer — предварительный просмотр в MS Internet Explorer;
Preview in Netscape
Navigator — предварительный просмотр в Netscape Navigator;
Preview in custom
browser — предварительный просмотр в любом другом броузере, указанном
пользователем в настройках программы.
Панель атрибутов
Image title — наименование
изображения;
How to remove — описание
правил удаления из изображения лишних компонентов;
Global attribute
change — смена общих атрибутов изображения;
Width — ширина изображения;
Height — высота изображения;
Interlace — чересстрочная
развертка;
Transparent index
— степень прозрачности изображения;
Local palette — применить
местную (собственную) палитру;
Wait for user input
— ожидать действий пользователя (с).
Панель палитры
Save palette — сохранить
палитру пользователя;
Load palette — загрузить
палитру пользователя;
Add color — добавить
цвет в палитру;
Delete color — удалить
цвет из палитры;
Replace color — заменить
один цвет в палитре на другой;
Gradient — градиент;
Sort by — тип сортировки;
R — количество красного
в цвете;
G — количество зеленого
в цвете;
В — количество синего
в цвете;
ххх colors — количество
цветов, использованных в палитре (от 2 до 256).
Панель статуса
На панели статуса
отображаются комментарии к производимым пользователем действиям.
Закладки
Compose — компоновка
изображения (произведение изменений в файле);Edit — редактирование изображения;
Crop — создание копии
выделенной части изображения как еще одногб кадраанимации;
Paint tool — инструмент
«карандаш»;
Resample — изменение
размеров изображения;
Flip horizontal —
перевернуть изображение по горизонтали;
Flip vertical — перевернуть
изображение по вертикали;
Magic wand tool —
волшебная палочка (выделение части изображения);
Polygon tool — рисование
нестандартных фигур;
Rotate left 90°
— развернуть рисунок на 90° влево;
Rotate right 90°
— развернуть рисунок на 90° вправо;
Erase tool — инструмент
«ластик»;
Zoom in — увеличить
изображение;
Zoom out — уменьшить
изображение;
Actual view — просмотр
в масштабе 1:1.
Optimize — оптимизация
изображения
Presets — выбор алгоритма
оптимизации;
Save presets — сохранение
пользовательского алгоритма оптимизации;
Delete presets —
удаление текущего алгоритма оптимизации;
Optimize now — оптимизировать
сейчас (запуск оптимизации);
Download time is
calculated based on xxx kbps — скорость загрузки изображения,с расчетом
на которую производится оптимизация;
Wizard — оптимизация
с помощью мастера;
Normal/advanced —
просмотр дополнительных параметров оптимизации;
Number of color —
количество цветов в палитре (остальные цвета подлежат удалению в процессе
оптимизации);
Use palette — выбор
используемой палитры;
Preview — предварительный
просмотр готового GIF-изображения.
Как видим, разработчики
постарались сделать интуитивно понятную, максимально простую в освоении
и надежную программу, являющуюся вместе с тем мощным средством разработки
анимированной графики. Можно смело сказать, что им это удалось. Ulead
Gif Animator позволяет создавать «на лету» как сложные клипы,
так и простейшую анимацию, состоящую буквально из двух кадров, с использованием
широкого ассортимента входящих в комплект поставки программы визуальных
эффектов.
