Web-анимация

Главная > Информатика > Интернет > Создание сайта > Анимация в Интернете

Интернет-кафе

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

Анимация — последовательность сменяющихся изображений (кадров), в результате чего возникает иллюзия движения. Возможностей применения движущихся изображений, встроенных в Web-страницы существует множество, например, создание элементов управления навигацией, Но чаще всего анимированная графика встречается в размещаемой на сайтах рекламе, в виде разнообразных баннеров. Сейчас в Интернете применяют несколько видов анимации. Среди них: 1) технология Macromedia Flash, оперирующая векторными графическими объектами, и 2) технология Java, когда графика и текст перемещаются посредством включения в html-документ специального кода, обрабатываемого клиентским браузером совместно с кодом самой Web-страницы.

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

Разделы страницы об анимационных веб-технологиях:

Читайте также литературу по web-технологиям и сценарным языкам программирования (скрипт-языкам).


Macromedia Flash (плоская web анимация) и скрипт-язык ActionScript

Macromedia Flash - это система мультимедийного визуального программирования, которая позволяет разработчику Web-ресурса не знать базового языка Macromedia Flash - Action Script, позволяющим решать многие мультимедийные проблемы в сложных условиях сети Интернет, когда пользователи web-ресурсов имеют различные малосовместимые версии браузеров, к тому же работающих в разных операционных системах.

Стандарт Flash был разработан компанией Macromedia в 1996 году. Основное назначение данной технологии — создание высококачественной интерактивной анимации, которую можно представить при относительно небольшом размере итогового файла. С помощью Macromedia Flash web-мастер имеет возможность изготавливать красочные анимационные заставки, определённые элементы которых могут «реагировать» на движения мышки, а также встроенные в web-страницы мини-игры, озвученные мультипликационные клипы и многое другое. Другими словами, Macromedia Flash способна практически на всё, что доступно при применении Java, и даже больше. Одним из основных отличий Macromedia Flash от всех остальных существующих web-технологий является то, что это единственный стандарт, позволяющий работать не только с растровой графикой, но и с векторной. Помимо этого текст импортируется в среду Flash не как растровое изображение, а именно как текст, в котором один символ кодируется одним байтом информации, что является серьёзным оружием в борьбе с излишним объёмом результирующих файлов. Немаловажно, что во Flash имеется возможность воспроизведения музыки и звуков в формате MP3. В среду Flash интегрирован специальный язык программирования, немного похожий на Java. Написанные с его помощью программные модули импортируются в документ как апплеты и вставляются в нужный кадр анимации, где должно произойти динамическое изменение изображения. С помощью специального редактора можно написать небольшую программку, управляющую проигрыванием клипа, создать элементы, поддающиеся индивидуальным настройкам посетителями сайта, генерировать заставку с несколькими вариантами продолжения. Способов реализации этой возможности существует множество, но всё-таки, чтобы использовать всю мощь встроенного языка, необходимо иметь определённый опыт в программировании.

Механизм технологии Macromedia Flash таков: изготовленные разработчиком интерактивные элементы и анимация превращаются в интерпретируемый код, который импортируется в страницу HTML. Для того чтобы клиентский браузер мог распознать объекты Flash, необходимо проинсталлировать на компьютере пользователя специальную надстройку к браузеру (plug-in), которая носит название Macromedia Flash Player. Пользовательский браузер, сталкиваясь с документом в формате Flash, как правило, сам связывается с соответствующим узлом, после чего начинает загрузку и установку Flash Player в автоматическом режиме. Проигрыватель Flash уже интегрирован в браузеры Microsoft Internet Explorer 4.0-6.0 и Netscape Navigator версии 4.01 и выше. Другие браузеры к сожалению не умеют распознавать данный формат, в чём и заключается его основной недостаток.

К сожалению, веб-разработчики были вынуждены отойти от прикольной анимации, т.к Google и Microsoft отказались от поддержки Adobe Flash на мобильных устройствах, что неизбежно привело к угасанию этой технологии. В свои лучшие годы Flash дал нам сайты, которые просто сломали все стереотипы о том, каким должен быть Интернет. Отказ от Flash нанес серьезный ущерб креативности в веб-дизайне. Разработчики и дизайнеры очень любили Flash, так как он позволял создавать невероятные вещи, не погружаясь с головой в код.

Сценарный язык флэша ActionScript

ActionScript — объектно-ориентированный язык Flash API, один из диалектов ECMAScript (как и JavaScript), который добавляет интерактивность, обработку данных и многое другое в содержимое Flash-приложений.

ActionScript исполняется виртуальной машиной (ActionScript Virtual Machine), которая является составной частью Flash Player. ActionScript компилируется в байт-код, который включается в SWF-файл. SWF-файлы исполняются Flash Player-ом. Flash Player существует в виде плагина к веб-браузеру, а также как самостоятельное исполняемое приложение (standalone). Во втором случае возможно создание исполняемых exe-файлов (projector), когда Flash Player включается в swf-файл.

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

