Létrehozása interaktív térkép

Ebben a leírásban megmutatom, hogyan kell létrehozni ineraktivnuyu térkép, amely, ha lebeg a város felett kigyullad, és a mutató lesz egy kis képet a város. Ez hasznos a számunkra Motion Tween Class mozgásának ellenőrzésére a mutató, ami mozog városról városra, ha használják egy egyszerű animációt MotionTween. ez nagyon praktikus, és nagyon időigényes. Ahogy mi fog használni tömbök és függvények. hogy majd a kódot sokkal praktikusabb és könnyű megváltoztatni.


Az összes kép, hogy én használtam, itt töltheti le.

Hozzon létre egy új ActionScript 1 vagy 2 videó, a méret a jelenet, mint egy 620x420px, framerate készlet 30, a háttér színét is hagyhatja, ez nem fontos. Az első réteg, és nevezze Map imortiruetsya fő (háttér) Kartika erre a rétegre. Ez lesz a háttér és a manipuláció a képet gyártunk mi nem, így azt tanácsolom, hogy rögzítse a réteget.

Hozzon létre egy új réteget, és annak nazovtie gombok. Ezen réteg fogunk létrehozni az első gombot, majd a dupla, és tedd az összes gomb a kapott városi teret, hogy ki kell emelni ubudt. Válassza ki az Ovális eszközt, és rajzoljon egy kör átmérője körülbelül 25 képpont bárhol a réteget. Bár ez a szám még mindig megnyomásával választható ki F8 és átalakítani, hogy egy gomb, neve myButton. Azt is érdemes meggyőződni arról, hogy a regisztrációs pont a központi terek. Pointer repül fel a bejegyzési ponton, ezért nagyon fontos.

A térkép a város már félkövér pontot, így a menetrend nem kell gombokat. Mi teszi a gomb átlátszó megváltoztatásával timeline'a. Dupla kattintás a gombra, hogy változtassa meg a fő idõvonala kell cserélni az idővonalon gombok amely négy kereteket. Most egyszerűen húzza a tartalmát az első keret az utolsó, úgyhogy az első keret (Up) nem volt semmi, de az utolsó (Hit) - a tartalmát az első keret, azaz kört. Ez lehetővé teszi majd a gomb látható, de a területet, ha lebeg, amelyen a címke mozog a gomb marad.

A gomb készen áll, Verma a nagyszínpadon, és tegye meg a gombot a helyére csillag jelöli a város a térképen Muscat. Most nyissa meg a Tulajdonságok Inspector, és állítsa a gombot példány nevét, mint a muscat_btn.

Az első gomb kész, de a városok a térképen 3 több, így a másolás gombot háromszor, és helyezze a másolatot a városokban. Minden gomb, meg kell adnia a példány neve, amely egyaránt megfelel a városi ő képviseli: sohar_btn, dubai_btn és abu_dabhi_btn.

Létrehozása interaktív térkép

Lock a réteget a gombok, és hozzon létre egy másikat az indexben, ez egy Marker. A mutató kép az archívumban a kártyával, így csak importálja ezt a képet a színpadon. Bár a kép ki van jelölve, nyomja meg az F8. alakítani egy videóklipet, és nevezze meg myMarker. Regisztráció pont rendelni alsó főtér. Ha minden kész, blokkréteg.

Most a videóklipet most létrehozott egy másik réteg, és egy keretet. Hívjuk ezt a réteget Marker. és adjunk hozzá négy további kereteket (nyomja meg az F5 négyszer) erre a rétegre. Az újabb réteg és nevezzük el városok. azt hozzá négy további kulcsot réteg (F6 négyszer). Timeline a videóklipet kell kinéznie az alábbi képet:

Most fogunk hozzá kis képeket minden városban. A városok a réteg klikk a második réteget, és válassza ki a Fájl> Importálás> Import fázisához, és válassza ki Muscat.jpg. Kép kövesse helyezni az index, az alábbiak szerint:

Kattintson a második kerethez és nyissa meg a Tulajdonságok felügyelő. beírását muscat a mint a neve a második keretben.

És így, egyenként import képet minden városban a különböző keretek a városi réteg. helyezi őket ugyanúgy, mint az első (a fenti marker). Jelöljük keretek képekkel illetőleg a város nevét, amelyhez megfelelnek: / strong> sohar, dubai, és abu_dhabi. rakó sorrend nem számít, mert az átmenet minden egyes képkocka lesz, ha mozog hozzá megfelelő gombot.

Most nyissa ki a Műveletek (F9), és adjunk hozzá egy panelt

A kódot az első keret, amely megakadályozza a felvételt a videoklipet.

Térjünk vissza a fejét a színpadon, és adja példány nevét a videóklipet képeket, mint marker_mc.

Minden podgotolveno hozzá interaktivitás a térképen. Sozadim egy új réteget a nagyszínpadon és a nevét műveletek. ahol, és tegye be az alábbi kódot:

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

var városok: Array = [ "Muscat", "Sohar", "Dubai", "abu_dhabi"]


funkció mozgató (targetX, targetY) currentX = marker_mc._x;
currenty = marker_mc._y;
var xTween: Tween = új Tween (marker_mc, "_x", Strong.easeOut, currentX, targetX 5, igaz.);
var yTween: Tween = új Tween (marker_mc, "_Y", Back.easeOut, currenty, targetY, 1,5, true);
>

for (var i = 0; i var my_btn = e [városok [i] + "_ gmb"];
my_btn.myCity = városok [i];
my_btn.onRollOver = függvény () mozgató (this._x, this._y);
marker_mc.gotoAndStop (this.myCity);
>
>

kód magyarázat


Az első két sornyi kódot isportiruyut osztályok Tween és lazítás. szükséges számunkra, hogy hozzon létre a kívánt hatást.

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

A második rész a kód egy tömböt hoz létre, amely tartalmazza a városok nevei, ezek a nevek az első része a gomb nevét és a nevét egybeesik a keret videóklipet fotók és az index. Érdemes megjegyezni, hogy az ügy nagyon fontos, mert ha a név nem egyezik, akkor az egész film nem rabortat.

var városok: Array = [ "Muscat", "Sohar", "Dubai", "abu_dhabi"]

A harmadik rész a kód létrehoz egy funkció, amely segítségével a Tween osztály fogja mozgatni a mutatót a jelenlegi helyzetben, hogy a gomb, ami esett át.

funkció mozgató (targetX, targetY) currentX = marker_mc._x;
currenty = marker_mc._y;
var xTween: Tween = új Tween (marker_mc, "_x", Strong.easeOut, currentX, targetX 5, igaz.);
var yTween: Tween = új Tween (marker_mc, "_Y", Back.easeOut, currenty, targetY, 1,5, true);
>

Az utolsó rész a kód végiglépked a tömb a város nevét, és létrehoz fokon name'y gombok Daubal a neve „_btn” város. Aztán, ha az egérmutatót a gomb elindítja mozgató funkció. ismertetett második részében a kódot. Ezzel a funkcióval a token, hogy lépjen a gombot, amelyhez a képernyő kurzor.

for (var i = 0; i var my_btn = e [városok [i] + "_ gmb"];
my_btn.myCity = városok [i];
my_btn.onRollOver = függvény () mozgató (this._x, this._y);
marker_mc.gotoAndStop (this.myCity);
>
>

Mindent! Teszteljük a videót teljesítményét. Ha valami nem működik, ellenőrizze a város nevét a tömbben, ha nem segít, akkor forduljon egy hibát az elejétől. Akkor még több városban, hogy további gombok kérve őket, például névmintát „cityName_btn” extra képkockákat képek és hogy a város nevét a tömbben.