Библиотека Интернет Индустрии I2R.ru |
|||
|
Анимационные картинкиПредисловие Каждый из пользователей Интернет уже вполне привычно воспринимает появляющиеся почти на каждой странице картинки-мультфильмы, так называемые динамические, или анимационные (animated) GIFы. Чаще всего именно такими являются рекламные баннеры. Оно и понятно - во-первых, мультипликация привлекает гораздо больше внимания, чем статическая картинка, во-вторых, на небольшой площади можно уместить гораздо больше информации за счет чередующихся кадров. Но эти же свойства могут оказаться весьма полезными любому вебмастеру, который стремится сделать свой сайт более привлекательным. Поэтому Вашему вниманию и предлагается данная статья, которая рассматривает вопросы создания и использования таких картинок. Что такое animated GIF Динамический GIF можно определить, как стандарт графического файла, позволяющий размещать в одном файле несколько изображений, для их последовательного вывода на экран с целью создания эффекта мультипликации. Первым таким стандартом явился GIF87a, который предусматривал следующие возможности GIF-файла:
Структура файла GIF89a Файл GIF89a состоит из болков, расположенных в определенной последовательности. Выделяют блоки трех типов: Управляющие блоки: заголовок, описание логического экрана, управление графическими расширениями, признак конца - определяют, как будут обрабатываться изображения; Блоки изображения: изображение, текст, описание палитры - содержат данные для самого изображения; Специальные блоки: комментарии, прикладные расширения - никак не влияют на изображение, но могут обрабатываться прикладными программами по их усмотрению. Среди подобных блоков особо следует выделить прикладной блок Netscape Loop - он присутствует практически в каждой анимации (при этом, это единственный блок прикладной программы, в данном случае Netscape, который я встречал). Если браузер (теперь уже не только Netscape) видит этот блок, он проигрывает анимацию не один раз, а столько, сколько в нем указано раз, или бесконечно). Общая схема следования этих блоков вприблизительно такова:
Создание анимаций Что необходимо для создания анимаций? В первую очередь необходимо иметь набор картинок - кадров для будущей анимации, или, по крайней мере, представление о них. Далее необходима программа, поддерживающая 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...", достаточно
Оптимизация анимаций Оптимизация призвана обеспечить наименьший размер получившегося файла. В общем случае, если вы создали анимацию, например, из 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) любой может легко "позаимствовать" результат ваших многочасовых трудов. |
|
2000-2008 г. Все авторские права соблюдены. |
|