Java - анимация

Язык программирования Java. Существует сегодня в двух вариантах: JavaScript и собственно Java. Модуль написанный на JavaScript, интегрируется в файл HTML как подпрограмма и вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Встроенный в браузер интерпретатор языка воспринимает и скрипт. Модуль Java существует как самостоятельное приложение с расширением .class, т.е. апплет. При использовании этого варианта языка апплет также вызывается из html-файла соответствующей командой. С помощью технологии Java можно придать своей странице элементы интерактивности.

Web-анимация с помощью скриптов

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

Создание web-анимации средствами javascript стоит доверять только опытным программистам, хорошо знакомым с данным языком web-программирования, а так же имеющим опыт работы с яваскрипт-библиотеками наподобие jquery, так как неграмотно написанная javascript-анимация, во первых, может негативно повлиять на скорость загрузки сайта, во вторых неправильно отображаться в некоторых Интернет-обозревателях, и в третьих вызвать появление ошибок, которые будут препятствовать индексации сайта поисковыми ботами.

Gif - анимация

Gif Animator позволяет создавать анимированное изображение, а также генерировать его из импортированных видеофайлов. Множество дополнительных фильтров позволяют добиться различных визуальных эффектов, а встроенный оптимизатор графики — сократить размер целевого файла до возможного минимума. Оптимизация GIF-анимации достигается удалением из изображения неиспользуемых цветов и замещением статичных участков картинки прозрачным фоном. Иными словами, после оптимизации картинки, все неподвижные фрагменты изображения остаются только на первом кадре, а остальные кадры содержат лишь динамические объекты, наложенные на прозрачную подложку.

Gif-анимация является наиболее простым, в плане требовательности, видом web-анимации, так как для отображения графических элементов в формате .gif браузеру не нужно подгружать сторонние плагины и расширения. По сути gif-анимация на сайте – это внедрение в дизайн сайта графических элементов с последовательно сменяющимися картинками, каждый из которых имеет свой временной интервал. За счет использования в gif-ролике оптимизированных для веб изображений, он имеет сравнительно небольшой размер и практически не влияет на “вес” страницы при загрузке сайта. Кроме того использование на сайте анимированных .gifов не требует постоянной связи сайта с сервером, так как файлы анимации подгружаются на страницу единожды. Основным недостатком использования формата .gif в качестве web-анимации является полное отсутствие интерактивности и сравнительно невысокий уровень качества анимационных роликов. В отличие от технологии flash, gif-анимация не позволяет создавать реалистичные ролики с “гладкими” интерактивными эффектами.

HTML5 + CSS3 анимация сайта

С помощью анимации посредством html5 и css3 можно добиться эффектов не отличимых от результатов той же flash-анимации, хотя и тут есть свои “но”. Если javascript-анимация на сайтах весьма распространена, то интерактивная динамика, созданная с помощью html5 и css3, нет. Это обусловлено тем, что обе эти технологии пока не являются официальными стандартами и адекватно отображаются на сайтах не всеми браузерными клиентами, хотя, к примеру, формат html5 уже сегодня называют полноценной заменой flash-анимации на сайте.

Приведем примеры того, в чем именно формат html5 и css3 анимация превосходит flash-анимацию: язык html5 и css3 не трубует установки пользователем дополнительных плагинов на компьютер, формат html5 и css3 в отличие от Флеш-анимации индексируется поисковыми системами, сайты созданные с помощью html5 и css3 гораздо “легче”, в плане скорости загрузки, сайтов анимированных с помощью flash, сайты на html5 css3 сравнительно дешевле проектов построенных на технологии flash. Но, в отличие от того же javascript, говорить о преимуществах html5 и css3 над современными веяниями в web-анимации пока рано, т.к. это всё-таки взгляд в будущее. Данный язык программирования сайтов сравнительно молод, поэтому ждем утверждение html5 и css3 как стандартов и наслаждаемся наиболее адаптированной для Интернета анимацией.


Главная > Информатика > >
Веб-дизайн: Веб-клиенты | Веб-серверы | Веб-анимация | Веб-движки | Веб-сервисы | Софт дизайнера | Веб-палитра

Оптимизация сайта | Веб-бизнес | Поиск | Раскрутка сайта | Веб-студии | Утилиты для сети | Хостинги
На правах рекламы (см. условия): [an error occurred while processing this directive]    


© «Сайт Игоря Гаршина», 2002, 2005. Автор и владелец - Игорь Константинович Гаршин (см. резюме). Пишите письма (Письмо И.Гаршину).
Страница обновлена 22.03.2024
Яндекс.Метрика