Bygg en praktisk AS3 Weather App med Yahoo API

Med hjelp fra denne opplæringen lærer du hvordan du bruker Yahoo Weather API for å oppnå og vise værmeldinger med AS3.

Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:

Trinn 1: Opprett en ny fil

Jeg antar at du vil bruke Flash, selv om du kan gjøre dette med et Flex eller standard AS3-prosjekt.

Åpne Flash, gå til File> New, velg Flash File (ActionScript 3.0), sett deretter størrelsen som 320x180px og lagre FLA hvor du vil.

Trinn 2: Lag en dokumentklasse

Gå nå til Arkiv> Ny, og denne gangen velger du ActionScript-fil, og lagrer den som Weather.as i samme mappe hvor du lagret FLA-filen din. Gå deretter tilbake til FLA, gå til Egenskaper og skriv navnet på ActionScript-filen i "Class" -rommet. (For mer informasjon om bruk av en dokumentklasse, les denne korte introduksjonen.)

Trinn 3: Konfigurere dokumentklassen

Gå til ActionScript-filen og skriv koden for dokumentklassen din:

pakke import flash.display.MovieClip; // navnet på klassen må være det samme som filens offentlige klasse. Vær utvider MovieClip // Constructor: denne funksjonen må ha samme navn som fil og klasse offentlig funksjon. Vær () trace ("Dette er din værklasse "):

Test det, og det skal spore "Dette er værklassen din" i utgangsvinduet.

Trinn 4: Sjekk ut Yahoo Weather API

Få deg til Yahoo Weather API-delen av Yahoo-utviklerens nettsted; Der finner du noen forklaringer om Yahoo Weather API.

Trinn 5: Be om XML-en

Det vi trenger å lese i Flash er en XML-fil, så vi må vite hvordan du ber om det, noe som er ganske enkelt. Du må tenke på hvor du vil vite været og i hva enhet (Celsius eller Fahrenheit) du vil ha temperaturen. Deretter kan du få XML med disse dataene via denne nettadressen:

var url: String = "http://weather.yahooapis.com/forecastrss" + "? w =" + (plasseringsnummer) + "& u =" + ("c" for celcius eller "f" for fahrenheit);

Trinn 6: Få plasseringsnummer

Plasseringenummeret må være en WOEID. For å finne din WOEID, bla eller søk etter din by fra Yahoo Weather hjemmesiden. WOEID er i nettadressen for prognosen for den aktuelle byen. Du kan også få WOEID ved å skrive inn postnummeret ditt på hjemmesiden. For eksempel, hvis du søker etter Los Angeles på Weather-startsiden, er prognosesiden for den byen: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, så WOEID er 2442047.

Trinn 7: Forstå XML

Når du ber om et værstedssted, vil du motta XML slik:

   http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Yahoo! Været for Los Angeles, CA en-us Ma, 01 mars 2010 5:47 PST 60        142 18 http://weather.yahoo.com http://l.yimg.com/a/i/us/nws/th/main_142b.gif    34.05 -118,25 http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Ma, 01 mars 2010 5:47 PST   
 Nåværende forhold:
 Fair, 12 C
 
Prognose:
 Mandag - Delvis skyet. Høy: 20 Lav: 10
 Tirsdag - AM Clouds / PM Sun. Høy: 19 Lav: 9
 
 Fullstendig prognose på Yahoo! Vær

 (levert av Weather Channel)
 ]]>   USCA0638_2010_03_01_5_47_PST   

