Створення інтерактивної карти

У цьому уроці я покажу вам, як створити інерактівную карту, в якій при наведенні курсору на місто висвітиться покажчик і з'явиться невелика фотографія міста. У цьому нам стане в нагоді Motion Tween Class для управління рухом покажчика, який буде переміщатися від міста до міста, якби ми використовували просту анімацію з MotionTween. це було б зовсім непрактично і дуже трудомістким. Так само ми будемо використовувати Масиви і Функції. які зроблять наш код більш практичним і легкоізменяемим.

Всі картинки, які я використовував, ви можете завантажити тут.

Створіть новий ActionScript 1 або 2 ролик, встановіть розмір сцени як 620x420px, framerate поставте 30, колір фону можете залишити будь-яким, він нам не важливий. Перший шар перейменуйте в Map і імортіруйте головну (фонову) Картік на цей шар. Це буде фоном і ніяких маніпуляцій з цією картинкою ми виробляти ми не будемо, так що раджу заблокувати шар.

Створіть новий шар і назовтіе його Buttons. На цьому шарі ми створимо першу кнопку, а потім дублюємо її і помістимо всі отримані кнопки на місця міст, які повинні убудт підсвічуватися. Виберіть Oval Tool і намалюйте коло діаметром приблизно 25px в будь-якому місці на шарі. Поки фігура ще виділена, натискаючи F8 і конвертуйте її в кнопку, назвіть myButton. так само варто переконається, що точка реєстрації стоїть на центральному квадратику. Покажчик буде підлітати до цієї точки реєстрації, тому це дуже важливо.

На нашій карті міста вже відзначені жирними точками, тому графіка для кнопок нам не потрібна. Ми зробимо кнопку прозорою за допомогою зміни її timeline'a. Подвійний клік на кнопці, щоб змінити її, timeline головної сцени повинна змінитися на timeline кнопки, що складається з чотирьох кадрів. Тепер просто перетягніть вміст першого кадру на останній так, щоб в першому кадрі (Up) не було зовсім нічого, а на останньому (Hit) - вміст першого кадру, тобто кружечок. Це зробить кнопку невидимою, проте область, при наведенні на яку мітка буде переміщатися до кнопки, залишиться.

Наша кнопка готова, Верма на головну сцену і помістимо цю кнопку на місце зірочки, що позначає місто Muscat на карті. Тепер відкрийте Properties Inspector і задайте цій кнопці instance name як muscat_btn.

Наша перша кнопка готова, однак міст у нас на карті ще 3, тому копіюємо нашу кнопку три рази і розміщуємо копії над містами. Для кожної кнопки необхідно задати instance name, відповідний місту який вона позначає: sohar_btn, dubai_btn, і abu_dabhi_btn.

Блокуємо шар з кнопками і створюємо ще один для нашого покажчика, назвемо його Marker. Картинка покажчика є в архіві з картою, тому просто імпортуємо цю картинку на сцену. Поки картинка ще виділена, натискаємо F8. конвертувати її в мувікліп, назвемо його myMarker. Крапку реєстрації поставимо в нижній центральний квадратик. Коли все зроблено, заблокуйте шар.

Зараз в мувікліп, який ми тільки що створили, один шар і один кадр. Назвемо цей шар Marker. і додамо чотири додаткових кадру (натисніть F5 чотири рази) на цьому шарі. Додайте ще один шар і назвіть його Cities. на ньому додайте чотири додаткових КЛЮЧОВИХ шару (F6 чотири рази). Timeline мувікліпа повинна виглядати як на картинці нижче:

Тепер ми додамо маленькі фотографії для кожного міста. На шарі Cities натискаємо на другому шарі і йдемо File> Import> Import to Stage і вибираємо Muscat.jpg. Картинку слідуємо розмістити над покажчиком, як на картинці нижче:

Кількома на другому кадрі і відкриваємо Properties Inspector. вписуємо muscat as the як назва другого кадру.

І так один за одним імпортуємо картинку для кожного міста на різні кадри на шарі Cities. розміщуючи їх точно так же, як і першу (над маркером). Позначаємо кадри з картинками соответсвенно назвою міста, якому вони відповідають: / strong> sohar, dubai, і abu_dhabi. порядок розміщення не має ніякого значення, поскільки перехід на кожен кадр буде проводиться при наведенні на відповідну йому кнопку.

Тепер відкриємо панель Actions (F9) і додамо

як код для першого кадру, що запобігає програвання мувікліпа з картинками.

Повернемося на чолі сцену і поставимо instance name для мувікліпа з фотографіями як marker_mc.

Все подготолвено для додавання інтерактивності нашій карті. Созадім новий шар на головній сцені і назвемо його 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 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 клас, буде переміщати покажчик з його поточного положення до кнопки, на яку навели курсор.

Фінальна частина коду перебирає з масиву назви міст і генерує instance name'и кнопок, Добаль до назви міста '_btn'. Потім при наведенні на кнопку запускається функція mover. описана в другій частині коду. Ця функція змушує маркер рухатися до кнопки, на яку наведений курсор.

for (var i = 0; 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' додаткові кадри з фоторгафии і вносячи назви міст в масив.