Разное → Создаём кликабельную карту с помощью Adobe Fireworks

16.05.2010

Сразу ссылка на пример, чтобы было понятно о чём будет идти речь.

Исходное изображение:

Карта

C помощью инструмента Волшебная палочка (W), выделяем один из районов на карте:

Выделенный район

Копируем выделенный район на новый слой:

Новый слой 'Район 1'

Выбираем инструмент Указатель и в панеле Свойства, добавляем для слоя фильтр Живые эффекты Photoshop:

Панель 'Свойства'

Эффекты можно выбрать любые, например Тень + Наложение цвета + Обводка:

Фильтр наложенный на слой 'Район 1'

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

Аналогично поступаем с остальными районами:

Фильтр наложенный на все районы

В панеле Состояния, кликаем правой кнопкой по первому состоянию и выбираем пункт Создать дубликат состояния:

Контекстное меню первого состояния

В диалоговом окне, в поле Номер указываем 4 (столько у нас районов). В итоге должно получится 5 состояний (1 основное + 4 района):

Панель 'Состояния'Состояния можно переименовывать по двойному клику на них.

Выбираем первое состояние и в панеле Слои оставляем видимыми только слой с картой:

Скрытые слои

Дальше выбираем второе состояние Район 1 при наведении и в панеле Слои оставляем видимыми только слой с районом 1 и слой с картой:

Панель 'Слои' для второго состояния

Аналогично поступаем с тремя следующими состояниями: у Район 2 при наведении оставляем видимыми только Район 2 и Карта, у Район 3 при наведенииРайон 3 и Карта, у Район 4 при наведенииРайон 4 и Карта:

Анимированная карта

В панеле Слои выбираем слой Карта и идём в меню РедактированиеВставитьПрямоугольный фрагмент (или Alt+Shift+U):

Прямоугольный фрагмент

С помощью инструмента Многоугольная активная область, обводя районы один за одним, создаём 4 активных области:

Активные областиПанель 'Слои'

Теперь, кликнув по иконке в центре первой активной области, выбираем пункт Добавить поведение "Обмен изображениями":

Контекстное меню первой активной области

В диалоговом окне выбираем единственный фрагмент и состояние Район 1 при наведении (2):

Диалоговое окно 'Поменять изображение'

Аналогично поступаем с тремя другими активными областями, изменяя поле Состояние № на соответствующее состояние.

В итоге должно получиться следующее:

Области с добавленными для них поведениями

Выбрав закладку 2 варианта в верху документа, можно "потрогать" рабочий вариант карты:

Рабочий вариант карты

Осталось сгенерировать HTML код карты — меню ФайлЭкспорт:

Диалог экспорта

Результат в виде файла проекта Fireworks CS5.
Тоже самое, но только при помощи Flash (видео, eng).

Написанное актуально для
Adobe Fireworks CS5
Похожие записи

Комментарии

Гость
09.12.2010, 07:34

Как поставить ссылку на активную область?

Гость
10.08.2011, 13:22

При таких параметрах экспорта для каждого состояния (района) выгружается полная карта. Т.е. если 10 районов, то экспортируется 11 полных карт, вместо того, чтобы экспортировалась одна карта и 10 подсвеченных районов (таким образом очень сильно уменьшается общий объем картинок). Это как-то можно осуществить?

Гость
11.08.2011, 10:36

Решил проблему следующим образом: в Fireworks в мастере экспорта выставил в настройках, чтобы изображения выгружались в PNG-8 с прозрачностью. Состояние, где карта без подсвеченных областей, выгрузил отдельным файлом и бросил его, как бекграунд DIVа, в котором находится карта. В состояниях с подсвеченными областями отключил видимость слоя, в котором содержалась полная карта. Картинки с отдельно подсвеченными областями хоть и имеют теперь полный размер карты, но не содержат в себе всю карту, а просто очень большие участки прозрачности, что существенно (раз в 10) уменьшило их размер. Результат можно посмотреть здесь.
Автору большое спасибо за ценный урок!

Гость
13.09.2011, 10:06

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

