Технологии векторной графики в Сети

Часть первая

«Меня кормят идеи», — именно этой крылатой фразой часто заканчивал Остап Бендер свои рассуждения о жизни. За прошедшее с тех пор время ценность новаторских идей многократно возросла, что особенно заметно в таких высокотехнологичных областях, как передача информации в Интернете.

Ограничения на скорость передачи данных при обычном подключении не всегда позволяют комфортно просматривать сайты со статичной графикой, не говоря уже о насыщенных динамикой web-страничках. Решением этой проблемы несколько лет назад занялись ряд компаний, начав разрабатывать новые способы доставки контента по Сети. И неизвестно, как в дальнейшем сложилась бы судьба небольшой программы Джонатана Гая, не обрати на нее внимание Macromedia. Эта покупка кардинально изменила лицо Всемирной сети, став инструментом для создания привлекательных, динамичных страниц с использованием звука и видео. Первоначальное название редактора для создания векторной анимации (Future Splash Animator) дало имя новой технологии — Flash.

Кроме Flash, сейчас активно развиваются и другие технологии, основанные на векторном представлении объектов. Все сильнее ощущаются попытки Adobe привлечь внимание дизайнеров к своему детищу — технологии SVG (Scalable Vector Graphics), которая с учетом финансовых возможностей Adobe будет представлять явную угрозу благополучию Macromedia.

Относительно недавно начали возникать различные технологии передачи трехмерной модели объектов с последующей их визуализацией в окне браузера (тоже в векторном виде). Отметим разработку компании Viewpoint — Metastream как наиболее доведенную до коммерческой стадии.

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

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

Разумеется, наряду с обычными векторными объектами, во Flash можно применять растровые изображения (поддерживается не только JPEG, GIF, но и PNG с неоднородной прозрачностью), а возможности использования мультимедиа позволяют включать в ролики звук (WAV, MP3) и видео (QuickTime mov, AVI).

Безусловно, знаковый момент — поддержка языка написания интерактивных страниц ActionScript (похожего на JavaScript), в результате чего легко создается интерактивная анимация и пишутся довольно сложные сценарии. Именно это и послужило катализатором продвижения технологии на рынок, поскольку привлекло к Flash внимание солидных разработчиков.

Колоссальное преимущество Metastream — несоизмеримая с другими технологиями реалистичность и зрелищность изображения (достигается практически фотографическое качество — с бликами, затенением полигонов, тенями). Особый интерес представляет обзор модели с разных сторон и даже просмотр ее изнутри.

Сферы применения Сейчас уже нельзя представить без Flash сайты крупных производителей товаров или услуг: возможностей HTML совершенно недостаточно для создания привлекательных образов (впрочем, перед ним и не ставилась такая задача), а DHTML и JavaScript лишь частично снимают ограничения обычного языка разметки. Flash значительно разнообразит форму подачи информации, что играет существенную роль в раскрутке сайта, закреплении за ним целевой аудитории и поддержке определенного имиджа компании. Принципиальное значение возможности технологии имеют для производителей спортивной одежды (Nike, Adidas). Среди компаний, активно использующих Flash, — производители предметов роскоши (Dior, Lancome, Versace), автомобилей (Mercedes, Jaguar), мультфильмов (multi.ru), индустрия развлечений (disney.com) и on-line-игры.

Основных сфер применения векторной графики в Сети несколько. Самая широкая — создание интерактивных интерфейсов с различными визуальными и аудиоэффектами (кнопки, выплывающие списки-меню, объекты, меняющие свои свойства при наведении мышки). Вторая — создание полноценных анимационных роликов с участием мультипликационных персонажей. Нельзя обойти вниманием и значительное увеличение числа проектов, связанных с on-line-играми на Flash. Что касается технологий доставки трехмерного контента, то они нашли свое применение у производителей автомобилей (Ford, Subaru, Volvo), спортивных товаров, в риэлторских агентствах, студиях дизайна помещений и при создании карт местности с передачей объемности ландшафта.

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

Flash

Принцип работы Основную роль во Flash играет анимация. Существуюет несколько способов ее создания: покадровая (каждый раз изображение движущегося объекта рисуется заново) и по ключевым кадрам — (программа просто создает плавный переход (Tween) из одного опорного кадра (keyfrаme) в другой).

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

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

