Build en Handy AS3 Været App med Yahoo API
8
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Med hjelp fra denne opplæringen vil du lære hvordan du bruker Yahoo Weather API for å hente og vise værmeldinger med AS3.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Lag en ny fil
jeg antar du vil bruke Flash, men du kan gjøre dette med a. Flex eller standard AS3 Prosjekt
Åpne Flash, gå til fil > New, velg Flash-fil (Actionscript 3.0), og deretter sette størrelsen som 320x180px og lagre FLA hvor du vil
Trinn 2:. Opprett et dokument Class
Nå gå til Fil > Ny og denne gangen velger Action Fil, og deretter lagre den som Weather.as Gå til Actionscript-fil og skrive koden for dokumentet klasse: Test det og det bør spore" Dette er ditt vær klasse "i utgangsvinduet Kom deg av gårde til Yahoo Weather API delen av Yahoo utviklere nettstedet; der vil du finne noen forklaringer om Yahoo Weather API Det vi trenger å lese i Flash er en XML-fil, så vi trenger å vite hvordan du be om det, noe som er ganske enkel. Du må tenke på hvor plasseringen nummeret må være en WOEID. For å finne din WOEID, bla gjennom eller søke etter byen din fra Yahoo Weather hjemmesiden. Den WOEID er i nettadressen for prognosen side for den byen. Du kan også få WOEID ved å skrive inn ditt postnummer på hjemmesiden. For eksempel, hvis du søker etter Los Angeles på Vær hjemmesiden, prognosen siden for at byen er: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, så WOEID er 2442047. Når du ber om all slags vær plassering, hva du får er XML som dette: (Hvis du ønsker å forstå alle For denne applikasjonen hva vi trenger er yweather. plassering nå som vi har en bedre forståelse av alt som XML, hva vi trenger å gjøre er å tildele data til variabler slik at vi kan bruke disse dataene til å sette opp vår søknad. Til det trenger vi å lage noen variabler og laste XML. Dette er hvordan du gjør det (setter inn koden i de aktuelle stedene i dokumentet klasse): La oss gå over at klump av kode Du trenger _xmlData den første funksjonen, LoadXML () laster XML-fil i Flash; vi bruker en hendelse lytteren å sjekke når den er ferdig, og deretter kjøre loadData () loadData () (For mer informasjon om analyse av XML i AS3, sjekk ut Dru Kepple er AS3. 101 - XML tutorial). nå må vi vise denne informasjonen. For å gjøre slik at vi kunne lage tekstfeltene i koden og tilordne et format og teksten, men jeg foretrekker å bruke Flash IDE, for å spare tid. Så vær kreativ, trenger vi åtte tekstfelt: temperatur, fuktighet, maksimal temp og minimum temp for den aktuelle dagen. Da trenger vi maksimal temp og minimum temp for neste dag, en for navnet på den neste dag og en mer som viser plasseringen. De trenger alle å være dynamisk Ikke glem å gi alle textfields forekomstnavn.; Jeg har valgt temp nå som vi har laget tekstfeltene, må vi tildele den informasjonen vi du gjenopprette fra XML. Til det trenger vi forekomstnavnet for hvert tekstfelt og info som vi allerede har, som dette (legge til din eksisterende loadData () Husk åtte tekstfelt som vi skapt? Nå må vi bruke disse navnene her i koden. Det slå akkurat nå har vi bare tekst; det ville være fint å legge noen ikoner avhengig av været for denne dagen. Så det vi trenger er å lage eller se etter et sett av vær ikoner og tilordne et ikon avhengig av været. Vi kan laste inn ett bilde fra Yahoo, men det er ikke så fint, så vi finner våre egne. For det, laste ned et sett med ikoner og importere dem til Flash, deretter eksportere hver for Action med en passende klasse navn: Ikonene jeg bruker er fra Garmahis og kan lastes ned fra garmahis.com. Stor takk til Garmahis for å la oss bruke dem Nå må vi laste den riktige ikonet avhengig av været kode som vi har i vår XML. Akkurat som navn på dager, kan vi gjøre dette med en virkelig stor switch ... men først må vi lage et filmklipp å inneholde ikonet Og nå ikonene: I dette tilfellet jeg bare brukt 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å tildele dem alle til et ikon. Du kan se en liste over betydningene av alle kodene på developer.yahoo.com Vel, vi har dekket den harde delen; Nå la oss gjøre det ser fint. Hvis vi ønsker å legge til mer informasjon eller endre plasseringen vi trenger mer plass, så vil vi sette alt som vi har skapt i en filmklipp. For å gjøre det, bare velg det hele, trykk F8 (for å konvertere det til et symbol) og eksportere nytt symbol for Actionscript, med en klasse navn Front Nå la oss kalle dem fra vår Actionscript-fil: Vi har vår filmklipp, så nå må vi gjøre det snu. For å gjøre at vi kommer til å bruke Tweener biblioteket som du kan finne på http://code.google.com/p/tweener/. Last den ned, og trekke det slik at \\ caurina \\ mappe i samme mappe som FLA For dette prosjektet har vi tenkt å bruke bare en funksjon fra det. Vi vil gjøre det snu bruker Turnaround () Nå som vi har mer plass i ryggen kan vi legge til flere stater eller info eller hva du vil. Kort, vil jeg legge til flere steder. Det vi trenger å gjøre er å gå til Flash og trykk Ctrl + F7 (Windows) eller Kommando + F7 (Mac) for å avsløre Components panelet. Dra Combo Box til biblioteket, og deretter legge dette til dokumentet klassen. nå har vi vår været program jeg håper du har lært mye, hvis du har noen spørsmål bare legge igjen en kommentar. jeg håper du likte denne opplæringen, takk for lesing!
i samme mappe hvor du har lagret din FLA-fil. Så gå tilbake til FLA, gå til Egenskaper og skrive navnet på Action filen i "klassen" plass. (For mer info om hvordan du bruker et dokument klasse, les denne rask innføring.)
Trinn 3: Sette opp Document Class
pakke {import flash.display.MovieClip; //Navnet på klassen må være den samme som filen public class Været strekker MovieClip {//Konstruktør: denne funksjonen må ha samme navn som filen og klasse offentlig funksjon Vær () {trace ( "Dette er ditt vær klasse "):}}}
Trinn 4:. Sjekk ut den Yahoo Weather API
Trinn 5:. be om XML
du vil vite været og i hvilken enhet plakater (Celsius eller Fahrenheit) du ønsker temperaturen. Deretter kan du få XML med disse dataene via denne nettadressen:
Var url: "w =" String = "http://weather.yahooapis.com/forecastrss" + + (lokasjonsnummer) + "& u = "+ (" c "for celcius eller" f "for fahrenheit);
Trinn 6: Få Location Number
Trinn 7: Forstå XML
< rss version = "2.0" xmlns: yweather = "http://xml.weather.yahoo.com/ns/rss/1.0" xmlns: geo = "http://www.w3.org/2003/01/geo/wgs84_pos#" > ≪ kanal > ≪ title > Yahoo! Vær - Los Angeles, CA < /title > <link>http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html</link> ≪ beskrivelse > Yahoo! Været for Los Angeles, CA < /beskrivelse > ≪ language > en-us < /language > ≪ lastBuildDate > Man 1 mars 2 010 05:47 PST < /lastBuildDate > ≪ ttl > 60 < /ttl > ≪ yweather: byen = "Los Angeles" region = "CA" country = "United States" /> ≪ yweather: heter temperatur = "C" avstand = "km" trykk = "mb" speed = "km /t" /> ≪ yweather: vindavkjøling = "12" retning = "0" speed = "0" /> ≪ yweather: atmosfære luftfuktighet = "80" synlighet = "16.09" trykk = "1018,4" stigende = "1" /> ≪ yweather: astronomi soloppgang = "06:22" solnedgang = "05:49" /> ≪ bilde > ≪ title > Yahoo! Vær < /title > ≪ bredde > 142 < /bredde > ≪ høyde > 18 < /høyde > ≪ link > http: //weather.yahoo.com< /link > ≪ url > http: //l.yimg.com/a/i/us/nws/th/main_142b.gif< /url > ≪ /bilde > ≪ element > ≪ title > Betingelser for Los Angeles, CA 05:47 PST < /title > ≪ geo: lat > 34,05 < /geo: lat > <geo:long>-118.25</geo:long><link>http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html</link> ≪ pubDate > man 1 mars 2 010 05:47 PST < /pubDate > ≪ yweather: tilstand text = "Fair" code = "33" temp = "12" date = "Mon, 01.03.2010 05:47 PST" /> ≪ beskrivelse > <! [CDATA [> ≪ img src="http://activetuts.s3.amazonaws.com/tuts/093_weather/Tutorial/http://l.yimg.com/a/i/us/we/52/33.gif"/><br /≫ ≪ b > Været nå: < /b > < br /> Fair, 12 C < BR /> ≪ BR /> < b > Cast: < /b > < BR /> Man - For det meste skyet. Høy: 20 Lav: 10 < br /> Tue - AM Clouds /PM Sun. Høy: 19 Lav: 9 < br /> ≪ br /> ≪ a href="http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html">Full Prognosen på Yahoo! Weather < /a > < BR /> < BR /> (Gitt av < a href = "http://www.weather.com" > The Weather Channel < /a >) < br /> ]] ≫ < /beskrivelse > ≪ yweather: prognosen dag = "Man" date = "1 mar 2010" low = "10" high = "20" text = "Cloudy" code = "28" /> ≪ yweather: prognosen dag = "Ti" date = "2 mar 2010" low = "9" høy = "19" text = "AM Clouds /PM Sun" code = "30" /> ≪ guid isPermaLink = "false" > USCA0638_2010_03_01_5_47_PST < /guid > ≪ /element > ≪ /kanal > < /rss > <! - Api7.weather.re4.yahoo.com komprimert /du delvis man 1 mars 06:59:00 PST 2010 - >
XML, kan du gå http://developer.yahoo.com/weather/)
tag yweather: atmosfære
koden og yweather: værvarsel
tags: plasseringen koden vil gi oss teksten for plasseringen, vil atmosfæren tag gi oss fuktigheten og prognose kodene vil gi oss temperaturen for inneværende og neste dag
Trinn 8:. Analyser det
//Dette kommer til å inneholde alle data fra XMLprivate Var _xmlData: XML; //Dette kommer til å bli den url av XML som vi vil loadprivate Var _xmlURL: String; privat funksjon LoadXML (xmlURL: String): void {var loader: URLLoader = new URLLoader (); Var forespørsel: URLRequest = new URLRequest (_xmlURL); loader.load (forespørsel); loader.addEventListener (Event.COMPLETE, loadData);} private funksjon loadData (hendelse: Hendelse): void {_xmlData = ny XML (event.currentTarget.data); Var yweather: Navnerom = new Navnerom ( "http://xml.weather.yahoo.com/ns/rss/1.0"); Var dag. String = _xmlData.channel.item.yweather :: prognose [0] @ dagen; Var codeToday. String = _xmlData.channel.item.yweather :: prognose [0] @ kode; Var codeTomorrow. String = _xmlData.channel.item.yweather :: prognose [1] @ kode;}
. variabel for å bli definert utenfor alle funksjoner (jeg har definert det som en privat variabel) fordi du vil trenge for å få det overalt i koden, ikke bare innenfor en funksjon.
.
funksjon tilordner de mottatte data til _xmlData
variabel som vi allerede har opprettet. Vi bruker en navne fordi det er hvordan Yahoo besluttet å sette opp sin XML (du finner mer om navnerom på livedocs.adobe.com). De andre variablene i denne funksjonen trekke ut informasjon som vi ønsker å vise i vår app fra XML
Trinn 9: Lag tekstfelter
tekstfelt slik at vi kan tildele info
, luftfuktighet
, max
, min
, maxt
, mint
, i morgen Hotell og tilstand
Trinn 10:. Vise info
funksjon):
privat funksjon loadData (hendelse: Hendelse): void {_xmlData = ny XML (event.currentTarget.data); Var yweather: Navnerom = new Navnerom ( "http://xml.weather.yahoo.com/ns/rss/1.0"); Var dag. String = _xmlData.channel.item.yweather :: prognose [0] @ dagen; Var codeToday. String = _xmlData.channel.item.yweather :: prognose [0] @ kode; Var codeTomorrow. String = _xmlData.channel.item.yweather :: prognose [1] @ kode; //Tildeling informasjonen til tekstfeltene maxt.text = _xmlData.channel.item.yweather :: prognose [1] @ høy + "° F."; mint.text = _xmlData.channel.item.yweather :: prognose [1] @ lav + "° F."; state.text = _xmlData.channel.yweather :: plassering @ by.; . Humidity.text = _xmlData.channel.yweather :: atmosfære @ fuktighet + "%"; temp.text = _xmlData.channel.item.yweather :: tilstand @ temp + "° F."; max.text = _xmlData.channel.item.yweather :: prognose [0] @ høy + "° F."; min.text = _xmlData.channel.item.yweather :: prognose [0] @ lav + "° F."; bryteren (dag) {case "Sun": tomorrow.text = "mandag"; gå i stykker; case "man": tomorrow.text = "tirsdag"; gå i stykker; case "ti": tomorrow.text = "onsdag"; gå i stykker; case "Wed": tomorrow.text = "torsdag"; gå i stykker; case "to": tomorrow.text = "Fredag"; gå i stykker; case "Fri": tomorrow.text = "Lørdag"; gå i stykker; case "Sat": tomorrow.text = "Søndag" break; }}
uttalelsen er fordi vi ikke ønsker å vise bare "Tor", "to" eller "Fri", ønsker vi hele navnet
Trinn 11:. Legg til litt stil
Trinn 12: Legge ikonet
privat Var _weatherToday:. MovieClip = ny MovieClip, privat Var _weatherTomorrow: MovieClip = ny MovieClip; //under koden går i constructoraddChild (_weatherToday), addChild (_weatherTomorrow); _ weatherToday .x = -80; _weatherToday .Y = -40; _weatherTomorrow .x = 115; _weatherTomorrow .Y = -60;
//denne koden går i loadData () functionswitch (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; case "32": case "34": var weather02: weather02 = new weather02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "24": case "25": var weather03: weather03 = new 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 = new weather04 (); _weatherToday.addChild (weather04); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "19": case "20": case "21": case "23": case "26": var weather05: weather05 = new weather05 (); _weatherToday.addChild (weather05); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "41": case "46": var weather06: weather06 = new weather06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "3": case "4": case "37": case "38": case "39": case "45": case "47": var weather07: weather07 = new weather07 (); _weatherToday.addChild (weather07); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "31": case "33": var weather08: weather08 = new weather08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "27": case "29": var weather09: weather09 = new 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 = new weather10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "8": case "10": case "13": case "14": case "15": case "16": case "17": case "18": var weather11: weather11 = new weather11 (); _weatherToday.addChild (weather11); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "9": case "11": case "12": var weather12: weather12 = new weather012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; gå i stykker; case "40": var weather13: weather13 = new weather13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; break;}
Trinn 13:. Legg en Flip Effect
. Deretter slette det fra scenen, opprette bakgrunnen, og konvertere dette til et filmklipp og eksportere den til Action også, med en klasse navn Tilbake
.
privat Var _front: Front, privat Var _back: Tilbake; //alt under koden går i Været () 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, behandlingstid), _ front.addChild (_weatherToday); //dette kommer til å være bak så vi don ' t vil den skal være synlig ennå, og vi må sette rotasjonen til -180_back = new Tilbake (); _ back.y = 100; _back.x = 160; _back.back.buttonMode = true; _back.back.addEventListener ( MouseEvent.CLICK, behandlingstid); _ back.rotationY = -180; _back.visible = false; this.addChild (_back);
Trinn 14: Sett opp Tween
funksjonen for å se kul. Sett inn følgende kode i de aktuelle stedene i dokumentet klassen:
import caurina.transitions.Tweener, privat Var _currentFace: String; //vende ansiktene og deretter kaller funksjonen som endre rekkefølgen på ansiktene og fullføre animationprivate funksjon Turnaround (event: Mouseevent): void {Tweener.addTween (_back, {rotationY: -90, onComplete: changeIndex, tid: 0,5, overgang: "lineær"}); Tweener.addTween (_back, {Scaley: 0,6, scaleX: 0,6, tid: 0,3, overgang: "lineær"}); Tweener.addTween (_front, {Scaley: 0,6, scaleX: 0,6, tid: 0,3, overgang: "lineær"}); Tweener.addTween (_front, {rotationY: 90, tid: 0,5, overgang: "lineær"});} //vi bruker en String, _currentFace, så det kan vite hvilket ansikt er i frontprivate funksjon changeIndex (): void {if (_currentFace == "front") {this.setChildIndex (_front, 0); Tweener.addTween (_back, {rotationY: 0, tid: 0,5, overgang: "lineær"}); Tweener.addTween (_back, {Scaley: 1, scaleX: 1, tid: 0,6, overgang: "lineær"}); Tweener.addTween (_front, {rotationY: 180, tid: 0,5, overgang: "lineær"}); Tweener.addTween (_front, {Scaley: 1, scaleX: 1, tid: 0,6, overgang: "lineær"}); _currentFace = "tilbake"; _front.visible = false; _back.visible = true; } Else {this.setChildIndex (_back, 0); Tweener.addTween (_back, {rotationY: -180, tid: 0,5, overgang: "lineær"}); Tweener.addTween (_back, {Scaley: 1, scaleX: 1, tid: 0,6, overgang: "lineær"}); Tweener.addTween (_front, {rotationY: 0, tid: 0,5, overgang: "lineær"}); Tweener.addTween (_front, {Scaley: 1, scaleX: 1, tid: 0,6, overgang: "lineær"}); _currentFace = "front"; _front.visible = true; _back.visible = false; }}
Trinn 15: Legg Steder
Import flash.xml *; _ Combobox = new ComboBox (); //inne i konstruktøren //standard text_comboBox.prompt = "plasseringen Velg : "; //gjenta dette for hvert sted som du ønsker å legge //husk å få plasseringen URL fra Yahoo sitecomboBox.addItem ({Sted:" Mahtomedi ", url:" http://weather.yahooapis.com/forecastrss w = 2444293 &? u = c "}); //kaller funksjonen som gir verdi til ComboBox_comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = false; //kaller funksjonen som kommer å endre data_comboBox.addEventListener (Event.CHANGE, changeLocation); privat funksjon nameLabelFunction (element: Object): String {var str: String; if (element == null) {str = _comboBox.value; } Else {str = item.Location; } Retur str;} //reaload dataene og overføre dataene på en applicationprivate funksjon changeProvince (hendelse: Hendelse): void {LoadXML (_comboBox.selectedItem.url);}
Trinn 16: Nyt
Konklusjon