Share
În acest tutorial, vă voi arăta cum să începeți cu Yahoo! Maps API în Flash. Vom încărca câteva fluxuri RSS și vom compila câteva avertismente privind dezastrele naturale folosind longitudinile și latitudinile.
Accesați http://developer.yahoo.com/flash/maps/ și înregistrați-vă pentru un ID de aplicație.
Pe pagina Componentă Yahoo Map AS3, descărcați cea mai nouă versiune a componentei.
Când fișierul se termină descărcarea, extrage fișierul zip. Navigați la dosarul Flash și instalați fișierul MXP.
Porniți Flash și deschideți un nou fișier ActionScript 3.0, apoi salvați-l într-un folder nou ca "yahoo_map.fla".
Schimbați dimensiunea scenei la 640x480. Navigați la fila componente și glisați o copie a componentei YahooMaps în stadiu. Odată ce e pe scenă, șterge-l. Asta va pune o copie în bibliotecă, astfel încât să putem accesa de acolo.
Glisați o copie a TextArea din fila componente. În panoul proprietăților, modificați dimensiunea textului la o lățime de 640 de pixeli și o înălțime de 100 de pixeli. Dați-i o poziție X de 0 și o poziție Y de 330. În final, dați-i un nume de instanță a "textArea".
Apoi glisați o copie a butonului Radio din fila componente. Copiați-l și lipiți-l de trei ori, astfel încât să existe patru instanțe ale componentei RadioButton pe scenă. Aliniați-le la partea de sus și uniforme spațiul lor, astfel încât acestea sunt în linie dreaptă, alături unul de altul. Apoi trageți-le sub componenta TextArea.
Selectați primul buton radio. Dați-i un nume de instanță pentru "radioAll". Cu butonul selectat, treceți la panoul parametrilor. Dați-i un nume de grup de "dezastre". Schimbați proprietatea etichetei la "Toate" și proprietatea selectată la "true".
Selectați următorul buton radio. Dați-i un nume de instanță a "radioEarth", același nume de grup al "Dezastrelor", o etichetă de "cutremure" și lăsați proprietatea selectată ca "falsă".
Selectați al treilea buton radio. Numele de instanță este "radioTsu", numele grupului este "Dezastre", eticheta este "Tsunamis", iar proprietatea selectată este "falsă".
În cele din urmă, selectați al patrulea buton radio. Ea are un nume de instanță a "radioVolcano", numele grupului său este "Dezastre", are o etichetă de "vulcani", iar selectat este "fals". Deoarece vrem să putem comuta între butoane, le-am dat același nume de grup. Spați-le în mod corespunzător, astfel încât să fie distanțate uniform.
Creați un strat separat. Plasați stratul sub strat cu componentele TextArea și RadioButton. În panoul de bibliotecă, în partea de jos, selectați pictograma simbol nou. Creați un nou videoclip mobil gol. Glisați o instanță pe scenă în stratul nou creat, apoi dați-i un nume de instanță "gol". Acest clip video va ține harta când este încărcată. Dați clipului gol gol o poziție X și Y de 0. În felul acesta este aliniat cu colțul din stânga sus al scenei.
Accesați fișierul> nou și selectați un nou fișier ActionScript. Salvați fișierul în același director ca fișierul FLA "yahoo_map" cu numele "yahoo_map.as". În fișierul dvs. yahoo_map FLA, în panoul de proprietăți, tastați "yahoo_map" în câmpul Document class. Acest lucru va face ca fisierul ActionScript sa fie clasa Document pentru yahoo_map FLA.
Aceasta este setarea de bază pentru clasa noastră de documente:
pachet import flash.display.Sprite; clasa publică yahoo_map extinde Sprite funcția publică yahoo_map ()
Acestea sunt declarațiile care vor conduce API-ul YahooMap
pachet import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import flash.display.Sprite; clasa publică yahoo_map extinde Sprite funcția publică yahoo_map ()
Pur și simplu adăugați aceste sub declarația de import YahooMaps. Asigurați-vă că acestea sunt deasupra declarației clasei.
pachet import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import flash.display.Sprite; import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; import flash.filters.DropShadowFilter; import flash.geom.ColorTransform; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; clasa publică yahoo_map extinde Sprite funcția publică yahoo_map ()
Aici vom distra variabilele globale. Avem nevoie de ID-ul aplicației pe care l-ați primit de pe pagina YahooMaps și vom avea nevoie să folosim mai târziu un php pentru a încărca fluxurile în Flash. De aceea avem constanta CURL. Asigurați-vă că acestea sunt plasate sub declarația de clasă, dar deasupra funcției publice principale.
clasa publică yahoo_map extinde Sprite static static const APPID: String = "ID-ul APP APPENDIX"; static static priv CURL: String = "curl.php"; private var harta: YahooMap; privat var ds: DropShadowFilter; privat var geo: Namespace; privat var tsuArray: Array; privat var tsuCounter: int = 0; var privat: ColorTransform; grup privat var: RadioButtonGroup; funcția publică yahoo_map ()
Aici vom instanțiza toate variabilele noastre. După ce am căutat pe Google, am găsit patru feeduri RSS pentru avertismentele de tsunami de la weather.gov. Am încărcat pe acestea în variabila tsuArray, astfel încât să le pot încărca unul câte unul. Spațiul de nume geo va ajuta să ajungeți la latitudinea și longitudinea tuturor fluxurilor RSS. De asemenea, există un nou grup RadioButtonGroup, care va gestiona comutarea componentelor RadioButton pe scenă. În cele din urmă, eu numesc funcția handleMap. Aceasta va începe procesul de încărcare a hărții.
Accentsconagua
funcția publică yahoo_map () init (); funcția privată init (): void tsuArray = array nou ("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc /feeds/ptwc_rss_hawaii.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml „); geo = Noul spațiu de nume ("http://www.georss.org/georss"); ds = noul DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); color = nou ColorTransform (); grup = nou grup RadioButtonGroup ("dezastre"); handleMap (); Aici începem să lucrăm cu elementele de bază ale hărții și unde vom folosi ID-ul aplicației noastre. De asemenea, atunci când apelăm metoda map.init (), dictează dimensiunea pe care dorim ca harta să o aibă. Harta va fi lățimea scenei și va avea o înălțime care atinge partea de sus a componentei TextArea. De asemenea, ascultăm pentru evenimentul MAP_INITALIZE.
funcția privată handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
Când harta este inițializată, aceasta va declanșa funcția onInit. Iată locul în care adăugăm harta în clipul gol care a fost plasat pe scenă. În acest fel harta se va încărca sub componentele TextArea și RadioButton - doar în caz. Apoi adăugăm widget-urile zoom, pan și tip. Acestea controlează tipul hărții, adaugă abilitatea de a afișa harta și de a adăuga comenzile de zoom. Vom centra harta la 0,0.
Harta vizează o nouă variabilă LatLon la care adăugați două numere. Am folosit 0,0 pentru a seta harta la locul unde se întâlnesc Ecuatorul și Primul Meridian. După ce este setat nivelul de mărire a hărților. Aceasta este setată la cea mai înaltă altitudine posibilă. În acest fel, putem vedea toate avertismentele privind dezastrele naturale de pe tot globul. Apoi vom apela funcția pentru a începe încărcarea fluxurilor noastre RSS.
funcția privată onInit (eveniment: YahooMapEvent): void empty.addChild (hartă); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = nou LatLon (0,0); vulcani ();
Trebuie să ieșim din Flash pentru o secundă și să facem puțin PHP. Când am început să fac acest proiect, mi-am dat seama că feed-urile nu se vor încărca pe site-ul meu. O modalitate rapidă și ușoară pe care am reușit să o folosesc a fost utilizarea cURL. Am găsit un exemplu de cod util de la Google. Nu sunt prea sigur de unde tocmai a venit, dar am folosit același script de ceva timp. Deschideți un nou fișier PHP, lipiți în codul următor și salvați-l ca "curl.php"
Acum că am apelat funcția de a începe încărcarea feedului nostru de vulcani, putem să aruncăm o privire la ceea ce se întâmplă în interiorul funcției. Pur și simplu puneți, încărcăm pagina noastră curl.php care încarcă feedul RSS. Apoi adăugăm un ascultător atunci când pagina este încărcată.
funcția privată vulcani (): void var url: URLLoader = nou URLLoader (); url.addEventListener (Eveniment.COMPLETE, onVolcano); var vars: URLVariables = noi URLVariabile (); var req: URLRequest = noua adresă URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req);
În primul feed, există câteva caracteristici interesante. Cel mai important este punctul geo. Aceasta este latitudinea și longitudinea avertizării. De asemenea, în acest feed, există un cod de culoare pentru a afișa nivelul de alertă al activității. Cu fluxul încărcat, există două liste xml care vor fi încărcate. Una este pentru latitudine și longitudine. Celălalt este pentru codul de culoare.
Listele sunt bucle și noile markere sunt create pe hartă. Clipurile video personalizate sunt adăugate la marcaje, acestea fiind făcute cu funcții pe care le voi descrie în curând. Culoarea filmelor imbricate este controlată folosind proprietatea "colorTransform". După ce alimentarea este încărcată și marcatorii sunt plasați, următorul feed RSS este setat să se încarce. De asemenea, trec textul descrierii în videoclipul nou creat, astfel încât să pot ajunge la acesta mai târziu folosind numele care a fost dat clipului video.
funcția privată de peVolcano (eveniment: Eveniment): void var vol: Namespace = nou Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = nou XML (event.target.data); var punctList: XMLList = xml ... geo :: punct.text (); var culoareLista: XMLList = xml ... vol :: colorcode.text (); var șir: String; pentru (var i: uint; i Acum este timpul să încărcați feedul RSS al cutremurelor. Funcțiile funcționează cam la fel ca înainte.
funcția privată earthQuakes (): void var url: URLLoader = nou URLLoader (); var vars: URLVariables = noi URLVariabile (); var req: URLRequest = noua adresă URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml" req.data = vars; url.addEventListener (eveniment.COMPLETE, onEarthQuake); url.load (req);
Diferențele sunt că nu există cod de culoare pentru acest feed. În schimb, schimb doar culoarea manuală în maro. De asemenea, descrierea avertizării are câteva html-uri în interiorul acesteia. Am folosit o expresie regulată pe care am întâlnit-o de la Google o vreme în urmă, pentru a elimina toate HTML-ul din ea. Fără a face acest lucru, componenta TextArea va încărca o imagine, pe care nu am vrut.
Un alt lucru de reținut este că acesta este un alt tip de feed RSS. Din anumite motive (în experiența mea) feedurile Atom nu le place să analizeze corect. Modul în jurul căruia era să cobori copacul copilului la primul element. De asemenea, nodul element nu are întotdeauna același număr de copii. Am adăugat o simplă dacă pentru a ține cont de aceasta. În cele din urmă, sunăm funcția de a încărca ultimul flux RSS.
funcția privată onEarthQuake (eveniment: Eveniment): void var xml: XML = XML nou (event.target.data); lista var: XMLList = xml ... geo :: point.text (); var string: String pentru (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / Gl??; string = string.replace (model, ""); earth.desc = șir; tsunamis ();
Aici începem să încărcăm feedurile de tsunami. Am creat un tsuCounter, astfel încât să putem mări numărul de fiecare dată când este încărcat un feed. Când contorul ajunge la sfârșitul tsuArray, vom adăuga ascultătorii de schimbare grupului RadioButtonGroup creat. Deoarece vreau să pot accesa fiecare marcator creat în fiecare matrice, am adăugat tsuCounter la începutul numelui clipului video. Astfel voi putea accesa descrierea din 0Tsunami1 și 1Tsunami1.
În cele din urmă, când toate feedurile au fost încărcate, adăugăm ascultătorul evenimentului la RadioButtonGroup
funcția privată tsunamis (): void var url: URLLoader = nou URLLoader (); var vars: URLVariables = noi URLVariabile (); var req: URLRequest = noua adresă URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Eveniment.COMPLETE, onTsu); url.load (req); funcția privată onTsu (eveniment: Eveniment): void tsuCounter ++; dacă (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); altceva tsunamis (); var xml: XML = nou XML (event.target.data); lista var: XMLList = xml ... geo :: point.text (); var șir: String; pentru (var i: uint; i
Acestea sunt funcțiile care adaugă marcatorii, controlează aspectul marcatorilor, setează longitudinea și latitudinea markerelor și creează clipurile video în marcatori. Funcția drawMarker creează un nou marcator, adaugă o umbră de picătură, adaugă clipul video la el, trece cu același nume ca și movieclip la el, obține latitudinea și longitudinea de la feedul RSS încărcat și, în final, adaugă ascultătorii evenimentului. Marcatorul este adăugat markerManager al hărții. Funcția drawCircle trage doar un cerc de 10 pixeli lățime. Funcția getLatlon ia șirul care îi este transmis, îl rupe și îl returnează pe LatLon. Ultima funcție, Color, se ocupă de diferitele culori care i-au fost transmise prin feedul vulcanic.
funcția privată drawMarker (mc: MovieClip, șir: String, nume: String): void var marker: Marker = Marker nou (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (șir); marker.name = nume; map.markerManager.addMarker (marcator); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); funcția privată drawCircle (): MovieClip var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); retur mc; funcția privată getLatlon (șir: String): LatLon var array: Array = string.split (/ [\ s] /); Var Latlon: LatLon = LatLon nou (array [0], array [1]); retur latlon; funcția privată theColor (șir: String): ColorTransform var int: uint; comutator (șir) caz "ORANGE": int = 0xFD8000; pauză; cazul "GREEN": int = 0x225E33; pauză; implicit: int = 0xFF0000; var ct: ColorTransform = noul ColorTransform (); ct.color = int; return ct;
Când utilizatorul rulează marcatorul, descrierea avertizării este afișată în componenta TextArea. Acest lucru este gestionat prin intermediul funcției onOver. Ținta este exprimată ca un marcator folosind numele care a fost transmis. Apoi primim textul de descriere care a fost transmisă la embedul movieclip în interiorul marcatorului și îl trimite la componenta TextArea. Evenimentul onClick trasează harta pe oricare dintre marcatorii pe care a fost făcut clic. Aceasta se face folosind metoda map.panToLatLon ().
funcția privată onOver (eveniment: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) var mc: MovieClip = MovieClip (marker.getChildByName (event.target.name)); textArea.htmlText = mc.desc; funcția privată onClick (eveniment: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
Evenimentul final este evenimentul onChange. Acest eveniment dezactivează toate clipurile video, cu excepția butoanelor selectate. Ea, de asemenea, pansa harta la cele mai recente alerte care au fost primite în feed-ul RSS.
funcția privată peChange (eveniment: Eveniment): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var i: uint; var marker: Marker; var panTo: Marker; switch (g.selection.name) caz "radioVolcano": pentru (i = 0; i
Iată cum arată codul final.
pachet import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import flash.filters.DropShadowFilter; import flash.geom.ColorTransform; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; clasa publică yahoo_map extinde Sprite static static const APPID: String = "ID-ul APP APPENDIX"; static static priv CURL: String = "curl.php"; private var harta: YahooMap; privat var ds: DropShadowFilter; privat var geo: Namespace; privat var tsuArray: Array; privat var tsuCounter: int = 0; var privat: ColorTransform; grup privat var: RadioButtonGroup; funcția publică yahoo_map () init (); funcția privată init (): void color = new ColorTransform (); tsuArray = array nou ("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_hawaii.xml", " http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml "); geo = Noul spațiu de nume ("http://www.georss.org/georss"); ds = noul DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); grup = nou grup RadioButtonGroup ("dezastre"); handleMap (); funcția privată handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); funcția privată onInit (eveniment: YahooMapEvent): void empty.addChild (hartă); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = nou LatLon (0,0); vulcani (); funcția privată vulcani (): void var url: URLLoader = nou URLLoader (); url.addEventListener (Eveniment.COMPLETE, onVolcano); var vars: URLVariables = noi URLVariabile (); var req: URLRequest = noua adresă URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req); funcția privată peVolcano (eveniment: Eveniment): void var vol: Namespace = nou Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = nou XML (event.target.data); var punctList: XMLList = xml ... geo :: punct.text (); var culoareLista: XMLList = xml ... vol :: colorcode.text (); var șir: String; pentru (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / Gl??; string = string.replace (model, ""); earth.desc = șir; tsunamis (); funcția privată tsunamis (): void var url: URLLoader = nou URLLoader (); var vars: URLVariables = noi URLVariabile (); var req: URLRequest = noua adresă URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Eveniment.COMPLETE, onTsu); url.load (req); funcția privată onTsu (eveniment: Eveniment): void tsuCounter ++; dacă (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); altceva tsunamis (); var xml: XML = nou XML (event.target.data); lista var: XMLList = xml ... geo :: point.text (); var șir: String; pentru (var i: uint; i Abia am zgâriat suprafața pentru ceea ce YahooMaps are sub capota. Citiți documentația și faceți nuci!