Инструменты Практически все известные производители ПО обзавелись инструментами, создающими векторную графику для Интернета. Пионер в этой области — Macromedia Flash, недавно вступили на этот путь Corel R.A.V.E. и Adobe LiveMotion. Среди менее именитых определенной популярностью пользуются Swish и Insane Flash Animator.

Во вторую группу приложений, принцип работы которых основан на «костях», можно зачислить Creature House Expression, KoolMoves от Lucky Monkey Designs и Lost Marble Moho. Основательностью отличается ToomBoom Studio, созданная специально для профессиональных аниматоров.

Существует и целый набор утилит, предназначенный исключительно для создания эффектов (Wildform, Flax разработки Goldshell Digital Media, CofeeCup Firestarter). Они нашли применение в виде баннеров либо используются в составе сложной анимации.

Особое место занимают редакторы, предназначенные для конвертации трехмерных моделей в формат SWF: Ulead EnVector, Vecta 3D от IdeaWorks3D и Swift 3D разработки ElectricRain. Сюда же можно отнести модули, подключаемые непосредственно к специализированным 3D-приложениям и преобразующие трехмерную модель в плоское векторное представление (дополнительный модуль этих же разработчиков).

Именно в такой последовательности мы и рассмотрим особенности работы с ними.

Интерактивный графический интерфейс

Инструменты для создания графического интерфейса — наиболее широкий класс flash-ориентированных редакторов. Интерактивные кнопки, всплывающие меню, разнообразные полосы прокрутки, передвигающиеся элементы, использование звука — вот неполный перечень их возможностей. Естественно, здесь стандарт de-facto — Macromedia Flash. На сегодня с ее потенциалом в области создания сложных интерактивных роликов ни одна другая программа сравниться не может.

Macromedia Flash

Еще совсем недавно компания Macromedia была известна, в основном, благодаря векторному редактору FreeHand. Сосредоточившись исключительно на решениях для Сети, она стала одним из влиятельнейших игроков в этом сегменте рынка, по финансовым показателям уступая лишь самой Adobe. Главную роль в этом сыграл успех редактора Flash.

В первых версиях на него практически не обращали внимания. Но начиная с четвертой, когда в редактор была встроена поддержка Action Script, значительно расширившая стандартные возможности, интерес со стороны серьезных разработчиков возрос. Сейчас доступна уже шестая версия — Flash MX — эталон для многочисленных последователей. Она предлагает непревзойденные средства создания объектов, наделения их специфическими свойствами и удобства реализации сложной анимации.

Создание объектов Интерфейс Flash выдержан в стиле всех продуктов Macromedia, что дает преимущество их пользователям. Возможности программы привлекают к ней как приверженцев специализированных векторных программ, так и обычных художников, не владеющих принципами работы со сплайнами. Для первых окажутся незаменимыми средства редактирования кривых на уровне точек и сегментов. Для художников — удобная работа с оригинальным инструментом Brush tool, имеющим аналог в растровых редакторах: при рисовании одного объекта поверх другого программа автоматически подрезает нижележащий, одноцветные объекты объединяются в один.

Если вы все же предпочитаете создавать заготовки в специализированных программах (Adobe Illustrator или Macromedia FreeHand), то с внедрением их во Flash никаких проблем не возникнет: эти документы программа понимает напрямую. Что касается CorelDRAW, то файлы CDR придется предварительно конвертировать в EPS, AI либо EMF/WMF.

Flash MX предлагает беспрецедентные возможности по созданию интерактивных сайтов

Анимация Анимация во Flash построена на использовании ключевых кадров. Поддерживаются оба типа — motion tween (без изменения формы объекта на уровне отдельных точек) и shape tween (с изменением формы, другое название — морфинг). Анимироваться могут все параметры — а их предостаточно (Еffects): яркость, цвет, прозрачность. Объекты могут двигаться по прямой линии или по указанному пути (motion path), с ускорением или замедлением (easy in/easy out).

Очень удобно пользоваться библиотекой (Library) — все объекты в ней можно объединять в группы с тем, чтобы часто используемые постоянно находились под рукой. Весьма полезна при создании ролика операция замены одного объекта на другой с сохранением всей ранее присвоенной ему анимации. Объекты в Library могут иметь вложенную анимацию, что позволяет избежать чрезмерного загромождения основной панели ролика Timeline.

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

По сравнению с аналогичными редакторами, объем получающихся роликов наименьший — есть смысл пересохранять SWF-файл из Macromedia Flash.

