Шаг 1
В этом уроке я покажу вам, как создать инерактивную карту, в которой при наведении курсора на город высветится указатель и появится небольшая фотография города. В этом нам пригодится Motion Tween Class для управления движением указателя, который будет перемещаться от города к городу, если бы мы использовали простую анимацию с MotionTween, это было бы совсем непрактично и очень трудоемко. Так же мы будем использовать Массивы и Функции, которые сделают наш код более практичным и легкоизменяемым.
Все картинки, которые я использовал, вы можете скачать тут.
Создайте новый ActionScript 1 или 2 ролик, установите размер сцены как 620x420px, framerate поставьте 30, цвет фона можете оставить любым, он нам не важен. Первый слой переименуйте в Map и имортируйте главную (фоновую) картику на этот слой. Это будет фоном и никаких манипуляций с этой картинкой мы производить мы не будем, так что советую заблокировать слой.
Шаг 2
Создание кнопок
Создайте новый слой и назовтие его Buttons. На этом слое мы создадим первую кнопку, а затем дублируем ее и поместим все получившиеся кнопки на места городов, которые должны убудт подсвечиваться. Выберите Oval Tool и нарисуйте круг диаметром примерно 25px в любом месте на слое. Пока фигура еще выделена, нажимите F8 и конвертируйте ее в кнопку, назовите myButton, так же стоит убедится, что точка регистрации стоит на центральном квадратике. Указатель будет подлетать к этой точке регистрации, поэтому это очень важно.
Шаг 3
На нашей карте города уже отмечены жирными точками, поэтому графика для кнопок нам не нужна. Мы сделаем кнопку прозрачной с помощью изменения ее timeline'a. Двойной клик на кнопке, чтобы изменить ее, timeline главной сцены должна смениться на timeline кнопки, состоящей из четырех кадров. Теперь просто перетащите содержимое первого кадра на последний так, чтобы в первом кадре (Up) не было ровным счетом ничего, а на последнем (Hit) - содержимое первого кадра, т.е. кружочек. Это сделает кнопку невидимой, однако область, при наведении на которую метка будет перемещаться к кнопке, останется.
Шаг 4
Наша кнопка готова, вермеся на главную сцену и поместим эту кнопку на место звездочки, обозначающей город Muscat на карте. Теперь откройте Properties Inspector и задайте этой кнопке instance name как muscat_btn.
Шаг 5
Наша первая кнопка готова, однако городов у нас на карте еще 3, поэтому копируем нашу кнопку три раза и размещаем копии над городами. Для каждой кнопки необходимо задать instance name, соответсвующий городу который она обозначает: sohar_btn, dubai_btn, и abu_dabhi_btn.
Шаг 6
Создание указателя
Блокируем слой с кнопками и создаем еще один для нашего указателя, назовем его Marker. Картинка указателя есть в архиве с картой, поэтому просто импортируем эту картинку на сцену. Пока картинка еще выделена, нажимаем F8, чтобы конвертировать ее в мувиклип, назовем его myMarker. Точку регистрации поставим в нижний центральный квадратик. Когда все сделано, заблокируйте слой.
Шаг 7
Сейчас в мувиклипе, который мы только что создали, один слой и один кадр. Назовем этот слой Marker, и добавим четыре дополнительных кадра (нажмите F5 четыре раза) на этом слое. Добавьте еще один слой и назовите его Cities, на нем добавьте четыре дополнительных КЛЮЧЕВЫХ слоя (F6 четыре раза). Timeline мувиклипа должна выглядеть как на картинке ниже:
Шаг 8
Теперь мы добавим маленькие фотографии для каждого города. На слое Cities кликаем на втором слое и идем File > Import > Import to Stage и выбираем Muscat.jpg. Картинку следуем разместить над указателем, как на картинке ниже:
Шаг 9
Кликаем на втором кадре и открываем Properties Inspector, вписываем muscat as the как название второго кадра.
Шаг 10
И так один за одним импортируем картинку для каждого города на разные кадры на слое Cities, размещая их точно так же, как и первую (над маркером). Обозначаем кадры с картинками соответсвенно названию города, которому они соответсвуют: /strong>sohar, dubai, и abu_dhabi, порядок размещения не имеет никакого значения, посколько переход на каждый кадр будет производится при наведении на соответсвующую ему кнопку.
Теперь откроем панель Actions (F9) и добавим
stop();
как код для первого кадра, предотвращающий проигрывание мувиклипа с картинками.
Вернемся на главую сцену и зададим instance name для мувиклипа с фотографиями как marker_mc.
Шаг 11
ActionScipt код
Все подготолвено для добавления интерактивности нашей карте. Созадим новый слой на главной сцене и назовем его Actions, куда и поместим следующий код:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
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);
}
}
Объяснение кода
Первые две линии кода испортируют классы Tween и Easing, необходимые для создания нужного нам эффекта.
import mx.transitions.Tween;
import mx.transitions.easing.*;
Вторая часть кода создает массив, в котором содержатся имена городов, эти имена являются первой частью названия кнопок а также совпадают с названиями кадров в мувиклипе с фотографиями и указателем. Стоит учесть, что регистр очень важен, ведь если имя не совпадает, то весь ролик может не рабортать.
var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
Третья часть кода создает функцию, которая, используя Tween класс, будет перемещать указатель с его текущего положение к кнопке, на которую навели курсор.
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);
}
Финальная часть кода перебирает из массива названия городов и генерирует instance name'ы кнопок, добаляя к названию города '_btn'. Затем при наведении на кнопку запускается функция mover, описанная во второй части кода. Эта функция заставляет маркер двигаться к кнопке, на которую наведен курсор.
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);
}
}
Все! Тестируем наш ролик на работоспособность. Если что-то не работает, следует проверить названия городов в массиве, если не помогло, то ищем ошибку с самого начала. Вы можете добавить дополнительные города, создавая дополнительные кнопки, задавая им instance name по шаблону 'cityName_btn' дополнительные кадры с фоторгафиями и внося названия городов в массив.
|
