Статьи
Назад

Веб-дизайн: анимация

АВТОР: ДМИТРИЙ ГИГЛАВЫЙ
ОПУБЛИКОВАНО В ЖУРНАЛЕ "КОМПЬЮТЕРРА" №20 ОТ 07 ИЮЛЯ 2003 ГОДА

Оригинал статьи

Стремительное развитие технологий анимации привело к тому, что двигать, вращать и масштабировать стали все, что попадется под руку. Эта статья посвящается целесообразности использования анимации на веб-страницах и прежде всего - технологии Flash.

Дизайнер, заказчики и посетители

Распространено мнение, что у большой части посетителей Интернета не установлен модуль для просмотра Flash-роликов. Таким образом, выбирая в качестве технического решения Flash-анимацию, вы сужаете круг пользователей, которые смогут ознакомиться с содержимым сайта.

Если Flash используется для анимации отдельных элементов веб-страницы, можно поступить следующим образом. В выпадающем меню Macromedia Flash есть пункт File/Publish Settings, а во вкладке HTML - пункт Window Mode, в котором надо выбрать Transparent Windowless. В этом случае фон роликов станет прозрачным и сквозь него будет виден фон ячейки, содержащий изображение в стандартном формате. Таким образом можно состыковывать векторную анимацию и статическую растровую графику.

Однако важно учесть, что все это касается только MS IE. В других браузерах мы увидим квадрат, который будет закрывать фон независимо от настроек Window Mode. В идеале в html-файл надо вставлять процедуру, которая будет определять наличие модуля просмотра у клиента и в зависимости от этого выводить либо Flash-заставку, либо аналогичный рисунок.

Одним словом, делая для клиента Flash по собственной инициативе, дизайнер подвергает себя определенному риску. Поэтому лучше сразу в двух словах обрисовать клиенту все перспективы. Дескать, скоро без векторной анимации ни одна иконка работать не будет, за ними будущее и так далее. Показав клиенту все чудеса этой технологии и убедив его в острой необходимости ее использования, можно приступать к работе.

Greatest hits

Если клиент категорически не соглашается, ему можно продемонстрировать несколько Flash-сайтов, например www.estudio.com. Сайт, безусловно, выделяется даже на фоне классных Flash-проектов. Самое главное его достоинство - не дизайн, а анимация. Он никогда не привлек бы столь пристального внимания, если бы был реализован только средствами HTML и JavaScript. Изюминка сайта в том, как элементы интерфейса реагируют на мышь, как выглядит предзагрузчик и что происходит в это время на фоне.

Начинается все с того, что кнопка Enter, как живая, шевелится под курсором и по ней еще надо попасть. Но это вовсе не раздражает, наоборот, хочется посмотреть, что дальше будет. Предзагрузчик изображен в виде телевизора, который постепенно заполняется жидкостью. Прогресс загрузки можно отследить наблюдая за всплывающими пузырьками.

Навигационная панель возникает как бы из другого пространства. За долю секунды она проявляется из налетевшего вихря и еще некоторое время продолжает колыхаться.

Посмотрите на меню. Если бы оно просто появлялось сразу как есть, было бы не так оригинально. Задача создателей в данном случае состояла в том, чтобы поведение элементов интерфейса сайта отличалось от того, что мы видим каждый день. Если бы можно было в журнале напечатать 15-20 фаз мультика для меню, стало бы видно, что оно выпрыгивает, как пружинка. При этом в начале прыжка меню черное и полупрозрачное, а потом синеет, не теряя прозрачности. Пункты подсвечиваются плавно появляющимися световыми пятнами.

С точки зрения использования анимационных эффектов сайт безупречен. Однако чтобы уловить все нюансы, его, как хорошее интеллектуальное кино, надо смотреть несколько раз. Есть о чем задуматься начинающим Flash-аниматорам.

Не хочется говорить о недостатках, но истина дороже. Скажем, кнопка выключения звука (Mute) в левом нижнем углу экрана почти не видна. Выключает она только фоновую мелодию, а лязг и шипение, связанные с активными элементами интерфейса, остаются. Когда слушаешь Pink Floyd в mp3, посторонние звуки в наушниках раздражают. А закрывать страничку не хочется. Внизу левый угол и кнопки Contact и Job как будто обрублены. Здесь логичным продолжением был бы фон html-страницы, совпадающий с фоном Flash-окошка.

Но все это, как говорится, пыль рядом с классной анимацией. В январе 2001 года сайт был удостоен наград на фестивале Flashforward 2001. Кроме того, он был отмечен еще на нескольких фестивалях. Фирма находится в Италии, креативный директор - наш соотечественник.

Сайт стамбульской компании 2999 Technologies www.2999.com во многом выигрывает у www.estudio.com, но прикольной анимации там меньше. Сразу видно, что создатель сайта далеко не тинэйджер и на его счету не один десяток законченных анимационных проектов. Он либо уже миновал период страстного увлечения прибамбасами, либо всегда был таким сдержанным и слегка суховатым. Но эта простота по-своему гениальна. И с html-фоном все в порядке - не поленился человек две минуты потратить. Лишний раз убеждаешься, что обилие рюшечек - это скорее плохой вкус, а настоящий стиль - прежде всего, чувство меры.

На Flash-сайте красота ни при каком раскладе не должна вытеснять функциональность. Есть четкое разделение: сама по себе Масяня - чистейшей воды мультик (исключение составляют всякие "Масяня-секвенсеры" и тому подобные интерактивные приколы), а сайт www.worldclass.ru - это в первую очередь информационный Интернет-узел. Кстати говоря, на нем здорово сочетается строгость и функциональность анимации.

Главное преимущество Flash - возможность делать интерактивные элементы интерфейса. Обыкновенные анимационные файлы (gif или flc) практически не могут взаимодействовать с пользователем. Мультик же, реагирующий на поведение курсора, всегда интереснее.

Навигационная панель www.worldclass.ru - это список, маркеры списка - красные вершины воображаемого куба, который вращается в пространстве фитнес-клуба. Куб - центр композиции. Направление вращения определяет курсор. Если бы еще и тень от шариков синхронно двигалась, было бы вообще идеально.

Самое главное, что функциональную интерактивную анимацию не портит дизайн html-страницы. Если бы в этой работе не было Flash-анимации, она все равно была бы интересна. Весь дизайн идеально "облегает" центр композиции. Нет ни одной лишней линии. Это не всегда удается даже опытному дизайнеру. Видно, что окончательному варианту предшествовало несколько не менее удачных решений.

NB. Некоторым чисто информационным ресурсам просто некуда и незачем вставлять собственную анимацию. Вставишь - не останется места для рекламы, размещенной на взаимовыгодных условиях. Или на главной странице столько своей информации, что даже для баннеров места нет, а о выделяющейся анимационной презентации и вовсе речи быть не может.