Фейерверк на Web-странице

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

Судите сами, уже в 1999 году Fireworks 2 работала не только с растровыми изображениями, но и с векторной графикой. Фактически, это был один из первых растровых редакторов такого рода. Графику можно было не только создавать, но и импортировать из форматов Corel Draw, Adobe Illustrator, Macromedia Freehand. К векторным объектам можно было применять разнообразные виды заливок и обводок, а также «живые эффекты» - тень, сияние и объем. Богатый набор опций и установок для отдельно взятого объекта можно было записывать как стили для повторного использования. В общем,  Fireworks 2 намного опередил свое время: другие графические редакторы только через пару лет начали использовать векторную графику на равных правах с растром (Photoshop 6, Illustrator 9, Paint Shop Pro 7…).

Сегодня речь пойдет о Fireworks 4. Я вспоминаю, как когда-то компания Macromedia отступила с рынка растровой графики для полиграфии, прекратив выпускать во многом интересный редактор XRes. Но пока другие программы боролись и укрепляли свои позиции на полиграфическом фронте, Macromedia произвела высадку морских пехотинцев на побережье Web.

Максимальная интерактивность

Fireworks 4 создает и оптимизирует статические Web-изображения, анимацию, баннеры, кнопки, системы выскакивающих меню и целые интерактивные страницы. Поработав на пробу в Fireworks, я пришел к выводу, что в нем можно создавать чуть ли не целые мультимедийные издания и презентации. Fireworks максимально расширяет интерактивные возможности растровой Web-графики, позволяя делать не только простые кнопочки, но и более сложные эффекты. К примеру, при нажатии на кнопку на странице меняется какое-то изображение. Достигается такая степень «оживленности» страницы, что дальше – только Flash. Одним словом, фейерверк и брызги шампанского…

Абсолютно без каких-либо знаний о DHTML и JavaScript можно реализовывать сложные интерактивные эффекты, которые весьма и весьма трудоемки при выполнении их вручную. Вот пример, сгенерированный с помощью Fireworks и демонстрирующий возможности пакета. Продукты от Macromedia очень любят превращать тяжелый ручной труд по созданию HTML-страниц в увлекательную игру, и Fireworks – не исключение, а подтверждение этого правила!

Итак, одна из самых выдающихся особенностей Fireworks – использование возможностей HTML и JavaSript на полную катушку без особых требований к умственным способностям дизайнера. Чтобы создать систему вложенных меню или «продвинутые» кнопки, не требуется знания JavaScript. Все происходит на уровне «перетащи сюда – брось туда». На выходе выдается Web-страница с набором графических файлов. Можно сделать страницу целиком, а можно использовать только код таблицы изображений, чтобы вставить его в свою страницу. При этом программа ухитряется создавать корректный код, работающий во всех основных браузерах. В этом, если вдуматься, нет ничего удивительного. Гораздо дольше, чем HTML, существует более сложный и более мощный язык разметки страниц. И, несмотря на то, что его корректная поддержка в графических программах весьма редка, люди предпочитают все же работать в этих программах, а не редактировать исходные коды. Конечно, вы догадались, что речь идет о языке PostScript. Впрочем, иногда полезно вручную править и его (а уж HTML и подавно).

Интерфейс

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

Работа в Fireworks может идти сразу в нескольких пространственных и временных измерениях. Один объект может находиться одновременно в нескольких фреймах, которые становятся кадрами при экспорте анимации в GIF или Flash. Фреймы могут служить и хранилищем для разных состояний кнопок и продвинутых ролловеров.

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

Объектно-ориентированная графика

Fireworks – объектно-ориентированный растровый редактор. Нет, это не опечатка. Все построено вокруг объектов, они – это все: векторные изображения, текст, фотографии. Несмотря на присутствие в программе слоев (аналогичных Photoshop), основной принцип – это объектно-ориентированная работа, как в любом векторном редакторе. Даже импорт растровых изображений реализован, как в векторных редакторах – после выбора файла вам предлагается щелкнуть и растянуть рамку для предполагаемых размеров объекта.

В одном слое может находиться несколько объектов. Щелчок мышкой сразу выбирает объект. Естественно, что объекты могут перекрываться, их порядок можно менять, а группы объектов можно выравнивать и распределять.

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

На заливку и обводку разработчики не поскупились. Начну с заливок. Они могут быть никакими, сплошными, диффузными, градиентными и паттерновыми. Диффузные состоят из мелких квадратиков 2х2 пикселя, сгруппированных парами. Цвет каждой пары выбирается из Web-палитры. Особенность диффузной заливки – эмулировать гораздо большее число цветовых оттенков, чем находится в Web-палитре, при этом, однако, оставаясь в рамках этой же самой палитры. При этом побочно достигается сверхмалый размер при сжатии выбранного объекта по алгоритму GIF. Сколько ни пробовал на достаточно больших размерах (для Web), на выходе получались файлы порядка килобайта и меньше!

Богатейший набор текстур, которые можно накладывать на заливку! Или заливку на них. Это пахнет чем-то более серьезным, а именно – легендарным уже пакетом Fractal Design Painter (ныне собственность Corel). Кроме этого, градиентные заливки и паттерны (фотографические бесшовные текстуры) можно интерактивно вращать и растягивать, как это делается в Corel Draw.

Обводки реализованы на растровом механизме и по возможностям приближаются к кистям в Painter. Хотя настраиваются они гораздо быстрее и используются с векторными объектами.

На концепции объектов строится и применение всяческих эффектов – от теней и сияния до цветокоррекции. Я бы сказал даже, что эффекты не используются, а «подключаются» к выбранному объекту.

Живые эффекты

Как объектный редактор, Fireworks хранит информацию об эффектах не в палитре слоев, а в специальной контекстной палитре «Effects». Выглядит она так, как если бы часть палитры слоев Photoshop вынесли в отдельное окно. Так что, если у вас есть опыт работы с живым эффектами в Photoshop, вам все покажется здесь знакомым. Я давно заметил, что фирме Macromedia следовало бы назваться Mimicromedia – от слова «мимикрия», так часто она любит придавать своим продуктам черты интерфейса других программ. Не в этом ли секрет успеха – использовать известную заготовку и добавить еще что-нибудь свое?

К примеру, список живых эффектов Fireworks по умолчанию превосходит в несколько раз такой же список Photoshop (см. рис.1). А еще можно взять plug-ins, разработанные якобы для Photoshop, и подключить их! Можно просто зайти в опции и указать папку, где хранятся уже установленные plug-ins Photoshop. На месте Adobe я бы уже давно взимал почасовую плату за пользование этой папкой. 

Рис. 1

Кроме стандартных эффектов для кнопок (даже не буду называть их), есть эффекты цветокоррекции и др. Очень похожие возможности имеются в Adobe Illustrator 9. Но я заметил, что Fireworks работает более оптимально. Почему?