Во второй части нашей серии статей, посвященных публикации мультимедийных материалов в Сети World Wide Web, мы рассмотрим, где, когда и каким образом можно использовать анимацию на Web-страницах…

Мастер-класс по видео и анимации на Web. Часть II Анимируйся!*

Анимированный GIF

За и против

Shockwave

Java, JavaScript и DHTML

Гримасы анимации

 

Программные ресурсы

Построение анимированного GIF

Несколько полезных советов по поводу Animated GIF

Flash-анимация

3D-анимация в Xara3D

Программы для создания баннеров и кнопок

 

В дискуссиях и спорах вокруг Web-технологий чаще всего предметом обсуждения становятся стандарты анимации. Несмотря на то что наиболее популярным промышленным стандартом здесь считается Shockwave Flash, абсолютный лидер пока все-таки не выявился. Самым широко используемым анимационным форматом является Animated GIF. По крайней мере если вы пересчитаете все рекламные баннеры, которые встретятся вам за время любой Internet-сессии, большая часть из них наверняка будет представлена в GIF-формате.

Существуют также и другие, менее заметные методы доставки анимации по Сети. Так, в большинстве случаев анимированные кнопки используют JavaScript-прием, который известен под названием «стек изображений» (image stacking), или (что значительно реже) управляются полноценными Java-аплетами. Для перемещения объектов по заданным траекториям можно применять Dynamic HTML. Этот прием часто используется при создании разворачивающихся меню. Существуют также отдельные самостоятельные форматы, которые пытаются конкурировать с Shockwave Flash. Однако поиск метода, наиболее подходящего для решения той или иной конкретной задачи, может превратиться в настоящий кошмар, поэтому мы решили «бросить взгляд» на самые популярные способы публикации на Web-страницах всего, что движется, шевелится и мигает, и вкратце обрисовать положительные и отрицательные стороны каждого из этих способов.

В начало В начало

Анимированный GIF

Компания Compuserve без лишнего шума и треска встроила анимационные возможности в свой популярный растровый формат изображений под названием GIF (версия 89a). Этот формат может хранить в одном файле сразу несколько изображений и автоматически прокручивать их одно за другим, предоставляя при этом пользователю такие возможности, как внешнее управление, прямые и обратные циклы, создание единой палитры индексированных цветов и так далее. На самом деле это более сложный и изощренный формат, чем может показаться на первый взгляд. Компания Netscape начала поддерживать анимированный GIF еще в 1995 году в самых ранних бета-версиях Navigator 2. И первая анимация в этом формате появилась на Web в декабре того же года.

Сегодня на Web-страницах невозможно и шагу ступить, чтобы не наткнуться на анимированный GIF. Они применяются и в рекламных баннерах, и в логотипах, и в заголовках страниц, и в навигационных кнопках. Практически везде, где можно поместить статичную картинку, можно вставить и GIF-анимацию.

В начало В начало

За и против

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

Если и возникают какие-то проблемы, то обычно они связаны не с инструментами, при помощи которых были построены GIF-файлы, а с неуместным или нерациональным использованием этого формата. Как и вся остальная Web-графика, анимированный GIF требует большого внимания к оптимизации, чтобы справляться с вечной проблемой «бутылочного горла», коим является пропускная способность наших сетей связи. Хотя по сравнению с результатами, которых можно добиться при помощи Shockwave Flash, размер анимированных GIF-файлов может показаться великоватым, у вас есть возможность предпринять некоторые шаги, гарантирующие вам максимум возможного. Более подробную информацию о том, как создавать анимированный GIF, смотрите на врезке.

В начало В начало

Shockwave

ервая версия Shockwave появилась в то время, когда анимированный GIF еще только-только был «изобретен», но, к сожалению, тогда этот формат показал себя не с лучшей стороны. Для того времени он оказался всего лишь очередной попыткой (одной из множества аналогичных) вынести мультимедийные данные на Web. Как и все остальные форматы, он был медленным, громоздким и имел склонность к сбоям.

рислушиваясь к голосам Web-пользователей, компания Macromedia быстро извлекала важные уроки и вносила в свой продукт именно те изменения, которые отвечали бы пожеланиям широких масс пользователей. Прошло четыре года, и Shockwave изрядно похудел, стал намного более быстрым и стабильным. И, что важнее всего, он стал именно тем стандартом, который реально используют на практике. В то время как многие его конкуренты ушли в небытие (помните ли вы такие имена, как Sizzler или Hotwire?), Shockwave постоянно набирает силу. Кроме того, его развитие подстегнуло появление Shockwave Flash — формата настолько быстрого и гибкого, что сегодня с его помощью можно построить целый Web-сайт от начала до конца.

