В продолжение сказанного в одной из предыдущих заметок, рассмотрим еще один способ представления графического контента в Сети. На этот раз коснемся векторной графики, и, естественно, опятьхтаки на примере родной и близкой мне области - картографии, в первую очередь - геологической.
Векторная форма графики - естественна для таких ее видов, как карты, схемы, диаграммы, словом, все то, что хотя бы теоретически построенно на количественных данных (или должно бы быть на них построено). Однако до недавнего времени в Сети царили и процветали исключительно растровые форматы. Исключение - всякого рода on line картография, основанная на построениях в программах (вернее, программных комплексах) вроде GMT (Generic Mapping Tools) и прочем укзоспециализированном софте. А ведь выдвать в итоговом документе карту в формате GIF (или, паче того, JPEG) - это все равно, что помещать таблицу экспериментальных результатов, определнных с точностью до ангстрема, округленно до аршина.
Особенно остро вопрос адекватного представления стоял перед графикой типа геологической. Разного рода программами (типа Surfer'а или более специальных Image Pricessor, например, ERMapper'а) можно получить весьма интересные картинки из совмещения растровых (аэро- или космоснимки, в том числе спектрозональные) и векторных (результаты дешифрирования аэрокосмофотоматериалов, откартированные в поле геологические границы и т.д.) изображений. Картинки эти несут не только иллюстративную функцию, но позволяют получать данные, принципиально недоступные другими методами.
Публикация такого рода материалов в традиционной форме невозможна или технически очень сложна (и, соответственно, финансово обременительна). Казалось бы, самое место для них - сетевые издания on line, последнее время интенсивно развивающимися (не могу отказать себе в удовольствии сослаться на одно из первых таких изданий в области нацук о Земле - Виртуальную геологию). Однако тут-то все и упиратеся в формат представления: в форме GIF'а, такие изображения теряют информативность в своей растровой части, в форме JPEG'а - в векторной и текстовой. И, к тому же, не допускают масштабирования. А ведь разномасштабность просмотра - основа геологической графики испокон веков...
Возможность масштабирования заложена в формат DjVui, описанный в одной из моих предыдущих заметок. Однако он исходно предназначен для несколько дургих целей (представления сканированных изображений, совмещенных с текстом) и при приемлемом качестве картинки дает относительно большой размер файла. К тому же он пока довольно экзотичен и поддерживается далеко не всеми web-серверами.
Поэтому можно только приветствовать усилия фирмы Macromedia по внедрению первого широко распространенного сетевого векторного формата - Shockwave (*.swf). Инструментом для его создания является программа Macromedia Flash (текущая версия - 3). Она доступна на сайте фирмы в виде 30-дневного trial'а. Цена при покупке через Интернет - около 300 американских рублей. В России перед кризисом продавалась предыдущая (2-я) версия. Ныне, судя по поискам в Сети, ей никто не торгует (по крайней мере в Москве).
Дистрибутив Macromedia Flash - самораспоковывающийся архив объемом около 8,5 мегабайт. Запуск его приводит к иснталляции всего программного комплекса, включающего, помимо собственно Flash, также Aftershock (средства для включения swf-файлов в html), стандартный плейер для воспроизведения swf-файлов и серию дополнительных плейеров, в том числе для проигрывания swf-файлов средствами Java.
В первый раз инсталляция проходит без проблем. Однако второй раз утсановить программу с того же exe-шника, как правило, не удается. И по окончании 30-дневного срока всякого рода стандартные средства, вроде откручивания системных часов, не помогают. Гарантированно повторить процедуру инсталляции можно форматированием винчестера и скачиванием нового экземпяра программы. Впрочем, есть и другие решения...
Тем не менее, возвращаемся к нашим баранам. Flash и все сопутствующие компоненты
- установлены. Запускаем программу, то есть собественно инструментарий. Видим
картинку, сходную с этой (рис. 1; разумеется, без загруженной в главном окне
картинки):
Здесь можно видеть основные элементы интерфейса Macromedia Flash (далее - MF). К ним относятся: главное окно, или сцена (это то, где картинка), панели инструменов - стандартная ниже строки меню и панель рисования справа (и та, и другая - могут быть плавающими или фиксированными), управляющая панель и timeline (как это выразиться по русски - в данном случае не знаю). Все эти элементы и определяю возможности программы.
Возможности эти широки и многогранны. Стандартная панель содержит столь жестандартные для всех виндусовых программ кномки - создания и открытия файла, его записи, печати и предварительного просомтра, вырезания, копирования в буфер и вставки, undo и redo. Из специфических для программы - кнопки включения-отключения привязки к сетке, сглаживания и спрямления кривых (smooth и straighen, соответственно), вращения, масштабирования и выравнивания объектов, ниспадающее меню масштабирования изображения (допускающее ввод произвольного значения в процентах).
С помощью drawing panel можно:
Все кнопки сопровождаются всплывающими подсказками (впрочем, это можно и отключить).
Естественно, все манипуляции кнопками дублируются через меню. Более того, только через меню доступен ряд действий. Так, кнопка Paste помещает скопрированный или вырезанный объект со смещением относительно первоначального положения. Чтобы поместить его в то же самое место (например, на другом слое, о чем написано далее), надо выбрать пункт меню Edit-Paste in Place.
Вообще, следует сказать, что рисование и редкатирование рисунка идеологически весьма отлично от привычного, скажем, по Corel Draw. Чтобы изменить форму линии (неважно, прямой или кривой), не нужно оперировать узелками: просто хватаете линию в произвольном месте и тянете в нужном направлении (только не следует выделять линию - в этом случае она просто переместится). Отрезки геометрических фигур (например, стороны прямоугольника) - некоторым образом выступают как отдельные объекты: одинарный щелчок на стороне прямоугольника приводит к выделению только ее, после чего она может быть перемещена независимо от остальных сторон. А для того, чтобы выделить весь прямоугольник как единый объект, нужно дважды щелкнуть в любой его точке.
Разумеется, щелчок правой кнопкой мыши на объекте дает доступ к некоторым его свойствам, набор которых также не вполне обычен (за исключением copy, cut и paste): это вращение и масштабирование (без этого просто выделенный объект масштабированию не поддается), сглаживание и спрямление.
Момимо создания изображений непосредственно во Flash'е, предусмотрены некоторые (на мой взгляд, довольно убогие) возможности импорта готовых изображений. Импортируются Windows Metafile (*.wmf, в точ числе - Enhanced, *.emf), из векторных форматов - Abode Illustrator (*.eps и *.ai) и AutoCAD Exchange (*.dxf), из растровых - JPEG, GIF и PNG. Удивляет отсутствие в первом случае формата родной Макромедиевой рисовалки - FreeHand'а, во втором - стандартного для растровых редакторов TIFF'а. Непонятно, почему враждебный Illustrator спдобился попасть в список понимаемых форматов, а много более распространенный PhotoShop - нет.
Наконец, переходим к тому, что собственно и создает своеобразие программы - слоям и кадрам (Layer и Frame, соответственно).
Слои концептуально примерно сходны с таковыми в CorelDraw. Каждый слой имеет четыре состояния - текущий (Current), нормальный (Normal), защищенный (Locked) и скрытый (Hidden). Ну, с последними двумя все ясно (по аналогии с Corel'ом). А в отношении первых двух есть тонкость. Выделять, копировать, вставлять, удалять объекты - можно на каждом из них (так что будте внимательны - если Вы дали команду Select All и затем Delete - уничтожено будет все нескрытое и незащищенное; впрочем команда undo имеется; уровней отмены по умолчанию 20, но установить их можно, через меню File-Preferences, вплоть до 200). Можно также модифицировать объекты на нормальном слое (скажем, вращать, масштабировать, изменять атрибуты и прочее). Однако рисовать можно только на текущем слое. Не вполне логично, как мне кажется, но привыкнуть можно.
С кадрами все также более или менее понятно. Кадр можно вставить и удалить; вставляется пустой кадр справа от текущего, так что перед первым кадром ничего поместить нельзя. Кроме того, кадр (или группу кадров) можно скопировать и вклеить. Последнее может быть произведено в любом месте - не обязательно, скажем, после последнего кадра; в этом случае поространство между последним кадром и вклеенным щаполняется пустыми кадрами. Следует заметить, что если у Вас многослойная структура, и надо точно скопировать ее в другом месте, в точке копирования следует выделить все имеющиеся слои, а в точке вклейки - ровно столько слое, сколько их было в точке копирования, иначе вся структура поплывет.
Кроме того, во Flash'и есть поняте сцены (Scene). Оно примерно аналогично понятию страницы в CorelDraw старших версий (начиная с 5-й, если мне не изменяет память). Однако, в отличие от последнего, в каждой сцене может быть свое, произвольное, количество слое (и, разумеется, кадров). При проигрывании swf-файла (об этом - дальше) сцены воспроизводятся последовательно, начиная с первой.
Что же можно делать с помощью описанных средств? Да почти все, что угодно. Вернее, все, на что хватит рисовального умения). Располагая подходящим иструментом (например, графическим планшетом типа Wacom'а) и достаточным количеством времени, можно создавать сколь угодно сложные анимации. Однако главная особенность программы, делающая ее уникальной - интерактивность и web-ориентированность. Реализуется она путем создания символов (пункт Create Symbol в меню Insert).
В символ может быть преоразован любой элемент - линия, фигура, текстовый блок, их группа и даже целый кадр. Символов - два вида: график и кнопка; кроме того, из анимированной последовательностии может быть создан клип.
После создания графика и кномпки контекстное меню объекта (вызываемое правой клавишей мыши) дополняется двумя пунктами: редактирования (Edit) и свойств (Properties). В свойствах графика можно определить, в частности, цветовые эффекты, такие, как яркость, прозрачность, цветовой балланс. А редактирование осуществляется точно также, как и любого другого рисованного объекта.
Более разнообразны свойства кнопки. Помимо цветовых эффектов (аналогичных таковым графика) ей можно приписать некие действия (Actions). Среди них - считывание клипа, его проигрывание и остановка и др. И главное - вызов некоторого файла (Get URL), как локального, так и удаленного; к сожалению, никакого броузинга не предусмотрено, адрес надо вводить вручную на память или копировать из буфера.
Редактирование кнопки также более разнообразно. Помимо редактирования облика (аналогично любому другому объекту), кнопке можно приписать события по положению мыши: вне кнопки (Mouse Up), над кнопкой (Mouse Over), при нажатии на кнопку (Mouse Down) и при покидании кнопки (Mouse Hit). Каждая из этих позиций может иметь свои очертания кнопки, ее цвет, соответствующую надпись и атрибуты последней. В общем, примерно также, как это делается программированием в Java или в Java-приложениях типа Button Factory. Получается довольно эффектно...
Об клипах пока не напишу ничего, так как проблему эту еще не изучил. Повода не было. будет - изучу и напишу, соответственно.
Все созданное в Macromedia Flash записывается в ивде файла формата *.fla. Который никем, кроме нее же самой, не понимается. Чтобы обратить свое творение лицом к внешнему миру, его надо экспортировать. Экспортировать можно отдельную картинку (то бишь кадр) или последовательность кадров. В первом случае мы выбираем File-Export Image. Здесь у нас выбор: Shockwave Flash, естественно, Future Splash (это тот флэш, когда он еще не был Макромедией), метафайлы обоего рода, Encapsulated PostScript (*.eps) и Adobe Illustrator (*.ai), DXF, известный, и несколько растровых форматов - BMP, JPEG, GIF и PING (TIFF опять почему-то отстутствует). Таким образом мы сохраняем либо весь продукт нашего рисования (если он - однокадровый), либо - текущий кадр (слои, при этом, естственно, склеиваются воедино, первый - оказывается самым нижним).
Если нам нужно экспортировать последовательность кадров, то есть созданную нами анимацию (или интерактивную схему с кнопками), следует выбрать File-Export Movie. Здесь у нас выбор весьма богат: во первых, конечно, собственно Shockwave (*.swf), затем - анимированный GIF, AVI и последовательност кадров во всех тех формататх, которые были перечислены в предыдущем абзаце. Тое сть для сохранения всех элементов анимации не надо записывать каждый ее кадр в отдельности. Или заниматься чем-то вроде фрэймового граббления. Что неплохо.
Наибольший интерес, естественно, представляет экспорт в родной формат Shockwave. Ведь ради этого все и затевалось, не так ли? Тут нам предлагаются опции: считывать экспортированную картинку сверху вниз или снизу вверх (не так бессымслено, как кажется - если иллюстрации не попадают в первый экран страницы, логично считывать их снизу вверх, параллельно загрузке прочих элементов), генерировать ли отчет, защищать ли от импорта (от команды Save as в браузере, о чем - также позднее), степень сжатия JPEG (я не сказал, что все импортированные растровые картинки Flash приводит к JPEG'у, по умолчанию стоит JPEG-сжатие 50).
Можно также указать параметры аудиоявлений. Я также не сказал, что фрэйму или символу, в т.ч. кнопке, можно приписать звуковое сопровождение. И в комплекте с программой следует некий набор звуков (весьма устрашающих, на мой взгляд). Я звуковыми эффектами не пользовался, и потому ничего на эту тему не скажу.
Здесь же можно указать, в какой версии Flash сохранять конечный файл (на выбор - от первой до последней, то есть третьей). Смысл этого - в том, что браузеры до 4-ых версий 3-й Shockwaveмогут не понять, а предыдущий - могут. Впрочем, не згнаю, говорю с чужих слов...
В итоге всех этих манипуляций мы получили файл в формате Shockwave (*.swf).
Сам по себе он тоже никем особенно не понимается (кроме продуктов Macromedia).
Однако он может быть встроен в html-файл. Для этой цели служит программа под
названием AfterShock, автоматически утанавливаемая при инсталляции Macromedia
Flash. При запуске она выглядит примерно так:
Замечу, что окно программы не масштабируется - либо именно так, как на скриншоте, либо - на полный экран.
Первое действие здесь - добавить файл, либо swf, либо html (последнее - вслучае, если он уже содержит вставку swf).
Затем нужно определить установки экспорта, такие, как замена Shockwave (в случае непонимания его браузером) анимированными GIF'ом, например. Здесь же можно указать на необходимость автоматической инсталляции соответственных plug-ins'ов.
Следующий шаг - установка параметров страницы: можно выбрать между фиксированным размером (в пикселях) и размером в процентах от открытого окна браузера. В первом случае надо указать значения ширины и высоты. Во втором - изображение будет автоматически масштабироваться в зависимости от размера окна пользовательского браузера.
Затем - устанавливаем условия прокрутки: цвет фона, непрерывность прокрутки, качество и т.д. Качество определяется от Low до High. Следует учесть, что более высокое качество предьявляет большие требования к мощности клиентской машины.
В следующей закладке можно прописать параметры альтернативного изображения (для браузеров, не понимающих Shockwave), то есть GIF'а, статического или анимированного. И последняя закладка - параметры генерации классов Java для подмены Shockwave. В принципе, все swf-файлы можно воспроизводить через Java (для пущей межплатформенной совместимости).
Произведя все эти манипуляции (их можно проделать для группы файлов в директории, выбрав для этого в Preferences режим Batch Processing), следует записать файл. Если в самом начале мы выбрали Add Shockwave, будет автоматически создан html-файл с именем, повторяющем имя swf-файла. Если же был добавлен html-файл, при записи нас спросят - перезаписать его или добавить новый swf к уже существующему. Таким образом на одной странице может быть размещено любое количество swf'ов в произвольном порядке. Следует только заметить, что не на всех серверах корректно воспроизводится более одного swf'а, что зависит от настроек сервера. Чертовы Куличики, где Вы читаете эти строки, являются примером правильной поддержки Shockwave на сервере.
Вот и все. Осталось только смотреть на свое произведение и радоваться собственной гениальности.
Впрочем, Вы то смотреть можете - ведь плейер для Shockwave установился автоматом при инсталяции Flash'и. А как быть остальным?
А остальным требуется plug-in для Netscape Navigator или компонент ActiveX для Internet Explorer. Теоретически рассуждая, если были проставлены соответствующие опции в Shockwave, браузеры четвертых версий при первом же обнаружении swf должны автомтически коннектиться с узлом Macromedia и устанавливать соответствующие элементы прозрачно для пользователя. Иногда они так и делают. Однако, скажем, если в IE у пользователя включена высокая или средняя степень защиты (а обычно так и есть по умолчанию), инсталляция plug-in'а не пройдет до конца. А в следующий раз автоматической инсталляции уже не будет, поскольку какие-то ошметки от первой - в Регистре уже прописались. А в Navigator'е автоматической инсталяции вообще как правило не происходит. Требуется провести ее вручную.
Как? Во первых, скачать соответсвующий plug-in с сайта Macromedia (это самораспаковывающийся архив объемом около 300 килобайт). Во вторых, отключить защиту в браузере. Во третьих, запустить файл на исполнение. Все. Приходи, кума, радоваться.
|
Панель с кнопками
|
Анимированный баннер
|
Карта с растровой подложкой и анимированными границами
|
|
| Файл *.swf, кбайт |
8,6
|
2,3
|
482
|
| Файл *.gif, кбайт |
8,7*
|
11,5**
|
520**
|
* - статичный GIF
** - анимированный GIF
В 5-м Explorer'е поддержка Shockwave предусмотрена изначально. По моему, она включается при инсталяции по умолчанию. Если же нет - возможно, придется переустановить IE или же поступить вышеописанным способом.
При загрузке html-файла с swf-вставкой мы некоторое время видим пустую рамку. Да, я забыл сказать, что файлы Shockwave, как правило, получаются очень компактными, несколько меньше альтернативных статичных GIF'ов и уже безусловно меньше GIF'ов анимированных, как можно видеть из таблицы.
После загрузки swf-вставки щелчок правой клавишей мыши вызывает контекстное меню, позволяющее
В принципе, Flash предназначена для создания всякого рода интерактивных элементов интерфейса web-страниц. Прекрасные примеры ее применения в этом качестве можно видеть на сайте Взгляд на цифровую фотографию. Однако я нашел для нее другое применение (хотя, возможно, это и есть забивание гвоздей микроскопом). А именно представление картографических материалов, совмещающих растровые и векторные элементы. Тем не менее, именно на этом примере я и хотел бы рассмотреть процесс сохдания документа Shockwave.
Предположим, мы имеем некий результат обработки цифровых карт высот (формат GTOPO30 DEM), как это описано в одной из предыдущих заметок. А именно, shadow map в формате Surfer'а. Это bitmap-картинка в градациях серого, с некоторыми векторными элементами. Открываем ее в Surfer'е и копируем в буфер (если, естественно, она туда лезет).
После чего открываем Flash. Для определенности, создаем новую Movie. Определяем ее параметры (через пункт меню Modify-Movie), то есть задаем частоту кадров (минимально - 1 кадр/с), размеры (скажем 800*600 пикселей), цвет фона, шаг сетки и т.д.
Затем помещаем туда содержимое буфера. При этом растровая часть картинки (то есть собственно shadow map) так и остатется растровой, естественно, а векторная (координатная сетка) сохраняет векторный характер; подписи к картинке (градусы широты и долготы) как были шрифтами, так шрифтами и остались.
Позиционируем картинку, как нам больше нравится, при необходимости - увеличиваем ее или уменьшаем (через пункт контекстного меню Scale). Создаем новый слой, делаем его текущим (слой с растровой подложкой для пущей безопасности лучше сделать защищенным) и приступаем к рисованию геологических границ (определив предварительно атрибуты линий).
Завершив эту процедуру, создаем новый слой (не забыв сделать его текущим), куда копируем все отрисованные границы (для определенности изменив их цвет или, скажем, толщину). Проследим, чтобы все границы, оконтуривающие геологические тела, были замкнутыми. Заливаем внутренности границ (то есть геологические тела) разными цветами. После чего удалаяем границы с текущего слоя (поскольку они остались у нас на слое предыдущем).
Теперь геологические тела можно превратить в кнопки, нажатие на которые вызывает текст, их (то есть тела) характеризующий. Делаем это в два этапа (почему - скажу чуть позже). Сначала каждое тело превращаем в график (посредством Insert-Create Symbol-Graphic). Затем через альфа-канал придаем им прозрачность, чтобы сквозь цветовую заливку можно было бы проследить элементы рельефа.
А теперь каждый график преобразуем в кнопку (через Insert-Create Symbol-Button). После чего приписываем каждой кнопке некоторые действия. Например, на событие Mouse Ower - текст с названием (именем собственным) геологического тела. А на событие Mouse Down - текст, характеризующий состав и возраст данного геологического тела (можно, в принципе, через Actions-Get URL определить вызов внешнего html-файла того же содержания). Теперь при наведении мыши на некоторое тело мы видим его название, а при нажатии - еще и характеристику. К стати, именно из-за этого нам и понадобилось двухэтапное создание кнопок: если бы мы сразу преобразовали тела в кнопки, приписалы бы им прозрачность и поместили бы текст - то и текст был бы прозрачным, что затрудняет его чтение.
В заключение меняем местами слои третий и второй (впрочем, им можно приписать и собственные названия), чтобы границы были поверх полей. И все. Маленькая домашняя ГИС для персонального использования готова. Чему и приводим пример (риc 3).
Для пущей наглядности можно сделать как бы анимированную картинку, чтобы сначала у нас появлялся рельеф, затем по нему прорисовывались границы тел, а затем они заливаются полупрозрачным цветом. Тогда, к тому же, в любой момент можно открутить анимацию назад, чтобы посмотреть основу, не затушеванную нашим рисованием.
Подведем итоги. Macromedia Flash - не идеальное, но практически единственное средство для представления картографических данных в Сети. Ее достоинства
К недостаткам я отнес бы некоторую нелогичность (или непривычность?) интерфейса и, главное, ограниченный набор импортируемых и экспортируемых форматов. Однако, повторяю, для инструмента, предназначенного в первую очередь для дизайнеров, Flash с представление картографических данных справляется очень и очень прилично - получше ряда специально предназначенных для этого программ.
Алексей Федорчук