Шаг 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 как название второго кадра.