Не ошибемся, если скажем, что на сегодняшний день у формата Flash нет заслуживающего внимания конкурента на Web-страницах, способного выступить в качестве анимационного стандарта. Компания Macromedia недавно представила Shockwave Flash на рассмотрение консорциуму W3C (World Wide Web Consortium) в качестве рекомендованного векторного формата для использования в Сети, а компания Netscape обещает встроить поддержку Flash в Navigator 5.

Тем не менее на Web еще остается несколько незанятых рыночных ниш и для других форматов. По крайней мере компания Parable надеется найти таковую для своего формата Thing. Things — это небольшие интерактивные растровые анимационные ролики, которые можно прокручивать в любом браузере при помощи специального plug-in-модуля. Анимации представляют собой комбинацию движений по заданному контуру и покадровых изменений, приводимых в действие нажатием кнопки мыши.

акет, используемый для создания роликов в формате Thing (thing по-английски — «вещь»), называется ThingMaker («делатель вещей» — нет, правда, это не шутка!) — очень простой в использовании и недорогой, а целый ряд аксессуаров к нему, таких как viewer (программа просмотра), converter (конвертор для преобразования фильмов Director в формат Thing) и screensaver (программа для создания экранных заставок), распространяется вообще бесплатно. Несмотря на то что все эти «примочки», как может показаться некоторым, завоевывают все большую популярность (все большее число коммерческих сайтов предлагает посетителям перекачать какой-нибудь Thing), исходная программа не кажется нам способной на что-то большее, чем то, чего может добиться более или менее грамотный дизайнер от нескольких анимированных файлов формата GIF и небольшой порции JavaScript. Единственное реальное преимущество формата Thing — это простота изготовления.

В начало В начало

Java, JavaScript и DHTML

Наше рассмотрение языков Java и JavaScript в качестве анимационных форматов, возможно, кому-то покажется сильным перегибом, если учитывать, насколько мощны и развиты эти инструменты. Но это только до тех пор, пока мы не посмотрим хорошенько на реальную Сеть. Может, это и полноценные языки программирования, но в первую очередь они используются именно для создания простейших анимаций. «Визитная карточка» JavaScript — это так называемые rollovers, то есть картинки, которые изменяются, когда над ними проходит курсор мыши. Многие программы для создания Web-приложений, работающие по принципу drag-and-drop, позволяют создавать такие анимации, реально не написав ни строчки кода. А если ваша любимая программа этого не умеет, то существуют бесплатные пакеты, которые прекрасно сделают для вас эту работу (см. врезку «Программные ресурсы»).

Использовать Java только для анимации — это, конечно же, перебор. Мы говорим о кросс-платформном, полностью объектно-ориентированном языке программирования, сравнимом по своей мощности с C++. И все же создается впечатление, что основной сферой его применения стала генерация световых вспышек из-под логотипов и анимированных звездных пейзажей в рекламных баннерах. Но на самом деле проблема не в этом. По сравнению с другими решениями Java довольно-таки медленно работает и не совместим с некоторыми браузерами (что кажется нам смешным — ведь это открытый стандарт): версия Microsoft отличается от версии Netscape. Единственная положительная сторона этого формата по сравнению с Shockwave — наличие огромного числа бесплатных анимационных Java-аплетов на Web.

В начало В начало

Гримасы анимации

Итак, несмотря на наличие широкого выбора, в процессе естественного отбора, основанного на старом добром здравом смысле, мы пришли к выводу, что только три метода анимации на Web заслуживают внимания. Чтобы создать анимированную кнопку, следует обратиться к JavaScript и воспользоваться при этом одним из таких инструментов Web-дизайна, который возьмет на себя всю заботу о реальном коде. Для логотипов и баннеров на самом деле не нужна даже Java — всю необходимую работу прекрасно выполнит анимированный GIF. А обо всем остальном позаботится Shockwave Flash. Методы создания и размещения анимации на Web в общем и целом просты. Главное золотое правило, которого нужно при этом придерживаться, звучит очень просто: экономь пространство!

КомпьютерПресс 8'1999


Наш канал на Youtube

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует