Уроки flash інтерактивна карта - програмні продукти
Riyadh Al Balushi (Переклад: bu_blik)
Цей урок навчить вас як створити інтерактивну карту. в якій при наведенні курсору на місто, буде висвітлюватися маленька фотографія.
Нам знадобиться ось цей файл з фотографіями. використаними в уроці.
Створюємо новий документ, розмір 620х420 і кадрів в секунду (framerate) 30.
Назвемо наш єдиний шар Map і імпортуємо (Frame> Import> Import to Stage) зображення картa, заблокуємо шар.
Створення кнопок.
Створюємо новий шар і назвемо його Buttons. Ми використовуємо цей шар для створення першої кнопки і потім скопіюємо її для інших міст.
Беремо Oval Tool і малюємо коло в будь-якому місці нашої сцени. Діаметер дорівнює приблизно 25px. Поки коло виділений, натискаємо F8 (Convert to Symbol), перобразуем в button символ і назвемо myButton, з точкою реєстрації в центрі.
Нам не потрібно що б наша кнопка була видима, так як на карті, міста вже позначені певними знакамі.Поетому, зробимо нашу кнопку невидимою. Подвійний клік на колі, щоб увійти в режим редагування кнопки. У timeline пересуваємо лінію з Up frame на Hit frame. Дивіться малюнок.
Kнопка готова. Повертаємося на основну сцену
і ставимо нашу кнопку зверху зірки, яка показує місце знаходження міста Muscat на карті. У Properties Inspector даємо назву нашої кнопці muscat_btn.
Наша перша кнопка готова.Теперь копіюємо і вставляємо кнопку зверху позначень інших міст (Sohar, Dubai і Abu Dhabi) .Осталпсь поміняти instance name у кнопок на sohar_btn, dubai_btn, і abu_dabhi_btn відповідно.
Перевірте щоб існуючі шари були закрити.Создаем новий шар і назвемо його Marker. Імпортуємо зображення покажчик Frame> Import> Import to Stage. Поки об'єкт виділено натискаємо F8, перетворимо в Movie Clip і назвемо myMarker.
Нам потрібно поставити крапку реєстрації на кінчик покажчика, для того що б кінчик покажчика вважався опорною точкою. Подвійний клік на о'екте, щоб увійти в режим редактірованія.Обратіте внніманіе на знак +. посуньте покажчик так що-б кінчик його стосувався знака +. Готово, заблокуємо шар.
Поки залишаємося в режимі редагування, назвемо наш єдиний шар Marker, і додамо 4 додаткових frames (натискаючи 4 рази F5). Створюємо новий шар і назвемо його Cities. Додамо 4 keyframes (поки шар виділений натискаємо 4 рази F6) .Смотрім малюнок.
Тепер ми імпортуємо мініатюри для кожного города.Проверьте щоб був виділений шар Cities, тепер натискаємо на другий кадр і йдемо Frame> Import> Import to Stage, вибираємо зображення Muscat. Розміщуємо мініатюру зверху покажчика, як показано на малюнку.
Натискаємо на другий кадр в шарі Cities, в Properties Inspector пишемо ім'я muscat для Frame.
Далі один за одним імпортуємо зображення міст кожне на наступний кадр шару Cities, і ставимо мініатюри на місце, зверху указателя.Как описувалося вище. Потім прописуємо ім'я для кожного кадру відповідно. (Sohar, dubai, і abu_dhabi)
Тепер пишемо stop (); для першого кадра.Виделяем перший кадр відкриваємо панель Action Script (F9) і пишемо stop ();
Повертаємося на основну сцену. Прописуємо instance name marker_mc. для movie clip покажчик (marker).
Створюємо новий шар, заходимо в панель Action Script (F9). І пишемо ось цей код:
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
my_btn.myCity = cities [i];
my_btn.onRollOver = function () mover (this._x, this._y);
marker_mc.gotoAndStop (this.myCity);
>
>
Перші дві лінії коду просто імпортують Tween and Easing classes, необхідних для використання Tween ефекту.
import mx.transitions.Tween;
import mx.transitions.easing. *;
Друга частина (один рядок) - Array, яке містить назви міст, назви тут повинні відповідати першій частині назви кнопки. Це - також ті ж самі назви, які ми використовували як ярлики кадру.
var cities: Array = [ "muscat", "sohar", "dubai", "abu_dhabi"]
Третя кодова частина створює Function, яка використовує Tween class. щоб перемістити покажчик від його поточного становища до становища кнопки, яка називає цю функцію. Ми створили два tween objects перемістити об'єкт горизонтально і вертикально.
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 names для кнопок, і потім рухає покажчик і зупиняє на зображенні обраного міста.
for (var i = 0; i
my_btn.myCity = cities [i];
my_btn.onRollOver = function () mover (this._x, this._y);
marker_mc.gotoAndStop (this.myCity);
>
>
Файли для завантаження