Вы видите их повсюду. Анимированные фигуры моргают, подпрыгивают или вращаются на вашем экране. Веб-дизайнеры не просто случайно наткнулись на эти приемы. Они создали набор инструментов, чтобы контент выделялся, не ломая ваш браузер. Главные игроки? Анимированные GIF, динамический HTML, Java, Shockwave и Flash. У каждого есть свои сильные стороны. У каждого есть свои недостатки. Мы разберем, как они работают. Мы также посмотрим, что ждет их в будущем.
Война за пропускную способность
История интернета коротка. Ее эволюция быстра. Два фактора действуют друг против друга. Авторы хотят создавать сложный контент. Читателям нужны быстрые загрузки.
В ранние дни «быстро» означало телефонные модемы. Размеры файлов должны были быть крошечными. Сложная графика была роскошью, которую могли позволить себе немногие. Это противоречие вынудило к инновациям. Разработчикам приходилось проявлять изобретательность. Им нужны были приемы для передачи богатых медиа по узким каналам.
Возьмите анимацию Flash из статьи о ядерном излучении. Это сложная фигура. Но она укладывается менее чем в 7000 байт. Вот это эффективность. Вот как каждая технология решает эту задачу.
Анимированные GIF
Ранние дни веб-графики и анимации
Веб не был бы тем, чем он является, без союза текста и изображений. Эта интеграция во многом опиралась на битмапные файлы — формат, в котором задаётся цвет каждого отдельного пикселя изображения. Концепция проста. Но есть нюанс: такие файлы могут быстро разрастаться в размере. Чтобы страницы загружались без того, чтобы пользователи часами смотрели на пустые экраны, разработчики обратились к методам сжатия. Именно поэтому JPEG и GIF доминировали в раннем вебе.
Но статичные изображения рассказывали лишь половину истории.
Если анимация — это быстрая последовательность неподвижных кадров, логичным следующим шагом стало объединение этих битмапных файлов в цепочку. Браузер циклически переключался между ними. Так появилась GIF-анимация, также известная как GIF89. Это был первый настоящий всплеск движения в вебе. Она быстро завоевала популярность. И остаётся популярной по сей день, к лучшему или к худшему.
Почему победили GIF (и почему они ограничены)
Привлекательность GIF была очевидной. GIF-анимация создавалась невероятно просто. Большинство браузеров поддерживали её «из коробки». Вам не требовались сложные плагины или проприетарное программное обеспечение. Если вы пользовались Windows, возможно, вы использовали GIF Construction Set. Пользователи Mac тяготели к GifBuilder. Рабочий процесс был линейным.
- Соберите отдельные битмапные кадры.
- Расположите их в программном обеспечении в нужном порядке.
- Загрузите итоговый файл.
Вот и всё. Вы прописываете тег точно так же, как для статичного изображения.
Однако эта простота имеет жёсткий предел. Главный недостаток — размер файла. Поскольку каждый кадр представляет собой полноценное битмапное изображение, добавление новых кадров увеличивает вес файла. С четырьмя простыми кадрами можно обойтись легко — они передаются без проблем. Но если вы дойдёте до двадцати кадров? Размер файла часто становится неподъёмным для обычных интернет-соединений того времени.
Есть и проблема с содержанием. Двадцати кадров недостаточно для плавного движения. В кино используется не менее 24 кадров в секунду. Анимированные GIF заставляют вас делать резкие скачки между состояниями. В результате движение получается рваным. Неестественным. Оно лишено плавности настоящего видео. Это ограничение видно практически в любой ранней веб-анимации. Она функциональна. Привлекает внимание. Но далеко не кинематографична.
GIF-файлы подходят для простых циклов или быстрых визуальных украшений. Однако они не способны передавать сложные повествования. Хуже того, они лишены звука. Веб-дизайнеры быстро уперлись в потолок. Пользователи хотели движения. Они хотели звука. GIFы не могли этого обеспечить.
Основная проблема анимации в формате GIF — раздувание размера файла. Каждый кадр в «фильме» значительно увеличивает объем загрузки. Это неэффективно. Это медленно.
Динамический HTML
Решение? Перестать передавать кадры. Просто передайте одно изображение. Затем скажите компьютеру переместить его.
Подумайте о курсоре мыши. Вы не загружаете новое изображение на каждый миллиметр перемещения указателя. Браузер обрабатывает это движение локально. Динамический HTML (dHTML) пытается воспроизвести эту эффективность в вебе.
Исходные веб-страницы были статичными. Язык гипертекстовой разметки (HTML) определяет структуру, а не поведение. После загрузки страница просто висела. Мертвая. Неподвижная.
Дизайнерам это не нравилось. Они хотели динамический контент. Контент, который изменялся после загрузки страницы. На сцену вышел dHTML.
Это не одна технология. Это комбинация языков программирования, таких как JavaScript, обращающихся к объектной модели документа (DOM). DOM — это внутренняя карта страницы в браузере. Он управляет каждым элементом.
Большинство современных браузеров предоставляют скриптам доступ к DOM. Скрипт может захватить элемент. Изменить его цвет. Переместить его позицию.
DHTML не создавался с учетом анимации. Он был создан для манипуляции элементами страницы. Анимация стала приятным побочным эффектом.
Скрипт может инструктировать браузер постоянно обновлять координаты изображения. Изображение скользит по экрану. Если делать это с несколькими изображениями, получается примитивный фильм.
Это работает в большинстве браузеров без дополнительных загрузок. Но это капризно. Код, который работает в Netscape, может сломаться в Internet Explorer. Создание dHTML-анимации вручную — мучительный процесс. Вам нужны инструменты. Macromedia Dreamweaver (и аналогичные приложения) генерируют правильный код скриптов за вас.
Даже с инструментами dHTML ограничен. Он перемещает статичные изображения. Он плавнее, чем GIF, но менее эффективен для сложных сцен. Он представляет собой потолок того, что браузер может делать нативно.
Чтобы пойти дальше, разработчикам потребовалось что-то более тяжеловесное. Что-то внешнее.
Java-апплеты
На сцену выходит Java.
Java — это универсальный, ориентированный на сеть язык. Он позволяет программистам создавать загружаемые приложения. Но это не автономные программы. Это апплеты.
Апплеты запускаются внутри браузера. Они требуют виртуальную машину (VM). Виртуальная машина действует как переводчик. Она берет код Java и преобразует его в инструкции, понятные вашей конкретной операционной системе (Windows, MacOS, Unix).
Виртуальная машина по сути является плагином. Если у вас его нет, анимация не работает.
Java-апплеты предлагают гибкость. Вы не ограничены битовыми кадрами. Вы можете рисовать векторные фигуры на лету. Это сохраняет размер файлов управляемым. Это позволяет обеспечить интерактивность. Пользователь может щелкнуть, перетащить или навести курсор, и анимация будет реагировать в реальном времени.
Это мощно. Это кроссплатформенно. Это также зависимость. Если в браузере пользователя отсутствует виртуальная машина Java, он ничего не увидит.
Для веб-дизайнеров конца 90-х и начала 2000-х годов это было передовым краем. Вы жертвовали простотой использования ради возможностей. GIFы были простыми, но глупыми. dHTML был нативным, но ограниченным. Java была сложной, но мощной.
Выбор зависел от вашей аудитории. Были ли у них установлены плагины? Заботились ли они о времени загрузки? Или им просто хотелось, чтобы сайт выглядел впечатляюще?
Компромисс между производительностью и насыщенностью определял веб на протяжении многих лет. Мы до сих пор пытаемся найти баланс сегодня.
Начало 90-х изменило всё. Внезапно сайты начали создавать все. Это уже были не только технические энтузиасты. Они хотели добавлять мультимедиа на свои страницы. Звук. Видео. Сложная графика.
Браузеры не могли обрабатывать всё это из коробки. Поэтому разработчики проявили креативность. Они создали браузерные плагины.
Представьте плагин как вспомогательное приложение. Оно работает вместе с вашим браузером для чтения определённых типов файлов. Эти программы небольшие. Их можно быстро скачать. Они выполняют функции, которые обычные браузеры просто не поддерживают.
Как на самом деле работает потоковое видео
Раннее веб-видео сильно опиралось на модель плагинов. Вы не просто смотрели файл. Вы взаимодействовали со специализированным плеером.
Дизайнеры использовали скрипты DHTML для проверки вашей конфигурации. Был ли у вас нужный плагин? Если нет, браузер выводил сообщение. Оно указывало, откуда именно его нужно скачать.
Этот процесс был утомительным. Он занимал время. Это было серьёзным препятствием для пользователей.
Но если у вас был плагин? Происходила магия. Браузер начинал воспроизводить фильм ещё до того, как файл полностью загружался.
Как? За счёт сжатия и потоковой передачи.
Сжатие упрощает данные изображения. Оно уменьшает размер файлов. Потоковая передача начинает воспроизведение в процессе загрузки. Такие плееры, как QuickTime и Media Player, использовали этот подход. Они показывали последовательность статических изображений. Подобно анимированному GIF, но быстрее. И со звуком.
Но был подвох. Медленное соединение портило впечатление. Файлы загружались бесконечно долго. Или качество выглядело ужасно.
Доминирование векторной анимации
Когда речь заходит о ранней веб-анимации, два имени правят балом. Flash и Shockwave. Оба были разработаны компанией Macromedia.
Это были векторные 2D-плееры анимации.
В отличие от растровых изображений, векторы используют математические уравнения. Это делало их масштабируемыми. Они оставались чёткими при любом размере. Они загружались невероятно быстро через dial-up соединения.
Эта технология обеспечивала работу большей части интерактивного веба. Анимация с бумерангом из нашей предыдущей статьи? Это был Flash. Это был не просто видеофайл. Это был код. Он был лёгким. Он был повсюду.
Macromedia построила империю на двух форматах, которые по сути были родственными: Flash и Shockwave. Один стал стандартом для веб-анимации; другой выполнял тяжелую работу по созданию более сложного интерактивного контента. В отличие от громоздких файлов RealPlayer или QuickTime, которые открывались в отдельных окнах, эти форматы работали внутри страницы. Они были интерактивными. Вы не просто смотрели; вы кликали. Плеер Shockwave не просто воспроизводил фильм. Он считывал ввод пользователя и сообщал браузеру, как реагировать.
Анатомия скорости
Почему эти файлы загружались так быстро? Это не было магией. Это была математика.
Большинство GIF-анимаций основаны на растровых изображениях. Каждый пиксель сохраняется индивидуально. Если у вас есть голубое небо, это тысячи отдельных записей пикселей. Файлы Flash и Shockwave в основном векторные. Вместо хранения значений пикселей программное обеспечение хранит инструкции. Прямая линия — это не серия точек. Это описание: угол, координата, длина.
Описание изображений таким образом позволяет программе сохранять широкие участки изображения — участки, которые могут состоять из сотен пикселей в растровом файле — в виде нескольких фигур.
Этот подход резко сокращает размер файла. Даже когда использовались растровые изображения, веб-мастера могли сжимать их. Они перемещались по экрану по пути, подобно анимации в dHTML, что держало общий объем данных на низком уровне. Однако большинство файлов Flash были чисто векторными. Это делало их исключительно быстрыми для загрузки.
Есть еще один трюк в рукаве: промежуточные кадры (tween).
Аниматорам не нужно рисовать каждый отдельный кадр. Программное обеспечение вычисляет геометрические изменения между ключевыми кадрами. Оно заполняет промежуток. Это занимает гораздо меньше места, чем хранение каждого кадра в виде уникального растрового изображения. Математика берет на себя основную работу.
Потоковая передача: начните, прежде чем закончите
Настоящим нововведением было не только то, как были структурированы файлы. Это было то, как они передавались по интернету. Файлы Flash и Shockwave являются потоковыми.
Вам не нужно ждать полной загрузки, чтобы начать воспроизведение. Браузер начинает проигрывать «фильм», пока остальная часть все еще загружается. Подумайте об этом как о веб-странице: сервер сначала отправляет текст, затем изображения. Веб-сайт на Flash может отправить вводный фильм, пока основной контент загружается в фоновом режиме.
Веб-мастера могут запрограммировать файл так, чтобы воспроизведение начиналось после загрузки определенного процента файла. Передача настроена так, что каждый сегмент arrives до того, как плееру он понадобится. Это тот же механизм, который лежит в основе потокового видео.
Монополия удобства
Flash победил не только потому, что он был хорош. Он победил, потому что Macromedia сделала его повсеместным.
Плагины поставлялись вместе с основными браузерами и операционными системами. Если у вас его не было, установка происходила в фоновом режиме. Вам не нужно было закрывать браузер. Вам не нужно было сидеть и ждать длительной процедуры. Программное обеспечение для создания этих файлов было дорогим. Но плеер? Бесплатный.
Обновления были безболезненными. Macromedia разработала плееры так, чтобы они адаптировались к будущим изменениям. Пользователям не нужно было делать ничего, кроме загрузки небольшого файла. Если сайт обнаруживал, что у вас старая версия, ваш браузер предупреждал вас и направлял на страницу загрузки. Файлы были настолько маленькими, что процесс обновления занимал почти мгновенно.
Сетевой эффект
У каждого формата анимации есть свои сильные и слабые стороны.
Тем не менее, многие веб-мастера выбирали Flash, даже когда другой формат мог быть технически превосходящим. Почему? Потому что они знали, что у большинства пользователей уже есть эта возможность. А если нет, то получить ее было тривиально.
Универсальность Flash и Shockwave создала петлю обратной связи. Больше веб-мастеров включали этот контент. Больше пользователей сталкивались с ним. Принятие росло. Речь уже шла не только о технологии. Речь шла о пути наименьшего сопротивления.
Они происходят из одной компании. Macromedia создала оба. Они покрывают схожую область применения. Однако разрыв между Flash и Shockwave — это не просто вопрос брендинга. Это архитектура. Это история. Вам необходимо знать разницу, если вам важно, как загружается ваш контент или что именно вы можете с ним построить.
Коренная причина? История происхождения.
Director, движок, лежащий в основе Shockwave, старше современного веба. Он был создан для CD-ROM. Тяжелые данные. Высокая точность. По мере эволюции веба Director обновлялся. Он научился работать в сети. А Flash? Flash родился для браузера. Он эволюционировал из Future Splash Animator. Macromedia адаптировала его для телефонных линий. Тогда королем был dial-up (выделенная линия). Скорость имела решающее значение.
Эта история создала раздвоенную природу технологий.
Flash приоритизировал скорость. Shockwave приоритизировал мощность.
Какой формат выигрывает по скорости и совместимости?
Если вы спрашиваете, какой формат имеет лучшую веб-совместимость, Flash уверенно держит корону.
Подумайте о плагинах. Flash? Установлен более чем у 90 процентов пользователей интернета. Shockwave? Чуть менее 60 процентов. Это огромный кусок вашей аудитории остается в неведении, если только они не установят проигрыватель Shockwave.
Время загрузки следует той же логике.
Файлы Flash легкие. Они загружаются быстро. Файлы Shockwave тяжелее. Им требуется больше времени для загрузки. В ранние дни веба ожидание загрузки клипа в течение десяти секунд было обычным делом. Сегодня это неприемлемо. Flash интуитивно понимал это.
Но скорость — не всё.
Где Shockwave превосходит Flash
Не списывайте Shockwave со счетов. Это более мощный инструмент.
Он более универсален. Хотите сложные игры? Shockwave. Нужна глубокая интерактивность? Shockwave. Сложная анимация, которой не важно время загрузки? Shockwave.
Существует также иерархия возможностей. Вы можете импортировать файл Flash в фильм Shockwave. Это работает нормально. Попробуйте обратное? Не получится. В плане возможностей Shockwave является родительским форматом.
Затем есть вопрос стоимости.
Программное обеспечение для создания Flash стоит около 400 долларов. Director, предназначенный для Shockwave, стоит почти 1000 долларов. Для стартапа или небольшой студии это существенный барьер. Flash был доступен. Director был для профессионалов.
Открытый секрет: доступность исходного кода
Вот деталь, которую большинство обучающих материалов пропускают.
Flash — это формат с открытым исходным кодом. Вы можете видеть, как он работает. Вы можете адаптировать его. Вы можете вмешиваться во внутреннюю структуру. Shockwave использует скомпилированный формат файлов. Он закрыт. Модифицировать его крайне сложно. Если вам нужно провести реверс-инжиниринг или глубокую кастомизацию, Flash дает вам ключи. Shockwave хранит их в сейфе.
Как создавать фильмы в обеих средах
Оба инструмента разработаны так, чтобы быть удивительно простыми. Они автоматизируют тяжелую работу. Вам не нужна степень в области компьютерных наук, чтобы создать вращающийся глобус.
Рабочий процесс схож, даже если названия отличаются. Вы выполняете три действия:
- Создание и редактирование изображений. Исходные материалы.
- Размещение изображений по кадрам. Последовательность.
- Упорядочивание кадров в фильм. Итоговый продукт.
Но интерфейсы? Совершенно разные языки.
В Flash вы храните ресурсы в библиотеке. В Shockwave они попадают в каст. Одна и та же задача. Разные названия.
Вы размещаете эти ресурсы на сцене. Это то, что видит пользователь. Итоговый вывод.
Для управления движением вы используете ключевые кадры. Вы задаете начальную точку. Вы задаете конечную точку. Вы говорите программному обеспечению заполнить промежуточные значения. Flash называет область расположения временной шкалой. Shockwave называет её оценкой (score).
«Если вы хотите, чтобы глобус катился с одной стороны экрана на другую, вам не нужно анимировать каждый кадр. Вы просто указываете Flash, где глобус начинает движение и где останавливается.»
В этом магия. Программное обеспечение интерполирует движение. Оно выполняет математические вычисления. Вы просто задаете намерение.
Когда они объединятся?
Они сближаются.
Каждое обновление добавляет веб-возможности в Shockwave. Каждое обновление добавляет универсальности во Flash. Разрыв сокращается.
В конце концов, они, вероятно, объединятся в один всеобъемлющий формат. Он возьмет лучшее из обоих миров. Скорость и мощность. Доступность и сложность.
До тех пор вы выбираете, исходя из своих ограничений.
У вас соединение dial-up? Flash.
У вас бюджет в 400 долларов? Flash.
Вам нужно скрыть исходный код? Shockwave.
Вам нужно создать веб-игру уровня AAA? Скорее всего, Shockwave.
Речь идет не просто о предпочтениях. Речь идет о среде. И среда продолжает развиваться.
Флеш-фильм из нашей статьи о топливных элементах.
Флеш-анимация из нашей статьи о двигателях.
Переход к интерактивной 3D-графике в вебе
Двухмерная веб-анимация всегда была направленным опытом. Дизайнер точно определяет, что вы видите, кадр за кадром. Она отражает традиционные телевизионные мультфильмы, где аудитория пассивна. Трёхмерная веб-графика полностью меняет эту динамику. Вы получаете контроль. Вы можете вращать модель. Вы можете запускать определённые функции. В некоторых случаях вы даже можете изменять её физические размеры. Такой уровень взаимодействия превращает контент из того, что вы просто смотрите, в то, что вы исследуете.
Плагины для браузеров и отраслевые стандарты
Как и более ранние 2D-инструменты, такие как Flash и Shockwave, просмотр 3D-графики в вебе требует плагина для браузера. Несколько компаний уже вышли на этот рынок. Viewpoint добилась определённого успеха. NxView предлагает плагин напрямую со своего веб-сайта.
В отрасли также наблюдается крупная консолидация. В июле компании Macromedia и Intel объявили о совместной разработке 3D-возможностей для Shockwave. Это партнёрство использует аппаратные ресурсы Intel и устоявшуюся инфраструктуру мультимедийного плеера Macromedia. Цель ясна: сделать формат 3D-графики Shockwave фактическим отраслевым стандартом для веб-графики. Пользователям не потребуется новое программное обеспечение. Они просто загрузят обновление для своих существующих плееров Shockwave.
Адаптивное масштабирование и управление полигонами
Производительность — главный барьер для 3D-графики в вебе. Технология Shockwave решает эту проблему посредством масштабирования. Она адаптируется к скорости соединения пользователя в реальном времени. Если у вас медленное соединение, плеер загружает модель с меньшим количеством полигонов. Полигоны — это геометрические фигуры, которые объединяются для формирования 3D-модели.
Это не просто компромисс; это функция. Вы теряете некоторые мелкие детали. Но вы не теряете чёткость изображения. Движение остаётся плавным. Это гарантирует, что пользователи с модемным подключением или ранними широкополосными соединениями не будут исключены из этого опыта.
Электронная коммерция и виртуальные примерочные
Эта технология открывает новые возможности для онлайн-шопинга. В настоящее время покупатели полагаются на статичные изображения. Они догадываются о посадке и текстуре. 3D-графика позволяет им рассматривать продукт со всех сторон. Это имитирует опыт покупки в физическом магазине.
Некоторые сайты идут дальше, предлагая «виртуальные примерочные». Пользователи могут создать 3D-модель собственного телосложения. Затем они могут увидеть, как разная одежда сидит на этом конкретном аватаре. Это снижает неопределённость при онлайн-покупках.
Образовательные приложения и углублённое изучение
Образовательные платформы значительно выигрывают от этого перехода. Сайты, такие как How Stuff Works, уже опубликовали статьи с использованием 3D-графики, созданной с помощью NxView. Планируется разработка большего количества контента.
Эта графика обеспечивает ясность. Пользователи могут рассматривать двигатель с любого угла. Создаётся ощущение, что перед ними действительно находится настоящий двигатель. Это пространственное понимание способствует лучшему запоминанию и осмыслению материала.
Будущее веб-взаимодействия
Эта технология, вероятно, революционизирует внешний вид и ощущения от интернета. Она следует той же траектории, что и статичные изображения и Flash-анимация. Интернет будет продолжать развиваться с беспрецедентной скоростью.
Высокоскоростные соединения становятся более распространёнными. Это стимулирует появление следующего поколения идей анимации. Одна из концепций заключается в том, чтобы сделать веб менее похожим на книгу и более похожим на видеоигру. Пользователи будут получать доступ к информации в интерактивном 3D-мире. Другая идея — сделать его более похожим на телевидение. Высококачественная анимация и видео будут доминировать.
В конечном счёте, это зависит от того, что веб-дизайнеры решат создать. Это также зависит от того, чего требуют пользователи. Интернет не статичен. Он движется в сторону чего-то более иммерсивного. Следующий шаг — понять, как именно эти движки работают изнутри.
