Уроки Flash: Інтерактивна карта, Програми для роботи з графікою, Програмні керівництва, статті

Цей урок навчить вас як створити інтерактивну карту, в якій при наведенні курсору на місто, буде висвітлюватися маленька фотографія.


Нам знадобиться ось цей файл з фотографіями, Використаними в уроці.
Створюємо новий документ, розмір 620х420 і кадрів в секунду (framerate) 30.

Назвемо наш єдиний шар Map і імпортуємо (Frame> Import> Import to Stage) зображення картa, заблокуємо шар.


Тепер пишемо stop (); для першого кадра.Виделяем перший кадр відкриваємо панель Action Script (F9) і пишемо stop ();
Повертаємося на основну сцену. Прописуємо instance name marker_mc, для movie clip покажчик (marker).


Створюємо новий шар, заходимо в панель Action Script (F9). І пишемо ось цей код:
CODE

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 and Easing classes, необхідних для використання Tween ефекту.


CODE
import mx.transitions.Tween;
import mx.transitions.easing.*;

Друга частина (один рядок) – Array, яке містить назви міст, назви тут повинні відповідати першій частині назви кнопки. Це – також ті ж самі назви, які ми використовували як ярлики кадру.


CODE
var cities:Array = [“muscat”, “sohar”, “dubai”,”abu_dhabi”]

Третя кодова частина створює Function, яка використовує Tween class, щоб перемістити покажчик від його поточного положення до положення кнопки, яка називає цю функцію. Ми створили два tween objects перемістити об’єкт горизонтально і вертикально.


CODE
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 для кнопок, і потім рухає покажчик і зупиняє на зображенні обраного міста.


CODE
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);
}
}

Ну от і все.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*