Анимационные картинки: что это и как их создавать.

Содержание.

Введение.  Что такое animated GIF.  Структура файла GIF89a.  Создание анимаций.  Оптимизация анимаций.  Использование анимаций.  Дополнительная информация.

Введение. Каждый из пользователей Интернет уже вполне привычно воспринимает появляющиеся почти на каждой странице картинки-мультфильмы, так называемые динамические, или анимационные (animated) GIFы. Чаще всего именно такими являются рекламные баннеры. Оно и понятно - во-первых, мультипликация привлекает гораздо больше внимания, чем статическая картинка, во-вторых, на небольшой площади можно уместить гораздо больше информации за счет чередующихся кадров. Но эти же свойства могут оказаться весьма полезными любому вебмастеру, который стремится сделать свой сайт более привлекательным. Поэтому Вашему вниманию и предлагается данная статья, которая рассматривает вопросы создания и использования таких картинок. 

Что такое animated GIF.

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

1. Чередование (interlacing). Вначале загружается только "остов" изображения, потом, по мере загрузки, оно детализируется. Это позволяет на медленных линиях не грузить весь графический файл целиком для того, чтобы получить о нем представление.
2. Сжатие (compression) по алгоритму LZW. Эта черта GIF-файлов держит их в лидерах по наименьшему объему файла.
3. Несколько изображений в одном файле.
4. Расположение картинки на логическом экране. То есть, формат позволял определить логическую экранную область для вывода изображений, и помещать картинки в произвольном месте этой области.

В дальнейшем, этот стандарт был раширен спецификацией GIF89a, которая добавила следующие возможности: 

1. Включение в графический файл комментариев (не отображаются на экране, но могут быть прочитаны программой, поддерживающей GIF89a).
2. Управление задержкой перед сменой кадров (задается в 1/100 секунды, или ожидание ввода пользователя).
3. Управление удалением предыдущего изображения. Предыдущее изображение может быть оставлено, заменено на цвет фона или на то, что было перед ним.
4. Определение прозрачного цвета.
5. Вывод текста.
6. Создание управляющих блоков прикладными программами (application-specific extensions). Внутри GIF-файла вы можете создать блок, который буде игнорироваться всеми программами, кроме той, для которой он предназначен.

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

Структура файла GIF89a.

Файл GIF89a состоит из болков, расположенных в определенной последовательности. Выделяют блоки трех типов: 
Управляющие блоки: заголовок, описание логического экрана, управление графическими расширениями, признак конца - определяют, как будут обрабатываться изображения; 
Блоки изображения: изображение, текст, описание палитры - содержат данные для самого изображения; 
Специальные блоки: комментарии, прикладные расширения - никак не влияют на изображение, но могут обрабатываться прикладными программами по их усмотрению. Среди подобных блоков особо следует выделить прикладной блок Netscape Loop - он присутствует практически в каждой анимации (при этом, это единственный блок прикладной программы, в данном случае Netscape, который я встречал). Если браузер (теперь уже не только Netscape) видит этот блок, он проигрывает анимацию не один раз, а столько, сколько в нем указано раз, или бесконечно). 
Общая схема следования этих блоков вприблизительно такова: 

1. Заголовок - GIF87a или GIF89a - определяет формат файла.
2. Описание логического экрана (задаются размер экрана, на который "претендует" данный файл)
3. Описание глобальной палитры (необязательно, но крайне желательно)
4. Произвольное количество блоков изображения (в том числе текстовых), или пар блоков <управление графическими расширениями - изображение>. Блок управления графическим расширением может содержать в себе указание на локальную палитру, расположение на логическом экране, задержку и способ удаления изображения, и оказывает влияние только на следующий непосредственно за ним блок изображения.
5. Завершитель (признак конца).

Комментарии и специальные блоки могут распологаться где угодно, кроме как: 

1. До описания глобальной палитры (если оно есть) или до описания логического экрана.
2. Между блоком управления и соответствующим ему блоком изображения (то есть, они могут там находиться, но тогда блок управления уже не будет ничем управлять)
3. После признака конца.

Также, если Вы хотите поместить в ваш файл расширение Netscape Loop, то этот блок должен следовать непосредственно за глобальной палитрой. 

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

Что необходимо для создания анимаций? В первую очередь необходимо иметь набор картинок - кадров для будущей анимации, или, по крайней мере, представление о них. Далее необходима программа, поддерживающая GIF89a. С сожалением приходится отметить, что Photoshop, хоть и поддерживает палитры, чередование, сжатие и прозрачный цвет, для этой цели не подходит, так как несколько картинок в одном файле в нем не сохранишь, зато его можно использовать для создания каждого кадра в отдельности. Из программ, создающих GIF89a, были испробованы следующие: 

1. Ulead GIF Animator v2.0; Ulead Systems, Inc; 
2. GIFFY v1.2, The GIF Animation Builder; WebReady corp; 
3. GIF Construction Set 32; Alchemy Mindworks, Inc; 
4. Microsoft GIF Animator v1.0; Microsoft corp; 

