Интерактивная карта в Flash




Главная > Уроки > Action script 3.0 > Интерактивная карта в Flash

Интерактивная карта в Flash

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2014-01-24

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

Нужен текст? Рекомендуем - заказ текстов.

Начнем мы с того, что создадим новый документ ActionScript. Зададим ему рамер 620 на 420 пикселей, а вон окрашиваем на свое усмотрение; framerate ставим на 30. Первый слой нашего документа называем Map. Сюда же вставляем главную картинку, то есть, ту, которая будет фоном (карта). Далее заблокируем этот слой, так как ничего с ним в дальнейшем делать мы не будем.

Следующий наш слой – слой с кнопками на каждом городе. Называем его Buttons. Через инструмент Oval Tool рисуем нашу кнопку, диаметр ее – примерно 25 пикселей. Эту кнопку преобразуем в мувиклип с названием myButton и точкой регистрации по центру. После всего сделаем кнопку прозрачной через timeline.

Теперь переместим эту кнопку на главную сцену и выставляем на одном из городов. Через настройки задаем кнопке instance name. С первой кнопкой мы справились, теперь переходим к остальным. Для этого мы просто копируем кнопки необходимое количество раз и задаем соответствующие instance name.

После всего этого снова заблокируем этот слой. А потом создадим еще один – Marker. Сюда нам нужно вставить картинку указателя (ее можно найти в интернете). Из нее делаем мувиклип с названием myMarker и точкой регистрации в центральном нижнем квадрате. Опять же, блокируем слой.

В нашем новом мувиклипе изначально есть один слой с одним кадром. Следует назвать этот слой Marker и создать на нем еще четыре дополнительных кадра (четыре раза нажимаем F5). После этого создаем еще один слой – Cities, и через F6 добавляем тоже четыре, но уже ключевых, кадра. На последнем слое добавляем картинки наших городов (их тоже полно в интернете). Сначала импортируем необходимую картинку и размещаем ее над указателем. На втором кадре называем muscat as the в Properties Inspector. Такое проделываем с каждой картинкой и городом.

Далее открываем панель Actions (с помощью кнопки F9) и вставляем код: stop();

После этого возвращаемся на главную сцену и интенс нейм ставим marker_mc. Создав новый слой через Actions вставляем код, который придаст интерактивности нашей статической карте. На месте "город 1", "город 2", "город 3","город 4" вводим название наших городов:

import mx.transitions.Tween; import mx.transitions.easing.*; var cities:Array = ["город 1", "город 2", "город 3","город 4"] function mover (targetX, targetY){ currentX = marker_mc._x; currentY = marker_mc._y; var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true); var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true); } for (var i = 0; i<cities.length; i++){ var my_btn = this[cities[i]+"_btn"]; my_btn.myCity = cities[i]; my_btn.onRollOver = function() { mover( this._x, this._y); marker_mc.gotoAndStop(this.myCity); } }

Просмотров: 1497


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


 1