Інтерактивна карта в flash

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

Просту карту можна зробити більш прикольною і пізнавальною. У цьому уроці буде показано, як домогтися такого ефекту, щоб при наведенні курсору на певний місто, висвічувалася його фотографія.

Почнемо ми з того, що створимо новий документ 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" вводимо назву наших міст:

Сподобався матеріал? Поділися з друзями!

Схожі статті