(Hvis du vil forstå alle XML, vennligst besøk http://developer.yahoo.com/weather/.)

For denne applikasjonen er det vi trenger yweather: plassering stikkord, yweather: atmosfære tag og yweather: prognose tagger: plasseringstegnet vil gi oss teksten for lokasjonen, atmosfæren vil gi oss fuktighet og prognose-kodene vil gi oss temperaturen for nåværende og neste dag.

Trinn 8: Parse det

Nå som vi har en bedre forståelse av alt XML, er det vi trenger å tilordne data til variabler, slik at vi kan bruke disse dataene til å sette opp søknaden vår. For det må vi lage noen variabler og laste XML. Slik gjør du det (sett koden på de aktuelle stedene i dokumentklassen din):

// Dette skal inneholde alle dataene fra XML private var _xmlData: XML; // Dette kommer til å være URL-en for XML som vi vil laste privat var _xmlURL: String; privat funksjon loadXML (xmlURL: String): void var loader: URLLoader = ny URLLoader (); var forespørsel: URLRequest = ny URLRequest (_xmlURL); loader.load (forespørsel); loader.addEventListener (Event.COMPLETE, loadData);  privat funksjon loadData (hendelse: hendelse): void _xmlData = new XML (event.currentTarget.data); var yweather: Namespace = nytt navneglass ("http://xml.weather.yahoo.com/ns/rss/1.0"); var dag: String = _xmlData.channel.item.yweather :: prognose [0]. @ day; var codeToday: String = _xmlData.channel.item.yweather :: prognose [0]. @ code; var codeTomorrow: String = _xmlData.channel.item.yweather :: prognose [1]. @ code; 

La oss gå over den klumpen av kode.

Du trenger _xmlData variabel som skal defineres utenfor alle funksjoner (jeg har definert den som en privat variabel) fordi du må få den overalt i koden, ikke bare innenfor en funksjon.

Den første funksjonen, loadXML (), laster XML-filen til Flash; Vi bruker en hendelseslytter til å sjekke når den er ferdig, og deretter løpe loadData ().

De loadData () funksjon tildeler mottatte data til _xmlData variabel som vi allerede har opprettet. Vi bruker et navneområde fordi det er slik at Yahoo bestemte seg for å konfigurere XML (du kan finne mer om navneområder på livedocs.adobe.com). De andre variablene i denne funksjonen trekker ut informasjonen vi vil vise i vår app fra XML.

(For mer informasjon om analyse av XML i AS3, sjekk ut Dru Kepples AS3: 101 - XML-veiledning.)

Trinn 9: Opprett tekstfelt

Nå må vi vise den informasjonen. For å gjøre det kan vi lage tekstfelt i koden og tildele et format og teksten, men jeg foretrekker å bruke Flash IDE, for å spare tid. Så bli kreativ, vi trenger åtte tekstfelter: temperatur, fuktighet, maksimum temp og minimum temp for dagens dag. Da trenger vi maksimal temp og minimum temp for neste dag, en for navnet på neste dag og en mer som viser plasseringen. De må alle være dynamisk tekstfelter slik at vi kan tildele infoen.

Ikke glem å gi alle tekstfeltene dine forekomstnavn; Jeg har valgt temp, luftfuktighet, max, min, maxt, mynte, i morgen og stat.

Trinn 10: Vis informasjonen

Nå som vi har opprettet tekstfeltene, må vi tildele informasjonen som vi hentet fra XML-en. For det trenger vi forekomstnavnet til hvert tekstfelt og den informasjonen vi allerede har, slik som dette (legger til din eksisterende loadData () funksjon):

privat funksjon loadData (hendelse: hendelse): void _xmlData = new XML (event.currentTarget.data); var yweather: Namespace = nytt navneglass ("http://xml.weather.yahoo.com/ns/rss/1.0"); var dag: String = _xmlData.channel.item.yweather :: prognose [0]. @ day; var codeToday: String = _xmlData.channel.item.yweather :: prognose [0]. @ code; var codeTomorrow: String = _xmlData.channel.item.yweather :: prognose [1]. @ code; // Tildele informasjonen til tekstfeltene maxt.text = _xmlData.channel.item.yweather :: prognose [1]. @ High + "° F"; mint.text = _xmlData.channel.item.yweather :: prognose [1]. @ low + "° F"; state.text = _xmlData.channel.yweather :: location. @ city; humidity.text = _xmlData.channel.yweather :: atmosfære. @ fuktighet + "%"; temp.text = _xmlData.channel.item.yweather :: betingelse. @ temp + "° F"; max.text = _xmlData.channel.item.yweather :: prognose [0]. @ high + "° F"; min.text = _xmlData.channel.item.yweather :: prognose [0]. @ low + "° F"; bytte (dag) tilfelle "søn": tomorrow.text = "mandag"; gå i stykker; tilfelle "Måned": tomorrow.text = "Tuesday"; gå i stykker; tilfelle "Tue": tomorrow.text = "Wednesday"; gå i stykker; tilfelle "onsdag": tomorrow.text = "Thursday"; gå i stykker; tilfelle "Thu": tomorrow.text = "Friday"; gå i stykker; sak "fre": tomorrow.text = "Saturday"; gå i stykker; tilfelle "Sat": tomorrow.text = "Sunday" break; 

Husk de åtte tekstfeltene som vi opprettet? Nå må vi bruke disse navnene i koden. At bytte om erklæringen er fordi vi ikke vil vise bare "ons", "thu" eller "fri", vi vil ha hele navnet.

Trinn 11: Legg til noen stil

Akkurat nå har vi bare tekst; det ville være fint å legge til noen ikoner avhengig av været for den dagen. Så det vi trenger er å lage eller se etter et sett med vær-ikoner og tilordne et ikon avhengig av været. Vi kan laste ett bilde fra Yahoo, men det er ikke så fint, så vi finner vårt eget sett. For det, last ned et sett med ikoner og importer dem til Flash, og deretter eksporter hver for ActionScript med et passende klassenavn:

Ikonene jeg bruker er fra Garmahis og kan lastes ned fra garmahis.com. Stor takk til Garmahis for å la oss bruke dem!

Trinn 12: Legge til ikonet

Nå må vi laste inn riktig ikon avhengig av værkoden vi har i XML-filen vår. Akkurat som navnene på dagene, kan vi gjøre dette med en veldig stor bryter ... men først må vi lage et filmklipp for å inneholde ikonet.

private var _weatherToday: MovieClip = ny MovieClip; privat var _weatherTomorrow: MovieClip = ny MovieClip; // nedenfor koden går i konstruktør addChild (_weatherToday); addChild (_weatherTomorrow); _weatherToday .x = -80; _weatherToday .y = -40; _weatherTomorrow .x = 115; _weatherTomorrow .y = -60;

Og nå ikonene:

// denne koden går i loadData () funksjonsbryter (codeToday) case "28": case "3200": case "30": case "44": var weather01: weather01 = new weather01 (); _weatherToday.addChild (weather01); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "32": tilfelle "34": var weather02: weather02 = nytt weather02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "24": tilfelle "25": var weather03: weather03 = nytt weather03 (); _weatherToday.addChild (weather03); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; case "0": case "1": case "2": case "22": case "36": case "42": case "43": var weather04: weather04 = nytt weather04 (); _weatherToday.addChild (weather04); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "19": tilfelle "20": tilfelle "21": tilfelle "23": tilfelle "26": var weather05: weather05 = nytt weather05 (); _weatherToday.addChild (weather05); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "41": tilfelle "46": var weather06: weather06 = nytt weather06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "3": saken "4": saken "37": saken "38": saken "39": saken "45": saken "47": var weather07: weather07 = nytt weather07 (); _weatherToday.addChild (weather07); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "31": tilfelle "33": var weather08: weather08 = nytt weather08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "27": tilfelle "29": var weather09: weather09 = nytt weather09 (); _weatherToday.addChild (weather09); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; case "5": case "6": case "7": case "35": var weather10: weather10 = nytt weather10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "8": tilfelle "10": saken "13": saken "14": saken "15": saken "16": saken "17": saken "18": var weather11: weather11 = nytt weather11 (); _weatherToday.addChild (weather11); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; case "9": case "11": case "12": var weather12: weather12 = nytt weather012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; tilfelle "40": var weather13: weather13 = nytt vær13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; gå i stykker; 

I dette tilfellet brukte jeg bare 13 ikoner, men du kan bruke mer hvis du vil, eller færre, det er opp til deg. Bare husk, Yahoo bruker 40 koder, så du må tilordne dem alle til et ikon. Du kan se en liste over betydningen av alle kodene på developer.yahoo.com.

Trinn 13: Legg til en flip-effekt

Vel, vi har dekket den harde delen; la oss få det til å se fint ut. Hvis vi vil legge til mer informasjon eller endre plasseringen, trenger vi mer plass, så vi legger alt vi har opprettet i ett filmklipp. For å gjøre det, velg bare alt, trykk F8 (for å konvertere det til et symbol) og eksporter ditt nye symbol for ActionScript, med et klassenavn for Front. Deretter sletter du det fra scenen, lager bakgrunnen og konverterer dette til et filmklipp og eksporterer det til ActionScript, med et klassenavn på Tilbake.

La oss nå ringe dem fra vår ActionScript-fil:

privat var _front: Front; privat var _back: tilbake; // alle underkoden går inn i Weather () 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); // dette kommer til å ligge bak, slik at vi ikke vil at det skal være synlig enda, og vi må sette rotasjonen til -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);

Trinn 14: Sett opp tweenen

Vi har vårt filmklipp, så nå må vi gjøre det flip. For å gjøre det skal vi bruke Tweener-biblioteket som du finner på http://code.google.com/p/tweener/. Last ned den, og pakk den ut slik at mappen \ caurina \ er i samme mappe som FLA.

For dette prosjektet skal vi bare bruke en funksjon fra det: vi får det til å flippe ved hjelp av snu() Fungerer for å se kult ut. Sett følgende kode på de aktuelle stedene i dokumentklassen din:

importere caurina.transitions.Tweener; private var _currentFace: String; // flip ansikter og deretter kaller funksjonen som endrer rekkefølgen på ansiktene og avslutt animasjonen privat funksjon turnAround (event: MouseEvent): void Tweener.addTween (_back, rotationY: -90, onComplete: changeIndex, time: 0,5, overgang: "lineær"); Tweener.addTween (_back, scaleY: 0.6, scaleX: 0.6, time: 0.3, transition: "linear"); Tweener.addTween (_front, scaleY: 0.6, scaleX: 0.6, time: 0.3, transition: "linear"); Tweener.addTween (_front, rotationY: 90, time: 0.5, transition: "linear");  // vi bruker en streng, _currentFace, så det kan vite hvilket ansikt som er foran privatfunksjonen endringIndex (): void if (_currentFace == "front") this.setChildIndex (_front, 0); Tweener.addTween (_back, rotationY: 0, time: 0.5, transition: "linear"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); Tweener.addTween (_front, rotationY: 180, time: 0.5, overgang: "lineær"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, overgang: "lineær"); _currentFace = "tilbake"; _front.visible = false; _back.visible = true;  annet this.setChildIndex (_back, 0); Tweener.addTween (_back, rotationY: -180, time: 0.5, transition: "linear"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); Tweener.addTween (_front, rotationY: 0, time: 0.5, transition: "linear"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, overgang: "lineær"); _currentFace = "front"; _front.visible = true; _back.visible = false; 

Trinn 15: Legg til steder

Nå som vi har mer plass i ryggen, kan vi legge til flere stater eller info eller hva du vil. Kort sagt, legger jeg til flere steder. Det vi trenger å gjøre er å gå til Flash, og trykk Ctrl + F7 (Windows) eller Command + F7 (Mac) for å avsløre panelet Komponenter. Dra kombinationsboksen til biblioteket ditt, og legg deretter til dette i dokumentklassen din:

importer flash.xml. *; _comboBox = ny ComboBox (); // inne i konstruktøren // standardteksten _comboBox.prompt = "Velg din plassering:"; // gjenta dette for hvert sted du vil legge til // husk å få adressens URL fra Yahoo-siden comboBox.addItem (Sted: "Mahtomedi", url: "http://weather.yahooapis.com/forecastrss? w = 2444293 & u = c "); // kaller funksjonen som gir verdien til ComboBox _comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = false; // kaller funksjonen som skal endre data _comboBox.addEventListener (Event.CHANGE, changeLocation); privatfunksjonsnavnLabelFunksjon (element: Objekt): String var str: String; hvis (element == null) str = _comboBox.value;  ellers str = item.Location;  tilbake str;  // gjenopprette dataene og tilordne dataene til søknaden din privat funksjon changeProvince (event: Event): void loadXML (_comboBox.selectedItem.url); 

Trinn 16: Nyt!

Nå nyt programmet, legg til fancy ting og kreditter (ikke glem Yahoo!)

Konklusjon

Nå har vi vår værmelding Jeg håper du lærte mye, hvis du har noen spørsmål, bare legg igjen en kommentar.

Jeg håper du likte denne opplæringen, takk for å lese!