Язык сценариев Одно из основных преимуществ технологии Flash — восприятие и адекватная реакция на действия пользователя. А поскольку сейчас без интерактивности — никуда, то в редакторе стоит на вооружении значительно расширенный в последней версии язык сценариев ActionScript. Теперь стало значительно проще разрабатывать интерактивные игры, опросные формы и даже системы, действующие в режиме реального времени (чаты).

Недостатки Как и в любой программе, во Flash есть недостатки, порой приводящие к серьезным последствиям. Иногда объекты произвольно смещаются на один пиксель — видимо, тут виновата ошибка округления (для отображения на экране векторные объекты преобразуются в битовые образы). Несмотря на вроде бы незначительнyю величину, сдвиги весьма заметны, а избавиться от них удается не всегда.

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

Поскольку Flash имеет свойство временами «сваливаться», желательно сохранять результат через определенные промежутки времени.

Corel R.A.V.E.

Прекрасно сознавая перспективность технологии Flash, руководство Corel решило закрепить за пакетом Draw славу универсального и дополнило его десятую версию еще одним редактором — R.A.V.E. (Real Animated Vector Effects — «настоящие анимированные векторные эффекты»), который дает возможность создавать flash-ролики без приобретения дополнительного ПО. В общем-то, стремление благородное, но при работе с программой складывается впечатление, что разработчики решили особо не мудрить и не ставили целью хотя бы приблизиться к Flash.

Преимущества Поскольку R.A.V.E. создавался на основе популярного графического редактора, то для тех, кто привык к CorelDRAW, проблем освоения не возникнет: инструменты, докеры, клавиатурные сокращения, работа с цветом — точная копия широко известного редактора. Соответственно, R.A.V.E. имеет практически все возможности CorelDRAW, что позволяет использовать всю мощь родительской программы для создания анимированных эффектов любой степени сложности. Однако при работе с ним нужно иметь в виду, что некоторые функции реализованы иначе. Например, вы не найдете упоминания о символах, хотя программа их поддерживает — просто разработчики внесли в DRAW минимум изменений, потому функция прячется под редко кем используемой командой Clone.

Манера создания анимации практически не отличается от принятой в Flash, но в R.A.V.E. при создании объекта слой появляется автоматически, избавляя нас от рутины.

В пакете R.A.V.E. — до боли знакомый интерфейс продуктов Corel

Недостатки Основных недостатков в программе два, но они очень существенны. По большому счету, от того, сумеют ли разработчики решить эти проблемы в следующих версиях, зависит будущее редактора. Во-первых, в R.A.V.E. отсутствует панель, в которой отображались бы все свойства объекта и его анимации в определенном кадре (как это сделано во Flash). Например, управление параметрами движения с ускорением/замедлением, наглядное во Flash, в R.A.V.E. — задача нетривиальная. Поскольку движение объектов — ни что иное, как Blend, то и настройки этого эффекта нужно искать, выбрав инструмент Interactive blend. Что, мягко говоря, не совсем удобно. А как просто узнать, движется ли объект с ускорением?! Нельзя ввести и точные значения параметров — только с помощью движков. Несколько скрашивает ситуацию возможность показа фаз движения (Show Onion Skin), но она не решает ряда других проблем.

Второй существенный недостаток — не блещущие разнообразием интерактивные возможности программы. R.A.V.E. позволяет лишь создавать интерактивные кнопки (они могут иметь три положения — Normal, Over, Down), работает со звуком и поддерживает гиперссылки. И никакой поддержки пользовательских сценариев — обязательного атрибута более-менее приличного аниматора.

Adobe LiveMotion 2

Два года назад, когда баталии с Quark за сердца верстальщиков еще только начинались, Adobe замахнулась еще на одно направление, перспективность которого она в свое время недооценила. Решив перетянуть часть рыночного flash-пирога на себя, руководство графической империи бросило немалые силы на выпуск конкурента Macromedia. В отличие от других редакторов, LiveMotion имеет все предпосылки, чтобы в будущем им стать. Большой опыт Adobe по созданию программ для анимации (например, After Effects) должен помочь в продвижении продукта для Интернета.

Как и следовало ожидать от создателя Illustrator и Photoshop, в распоряжение аниматора предоставлен полный набор средств для создания векторных объектов — базовые примитивы и знакомый по другим продуктам инструмент Pen. LiveMotion поддерживает фильтры Photoshop — но это весьма спорное преимущество, поскольку растровые изображения в технологии Flash применяются в крайних случаях. Положение несколько скрашивается анимацией фильтров, однако не распространяется на анимацию, что оставляет двойственное впечатление. Существующая палитра стилей — скорее дань моде на автоматизацию и, по большому счету, мало применимо при творческой работе.

