Анимированные баннеры, меню и кнопки для сайта

20.10.2013 | Автор Алексей

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

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

Если рассматривать анимацию как придание объектам способности двигаться, то она несет гораздо больше информации об объекте или событии чем, статическая картинка с приложенным описанием.

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

Сегодня наибольшее распространение, анимация получила в формате gif и swf.

GIF анимация

В отличие от обычных графических форматов GIF поддерживает простейшую анимацию. Один файл может содержать несколько изображений с указанием времени показа каждого и паузы между ними.

Особенности формата:

animation

  • Встроенный алгоритм сжатия LZW. Позволяет сильно сжимать файлы, имеющие большие участки с одноцветной заливкой.
  • Палитра использует 8 бит для каждого пиксела. Это ограничение разрешает сохранять файлы только в режиме 256 цветов
  • Поддержка прозрачности.
  • Чересстрочный вывод изображений.
  • Включение текста (комментария) в изображение.

Из-за 8 битной палитры GIF формат не подходит для хранения полноцветных фотографий. Рекомендуемое применение: рисованные изображения, а также чертежи, графики.

 

Gifovina.ru — сервис для создания анимированных картинок.

gifovina

Интерфейс сервиса достаточно прост. Кнопкой «Добавить кадры» загружаете картинки в проект. Справа от каждой миниатюры кадра находятся кнопки выбора эффекта и его длительности в интервале от 0,1 до 1 сек. При желании также можно включить текст(комментарии) в каждый кадр.

Количество эффектов на данный момент не велико, всего 18, но достаточно для создания рекламного баннера.

 

Флеш-анимация

Вторая технология создания анимации – флеш-анимация. Активно внедряется компанией Adobe.

По сравнению с gif, флеш формат имеет более широкий функционал и позволяет создавать даже такие сложные, интерактивные элементы, как меню.

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

Видеоролик созданный с помощью этой технологии, содержит всего несколько ключевых кадров, а эффект движения создает программа. Как следствие флеш ролики имеют малый размер файлов.

Flashvortex.com – сервис создания анимированных баннеров, кнопок, текста, меню, даже часов на основе готовых шаблонов, а их выбор к слову довольно широк. Есть один нюанс, в бесплатной версии на элементах будет присутствовать логотип flashvortex.com.

сервис создания анимированных баннеров

Конструктор позволяет создавать флеш элементы буквально за 10 минут.

С помощью визуальной панели настроек выбираете цвета, размеры, тип и скорость анимации, вставляете нужные ссылки. Все настройки интуитивно понятны и останавливаться на них подробно не вижу смысла.

Далее приведу несколько элементов созданных в этом сервисе.

 

Флеш-меню. В ассортименте, анимированные меню практически любого стиля: вертикальные, раскрывающиеся списки (кликните по картинке).

 

 

 

 

 

 

а также горизонтальные меню с широким набором эффектов на любую тематику.

 

Флеш-текст. К сожалению, пока не все шрифты поддерживают кириллицу. При создании русскоязычного текста выбирайте соответствующий шрифт. Поддержка кириллицы часто отражена в названии шрифта, например «CYRILLIC — Arial».

 

 

 

 

Флеш-баннеры. На данный момент представлены более 30 стилей оформления. Можно использовать либо готовые макеты стандартных размеров, либо загрузить собственные картинки произвольного формата.

 

Установка флеш баннера на сайт

Инструкция по установке приведена на сервисе и достаточно проста. После создания баннера, сохраняем файл на компьютере — кнопка «Download Animation» и далее закачиваем его на сайт. Удобно для этого создать отдельную папку в корневой директории сайта:

http://ваш_сайт.ru/animation/

Для показа баннера на странице можно использовать следующий код вставки.

<object width="500" height="68" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" align="left">
<param name="quality" value="best" />
<param name="menu" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="src" value="http://alexisakov.ru/animation/flashvortex.swf" />
<param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" />
<param name="allowscriptaccess" value="sameDomain" />
<embed width="500" height="68" type="application/x-shockwave-flash" src="http://alexisakov.ru/animation/flashvortex.swf" quality="best" menu="true" allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="sameDomain" align="left" />
</object>

Не забудьте указать свои значения ширины, высоты элемента, имя и путь к файлу.

Один комментарий к “Анимированные баннеры, меню и кнопки для сайта”

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>