Что такое 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...",
достаточно , , и . Кроме того,
хочется особо выделить программу 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ов можно отнести: 1) не требуется никаких plug-in для их просмотра. 2) небольшой объем файла за счет сжатия. 3) может быть помещен в кэш, не требует повторного обращения к серверу. 4) не требует для работы постоянной связи с сервером. 5) просто поместить на страницу, не требуется никакого программирования. Как и у всякой медали, у динамических GIFов есть и обратная сторона: 1) палитра не превышает 256 цветов. 2) сжатие фотографий хуже, чем в JPEG. 3) не поддерживается браузерами в полном объеме. 4) любой может легко "позаимствовать" результат ваших многочасовых трудов.
Источник: http://web-support.ru/graphics_design/to_des_40.shtml
|