Подробно рассказывать про интерфейс этих программ не имеет смысла, поэтому будут рассмотрены только основные принцыпы работы с этими, и им подобными программами. Процесс создания анимации можно разделить на две важные составляющие - собственно ее создание и, затем, оптимизация. Процесс создания прост - вы берете поочереди кадры и добавляете их к своему GIF-файлу. При этом программы Ulead, Alchemy Mindworks и Microsoft имеют приятную особенность - они позволяют добавлять кадры не из файла, а из буфера обмена, т.е. если вы постепенно трансформируете свою картинку по мере следования кадров, вы лишены необходимости каждое изменение завершать командой Save As..., достаточно <Ctrl-A>, <Ctrl-C>, <Alt-Tab> и <Ctrl-V>. Кроме того, хочется особо выделить программу Ulead Gif Animator, которая позволяет по начальному и конечному изображению построить анимацию с помощью одного из целого ряда эффектов, например, наплыв новой картинки поверх старой, смена листа бумаги и многое, многое другое, что позволяет создавать небольшие презентации в одном файле. После того, как кадры забиты в файл, начинается расстановка управляющих блоков. Важно понимать, что все-таки GIF89a файл состоит из блоков, хотя все из вышеперечиленных программ, кроме Gif Construction Set, их не показывают непосредственно. В них глобальные управляющие блоки интерпретируются как свойства файла,  а локальные - как свойство картинки. Может, это и к лучшему - меньше возможностей совершить ошибку. Итак, вам нужно для каждого кадра задать задержку, если надо, то локальную палитру, положение на логическом экране и способ удаления. Программы Microsoft и Alcemy позволяют выделить произвольно несколько блоков, и задать для них все параметры. В остальных вы можете изменять только каждый блок в отдельности, или все сразу. Посмотреть, что у вас получается, можно с помощью кнопки Preview. Однако, это не всегда удачная идея из-за уже упоминавшихся проблем совместимости, поэтому убедиться в том, что все работает, можно только запустив ваш любимый браузер. По поводу совместимости можно посоветовать следующее: 

1. Желательно не использовать локальных палитр - такие картинки читаются, но в некоторых случаях это приводит к неправильному изображению цветов.
2. Задавайте прозрачный цвет глобально - локальный прозрачный цвет не поддерживается.
3. Ожидание ввода пользователя не поддерживается.
4. Не поддерживается замена картинки на то, что было перед ней при удалении.
5. Если картинка не умещается на логическом экране, это может привести даже к аварийному завершению работы браузера, в лучшем случае - последствия непредсказуемы.
6. В некоторых версиях браузеров кадры не проигрываются быстрее, чем с задержкой в 34/100 секунды

После того, как анимация готова, начинается самый интересный этап - оптимизация. 

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

Оптимизация призвана обеспечить наименьший размер получившегося файла. В общем случае, если вы создали анимацию, например, из 20 GIF файлов, то размер получившигося файла будет равен сумме размеров использованых вами файлов. Если размер в 20 килобайт считается приемлемым для картинки на странице, то такого нельзя сказать про файл размером 400 килобайт. К счастью, существуют способы значительно уменьшить размер анимации. Они работают в двух направлениях - оптимизация палитры и удаление избыточной информации. 
GIF файл позволяет вам использовать любое число цветов в картинке от 2-х до 256. При этом, чем меньше цветов, тем меньший объем занимает файл, кроме того, описание палитры тоже требует места, и оптимизация палитры заключается в том, что необходимо ограничится минимально необходимым числом цветов, и по возможности не пользоваться локальными палитрами, а использовать глобальную. 
В том случае, когда ваша анимация представляет собой лишь последовательную демонстрацию несвязанных между собой видов, никуда не денешься от того, чтобы сохранить каждый из них в вашем файле. Однако, если анимация - последовательное преобразование картинки, при этом в каждом кадре изменяется лишь небольшая часть рисунка, нет никакой необходимости в сохранении всего рисунка столько раз, сколько кадров в анимации. Тут необходимо воспользоваться "ножницами" и размещением на логическом экране. Пусть первый кадр займет всю логическую область - он будет служить фоном, на который для каждого кадра будет в строго определенном месте накладываться "заплатка", содержащая те изменения, которые необходимо сделать в этом кадре. Самое сложное - правильно эту "заплатку" расположить - запоминайте координаты левого верхнего угла той области, которую вы вырезали, и используйте их в качестве смещения. Будте внимательны - если вы хотите создать на вашем экране эффект "полета" или "скольжения" изображения по фону, не забывайте, что каждый следующий кадр должен содержать не только новое положение объекта, но и устранять следы предыдущего. 
Хорошее известие - вы можете найти программу, которая выполнит практически всю работу по оптимизации за вас. Такой возможностью обладают Ulead GIF Animator и GIF Construction Set. Файл sample.gif, который был создан специально по случаю написания данной статьи, создавался постепенно путем пририсовывания новых и новых деталей. Каждый кадр целиком помещался в Ulead GIF animator, и размер итогового файла составил 143К. Результат автоматической оптимизации - файл размером 4К. Аналогичного результата можно добиться и с помощью GIF Construction Set, однако эта программа создает не полностью совместимые файлы, которые нуждаются в последующей ручной обработке. 

Использование анимаций.

Итак, у вас есть готовая GIF-анимация. Процедура помещения ее на web-сайт ничем не отличается от помещения туда же ее не анимированного собрата - простого GIFа. Когда стоит использовать динамические GIFы, а когда предпочесть другие способы оживления содержания? К достоинствам динамических GIFов можно отнести: 

• не требуется никаких plug-in для их просмотра
• небольшой объем файла за счет сжатия
• может быть помещен в кэш, не требует повторного обращения к серверу
• не требует для работы постоянной связи с сервером
• просто поместить на страницу, не требуется никакого программирования

Как и у всякой медали, у динамических GIFов есть и обратная сторона: 

• палитра не превышает 256 цветов
• сжатие фотографий хуже, чем в JPEG
• не поддерживается браузерами в полном объеме
• любой может легко "позаимствовать" результат ваших многочасовых трудов (так же, как и в случае обычных картинок)

Дополнительная информация. 

За дополнительной информацией можно обратиться по адресу:
http://member.aol.com/royalef/gifanim.htm - GIF animation on WWW
http://www.webreference.com/graphics/specs.html - GIF89a specifications from Compuserve