Самые значительные отличия от Flash — в анимации. Неоднозначное отношение вызывает панель сценария Timeline — здесь нет избыточности Flash (представлены только опорные кадры), но по ней неудобно визуально синхронизировать события (отсутствуют маркеры границ кадров). Timeline в LiveMotion удобна, если нужно узнать, что происходит с объектом в любой момент времени (все трансформации отображаются в виде отдельных слоев в этой палитре), но это плохо сказывается на удобстве управления сложной анимацией. Отсутствие фильтров, отсортировывающих трансформации по какому-то признаку (как в 3D-пакетах), приводит к чрезмерному загромождению экранного места.

Успех первой версии был более чем скромным. Два года, потраченные на разработку новой версии, не пропали даром: в начале года вышла очередная версия LiveMotion, значительно отличающаяся от своей предшественницы. Видимо, из всех альтернативных разработок именно она составит достойную конкуренцию Flash.

Если вы уже работали с After Effects, в LiveMotion проблем возникнуть не должно

Среди основных нововведений — развитые функции создания и отладки пользовательских сценариев, на порядок улучшающие интерактивную составляющую онлайновых проектов. Для не обладающих достаточными навыками программирования на JavaScript или ActionScript Adobe предложила инструмент LiveTabs, при помощи которого в удобной форме, не касаясь кода непосредственно, создаются собственные сценарии. Через сервер AdobeXChange можно обмениваться с другими разработчиками. Стремясь к тесной интеграции всех своих продуктов, Adobe включила непосредственную поддержку слоев Photoshop, которые после импорта становятся обычными объектами LiveMotion. Список выводных форматов дополнился преобразованием видеоклипов в формат QuickTime.

Как и в R.A.V.E., нет необходимости каждый раз создавать новый слой для объектов — они автоматически генерируются сами. Для каждого цвета программа подбирает гармонирующие сочетания, что облегчает поиск оттенков для выбранной цветовой гаммы.

К недостаткам отнесем отсутствие поддержки морфинга объектов (для этого предлагается использовать Illustrator). Непонятна позиция Adobe в вопросе поддержки SVG — ратуя за него, руководство, тем не менее, не включило его поддержку в редактор. Осталась без изменений панель сценария — если вы раньше не работали с Adobe Premiere, то вряд ли сможете привыкнуть к LiveMotion. Нельзя признать удачной и реализацию самого процесса анимации. Вместо того, чтобы просто производить какие-то действия над объектом, приходится сначала явно указывать характер операций, отмечая соответствующее поле в панели сценария. При интенсивной работе над роликом, состоящим из большого числа объектов, постоянные метания по огромному дереву сценария могут привести к поиску более подходящего редактора.

* * *

Кроме маститых производителей, свое место под солнцем стараются занять и менее известные разработчики ПО. Среди них выделим двух — DJJ Holdings и Insane.

DJJ HoldingsSwish 2

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

Swish наступает на пятки Macromedia Flash

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

Интерактивные возможности Swish сосредоточены в закладке Actions. В программе можно определить реакцию на стандартные события типа движения мышки. Набор Actions — хорошо известный по Macromedia Flash.

Insane 3D Flash Animator

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

Основа — огромная панель свойств, в которой собраны все необходимые элементы управления. Для создания любого объекта служит кнопка Add an element, после чего появляется его собственное поле в панели сценария. Там же отображаются все действия пользователя. К сожалению, TimeLine необоснованно коротка, к тому же управление поведением и временными характеристиками объектов — только через окна диалога.

В новой версии список возможностей пополнился еще и корректной работой с трехмерными моделями (в названии появилась приставка 3D). Импортированная модель может быть модифицирована (доступ на уровне вершин), после чего анимируется, как и обычный плоский объект. При экспорте она превращается в свою двухмерную SWF-копию.

Самый большой недостаток программы — интерфейс. Представьте, все (!) операции реализованы в виде «иконок», внешний вид которых имеет мало общего с производимым действием. Думаю, внешний вид инструмента должен способствовать настройке на творческий лад, чего никак нельзя сказать о Flash Animator.

Об авторе: Михаил Борисов (mborisovv@yahoo.com) пишет для Publish обзоры программного обеспечения и полезные советы по допечатной подготовке.