Предисловие
Каждый из пользователей Интернет уже вполне привычно
воспринимает появляющиеся почти на каждой странице
картинки-мультфильмы, так называемые динамические,
или анимационные (animated) GIFы. Чаще всего именно
ими являются рекламные баннеры. Оно и понятно -
во-первых, мультипликация привлекает гораздо больше
внимания, чем статическая картинка, во-вторых, на
небольшой площади можно уместить гораздо больше
информации за счет чередующихся кадров. Эти же
свойства могут оказаться весьма полезными любому
вебмастеру, который стремится сделать свой сайт
более привлекательным. Поэтому Вашему вниманию и
предлагается данная статья, которая рассматривает
вопросы создания и использования таких картинок.
Что такое
animated GIF
Динамический GIF можно определить, как стандарт
графического файла, позволяющий размещать в одном
файле несколько изображений, для их
последовательного вывода на экран с целью создания
эффекта мультипликации. Первым таким стандартом
явился GIF87a, который предусматривал следующие
возможности GIF-файла:
- Чередование (interlacing).
Вначале загружается только "остов" изображения,
потом, по мере загрузки, оно детализируется. Это
позволяет на медленных линиях не грузить весь
графический файл целиком для того, чтобы
получить о нем представление.
- Сжатие (compression) по
алгоритму LZW. Эта черта GIF-файлов держит их в
лидерах по наименьшему объему файла.
- Несколько изображений в одном
файле.
- Расположение картинки на
логическом экране. То есть, формат позволял
определить логическую экранную область для
вывода изображений, и помещать картинки в
произвольном месте этой области.
В дальнейшем, этот
стандарт был раширен спецификацией GIF89a, которая
добавила следующие возможности:
- Включение в графический файл
комментариев (не отображаются на экране, но
могут быть прочитаны программой, поддерживающей
GIF89a).
- Управление задержкой перед
сменой кадров (задается в 1/100 секунды, или
ожидание ввода пользователя).
- Управление удалением
предыдущего изображения. Предыдущее изображение
может быть оставлено, заменено на цвет фона или
на то, что было перед ним.
- Определение прозрачного
цвета.
- Вывод текста.
- Создание управляющих блоков
прикладными программами (application-specific
extensions). Внутри GIF-файла вы можете создать
блок, который будет игнорироваться всеми
программами, кроме той, для которой он
предназначен.
Как видно,
стандарт GIF89a - весьма мощный инструмент для
создания анимаций и их применения в WWW, однако
необходимо учитывать тот факт, что если некоторые
специальные графические программы и поддерживают
этот стандарт в полном объеме, то это не относится к
наиболее рапространенным браузерам, поэтому для
применения динамических GIFов для WWW лучше
ориентироваться не на сам стандарт, а на возможности
браузеров по его поддержке.
Структура
файла GIF89a
Файл GIF89a состоит из болков, расположенных в
определенной последовательности. Выделяют блоки трех
типов:
Управляющие блоки: заголовок, описание
логического экрана, управление графическими
расширениями, признак конца - определяют, как будут
обрабатываться изображения;
Блоки изображения: изображение, текст,
описание палитры - содержат данные для самого
изображения;
Специальные блоки: комментарии, прикладные
расширения - никак не влияют на изображение, но
могут обрабатываться прикладными программами по их
усмотрению. Среди подобных блоков особо следует
выделить прикладной блок Netscape Loop - он
присутствует практически в каждой анимации (при
этом, это единственный блок прикладной программы, в
данном случае Netscape, который я встречал). Если
браузер (теперь уже не только Netscape) видит этот
блок, он проигрывает анимацию не один раз, а
столько, сколько в нем указано раз, или бесконечно).
Общая схема следования этих блоков вприблизительно
такова:
- Заголовок - GIF87a или GIF89a
- определяет формат файла.
- Описание логического экрана
(задаются размер экрана, на который "претендует"
данный файл).
- Описание глобальной палитры
(необязательно, но крайне желательно).
- Произвольное количество
блоков изображения (в том числе текстовых), или
пар блоков <управление графическими расширениями
- изображение>. Блок управления графическим
расширением может содержать в себе указание на
локальную палитру, расположение на логическом
экране, задержку и способ удаления изображения,
и оказывает влияние только на следующий
непосредственно за ним блок изображения.
- Завершитель (признак конца).
Комментарии и специальные блоки могут
распологаться где угодно, кроме как:
- До описания глобальной
палитры (если оно есть) или до описания
логического экрана.
- Между блоком управления и
соответствующим ему блоком изображения (то есть,
они могут там находиться, но тогда блок
управления уже не будет ничем управлять).
- После признака конца.
Также, если Вы
хотите поместить в ваш файл расширение Netscape Loop,
то этот блок должен следовать непосредственно за
глобальной палитрой.
Создание
анимаций
Что необходимо для создания анимаций? В первую
очередь необходимо иметь набор картинок - кадров для
будущей анимации, или, по крайней мере,
представление о них. Далее необходима программа,
поддерживающая GIF89a. С сожалением приходится
отметить, что Photoshop, хоть и поддерживает
палитры, чередование, сжатие и прозрачный цвет, для
этой цели не подходит, так как несколько картинок в
одном файле в нем не сохранишь, зато его можно
использовать для создания каждого кадра в
отдельности. Из программ, создающих GIF89a, были
испробованы следующие: Ulead GIF Animator v2.0,
GIFFY v1.2, GIF Construction Set 32, Microsoft GIF
Animator v1.0. Подробно рассказывать про
интерфейс этих программ не имеет смысла, поэтому
будут рассмотрены только основные принцыпы работы с
этими, и им подобными программами. Процесс создания
анимации можно разделить на две важные составляющие
- собственно ее создание и, затем, оптимизация.
Процесс создания прост - вы берете поочереди кадры и
добавляете их к своему 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. Однако, это не всегда
удачная идея из-за уже упоминавшихся проблем
совместимости, поэтому убедиться в том, что все
работает, можно только запустив ваш любимый браузер.
По поводу совместимости можно посоветовать
следующее:
- Желательно не использовать
локальных палитр - такие картинки читаются, но в
некоторых случаях это приводит к неправильному
изображению цветов.
- Задавайте прозрачный цвет
глобально - локальный прозрачный цвет не
поддерживается.
- Ожидание ввода пользователя
не поддерживается.
- Не поддерживается замена
картинки на то, что было перед ней при удалении.
- Если картинка не умещается на
логическом экране, это может привести даже к
аварийному завершению работы браузера, в лучшем
случае - последствия непредсказуемы.
- В некоторых версиях браузеров
кадры не проигрываются быстрее, чем с задержкой
в 34/100 секунды
После того, как анимация готова,
начинается самый интересный этап - оптимизация.
Оптимизация
анимаций
Оптимизация призвана обеспечить наименьший размер
получившегося файла. В общем случае, если вы создали
анимацию, например, из 20 GIF файлов, то размер
получившигося файла будет равен сумме размеров
использованых вами файлов. Если размер в 20 килобайт
считается приемлемым для картинки на странице, то
такого нельзя сказать про файл размером 400
килобайт. К счастью, существуют способы значительно
уменьшить размер анимации. Они работают в двух
направлениях- оптимизация палитры и удаление
избыточной информации.
GIF файл позволяет вам использовать любое число
цветов в картинке от 2-х до 256. При этом, чем
меньше цветов, тем меньший объем занимает файл,
кроме того, описание палитры тоже требует места, и
оптимизация палитры заключается в том, что
необходимо ограничится минимально необходимым числом
цветов, и по возможности не пользоваться локальными
палитрами, а использовать глобальную.
В том случае, когда ваша анимация представляет собой
лишь последовательную демонстрацию несвязанных между
собой видов, никуда не денешься от того, чтобы
сохранить каждый из них в вашем файле. Однако, если
анимация - последовательное преобразование картинки,
при этом в каждом кадре изменяется лишь небольшая
часть рисунка, нет никакой необходимости в
сохранении всего рисунка столько раз, сколько кадров
в анимации. Тут необходимо воспользоваться
"ножницами" и размещением на логическом экране.
Пусть первый кадр займет всю логическую область- он
будет служить фоном, на который для каждого кадра
будет в строго определенном месте накладываться
"заплатка", содержащая те изменения, которые
необходимо сделать в этом кадре. Самое сложное -
правильно эту "заплатку" расположить - запоминайте
координаты левого верхнего угла той области, которую
вы вырезали, и используйте их в качестве смещения.
Будте внимательны - если вы хотите создать на вашем
экране эффект "полета" или "скольжения" изображения
по фону, не забывайте, что каждый следующий кадр
должен содержать не только новое положение объекта,
но и устранять следы предыдущего.
Хорошее известие - вы можете найти программу,
которая выполнит практически всю работу по
оптимизации за вас. Такой возможностью обладают
Ulead GIF Animator и GIF Construction Set.
Рассмотрен на примере простого gif-файла. Каждый
кадр целиком помещался в Ulead GIF animator, и
размер итогового файла составил 140Кb. Результат
автоматической оптимизации - файл размером 4Кb.
Аналогичного результата можно добиться и с помощью
GIF Construction Set, однако эта программа создает
не полностью совместимые файлы, которые нуждаются в
последующей ручной обработке.
Использование анимаций
Итак, у вас есть готовая GIF-анимация. Процедура
помещения ее на web-сайт ничем не отличается от
помещения туда же ее не анимированного собрата -
простого GIFа. Когда стоит использовать динамические
GIFы, а когда предпочесть другие способы оживления
содержания? К достоинствам динамических GIFов можно
отнести:
- не требуется никаких plug-in
для их просмотра.
- небольшой объем файла за счет
сжатия.
- может быть помещен в кэш, не
требует повторного обращения к серверу.
- не требует для работы
постоянной связи с сервером.
- просто поместить на страницу,
не требуется никакого программирования.
Как и у всякой медали, у динамических
GIFов есть и обратная сторона:
- палитра не превышает 256
цветов.
- сжатие фотографий хуже, чем в
JPEG.
- не поддерживается браузерами
в полном объеме.
- любой может легко
"позаимствовать" результат ваших многочасовых
трудов.
Статьи