Описание выполненных работ

Общее описание проекта

Директор ООО Научно-учебный и производственный картографический центр (НУПКЦ) «Сибэкокарта» профессор ИрГТУ Пластинин Л.А. и исполнительный директор НУПКЦ Олзоев Б.Н., с одной стороны, и заведующий кафедрой картографии и геоинформатики Сибирской государственной геодезической академии (СГГА) профессор Лисицкий Д.В. и доцент кафедры Комисарова Е.В., с другой стороны, подписали настоящий договор о намерениях, заключающийся в следующем:

a.Стороны договорились о совместной разработке и подготовке по заказу Министерства образования и науки Республики Бурятия (РБ) Серии электронных учебных экологических карт РБ в масштабе 1:1 000 000, включающей:

ü Ландшафтно-экологическую карту (ЛЭК) РБ;

ü Карту природопользования (КПП) РБ;

ü Рекреационно-туристическую карту (РТК) РБ.

b.Стороны отмечают, что в качестве научно-методического задела можно использовать следующие наработки:

ü Иркутской стороной – ООО НУПКЦ «Сибэкокарта» и кафедрой инженерной геодезии и картографии ИрГТУ подготовлена цифровая топографическая основа (ЦТО) в масштабе 1:1 000 000 на территорию РБ, кроме того, разработано тематическое содержание двух электронных экологических карт (ЛЭК, КПП) и выполняется разработка содержания третьей электронной экологической карты – РТК РБ;

ü Новосибирской стороной – кафедрой картографии и геоинформатики СГГА разработана инструментальная оболочка мультимедийной картографической интерактивно-справочной системы.

Теория по проекту

Данный проект представляет собой инструментальную оболочку предназначенную для отображения мультимедийной картографической интерактивно-справочной информации пользователю. Проект был разработан на технологии Flash, что позволяет его использовать как в глобальной сети Интернет, посредством внедрения в html-страницу (рис. 1), так и локально при помощи Flash-плеера (рис. 2).

Рис 1. Отображение проекта в браузере Opera 10.0

Рис 2. Отображение проекта в Adobe Flash Player 10

Данный проект был осуществлен в среде Adobe Flash CS4. Adobe Flash – очень мощное средство создания анимированных проектов на основе векторной графики с встроенной поддержкой интерактивности.

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

К основным достоинствам технологии можно отнести:

ü маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы, которые также могут использоваться исполняемым файлом, что очень положительно влияет на уменьшение размера;

ü устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в IE, так и в Mozilla Firefox и в Opera. Потому как Flash является внедренным объектом в страницу и проигрывается внешним модулем, независящим от браузера;

ü мощный событийно-управляемый язык. В Adobe Flash используется специальный язык, при помощи которого можно оживлять falsh-ролики. Action Script – это полноценный событийный язык программирования, с поддержкой условий, циклов, массивов, функций и классов с поддержкой наследования;

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

Основным объектом в Flash-приложении являются Символы (Symbols). Символы в свою очередь подразделяются на три категории:

- клип (Movie Clip);

- кнопка (Button);

- графика (Graphic).

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

Основные функции клипов:

§ play() – начинает или возобновляет воспроизведение клипа;

§ stop() – останавливает воспроизведение клипа;

§ gotoAndPlay(n) – воспроизводит клип с n кадра;

§ gotoAndStop(n) – воспроизводит клип до n кадра, а достигнув его останавливает воспроизведение.

В ходе разработки проекта использовались подобные подходы. Явный пример – панель «меню слоев», когда пользователь нажимает на панели «главного меню» кнопку «меню слоев» к главному клипу подключается клип «панель слоев» (рис 3а). После подключения автоматически запускается проигрывание клипа и в последнем кадре использована функция stop(), что бы клип остановился в последнем кадре (рис 3б).

Из минусов важно отметить, что в Action Script не реализована функция обратного проигрывания клипа, что понадобилось для закрытия панели слоев. В связи с этим нами была разработана функция Reverse_MovieClip, которая используя основные функции клипа, воспроизводит его покдарового в обратном порядке (Листинг 1).

Листинг 1. Функция Revers_MovieClip.

