Построение интерактивной карты с Raphaël. Создаем интерактивную карту
Введение.
Началось
все с того, что мне захотелось сделать карту своего города, наподобие такой . Причем, поскольку я не профессиональный программист, то писать свои функции по работе с картой мне пришлось бы очень долго, поэтому после долгого изучения опыта встраивания карты на других ресурсах, было решено использовать Google maps API, т.е. функции по работе с картами, написанные специалистами Гоогле и успешно используемые на других сайтах. Что мы имели на начальном этапе создания карты? Это карта города (Харовск Вологодской области, в моем случае) в масштабе 1:5000 в формате.psd (Fhotoshop), сам Фотошоп и... вроде все. Сначала я опишу основные задачи которые возникли в процессе создания карты, а потом рассмотрю более подробно по одому из вариантов их решения (использованные мною лично), хотя на самом деле их может быть сколь угодно много.
Итак, самое главное с чего нужно начать, это определиться будем ли мы привязывать нашу карту к географическим координатам на местности?
Если этого не требуется, то можно перейти к последним разделам сего повествования, не вникая в математические расчеты. В случае привязки карты к географическим координатам (в моем случае к GPS координатам, замеренными GPS навигатором), нам потребуется замерить GPS координату центра карты, и перевести их из вот такого вида:
Второе, что нам нужно определить, это масштабы: масштаб на имеющемся картографическом материале (в моем случае 1:5000) и определить масштаб км/Px (километров на один Пиксел карты) и масштабы уровней приближения на создаваемой карте.
Естественно, что масштаб имеющейся карты нужно изменить так, что бы он соответствовал масштабу карты Гоогле на определенном уровне приближения. Масштаб исходной карты изменяется путем изменения размера всей карты пропорционально по высоте и ширине.
Для этого используем Фотошоп (можно и любую другую графическую программу). Разбиваем карту на фрагменты размером 256 на 256 Пикселей (здесь есть ньюанс - справа и внизу остаются нецелые рисунки, по размеру меньше чем 256х256 Пикселей и при их отображении на сервере происходит растягивание неполного фрагмента до размера 256 х 256 Пикселей). Далее нужно переименовать полученные тайлы (фрагменты) в какой либо формат, вида tile_X_Y_Z, где Х - это номер тайла по оси Х (горизонтальная слева направо), Y- это номер тайла по оси Y (вертикальная сверху вниз), Z - это уровень приближения (масштаба) карты. Графические программы как правило делают сквозную нумерацию файлов от верхнего левого до нижнего правого угла.
После выполнения вышеуказанных процедур мы получаем основу для интерактивной карты Вашего города, вот такого вида:
http://map.harovsk.info/ - карта города Харовск, с населением 10000 человек.
Работа с картой: добавление, удаление и отображение элементов на карте, используя PHP, MySql.
Когда создана графическая часть карты, которая корректно отображается в браузере, есть перемещение по карте, функция увеличения и уменьшения масштаба, можно приступить и к размещению на ней объектов (с использованием базы данных MySql, в частном случае), их группировке и изменению. Для этого будем использовать базу данных MySql и средства PHP.
Для того, что бы оставить свой комментарий или задать вопрос, можно воспользоваться двумя вариантами:
1. Если Вы имеете аккаунт Google, то нужно зайти под своим именем и оставить комментарий;
2. Если у Вас нет аккаунта Google и Вы не хотите его создавать, тогда воспользуйтесь формой на странице:
Для блогов, решил продолжить эту тему. До 2010 года, чтобы узнать, как создать интерактивную карту для сайта, необходимо было сесть за учебники по HTML, Java и открыть документацию по Flash. Как правило, карты все равно получались неуправляемыми, плохо загружались или не отображались вовсе, и приходилось пользоваться обычной в виде изображения.
Important!
Сегодня интерактивная карта от обычной плоской в виде изображения отличается тем, что ее элементами можно управлять. Пользователь, находясь на странице, может свободно перемещаться по карте, находить объекты, схему проезда и просматривать информацию.
При необходимости элементы карты могут включать в себя помимо реальных физических объектов (дома, улицы, парки, дороги и т.д.) дополнительно текстовую информацию, видеозаписи и ссылки на другие сайты.
Основу интерактивной карты составляют оцифрованные гео-данные, находящиеся в базе сервиса в заданной системе координат. На лендингах и интернет-магазинах окно карты помогает указать место физического расположения офиса, магазина или сети торговых точек, что удобно для пользователя. По статистике замечено, что если интернет-магазин имеет место, куда клиент может приехать, позвонить или забрать оттуда товар самовывозом, то уровень доверия к ресурсу и фирме выше, что хорошо сказывается на продвижении бренда и продажах.
СервисыЧтобы разобраться, как создать интерактивную карту для сайта, необязательно уметь самостоятельно писать код, преобразовывать данные и скрипты. Сервисы, о которых ниже пойдет речь, предоставляют вебмастеру готовый javascript-код, универсально подходящий к любой CMS. Чтобы установить интерактивную карту к себе на интернет-портал достаточно просто выучить сочетание клавиш Ctrl+C и Ctrl+V, не обращаясь к программисту.
Подобные пакетные решения одинаково удобны и для пользователя, и для веб-мастера, в отличие от самописных на основе Flash и HTML-технологий. Начиная с 2013 года, 80% веб-студий, занимающихся созданием сайтов, используют Яндекс Карты, Google Maps и Geoserver в профессиональном сайтостроении. Такие карты бесплатны для использования, быстро редактируются и легко поддерживаются в актуальном состоянии. Следовательно, цена обслуживания и трудозатраты на них обходятся владельцу ресурса дешевле.
Создание интерактивной карты на примере Яндекс КартыГотово! Инструкция, как создать интерактивную карту для сайта, выглядит длинной и сложной только на первый взгляд. В действительности создание слоя с геоданными и настройка необходимых параметров занимает не больше 1,5 минут. Предлагаю обсудить этот способ в комментариях.
- Tutorial
Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.
Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG - это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript"ом.
Что же, начнём?
Самые нетерпеливые, могут сразу посмотреть демо , но я предлагаю читать обо всём по порядку.
Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)
Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов Стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, class=«area» для регионов и class=«city» для городов.
Далее, в секции изображения помещаем до боли знакомое:
.area {
stroke: black;
stroke-width: 2px;
fill: #E9FFE9;
}
.city {
stroke: black;
stroke-width: 2px;
fill: red;
}
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff .
Результат:
Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:
Все браузеры, поддерживающие SVG , его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).
Второй правильный метод - вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже . Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML"ем. Так что кавычки и закрывающие теги обязательны.
Подводные грабли Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так:
Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
viewBox="0 0 493 416"
Diff .
После этого ситуация значительно улучшается, но другую граблю нам подкладывает Google Chrome: он упорно стремится смасштабировать картинку по высоте до высоты элемента , а не увеличить высоту согласно ширине тега и пропорциям изображения, как ведут себя остальные браузеры.
Жаль. Придётся привлечь JavaScript и подогнать высоту элемента вручную.
var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" ");
var aspectRatio = viewBox / viewBox;
svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio);
Diff .
Результат:
Получить доступ к SVG, вставленным через чуть сложнее:
jQuery(window).load(function () { // Нам нужно дождаться, пока вся графика (и наша карта тоже) загрузится, поэтому используем window.onload,
var svgobject = document.getElementById("svgmap"); // Находим тег
if ("contentDocument" in svgobject) { // У нас действительно там что-то есть?
var svgdom = jQuery(svgobject.contentDocument); // Получаем доступ к объектной модели SVG-файла
// Теперь делаем свою работу, например:
jQuery("#figure1", svgdom).attr("fill", "red"); // Находим тег с id="figure1" в SVG DOM и заливаем его красным
}
});
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам (jQuery(".class")). Приходится извращаться.
Заметьте, что я использую событие window.onload, так как нам необходимо дождаться полной загрузки страницы, вместе со всеми связанными элементами (в числе которых и наша карта). Однако и тут Google Chrome спешит подложить нам свинью: в том случае, если скрипт с window.onload находится в html-коде до тега , то код в обработчике выполняется ДО того, как карта на самом деле загрузится. Поэтому тег необходимо разместить после нашей карты. Sad but true.
Интерактивность первая: выделяем районы на карте щелчком по чекбоксу на странице. Для этого взаимодействия нам понадобятся чекбоксы в каждой строке таблицы с районами, а так же совпадающие или схожие id у строк таблицы и районов на карте.Здесь мы будем при щелчке по флажку ставить или убирать класс selected у соответствующей области на карте, а так уже у самой строки. Это несложно:
$("#areas input").change(function() {
var row = $(this).parent().parent();
var id = row.attr("id");
if (this.checked) {
row.addClass("selected");
$("#"+id, svgdom).myAddClass("selected");
} else {
row.removeClass("selected");
$("#"+id, svgdom).myRemoveClass("selected");
}
});
Соответственно, нужно добавить и стилевые определения для данного класса. Предоставляю вам это сделать самостоятельно, согласно своих вкусов и предпочтений. Diff .
$("#titleswitch").change(function () { var elements = $(svgdom.getElementsByClassName("areatitle")) .add($(svgdom.getElementsByClassName("citytitle"))) .add($(svgdom.getElementsByClassName("titlebox"))) .add($(svgdom.getElementsByClassName("titleline"))); if (this.checked) { elements.myAddClass("hidden"); } else { elements.myRemoveClass("hidden"); } });
Вот так .
Интерактивность третья: подсвечиваем районы на карте при наведении на строку таблицы (и наоборот)
Для этого необходимо повешать обработчики события onhover как на таблицу:// Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы. $("#areas tr").hover(function () { var id = $(this).attr("id"); $("#"+id, svgdom).myAddClass("highlight"); }, function () { var id = $(this).attr("id"); $("#"+id, svgdom).myRemoveClass("highlight"); });
…так и на районы на карте:
// Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте $(svgdom.getElementsByClassName("area")).hover(function () { var id = $(this).attr("id"); $("#areas #"+id).addClass("highlight"); }, function () { var id = $(this).attr("id"); $("#areas #"+id).removeClass("highlight"); });
Для того, чтобы мы это видели, добавим соответствующие CSS-правила в страницу:
tr.highlight, tr:hover, tr:nth-child(even):hover { background: lightyellow; } …и в SVG-карту: .highlight, .area:hover { fill: lightyellow; stroke: black; }
При наведении мышкой на строку таблицы (или на район на карте) на соответствующий район на карте (на строку таблицы) вешается нужный для подсвечивания класс. Чтобы приведённый выше код работал, необходимо, чтобы у районов на карте и строк таблицы были совпадающие (или схожие) id. Diff .
Интерактивность четвёртая: Отображаем данные со страницы на карте
Ну что же, банальное присваивание классов, наверное, уже наскучило. Пускай карта нам показывает на себе какие-нибудь данные.Перво-наперво: данные. Добавим к нашей табличке пару столбцов, например «Люди» и «Деньги». Внимание : Данные взяты от балды и никакого отношения к реальному Аместрису не имеют. А так же радиокнопки, по которым будем переключать, какие данные показывать.
Во-вторых, нам нужно место на карте, где будут отображаться данные. Добавим на карту пять блоков (по одному на каждый регион, соотнеся их id с регионами) и соответствующие стили в :
Ну и JavaScript-код, который будет брать данные из ячеек таблицы и помещать в блоки текста:
$("input").change(function () {
var descnum = $(this).parent().prevAll().length+1;
$("#areas tbody tr").each(function() {
var id = $(this).attr("id").substring(4);
var value = $(this).children(":nth-child("+descnum+")").text();
$("#text"+id, svgdom).text(value);
});
});
И по переключению радиокнопок карта будет показывать нужные цифры. Вуаля !
Для данного взаимодействия возьмём плагин jQuery.tooltip и привяжем его к областям на карте. Текст для подсказок будем брать, конечно же, из таблицы:
$(svgdom.getElementsByClassName("area")).tooltip({
bodyHandler: function() {
var id = $(this).attr("id");
var area = $("#areas #"+id+" td:nth-child(2)").text();
var result = $("
").append($("").text(area)); $("#areas #"+id+" td:nth-child(2)").nextAll().each(function(){ var pos = $(this).prevAll().length+1; var title = $("#areas thead th:nth-child("+pos+")").text(); var value = $(this).text(); result.append($("
").text(title + ": " + value));
});
return result;
}
});
Diff .
Оставшиеся подводные камни
Из известных проблем пока что можно отметить, что Google Chrome не выводит на печать SVG-картинки. Это или его баг или баг WebKit в целом.Обратная совместимость
Почти все современные браузеры поддерживают SVG: IE 9+, Opera 8+, Firefox 3+ (в Firefox 1.5+ частичная поддержка), Chrome всех версий, Safari 3.2+ (более полный список)Но увы и ах, светлое будущее целиком всё никак не наступит и задумываться о поддержке старых браузеров всё же приходится.
Стандартный и самый простой путь, если SVG - это просто картинка: вставляем замещающее содержимое (отрендеренную в PNG картинку и абзац текста) внутрь тега .
К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.
Если в браузере поддержки SVG нет, будет показана PNG-картинка и текст, уведомляющий пользователей, что их браузер устарел. Никакого интерактива. Впрочем, он, может быть, не очень-то и нужен. Правда, есть один минус - как я заметил, современные браузеры упорно скачивают себе замещающую png-картинку, несмотря на то, что они её всё равно не отобразят.
Желающие могут воспользоваться детектированием поддержки SVG с помощью Modernizr и наворотить на яваскрипте что-нибудь посложнее.
В более сложных случаях вам могут помочь многочисленные решения на Flash, VML или Canvas (или на всех вместе). Список можно посмотреть здесь: HTML5 Crossbrowser Polyfills , но те решения, которые я опробовал, мне, к сожалению, не помогли. Возможно потому, что тот SVG c CSS"ом, что я набросал на коленке - оказался им не по зубам.
Конвертирование SVG в PNG В сети есть много мест, где можно конвертнуть SVG-картинку во что-нибудь другое. Я же предложу воспользоваться командой rsvg-convert из пакета librsvg2-bin . Примерно вот так:cat map.svg | rsvg-convert > map.png
Впрочем, она может преобразовывать и в другие форматы, а так же увеличивать/уменьшать картинку, смотрите --help.
Для массовых преобразований можно сочинить команду посложнее или посмотреть примеры в Добавить метки
Google, Yandex, Microsoft и прочие гиганты продвигают свои картографические сервисы как только позволяет их бюджет. OpenStreetMap не отстаёт стараниями тысяч своих пользователей. Но совсем не факт, что именно ваш город уже нанесён на карту с нужной детализацией. В тоже время у вас почти наверняка есть бумажная карта вашего города, которую можно отсканировать. Благодаря нашему сервису этого достаточно, чтобы сделать свою интерактивную карту online!
Более того, речь может идти не о карте город на на Земле, а о вымышленном мире. Вам до безумия нравится трилогия «Властелин колец»? Чудесно, вы легко и просто можете сделать свою карту Средиземья и отметить на неё особо значимые места, прикрепить комментарии, описания и даже фотографии с автографом самого Фродо. Или, возможно, вы тратите всё свободное время на изучение игрового мира The Eldest Scrolls IV: Oblivion? Тогда вам будет отличным подспорьем карта, на которой вы сами разметите все форты, пещеры и стоянки, оставите комментарии и добавите скриншоты своих игр. Более того, совсем не обязательно речь должна идти о картах. С тем же успехом можно демонстрировать схему пожарной эвакуации из здания или план палуб корабля. Мы даём инструмент, а уж его использование ограничено только вашей фантазией.
Прежде чем перейти к описанию того, как сделать свою интерактивную карту, последнее отступление. То, что мы предлагаем, есть конструкция на Google Maps API. Это значит, что всё тоже самое и многое другое вы можете сделать изучив Google API или API любого другого картографического сервиса. Но такое изучение потребует некоторых навыков в программировании. Мы же предлагаем хороший набор возможностей по созданию карт не требующий специальных навыков для использования.
Итак, приступим!
Общая идея. На входе — изображение карты, на выходе — интерактивная карта.
Алгоритм действий.
Примечание : совсем не обязательно использовать имя «markers». Вы можете использовать любое имя файла. Более того, можно использовать несколько файлов маркеров с одной картой для вывода на ней объектов разных типов (например, http://….&m=cinema — кинотеатры (имя файла cinema.js), http://….&m=school — школы (имя файла school.js) и т.д.).
Вставка на свой сайт.
Созданную карту вы можете вставить на страницу своего сайта используя iframe. Для этого в нужном месте разместите код такого вида:
Демонстрация
Интерактивная карта Средиземья с несколькими маркерами.
Смотрите также
На этот раз ко мне обратился один приятель и спросил, как это во Flash программисты делают всякие интерактивные штуки? Привело его к этому желание сделать у себя на странице «крутую» интерактивную карту. Чтобы при наведении надписи появлялись... И дал мне собственноручно (надеюсь) нарисованную картинку:
В итоге в выданном мне файле Map.psd имелся один слой с картой и несколько слоёв с наименованиями областей. Вот таким был слой карты:
Хозяйке на заметку : Бесспорно, что надписи в фотошопе можно красиво раскрашивать, гнуть, поворачивать, но всё же лучше их всегда делать текстовыми полями в самом Flash. Поверьте, это всегда пригодится. Надписи из Photoshop растризуются и импортируются как картинки, поэтому текст и эффекты нельзя будет потом изменить во Flash.
Переделывать всё «как положено» и разрабатывать хорошую архитектуру у меня времени и желания не было. Сделал «на коленке». Может кому-нибудь пригодится.
Открываем Adobe Flash и создаём новый проект «Flash File (ActionScript 3.0)». Щёлкаем в пустом месте и в окне Properties выставляем размер, равный размеру нашей карты, и частоту кадров около 25:
Теперь импортируем в проект наши регионы. Выбираем File > Import > Import to Library и выбираем наш файл Map.psd. Мы должны увидеть, что все слои из файла добавились в библиотеку в виде растровых графических элементов группы «Map.psd Assets».
Для дальнейшей работы из графических элементов необходимо сформировать символы. для этого щёлкаем два раза по значку клипа Map.psd, чтобы просмотреть его содержимое.
Мы видим, что все импортированные растровые элементы здесь выделены. Снимаем выделение, щёлкнув где-нибудь снаружи карты. Теперь щёлкаем отдельно каждую надпись и конвертируем в символ типа Graphic. Для каждой области указываем понятное имя.
Если же Вы делаете надписи текстовыми полями в самом Flash, то их конвертирование можно пропустить.
В последнюю очередь не забудьте выделить и сконвертировать в символ Map_Graph саму карту.
Таким образом мы получили графические символы карты и надписей. Создайте для удобства группу «Графические символы» в окне библиотеки и перетащите в неё новые символы.
Теперь нам необходимо превратить все объекты в сущности, которые будут нам доступны в процессе программировнания. Для этого необходимо каждый символ типа Graphic поместить в клип MovieClip и разрешить доступ к нему из скрипта. Щелкаем правой кнопкой, выбираем Convert to Symbol, указываем понятное имя (Belgorod, Bransk, Kaluga, ...) и разрешаем экспорт:
Эту операцию нужно проделать со всеми спрайтами надписей и карты. Создайте группу «Клипы» и поместите в неё новые символы. Теперь мы сможем из скрипта создавать карту и области с помощью кода
var map = new Map ; var sm = new Smolensk ; var tb = new Tambov ; ...
У всех клипов указывается класс по умолчанию flash.display.MovieClip. У нас все надписи будут интерактивные, то есть они будут следить за перемещением указателя мыши. Для добавления программного кода к элемену Smolensk можно было бы создать класс Smolensk в новом одноимённом файле «Smolensk.as». Но так как надписей у нас много мы сделаем общий класс и сделаем его родительским для всех надписей. Создадим файл RegLabel.as с пустым классом RegLabel
Внимательно относитесь к регистру символов в именах файлов, классов, переменных и прочих наименований в скриптах. Если назовёте файл с маленькой буквы, а в проекте напишете его с большой, то система этот файл не найдёт и выдаст ошибку.
package { import flash . display .*; public class RegLabel extends MovieClip { public function RegLabel () : void { } } }
Теперь установим этот класс родительским (вместо flash.display.MovieClip) у клипа каждой надписи:
Для клипа карты класс менять не надо.
Итого у Вас должны получиться три «папки» в библиотеке:
Теперь необходимо зайти в каждый клип надписи и создать в нём анимацию появления и изчезания текста и расставить контрольные точки.
Заходим в клип надписи «Belgorod» для редактирования:
Для начала добавим новые кадры клавишей F5 и ещё два слоя:
Переименуем нижний слой в Text, второй в Points. Второй слой будет содержать ключевые кадры с метками. Станем на нужный кадр, нажмём F6:
Для добавления метки кадрам в свойствах фрейма укажем их имена Start , Over и Out:
Третий слой переименуем в Actions и вставим точки останова. Для этого добавим два ключевых кадра, откроем окно скриптов командой Actions контекстного меню ключевого фрейма и вставим строку
stop () ;
в оба ключевых фрейма.
Таким образом мы подготовили разметку для трёх состояний клипа:
Осталось создать анимацию текста. В начале (на участке Start) текст должен быть невидимым. Щёлкаем по первому кадру, выделяем символ с текстом, выбираем значение Alpha (Непрозрачноть) у параметра Color и вместо 100% ставим 1%. Надпись должна пропасть.
Создадим ещё несколько ключевых кадров напротив ключевых кадров других слоёв. Установим непрозрачность надписи в этих кадрах 100% и 1% как указано на рисунке. Идея в том, что на участке Over надпись должна появляться, а на участке Out исчезать.
Чтобы эффекты были плавными создадим анимацию на участках появления и исчезания.
На этом подготовка клипа надписи закончена. Вот что должно получиться:
При перемещении линии-курсора прозрачность подписи должна плавно изменяться. На участке Start надпись не видна (непрозрачность 1%), на участке Over она появляется (анимация непрозрачности от 1% до 100%) и на Out изчезает (от 100% до 1%).
Не ставьте исчезание до 0%, так как при этом клип не будет реагировать на события мыши!
Кадры с метками Start, Over и Out будут использоваться для переключения состояний из скрипта.
Теперь можно скопировать фреймы и вставить на новые слои в клипах всех остальных надписей:
Анимацию нижнего слоя скопировать не получится (придётся в каждом клипе вручную повторять расстановку прозрачности и создание анимации).
Итак, клипы мы создали, осталось дописать скрипты.
Общий для всех надписей файл RegLabel.as. При создании экземпляра надписи станем у клипа этой надписи на кадр Start и остановимся. При наведении и убирании указателя мыши будем переходить на соответствующие кадры (Over и Out).
Добавим параметр, в котором будем хранить ссылку и обеспечим переход по этой ссылке по щелчку мыши.
package { import flash . display .*; import flash . events .*; import flash . net .*; public class RegLabel extends MovieClip { public var link = " " ; // место для ссылки // Конструктор (срабатывает при создании надписи) public function RegLabel () : void { // Перейдём у себя (в клипе) на кадр "Start" и остановимся gotoAndStop (" Start " ) ; // Повесим на себя события наведения и убирания мыши addEventListener (MouseEvent . MOUSE_OVER , _showMe ) ; addEventListener (MouseEvent . MOUSE_OUT , _hideMe ) ; // Ловим щелчки для работы перехода по ссылке addEventListener (MouseEvent . CLICK , _clickMe ) ; } private function _showMe (e : MouseEvent ) : void { // Запустим воспроизведение себя с кадра "Over" gotoAndPlay (" Over " ) ; } private function _hideMe (e : MouseEvent ) : void { // Аналогично с кадра "Out" gotoAndPlay (" Out " ) ; } private function _clickMe (e : MouseEvent ) : void { // Если нам указали ссылку, то переходим по щелчку if (link ) { var targetURL = new URLRequest (link ) ; navigateToURL (targetURL , " _self " ) ; } } } }
Мы создали полноценные клипы вплывающих надписей и клип карты. Пора вывести это всё на экран. Вынесем программную часть проекта в отдельный файл. Создадим файл RegionMap.as с данным содержимым:
package { import flash . display .*; public class RegionMap extends Sprite { // Будем хранить все надписи в массиве для удобства public var labels = new Array ; // Функция-конструктор (выполняется при запуске флэшки) public function RegionMap () : void { // Как видно, в fla файле на единственном кадре ничего нет. // Вставим на экран карту и надписи. // Создаём экземпляр клипа карты var map = new Map ; map . x = map . y = 0 ; // Помещаем на экран addChild (map ) ; // Создаём все надписи и помещаем их в массив labels // Каждая надпись наследует функционал класса RegLabel var r ; r = new Belgorod ; r . link = " http://yandex.ru/yandsearch?text=belgorod " ; r . x = 8 ; r . y = 550 ; labels . push (r ) ; r = new Bransk ; r . x = 46 ; r . y = 380 ; labels . push (r ) ; r = new Kaluga ; r . x = 156 ; r . y = 392 ; labels . push (r ) ; r = new Kostroma ; r . x = 512 ; r . y = 438 ; labels . push (r ) ; r = new Kursk ; r . x = 50 ; r . y = 505 ; labels . push (r ) ; r = new Leningrad ; r . x = 348 ; r . y = 87 ; labels . push (r ) ; r = new Lipetsk ; r . x = 148 ; r . y = 556 ; labels . push (r ) ; r = new Moskow ; r . x = 266 ; r . y = 396 ; labels . push (r ) ; r = new Novgorod ; r . x = 300 ; r . y = 160 ; labels . push (r ) ; r = new Orel ; r . x = 108 ; r . y = 470 ; labels . push (r ) ; r = new Razan ; r . x = 256 ; r . y = 528 ; labels . push (r ) ; r = new Smolensk ; r . x = 150 ; r . y = 292 ; labels . push (r ) ; r = new Tambov ; r . x = 221 ; r . y = 612 ; labels . push (r ) ; r = new Voronezh ; r . x = 98 ; r . y = 632 ; labels . push (r ) ; // Теперь с массивом записей можно делать что угодно. // Мы же просто выведем их на экран: for (var i = 0 ; i < labels . length ; i ++ ) { addChild (labels [ i ] ) ; } // Больше ничего делать не надо, так как всё поведение // надписей прописано в RegLabel.as } } }
Для каждой надписи при необходимости укажите ссылку на нужный раздел сайта (как это показано для Belgorod)
Укажем этот класс исполняемым при запуске проекта:
Теперь можно запустить проект. Результат можно увидеть .
При желании можно дополнить клипы надписей, добавив в них регионы, окрашенные немного другим цветом, и любые другие элементы и задав любые эффекты появления/исчезания. Это сделает карту более живой.
Это не совсем полноценная карта. При быстрых перемещениях указателя мыши можно заметить яркое «моргание». Это связано с тем, что указатель уходит с надписи раньше, чем она полностью появляется. При этом с середины появления воспроизведение перескакивает на кадр Stop, где надпись в начале видна полностью. Да и примитивные прямоугольные клипы с надписями не повторяют точно форму областей и не реагируют на наведение указателя на области в промежутках. Это издержки такого подхода.
Итог: друг оказался доволен приобщению к Flash и даже смог кое-что переделать в этом прототипе.
Дабы сразу предупредить «звёздную болезнь начинающего мастера» скажу, что этот примитивный способ далёк от идеалов более-менее обдуманного профессионального проектирования и совершенства кода и годится лишь в качестве урока. В общем, «Все имена и события вымышлены. Любое совпадение с реальными является случайностью. Не пытайтесь повторить это в реальной жизни».
Здесь мы обошлись всего заданием одного класса объекта и классом документа. Интереснее было бы создавать всё программными средствами (используя текстовые поля и порождая от одного класса) по массиву координат, применять прогаммно различные стили и трансформацию. Не помешало бы провести неслабый рефакторинг: вынести данные из логики (во внутренний массив или во внешний файл) с доступом к ресурсам через классы-модели, вынести низкоуровневые операции создания карты, создания и вывода областей в отдельные методы createMap(), createLabels() и showLabels() ; инкапсулировать поле link, снабдив его сеттером с валидацией аргумента...
Если же хотите сразу что-то действительно стоящее (как на kremlin.ru , например) для серьёзного проекта и не поняли предыдущий параграф, то лучше самому сразу не пробовать.