Добрый вечер. Сделал по вашему мануалу карту. Все получилось вот ссылка
http://syzrayon.syzran.ru/index.php?option=com_content&view=article&id=…
Все работало прекрасно.

попросили перенести сайт на другой хостинг, установил свежую версию Joomla 1.7.2
Целый вечер бьюсь никак не могу запустить карту на новом сайте.

Никак не пойму в чем дело. Внешне похоже на то что js не отрабатывается. Кто может проконсультировать? Моя аська 292 116 371

Вячеслав
20.05.2012, 21:30

Спасибо огромное! Очень помогло!

Михаил
16.10.2012, 11:40

Пробую сделать все по инструкции. Запнулся на пункте, в котором каждому состоянию присваиваются видимые слои.
Выбираю состояние, тыкаю в кнопку "Слои" рядом с кнопкой "Состояния", делаю видимыми необходимые слои. Потом перехожу обратно в состояния, выбираю следующее, перехожу в слои, меняю видимые слои, а в результате меняется видимость и в ранее созданных состояниях.
Что делаю не так?

Михаил
23.10.2012, 16:44

Разобрался, оказывает в папке "Фон" слои создавал, а надо было в "Слой 1".

Гость
13.01.2013, 00:53

А как полученный код с изображениями наиболее просто установить в статическую страницу DRUPAL ?

Спасибо за урок.
Было-бы здорово, если уроков для Fireworks было-бы больше

Гость
08.03.2013, 14:38

Спасибо!!! Урок пригодился!!!
Проблема возникла при переносе разметки на страницу сайта!! Не появляется ни одна из картинок! Как правильно перенести картинки?

Гость
08.04.2013, 17:57

Всем приветик ! Всё получилось ,всё супер ! Скажите пожалуйста как теперь сделать что бы при наведении мышки на область и по нажатию на эту область осуществлялся переход по с ссылке ???

Гостевик
29.10.2013, 16:33

Как сделать чтобы на локальном компьютере все это работало? без интернета

Гость
29.10.2013, 16:42

пути прописывайте полные и на локалке нужно ставить openserver например !

Гостевик
30.10.2013, 01:42

Гость, Втр 29/10/2013 - 16:42
Спасибо, но все заработало на локалке. То есть HTML файл открылся.

Гостевик
26.11.2013, 03:21

Фигово что в chrome при нажатии высвечивается желтая проволока.

Гость
23.12.2013, 01:49

Спасибо за ценный урок! Все коротко и ясно! Вы очень хорошо объясняете!!! Еще раз Спасибо! не знаю других но Вы меня конкретно выручили)
в chrome при нажатии высвечивается желтая проволока кто нибудь знает как ее убрать?

Гость
05.01.2014, 18:52

Как это все добавить в сайт созданный на joomla, отзовитесь у кого получилось или кто знает, здесь тоже самое только видео http://www.youtube.com/watch?v=glANrp_Oeyg, но нигде нет информации как вывести в joomla.Help!!!

Гость
16.01.2014, 22:50

Я в прошлом году делал на joomla 3 она ещё была сырая ! Вот ссылочка :
http://trophon.com.ru/about-us
всё работает до сих пор ! немного повозитесь и всё получится !

Гость
29.04.2014, 01:40

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

Гость
02.06.2014, 15:09

Ребят, помогите разобраться с состояниями. Как их нужно выбирать, чтобы FW понял что это не просто клик, а привязка к конкретному состоянию слоев? У меня все сгенерированные изображения имеют единый вид.

Дмитрий
06.02.2016, 16:16

Спасибо большое. Всё сделал по Вашему уроку. Пример здесь - http://www.kolodec24.ru/. Всё хорошо, но есть одна проблема, не знаю как решить. При отображении в телефонах и на планшете, выделенные области сдвигаются, и ссылки работают не правильно. То есть вопрос в чём, как сделать карту адаптивной!!!!!?????

Евгений
09.06.2016, 15:03

Есть ли возможность менять картинки не при наведении, а при клике мыши?

Спасибо за урок. Подскажите как разместить эту карту в проекте joomla.

Добавить комментарий