Веб-дизайнеры - люди творческие и креативные. А потому не удивительно даже, что при входе на какой-нибудь сайт нас встречают порхающие бабочки, летающие слоники (да, есть и такие!), смешные человечки... Найти свое воплощение все эти чудеса человеческой мысли смогли благодаря технологиям flash- и gif-анимации для веб.
А что такое flash- и gif-анимация? Давайте подробнее остановимся на каждой из них.
Gif-анимация в дизайне сайтов
Gif-анимация - разновидность анимации, которая основана на возможности стандарта графических файлов gif хранить несколько картинок в одном файле. Эти картинки образуют кадры - при их последовательной смене и образуется анимационный эффект. Создать анимационный ролик в формате gif несложно. Довольно часто для этих целей используют графический редактор в сочетании с программой-аниматором.
Принцип создания gif-ролика такой же, как и принцип создания рисованной анимации. Сначала в графическом редакторе создается изображение, потом в программе-аниматоре - кадры анимации, которые содержат измененное изображение. Далее эти кадры выстраиваются в определенной последовательности, для каждого кадра задается время показа - и ролик готов. Для создания плавного и достаточно реалистичного эффекта движения достаточно установить время показа каждого кадра в интервале от 0,2 до 1 с.
Для использования в веб-проектах размер анимационного ролика не должен превышать 25 кб и поэтому его необходимо оптимизировать. Размер gif-файла в значительной степени зависит от количества используемых цветов и суть оптимизации состоит в том, чтобы уменьшить это количество. Происходит это за счет удаления тех цветов, которые не влияют на качество отображения gif-ролика в веб-проектах. Такая оптимизация позволяет "упаковать" gif-файл.
Gif-анимация используется для различных целей:
- для создания веб-баннеров;
- для создания рекламных роликов;
- для создания анимированных надписей, кнопок;
- для создания анимированных электронных открыток.
Flash-анимация в дизайне сайтов
Flash-анимация - более продвинутая технология анимации в веб-проектах по сравнению с gif-анимацией. Принцип действия тот же - эффект анимации образуется за счет последовательной смены кадров. Однако главное отличие flash-анимации от gif-версии заключается в том, что flash-анимации имеет векторный формат, а gif-анимация - растровый. Разницу между растровым и векторным форматами изображений легко понять на примере. Предположим, необходимо изобразить отрезок линии заданного цвета и толщины. Тогда файл растрового формата будет хранить информацию обо всех точках, составляющих этот отрезок в виде их координат, а также информацию о цвете этих точек. А файл векторного формата будет хранить данные о векторе, образующем этот отрезок: координаты его начала, направление, длину, а также цвет и толщину отрезка. Таким образом, векторный формат заведомо компактнее и поэтому предоставляет больше возможностей для создания анимации в веб-проектах.
Flash-анимация создается в специальном редакторе. Наиболее распространенный - Adobe Flash (Macromedia Flash) . При создании Flash-анимации в этом редакторе нет возможности устанавливать для каждого кадра отдельное время показа, в отличие от gif-анимации. Вместо этого для всей последовательности изображений задается скорость смены кадров, одинаковая для каждого из них. Отдельно следует упомянуть такую возможность создания flash-анимации как использование символов (Symbols). Эти символы делятся на три вида: графика (Graphic), кнопки (Button), клипы (Movie Clip). Символы размещаются в специальной библиотеке и обладают встроенными типовыми функциями (прозрачность, цветное затенение). Удобство применения символов заключается в том, что достаточно один раз создать символ (например, моргающие глаза) и далее использовать его в разных местах ролика или даже в другом ролике, не тратя время на перерисовку одного и того же объекта несколько раз.
Сфера применения flash-анимации широка. Очень часто flash-анимация используется для создания:
- flash-сайтов;
- презентаций;
- анимации кнопок, меню;
- визуализации процессов и переходов по сайту;
- баннеров;
- рекламных роликов;
- игр;
- анимации логотипа;
- электронных открыток.
Таким образом, анимированные эффекты делают сайт более живым, интерактивным, привлекательным для пользователя. Что выбрать? Простоту gif-анимации или большие возможности flash-технологий? Выбор конечно же за Вами. Однако если Вы решили добавить flash- или gif-анимацию в свой веб-проект, помните: чем больше "вес" загружаемых страниц сайта, тем дольше длится процесс загрузки, а пользователи Интернет далеко не всегда терпеливы.
Flash- и gif-анимация активно используется в создании флеш-сайтов для получения различных анимированных эффектов: анимированного меню и фона, всплывающих подсказок, анимированных баннеров и т.д. Флеш-сайт позволяет привлекать клиентов благодаря своей неординарности и динамичности. Однако, чтобы флеш-сайт не терял своей функциональности при любых настройках браузера пользователя, рекомендуется при создании флеш-сайтов создавать и альтернативную, html-версию.
Теги:
дизайн сайтов,
веб-дизайн,
анимация на сайте,
flash,
gif-анимация,
flash-анимация,
растровая графика,
векторная графика,
баннер,
рекламный ролик,
интернет-реклама |