Cu ajutorul acestui tutorial veți învăța cum să utilizați API-ul Meteo Yahoo pentru a obține și afișa previziunile meteo cu AS3.
Rezultatul final al rezultatelor
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Pasul 1: Creați un fișier nou
Presupun că veți folosi Flash, deși puteți face acest lucru cu un proiect Flex sau standard AS3.
Deschideți Flash, accesați File> New, selectați Flash File (ActionScript 3.0), apoi setați dimensiunea ca 320x180px și salvați FLA ori de câte ori doriți.
Pasul 2: Creați o clasă de documente
Acum mergeți la File> New și de data aceasta selectați File ActionScript, apoi salvați-l ca Weather.as în același folder în care ați salvat fișierul FLA. Apoi, reveniți la FLA, mergeți la Properties și scrieți numele fișierului ActionScript în spațiul "Class". (Pentru mai multe informații despre utilizarea unei clase de documente, citiți această introducere rapidă.)
Pasul 3: Configurarea clasei de documente
Mergeți la fișierul ActionScript și scrieți codul pentru clasa dvs. de documente:
pachet import flash.display.MovieClip; // numele clasei trebuie sa fie la fel ca fisierul public clasa Vremea extinde MovieClip // Constructor: aceasta functie trebuie sa aiba acelasi nume ca si fisierul si functia publica de clasa Weather () trace ("This is your vreme clasă "):
Testați-l și ar trebui să urmăriți "Aceasta este clasa dvs. de vreme" în fereastra de ieșire.
Pasul 4: Verificați API-ul meteo Yahoo
Ieșiți la secțiunea Yahoo Weather API a site-ului dezvoltatorilor Yahoo; acolo veți găsi câteva explicații despre API-ul Meteo Yahoo.
Pasul 5: Cereți-vă XML
Ceea ce trebuie să citim în Flash este un fișier XML, așa că trebuie să știm cum să-l cerem, ceea ce este destul de simplu. Trebuie să te gândești Unde vrei să știi vremea și în ce unitate (Celsius sau Fahrenheit) doriți temperatura. Apoi, puteți obține XML cu aceste date prin intermediul acestei adrese URL:
var url: String = "http://weather.yahooapis.com/forecastrss" + "? w =" + (numărul locației) + "& u =" + ("c" pentru celcius sau "f" pentru fahrenheit);
Pasul 6: Obținerea numărului de locație
Numărul locației trebuie să fie un WOLID. Pentru a vă găsi WOEID-ul, căutați sau căutați orașul dvs. din pagina de pornire a Yahoo. WOEID se află în adresa URL a paginii de prognoză pentru orașul respectiv. De asemenea, puteți obține codul WOE introducând codul poștal pe pagina de pornire. De exemplu, dacă căutați Los Angeles pe pagina principală a Meteo, pagina de prognoză pentru orașul respectiv este: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, astfel încât WOEID este 2442047.
Pasul 7: Înțelegerea XML
Când solicitați orice locație meteo, ceea ce veți primi este XML, astfel:
Yahoo! Vremea - Los Angeles, CA http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Yahoo! Vremea pentru Los Angeles, CAen-neMon, 01 Mar 2010 05:47 PST60Yahoo! Vreme14218 http://weather.yahoo.com http://l.yimg.com/a/i/us/nws/th/main_142b.gifCondiții pentru Los Angeles, CA la 5:47 PST34.05-118.25 http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Mon, 01 Mar 2010 05:47 PST Condițiile actuale: Târg, 12 C
Prognoza meteo: Sâmbătă - Parțial înorat. Înaltă: 20 Scăzut: 10 Tue - Zi / Zi Sun. Mare: 19 Scăzut: 9
Prognoza completa la Yahoo! Vreme
(furnizat de The Weather Channel) ]]>USCA0638_2010_03_01_5_47_PST
(Dacă vrei să înțelegi toate XML, vizitați http://developer.yahoo.com/weather/.)
Pentru această aplicație avem nevoie de yweather: locație etichetă, yweather: atmosfera și eticheta yweather: prognoza tag-uri: eticheta de locație ne va da textul pentru locație, eticheta atmosferică ne va da umiditatea și etichetele de prognoză ne vor da temperatura pentru ziua curentă și a doua zi.
Pasul 8: Parsează-l
Acum, că avem o mai bună înțelegere a tot ceea ce XML, ceea ce trebuie să facem este să atribuiți date variabilelor, astfel încât să putem folosi acele date pentru a configura aplicația noastră. Pentru aceasta, trebuie să creăm unele variabile și să încărcăm XML-ul. Acesta este modul în care faceți acest lucru (puneți codul în locurile relevante din clasa de documente):
// Aceasta va conține toate datele din XML privat var _xmlData: XML; // Aceasta va fi adresa urlului XML pe care o vom încărca privat var _xmlURL: String; funcția privată loadXML (xmlURL: String): void var loader: URLLoader = nou URLLoader (); solicitare var: URLRequest = new URLRequest (_xmlURL); loader.load (cerere); loader.addEventListener (Event.COMPLETE, loadData); funcția privată loadData (eveniment: Eveniment): void _xmlData = nou XML (event.currentTarget.data); var yweather: Namespace = Noul spațiu de nume ("http://xml.weather.yahoo.com/ns/rss/1.0"); var zi: String = _xmlData.channel.item.yweather :: previzualizare [0]. @ zi; var codeToday: String = _xmlData.channel.item.yweather :: previzualizare [0]. @ code; var codeMaine: String = _xmlData.channel.item.yweather :: prognoză [1]. @ code;
Să trecem peste acea bucată de cod.
Ai nevoie de _xmlData variabila care urmează să fie definită în afara tuturor funcțiilor (am definit-o ca o variabilă privată) pentru că va trebui să o obțineți peste tot în cod, nu doar într-o singură funcție.
Prima funcție, loadXML (), încarcă fișierul XML în Flash; folosim un ascultător al evenimentului pentru a verifica momentul când acesta este finalizat, apoi executați incarca date().
incarca date() funcția atribuie datele primite către _xmlData variabilă pe care am creat-o deja. Utilizăm un spațiu de nume deoarece Yahoo a decis să-și configureze XML-ul (puteți găsi mai multe despre spațiile de nume de la livedocs.adobe.com). Celelalte variabile din această funcție extrag informațiile pe care dorim să le afișăm în aplicația noastră din XML.
(Pentru mai multe informații despre parsarea XML în AS3, consultați tutorialul AS3: 101 - XML al lui Dru Kepple.)
Pasul 9: Creați câmpuri text
Acum trebuie să afișăm acele informații. Pentru a face acest lucru, am putea crea câmpuri de text în cod și să atribuiți un format și text, dar prefer să folosesc Flash IDE, pentru a economisi timp. Așadar, deveniți creativi, avem nevoie de opt câmpuri de text: temperatura, umiditatea, temperatura maximă și temperatura minimă pentru ziua curentă. Apoi, avem nevoie de temperatura maximă și de temperatura minimă pentru a doua zi, una pentru numele zilei următoare și una care arată locația. Toți trebuie să fie dinamic câmpurile de text, astfel încât să putem atribui informațiile.
Nu uitați să dați toate numele instanțelor de text; am ales temp, umiditate, max, min, maxt, mentă, Mâine și stat.
Pasul 10: Afișați informațiile
Acum că am creat câmpurile de text, trebuie să alocăm informațiile pe care le-am reluat din XML. Pentru asta avem nevoie de numele instanței fiecărui câmp text și de informațiile pe care le avem deja, cum ar fi acest lucru (adăugând la cele existente incarca date() funcţie):
funcția privată loadData (eveniment: Eveniment): void _xmlData = nou XML (event.currentTarget.data); var yweather: Namespace = Noul spațiu de nume ("http://xml.weather.yahoo.com/ns/rss/1.0"); var zi: String = _xmlData.channel.item.yweather :: previzualizare [0]. @ zi; var codeToday: String = _xmlData.channel.item.yweather :: previzualizare [0]. @ code; var codeMaine: String = _xmlData.channel.item.yweather :: prognoză [1]. @ code; // Alocarea informațiilor câmpurilor de text maxt.text = _xmlData.channel.item.yweather :: prognoză [1]. @ High + "° F"; mint.text = _xmlData.channel.item.yweather :: prognoză [1]. @ low + "° F"; state.text = _xmlData.channel.yweather :: locație. @ oraș; umiditate.text = _xmlData.channel.yweather :: atmosferă. @ umiditate + "%"; temp.text = _xmlData.channel.item.yweather :: condiție. @ temp + "° F"; max.text = _xmlData.channel.item.yweather :: previzualizare [0]. @ high + "° F"; min.text = _xmlData.channel.item.yweather :: prognoză [0]. @ low + "° F"; comutator (zi) caz "Sun": tomorrow.text = "luni"; pauză; cazul "Mon": tomorrow.text = "Marți"; pauză; caz "Tue": tomorrow.text = "Miercuri"; pauză; cazul "Wed": tomorrow.text = "Joi"; pauză; cazul "Thu": tomorrow.text = "Vineri"; pauză; cazul "Fri": tomorrow.text = "Sâmbătă"; pauză; cazul "Sat": tomorrow.text = "Duminică" pauză;
Amintiți-vă cele opt câmpuri de text create de noi? Acum trebuie să folosim aceste nume aici în cod. Acea intrerupator declarația este pentru că nu vrem să arătăm doar "Mieru", "Thu" sau "Fri", vrem tot numele.
Pasul 11: Adăugați un anumit stil
Acum avem doar text; ar fi frumos să adăugați câteva pictograme în funcție de vremea din acea zi. Deci, ceea ce avem nevoie este de a crea sau de a căuta un set de pictograme meteo și de a atribui o pictogramă în funcție de vreme. Putem încărca o imagine de la Yahoo, dar nu este așa de frumos, așa că vom găsi un set propriu. Pentru aceasta, descărcați un set de pictograme și importați-le în Flash, apoi exportați fiecare pentru ActionScript cu un nume de clasă corespunzător:
Pictogramele pe care le folosesc sunt de la Garmahis și pot fi descărcate de la garmahis.com. Mulțumiri mulțumiri lui Garmahis că ne-au lăsat să le folosim!
Pasul 12: Adăugarea pictogramei
Acum trebuie să încărcați pictograma corectă în funcție de codul meteo pe care îl avem în XML. La fel ca și numele zilelor, putem face acest lucru cu un comutator foarte mare ... dar mai întâi trebuie să creăm un clip video care să conțină pictograma.
privat var _weatherToday: MovieClip = new MovieClip; privat var _weatherTomine: MovieClip = new MovieClip; // codul de mai jos merge în constructor addChild (_weatherToday); addChild (_weatherTomorrow); _weatherToday .x = -80; _weatherToday .y = -40; _weatherTomorrow .x = 115; _weatherTomorrow .y = -60;
Și acum icoanele:
// acest cod merge în comutatorul de funcții loadData () (caz "28": cazul "3200": cazul "30": cazul "44": var weather01: weather01 = new weather01; _weatherToday.addChild (weather01); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "32": cazul "34": var weather02: weather02 = vremea nouă02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "24": cazul "25": var weather03: weather03 = new weather03 (); _weatherToday.addChild (weather03); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; Cazul "0": Cazul "1": Cazul "2": Cazul "22": Cazul "36": Cauza "42": Cauza "43": var weather04: _weatherToday.addChild (weather04); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "19": cazul "20": cazul "21": cazul "23": cazul "26": var weather05: weather05 = vremea nouă05; _weatherToday.addChild (weather05); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "41": cazul "46": var weather06: weather06 = vremea nouă06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; Cazul "3": Cazul "4": Cazul "37": Cazul "38": Cazul "39": Cazul "45": Cauza "47": var weather07: weather07 = New weather07; _weatherToday.addChild (weather07); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "31": cazul "33": var weather08: weather08 = vremea nouă08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "27": cazul "29": var weather09: weather09 = vremea nouă09 (); _weatherToday.addChild (weather09); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "5": cazul "6": cazul "7": cazul "35": vremea var10: vremea10 = vremea nouă10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "8": cazul "10": cazul "13": cazul "14": cazul "15": cazul "16": cazul "17"; _weatherToday.addChild (weather11); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "9": cazul "11": cazul "12": var weather12: weather12 = vremea nouă012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză; cazul "40": var weather13: weather13 = vremea nouă13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; pauză;
În acest caz, am folosit doar 13 icoane, dar puteți folosi mai mult dacă doriți, sau mai puține, că depinde de dvs. Doar amintiți-vă, Yahoo utilizează 40 de coduri, deci trebuie să le atribuiți tuturor unei pictograme. Puteți vedea o listă a semnificațiilor tuturor codurilor de la developer.yahoo.com.
Pasul 13: Adăugați un efect Flip
Ei bine, am acoperit partea greu; acum să facem să arate bine. Dacă vrem să adăugăm mai multe informații sau să schimbăm locația, vom avea nevoie de mai mult spațiu, așa că vom pune tot ce am creat într-un clip video. Pentru a face acest lucru, selectați-l pe toate, apăsați F8 (pentru ao converti la un simbol) și exportați noul dvs. simbol pentru ActionScript, cu un nume de clasă Față. Apoi, ștergeți-l din scenă, creați fundalul și convertiți-l într-un clip video și exportați-l și pentru ActionScript, cu un nume de clasă Înapoi.
Acum, să le numim din fișierul ActionScript:
privat var _front: Front; privat var _back: Înapoi; // toate codurile de mai jos merg în Vreme () constructor _front = new Front (); this.addChild (_front); _front.y = 100; _front.x = 160; _font.rotationY = 0; _front.btn.buttonMode = true; _front.btn.addEventListener (MouseEvent.CLICK, turnAround); _front.addChild (_weatherToday); // aceasta va fi în urmă, așa că nu vrem să fie încă vizibilă și trebuie să setăm rotația la -180 _back = new Back (); _back.y = 100; _back.x = 160; _back.back.buttonMode = true; _back.back.addEventListener (MouseEvent.CLICK, turnAround); _back.rotationY = -180; _back.visible = false; this.addChild (_back);
Pasul 14: Configurați Tween
Avem clipul nostru de film, așa că acum trebuie să flip. Pentru aceasta, vom folosi biblioteca Tweener pe care o puteți găsi la http://code.google.com/p/tweener/. Descărcați-l și extrageți-l astfel încât folderul \ caurina \ să fie în același folder ca și FLA.
Pentru acest proiect vom folosi doar o singură funcție de la ea: o vom face folosind întoarceți-vă() funcția de a arăta minunat. Puneți următorul cod în locurile corespunzătoare din clasa de documente:
Acum, că avem mai mult spațiu în spate, putem adăuga mai multe stări sau informații sau orice doriți. Pe scurt, voi adăuga mai multe locații. Ceea ce trebuie să facem este să mergeți la Flash și să apăsați pe Ctrl + F7 (Windows) sau Command + F7 (Mac) pentru a dezvălui panoul Components. Glisați caseta Combo în Biblioteca dvs., apoi adăugați-o la clasa de documente:
import flash.xml. *; _comboBox = ComboBox nou (); // în interiorul constructorului // textul implicit _comboBox.prompt = "Alegeți locația:"; // repetați acest lucru pentru fiecare locație pe care doriți să o adăugați // rețineți adresa URL a locației de pe site-ul Yahoo comboBox.addItem (Locație: "Mahtomedi", url: "http://weather.yahooapis.com/forecastrss? w = 2444293 & u = c "); // apelează funcția care dă valoarea ComboBoxului _comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = false; // apelează funcția care va schimba datele _comboBox.addEventListener (Event.CHANGE, changeLocation); funcția privată nameLabelFunction (element: Object): String var str: String; dacă (element == null) str = _comboBox.value; altceva str = item.Location; return str; // reaload datele și realocarea datelor din funcția privată a aplicației changeProvince (eveniment: Event): void loadXML (_comboBox.selectedItem.url);
Pasul 16: Bucurați-vă!
Acum vă bucurați de aplicația dvs., adăugați chestii și credite (nu uitați Yahoo!)
Concluzie
Acum, avem aplicația noastră pentru vreme, sper că ați învățat foarte mult, dacă aveți orice întrebări, lăsați un comentariu.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Share
Accentsconagua
