Flash и GIF анимация в дизайне сайтов

1. Gif-анимация
2. Flash-анимация

Gif-анимация

Gif-анимация - разновидность анимации, который основан на возможности стандарта графических файлов gif хранить несколько картинок в одном файле. Эти картинки образуют кадры - при их последовательной смене и образуется анимационный эффект. Создать анимационный ролик в формате gif несложно. Достаточно часто для этих целей используют графический редактор в сочетании с программой-аниматором.

Принцип создания gif-ролика такой же, как и принцип создания рисованной анимации. Сначала в графическом редакторе создается изображение, затем в программе-аниматоры - кадры анимации, которые содержат измененное изображение. Далее эти кадры выстраиваются в определенной последовательности, для каждого кадра задается время показа - и ролик готов. Для создания плавного и достаточно реалистичного эффекта движения достаточно установить время показа каждого кадра в интервале от 0,2 до 1 с.

Для использования в веб-проектах размер анимационного ролика не должен превышать 25 кб и поэтому его необходимо оптимизировать. Размер gif-файла в значительной степени зависит от количества используемых цветов и суть оптимизации заключается в том, чтобы уменьшить это количество. Происходит это за счет удаления тех цветов, которые не влияют на качество изображения gif-ролика в веб-проектах . Такая оптимизация позволяет «упаковать» gif-файл.

Gif-анимация используется для различных целей:

• для создания веб-баннеров;
• для создания рекламных роликов
• для создания анимированных надписей, кнопок;
• для создания анимированных электронных открыток.

Flash-анимация

Flash-анимация - более продвинутая технология анимации в веб-проектах по сравнению с gif-анимацией. Принцип действия тот же - эффект анимации образуется за счет последовательной смены кадров. Однако главное отличие flash-анимации от gif-версии состоит в том, что flash-анимация имеет векторный формат, а gif-анимация - растровый. Разницу между растровым и векторным форматами изображений легко понять на примере. Допустим, необходимо изобразить отрезок линии заданного цвета и толщины. Тогда файл растрового формата будет хранить информацию обо всех точки, составляющих этот отрезок в виде их координат, а также информацию о цвете этих точек. А файл векторного формата будет хранить данные о вектор, образует этот отрезок: координаты его начала, направление, длину, а также цвет и толщину отрезка. Таким образом, векторный формат компактнее и поэтому предоставляет больше возможностей для создания анимации в веб-проектах.

Flash-анимация создается в специальном редакторе. Самые распространенные - Macromedia Flash и Adobe Flash. При создании Flash-анимации в этом редакторе нет возможности устанавливать для каждого кадра отдельное время показа, в отличие от gif-анимации. Вместо этого для всей последовательности изображений задается скорость смены кадров, одинакова для каждого из них. Отдельно следует упомянуть такую ​​возможность создания flash-анимации как использование символов (Symbols). Эти символы делятся на три вида: графика (Graphic), кнопки (Button), клипы (Movie Clip). Символы размещаются в специальной библиотеке и имеют встроенные стандартные функции (прозрачность, цветное затенение). Удобство применения символов заключается в том, что достаточно один раз создать символ (например глаза, что моргают) и далее использовать его в различных местах ролика или даже в другом ролике, не тратя время на перерисовки того же объекта несколько раз.

Сфера применения flash-анимации широка. Очень часто flash-анимация используется для создания:

• flash-сайтов ;
• презентаций;
• анимации кнопок, меню;
• визуализации процессов и переходов по сайту;
• баннеров ;
• рекламных роликов
• игр;
• анимации логотипа;
• электронных открыток.

Таким образом, анимированные эффекты делают сайт более живым, интерактивным, привлекательным для пользователя. Что выбрать? Простоту gif-анимации или большие возможности flash-технологий? Выбор конечно же за Вами. Однако если Вы решили добавить flash- или gif-анимацию в свой веб-проект, помните: чем больше "вес" страниц, загружаемых сайта, тем дольше длится процесс загрузки, а пользователи Интернет далеко не всегда терпеливы.

Теги:
дизайн сайтов, веб-дизайн, анимация на сайте flash, gif-анимация, flash-анимация, растровая графика, векторная графика, баннер, рекламный ролик, интернет-реклама

Похожие

Комментарии