function Reverse_MovieClip(mc:MovieClip) { //mc – уникалное имя клипа, который нужно воспроизвести // в обратном порядке k = _root[mc]._totalframes; // общее количество кадров клипа _root[mc].onEnterFrame = function() { // функция которая вызывается при смене кадра if (k >= 1) { // если текущий кадр отличный от нуля // переходим к следующему кадру _root[mc].gotoAndStop(k); k--; // уменьшаем номер текущего кадра на 1 } if (k == 0) { // если текущий кадр нулевой (первый) // удаляем функцию delete _root[mc].onEnterFrame; // выгружаем клип из главной сцены unloadMovie(_root[mc]); } }; }

Рис 3а. Подключение и отображение панели слоев.

Рис 3б. Остановка проигрывания и фиксирование панели слоев.

Следующим характерным символом является кнопка (button). Кнопка отличается от клипа и графики прежде всего тем, что ее видеоряд состоит из четырех функциональных кадров (Рис 4):

1. Up – положение кнопки в состоянии покоя, то есть загрузив ролик пользователь увидит кнопку именно в этом состоянии;

2. Over – этот кадр пользователь увидит, когда наведет курсор мыши на кнопку;

3. Down – в это положение переходит кнопка, если пользователь нажмет левую кнопку мыши находясь над кнопкой, то есть «нажмет» кнопку;

4. Hit – при помощи этого кадра указывается «кликабельная» область кнопки, то есть та область, которая будет реагировать на курсор мыши.

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

а

б

Рис 4. Различные положения кнопки

а – положение Up; б – положение Down.

Изображение представляет собой символ, состоящий из единственного кадра. Отсюда следует статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объектом, лучше сделать его не символом-графикой, а объектом графика (graphic).

Action Script – событийно-управляемый язык, встроенный во Flash. Это мощный язык, с большим набором команд, поддержкой классов и наследования.

При помощи Action Script можно «оживить» проект, сделать его интерактивным. Можно реагировать на события мыши или клавиатуры, можно выполнить какие-либо действия при проигрывании определенного кадра.

Действия (Actions) – это инструкции, которые указывает flash-проекту что делать. От них произошло название языка Action Script (пер. «сценарий действий»).

События (Events) – это особое свойство компонента, позволяющее связывать с компонентом обработчик события — процедуру, которая вызывается в определенной ситуации (например, при получении компонентом фокуса или щелчке на нем мышью). Имена событий начинаются с префикса «On».

Выражения (Expressions) – это любая часть инструкции, которая порождает значение.

Функции (Functions) – это отдельная система (подсистема, подпрограмма), на вход которой поступают управляющие воздействия в виде значений аргументов. На выходе системы получаем результат выполнения программы, который может быть как скалярной величиной, так и векторным значением. По ходу выполнения функции могут выполняться также некоторые изменения в управляемой системе, причём как обратимые, так и необратимые.

Классы (Classes) – это один из вариантов описания сущности, которая в теории программирования именуется абстрактным типом данных. Класс определяет скрытую внутреннюю структуру некоторого значения, а также набор операций, применимых к данному значению. Первая определяется как набор полей класса — элементов тех или иных ранее определённых типов, вторая — как набор сообщений, которые могут обрабатываться экземплярами данного класса. Множество всех возможных сочетаний значений полей класса создаёт множество значений абстрактного типа. Вторая часть определения в современных языках программирования представляет собой набор публичных методов, то есть связанных с классом функций, имеющих доступ к его внутренней структуре, но доступных извне класса.

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

Обработчики (Handlers) – это специальные инструкции, которые обрабатывают события.

Операторы (Operators) – это наименьшая автономная часть языка программирования; команда. Программа обычно представляет собой последовательность инструкций.

Переменная (Variables) – это проименованная либо адресуемая иным способом область памяти, имя или адрес которой можно использовать для осуществления доступа к данным, находящимся в переменной (по данному адресу).

Так же в данном проекта была задействована технология XML. XML (англ. eXtensible Markup Language — расширяемый язык разметки; произносится [экс-эм-э́л]) — рекомендованный Консорциумом Всемирной паутины язык разметки, фактически представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных (взамен существующих файлов баз данных), для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки (например, XHTML), иногда называемых словарями. XML является упрощённым подмножеством языка SGML.

Целью создания XML было обеспечение совместимости при передаче структурированных данных между разными системами обработки информации, особенно при передаче таких данных через Интернет. Словари, основанные на XML (например, RDF, RSS, MathML, XHTML, SVG), сами по себе формально описаны, что позволяет программно изменять и проверять документы на основе этих словарей, не зная их семантики, то есть не зная смыслового значения элементов. Важной особенностью XML также является применение так называемых пространств имён.

XML — это иерархическая структура, предназначенная для хранения любых данных, визуально структура может быть представлена как дерево. Важнейшее обязательное синтаксическое требование заключается в том, что документ имеет только один корневой элемент (англ. root element) (альтернативно называемый элементом документа (англ. document element)). Это означает, что текст или другие данные всего документа должны быть расположены между единственным начальным корневым тегом и соответствующим ему конечным тегом.

Спецификация требует, чтобы процессоры XML обязательно поддерживали Юникод UTF-8 и UTF-16 (UTF-32 не обязателен). Признаются допустимыми, поддерживаются и широко используются (но не обязательны) другие кодировки, основанные на стандарте ISO/IEC 8859, также допустимы другие кодировки, например, русские Windows-1251, KOI-8.

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

Листинг 2. Исходный текст файла map.xml (начало)

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <meta_info> <title>Карта Иркутской области</title> <description>Интерактивная учебная карта</description> <layer_count>5</layer_count> <hint_count>2</hint_count> <animation_count>2</animation_count> <information>доп. информация</information> <dir>res</dir> </meta_info> <layers> <layer1 name="Рельеф" url="Terrain.png" z-index="1"/> <layer2 name="Горизонтали" url="Horizontals.png" z-index="2"/> <layer3 name="Гидрография" url="Rivers.png" z-index="3"/> <layer4 name="Дороги" url="Roads.png" z-index="4"/> <layer5 name="Насел. пункты" url="NP.png" z-index="5" /> </layers> <map> <maxzoom>500</maxzoom> <minzoom>10</minzoom> <zoom_step>3</zoom_step> </map>

Листинг 2. Исходный текст файла map.xml (окончание)

<hints> <hint name="Траляля" x="105" y="680" dx="60" dy="50" str1="Тип: поселок" str2="Население: 2 тыс." str3="Площадь: 10 кв. км." info="Свободный текст по объекту" url="info/Tralala.htm"/> <hint name="Кукуево" x="525" y="195" dx="110" dy="110" str1="Тип: село" str2="Население: 1 тыс." str3="Площадь: 20 кв. км." info="Свободный текст по объекту" url=""/> </hints> <animations> <animation name="vulcan" x="160" y="384" parent="2" url="vulcan.swf" /> <animation name="lake" x="523" y="234" parent="3" url="lake.swf" /> </animations>

Как видно из первой строчки xml файла, прежде идет определение, в котором указывает версия xml, кодировка и дополнительные данные. Далее следует контейнер с метаданными карты.

- <title>…</title> – название карты;

- <description> … </description> – короткое описание карты;

- <layer_count> … </layer_count> – количество слоев карты;

- <hint_count> … </hint_count> – количество подсказок на карте;

- <animation_count> … </animation_count> – количсетво анимаций на карте;

- <information> … </information> – дополнительная информация по карте.

Далее следует контейнер слоев <layers> … </layers>. Содержимое данного контейнера является динамичным, и данные отличаются только содержимым атрибутов.

- name – название слоя;

- url – путь до растра, относительно директория dir;

- z-index – глубина слоя, чем больше число тем «выше» слой.

Следом за слоями идет контейнер <map> … </map>, который содержит настройки карты.

- maxzoom – максимальное увеличение;

- minzoom – минимальнео увеличение;

- zoom_step – шаг увеличения.

После настроек карты мы видим контейнер <hints> … </hints> – подсказки. Как и в случае со слоями количество дочерних узлов этого контейнера динамичное и каждый узел имеет набор атрибутов.

- name – название объекта;

- x, y – координаты x левого, верхнего угла кликабельной области;

- dx, dy – приращения по осям, при помощи которых образуется кликабельная область;

- str1, str2, str3 – три дополнительные строчки позволяющие указать информацию об объекте;

- info – свободный текст по объекту;

- url – ссылка на страницу посвященную данному объекту.

Аналогично подсказкам и слоям устроен контейнер, несущий информацию о наличии анимации на карте <animations> … </animations>:

- name – уникальное имя анимации;

- x, y – координаты левого, верхнего угла анимации относительно левого, верхнего угла родительского слоя;

- parent – номер родительского слоя (см. layers). То есть если 3, то родительский слой будет layer3;

- url – ссылка на анимацию относительно директории dir (см. meta_info);

-

Личный вклад в проект

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

При разработке дизайна применяются несколько методов.

1 Группировка элементов

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

а) Группировка по функциям

б) По результату действия

в) Смешанный тип группировки

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

Рис 5. «Линия зрения» пользователя. 1-5 – ключевые точки

2 Расположение элементов.

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

3 Цвета

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

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

Рис 6. Затемнение фона при загрузке карты

Для подбора более удачных и сочетающихся цветов была использована программа Color Schemer Studio + Color Pix, вид программы приведен на рисунке 7.

Рис 7. Color Schemer Studio + Color Pix

Что касается разработки логической структуры программы, то здесь я столкнулся с одной существенной проблемой: Adobe Flash CS4 – многозадачная и многопотоковая среда разработки. Это означает, что если на выполнение запущена одна из функций Action Script, и в этот момент запускается следующая функция, то среда не ждет окончания работы первой функции и запускает вторую функцию отдельным потоком. В связи с этим, мне пришлось отказаться от обычной блочной структуры алгоритма и спроектировать систему так, чтобы исполняемая программа все время находилась в режиме ожидания какого-либо события, а затем, проанализировав произошедшее событие, реагировала на него должным образом.

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

Заключение

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