Спецэффекты на web-страницах

Введение

Здравствуйте, уважаемые читатели!

Тема нашего урока — создание спецэффектов для публикации на web-страницах. Это различные баннеры, а также разного рода эффектные заголовки («пылающий» или «стекающий» текст) и прочие «украшательства».

На написание этого урока меня подвигла совершенно конкретная задача: нужно было выложить на сайт анимацию с частицами, созданную при помощи Magic Particles (увы, эта галерея давно уже не существует). Я расскажу о некоторых моментах, с которыми столкнулся при ее реализации, в надежде, что это будет полезно кому-то еще. Изложение ведется из расчета на не слишком опытного web-дизайнера.

Итак, постановка задачи заключается в следующем: имеется эмиттер Magic Particles, нужно получить анимацию непосредственно на сайте.

Собственно, разумных способов всего два: использовать формат Flash Video или анимацию GIF. У обоих способов есть свои достоинства и недостатки, которые мы сейчас и рассмотрим.

При создании анимации в каждом из этих форматов существует два подхода:

Конвертировать файл формата AVI в нужный формат. Для этого нужно сначала экспортировать эмиттер в файл формата AVI (лучше без сжатия — это особенно актуально при создании GIF-анимации). При конвертировании из AVI вам придется выполнить минимум действий, но вы не сможете использовать альфа-канал.
Собрать ее из отдельных кадров. Сборка из отдельных кадров — долгий и утомительный процесс, особенно если кадров получается много. Зато вы можете сохранить альфа-канал (GIF поддерживает его частично). Я предпочитаю формат PNG (этот формат хорош тем, что он поддерживает сжатие без искажений и альфа-канал).

О том, как делается экспорт, подробно написано в справке Magic Particles, я не буду повторяться.

Пожалуй, единственный момент, который здесь можно упомянуть — это масштабирование. Масштабировать можно как средствами Magic Particles, так и в вашем любимом графическом редакторе (видеоредакторе, если речь идет об AVI). Второй способ часто может дать более аккуратный результат.

Анимация GIF

Что это такое?

GIF — это один из форматов, которые наиболее активно используются во Всемирной паутине для представления графической информации. В отличие от форматов JPEG и PNG, GIF допускает не только статические, но и анимированные изображения, которые нам сейчас и нужны.

Как это сделать?

Для преобразования AVI в GIF можно использовать бесплатные программы. Например, это, среди прочего, умеет делать консольная (если вас не пугает это слово) утилита FFmpeg.exe. Чтобы ее найти, наберите имя файла в Google, она находится моментально. Если у вас есть комплект Adobe Creative Suite (который de-facto является стандартным инструментом любого российского дизайнера — кто же не слышал про всемогущий Photoshop?), то можно использовать для преобразования формата программу ImageReady из этого пакета. Она умеет читать AVI и сохранять их в GIF. Правда, в самых последних версиях эту полезную функцию почему-то убрали, так что ищите другие варианты…

Что в этом хорошего?

Во-первых, в редакторе (например, том же ImageReady) вы можете указать, сколько раз следует проигрывать анимацию (один раз, несколько или повторять постоянно) и задать индивидуально продолжительность экспозиции каждого кадра.

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

Что в этом плохого?

Во-первых, GIF не поддерживает более 256 цветов на каждый отдельный кадр (при этом каждый кадр может содержать свою собственную палитру из 256 цветов). Это ограничивает возможности применения такой анимации.

Во-вторых, количество кадров в секунду. Анимация GIF по этому параметру существенно уступает формату AVI. Если в формате AVI или FLV ролик можно записать с частотой 25 или даже 30 кадров в секунду, то в формате GIF получается не более 10, иначе анимация становится заметно медленнее, чем в самой программе Magic Particles. Поэтому при экспорте из Magic Particles нужно либо существенно уменьшать этот параметр, либо удалять часть кадров при конвертировании (например, ImageReady позволяет при конвертировании из AVI указать, что нужно пропускать, скажем, каждый второй кадр). Например, практически все анимации в примерах ниже имеют частоту от 7 до 10 кадров в секунду.

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

Flash Video (FLV)

Что это такое?

Формат FLV стал de-facto стандартом для трансляции потокового видео в сети Internet. Именно в этом формате хранятся ролики на YouTube и многих других сайтах.

Как это сделать?

