Онлайн учебник по WEB-графике

Графика на вашей интернет-странице

       

Создание GIF-анимаций

Что необходимо для создания анимаций? В первую очередь необходимо иметь набор картинок - кадров для будущей анимации, или, по крайней мере, представление о них. Далее необходима программа, поддерживающая 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 секунды

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

 

 

 

Top.Mail.Ru
Top.Mail.Ru