Файл в этом формате можно также получить либо преобразованием из AVI, либо сборкой из отдельных файлов. Промышленным стандартом создания таких файлов является, разумеется, Adobe Flash, но если у вас этого монстра нет, то можно, опять-таки, применить специализированные утилиты. Для преобразования AVI, есть, например, бесплатная программа Riva VX, интерфейс которой настолько прост, что его можно освоить за пару минут. Не забудьте отключить опцию экспорта звука, который здесь не нужен.

Анимация с альфа-каналом самим форматом, в принципе, поддерживается, но вот беда: при экспорте из Magic Particles в AVI и последующем перекодировании в FLV она пропадает, поэтому для ее сохранения нужно собирать анимацию из отдельных кадров. С другой стороны, много вы видели видеофайлов с полупрозрачностью?

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

Что в этом хорошего?

Это полноценное видео. Формат FLV не имеет таких ограничений, как GIF: нет 256-цветной палитры, а количество кадров в секунду такое же, как у AVI (с поправкой на пропускную способность сети, разумеется).

Что в этом плохого?

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

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

В-третьих, вы не сможете использовать картинку как ссылку на другие web-страницы, если только разработчик этого скрипта не предусмотрел такую ситуацию (как показывает практика, разработчики практически никогда не предлагают таких услуг бесплатно).

В-четвертых, нужно, как и в случае с AVI, помнить о кодеках.

И на закуску: если для вставки GIF-анимации достаточно просто вставить стандартный тег <img…>, то проигрыватели FLV используют куда более изощренные схемы: либо нужно вручную написать в HTML многоэтажную конструкцию с тегами <embed…> и <object…> (причем параметры разных проигрывателей могут называться совершенно по-разному и иметь совершенно разный вид), либо использовать JavaScript, любезно предоставленный разработчиком. В любом случае, без какой-нибудь справки или readme для выбранного проигрывателя не обойтись (если, конечно, вы его не сделали самостоятельно).

Выводы

Каждый из рассмотренных форматов анимации хорош для своих целей. Формат GIF подходит для создания, например, эффектного заголовка (каких-нибудь «горящих» или «стекающих» букв), анимации небольшого размера, в которой не важна скорость проигрывания, а FLV — для полноценного видео.

На десерт: создание зацикленной анимации

Этот вопрос, наверное, волнует каждого, кто хоть раз пытался сделать баннер при помощи Magic Particles. Действительно, каждый спецэффект всегда имеет начало и конец, а нам бы хотелось, чтобы эффект повторился несколько раз подряд (или вовсе длился вечно) без видимых «мест склейки».

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

Решение этой задачи существенно зависит от типа анимации. Каждый из перечисленных ниже способов подходит для определенного типа.

Все примеры ниже позаимствованы со старого сайта Astralax. Я на их авторство не претендую.

Способ 1: Не делать ничего :)

Как бы странно это ни звучало, иногда самое простое — оставить все, как есть. Пусть спецэффект появляется и исчезает по своему «естественному закону».

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

Применимость: этот способ хорош в тех случаях, когда спецэффект имеет четко определенные начало и конец: взрыв, отдельная вспышка и т. п. Примеры такого эффекта:

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

Способ 2: Выделение последовательности

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

Примеры:

Применимость: этот способ подходит для таких видов анимации, в которых можно выделить такую частичную последовательность, что ее начало и конец можно зациклить.

Способ 2½: Дополнение последовательности

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

Примеры:

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

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

Способ 3: Редактирование видео

Этот способ уже описан Евгением Булатовым в статье Создаем огонь в редакторах частиц (часть 3). Способ основан на наложении частично прозрачных кадров. Это самый долгий и трудоемкий способ, но при умелом применении он позволяет получить прекрасные результаты.

Примеры: огонь, который горит на экране постоянно. «Пылающий» текст, «снегопад» и прочие тому подобные популярные эффекты.

Применимость: описанный Евгением способ имеет смысл в том случае, если на экране одновременно присутствует много мелких частиц, которые все вместе вписываются в определенную форму, как пламя в упомянутой статье. Кроме того, этот способ можно использовать в тех случаях, когда на экране частицы и так уже меняют свою прозрачность (плавно исчезают), и дополнительное изменение прозрачности не будет заметно.

А вообще, создание чего-то нового — процесс творческий, и нельзя слепо следовать каким-то рекомендациям.

С наилучшими пожеланиями, Михаил Демидов, 09.12.2008.

Обновлено 09.11.2015: вместо ссылок на давно уже не существующую галерею вставлены сами анимации, исправлены ссылки. — М. Д.