Con l'aiuto di questo tutorial imparerai come utilizzare l'API meteo di Yahoo per ottenere e visualizzare le previsioni del tempo con AS3.
Anteprima del risultato finale
Diamo un'occhiata al risultato finale su cui lavoreremo:
Passaggio 1: crea un nuovo file
Suppongo che utilizzerai Flash, anche se puoi farlo con un progetto AS3 Flex o standard.
Apri Flash, vai su File> Nuovo, seleziona File Flash (ActionScript 3.0), quindi imposta le dimensioni come 320x180px e salva il FLA dove vuoi.
Passaggio 2: creare una classe di documenti
Ora vai su File> Nuovo e questa volta seleziona File ActionScript, quindi salvalo come Weather.as nella stessa cartella in cui è stato salvato il file FLA. Quindi torna al tuo FLA, vai su Proprietà e scrivi il nome del file ActionScript nello spazio "Classe". (Per maggiori informazioni sull'uso di una classe di documenti, leggi questa breve introduzione.)
Passaggio 3: impostazione della classe di documenti
Vai al file ActionScript e scrivi il codice per la tua classe di documento:
package import flash.display.MovieClip; // il nome della classe deve essere lo stesso del file public class Weather estende MovieClip // Costruttore: questa funzione deve avere lo stesso nome del file e della classe public function Weather () trace ("Questo è il tuo classe meteo "):
Provalo e dovrebbe tracciare "Questa è la tua classe meteorologica" nella finestra di output.
Passaggio 4: controlla l'API di Yahoo Weather
Entra nella sezione API Meteo Yahoo del sito degli sviluppatori di Yahoo; qui troverai alcune spiegazioni sull'API di Yahoo Weather.
Passaggio 5: Chiedi il tuo XML
Quello che dobbiamo leggere in Flash è un file XML, quindi abbiamo bisogno di sapere come richiederlo, il che è piuttosto semplice. Devi pensare a dove vuoi sapere il tempo e in cosa unità (Celsius o Fahrenheit) vuoi la temperatura. Quindi, puoi ottenere XML con questi dati tramite questo URL:
var url: String = "http://weather.yahooapis.com/forecastrss" + "? w =" + (numero posizione) + "& u =" + ("c" per celcius o "f" per fahrenheit);
Passaggio 6: ottenere il numero di posizione
Il numero di posizione deve essere un WOEID. Per trovare il tuo WOEID, sfoglia o cerca la tua città dalla home page di Yahoo Weather. WOEID è nell'URL della pagina di previsione per quella città. Puoi anche ottenere il WOEID inserendo il tuo codice di avviamento postale sulla home page. Ad esempio, se si cerca Los Angeles nella home page Meteo, la pagina di previsione per quella città è: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, quindi WOEID è 2442047.
Step 7: Capire l'XML
Quando richiedi una posizione meteo, ciò che riceverai è XML come questo:
Yahoo! Tempo - Los Angeles, CA http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Yahoo! Tempo per Los Angeles, CAit-itLun, 01 Mar 2010 5:47 am PST60Yahoo! Tempo metereologico14218 http://weather.yahoo.com http://l.yimg.com/a/i/us/nws/th/main_142b.gifCondizioni per Los Angeles, CA alle 5:47 am PST34.05-118.25 http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Lun, 01 Mar 2010 5:47 am PST Condizioni attuali: Fiera, 12 C
Previsione: Lun - Molto nuvoloso. Alto: 20 Basso: 10 Mar - AM Clouds / PM Sun. Alto: 19 Basso: 9
Previsione completa su Yahoo! Tempo metereologico
(fornito da The Weather Channel) ]]>USCA0638_2010_03_01_5_47_PST
(Se vuoi capire tutti l'XML, visita http://developer.yahoo.com/weather/.)
Per questa applicazione ciò di cui abbiamo bisogno è il yweather: posizione etichetta, yweather: atmosfera tag e il yweather: previsioni tag: il tag di posizione ci darà il testo per la posizione, il tag di atmosfera ci darà l'umidità e il tag di previsione ci darà la temperatura per l'attuale e il giorno successivo.
Step 8: Analizzalo
Ora che abbiamo una migliore comprensione di tutto ciò che XML, ciò che dobbiamo fare è assegnare i dati alle variabili in modo che possiamo usare quei dati per impostare la nostra applicazione. Per questo abbiamo bisogno di creare alcune variabili e caricare l'XML. Ecco come lo fai (inserisci il codice nelle posizioni rilevanti nella tua classe di documento):
// Questo conterrà tutti i dati dalla var privata XML _xmlData: XML; // Questo sarà l'url dell'XML che verrà caricato private var _xmlURL: String; funzione privata loadXML (xmlURL: String): void var loader: URLLoader = new URLLoader (); var request: URLRequest = new URLRequest (_xmlURL); Loader.load (richiesta); loader.addEventListener (Event.COMPLETE, loadData); private function loadData (event: Event): void _xmlData = new XML (event.currentTarget.data); var yweather: Namespace = new Namespace ("http://xml.weather.yahoo.com/ns/rss/1.0"); var day: String = _xmlData.channel.item.yweather :: forecast [0]. @ day; var codeToday: String = _xmlData.channel.item.yweather :: forecast [0]. @ code; var codeTomorrow: String = _xmlData.channel.item.yweather :: forecast [1]. @ code;
Andiamo oltre quel pezzo di codice.
Hai bisogno di _xmlData variabile da definire al di fuori di tutte le funzioni (l'ho definita come variabile privata) perché è necessario averla ovunque nel codice, non solo all'interno di una funzione.
La prima funzione, loadXML (), carica il file XML in Flash; usiamo un listener di eventi per controllare quando è completato, quindi eseguire caricare dati().
Il caricare dati() la funzione assegna i dati ricevuti a _xmlData variabile che abbiamo già creato. Usiamo uno spazio dei nomi perché è così che Yahoo ha deciso di impostare il proprio XML (è possibile trovare ulteriori informazioni sui namespace su livedocs.adobe.com). Le altre variabili in questa funzione estraggono le informazioni che vogliamo mostrare nella nostra app dall'XML.
(Per maggiori informazioni sull'analisi dell'XML in AS3, consulta il tutorial su AS3: 101 - XML di Dru Kepple.)
Passaggio 9: creare campi di testo
Ora dobbiamo mostrare queste informazioni. Per fare ciò potremmo creare campi di testo nel codice e assegnare un formato e il testo, ma preferisco usare l'IDE Flash, per risparmiare tempo. Quindi, diventa creativo, abbiamo bisogno di otto campi di testo: temperatura, umidità, temperatura massima e temperatura minima per il giorno corrente. Poi abbiamo bisogno della temperatura massima e della temperatura minima per il giorno successivo, una per il nome del giorno successivo e un'altra che mostra la posizione. Devono essere tutti dinamico campi di testo in modo che possiamo assegnare le informazioni.
Non dimenticare di fornire tutti i nomi delle istanze di campi di testo; ho scelto Temp, umidità, max, min, MAXT, menta, Domani e stato.
Passaggio 10: Visualizza le informazioni
Ora che abbiamo creato i campi di testo, dobbiamo assegnare le informazioni che abbiamo ritirato dall'XML. Per questo abbiamo bisogno del nome di istanza di ogni campo di testo e delle informazioni che abbiamo già, come questo (aggiungendo al tuo esistente caricare dati() funzione):
funzione privata loadData (event: Event): void _xmlData = new XML (event.currentTarget.data); var yweather: Namespace = new Namespace ("http://xml.weather.yahoo.com/ns/rss/1.0"); var day: String = _xmlData.channel.item.yweather :: forecast [0]. @ day; var codeToday: String = _xmlData.channel.item.yweather :: forecast [0]. @ code; var codeTomorrow: String = _xmlData.channel.item.yweather :: forecast [1]. @ code; // Assegnazione delle informazioni ai campi di testo maxt.text = _xmlData.channel.item.yweather :: forecast [1]. @ High + "° F"; mint.text = _xmlData.channel.item.yweather :: forecast [1]. @ low + "° F"; state.text = _xmlData.channel.yweather :: location. @ city; umidità.text = _xmlData.channel.yweather :: atmosfera. @ umidità + "%"; temp.text = _xmlData.channel.item.yweather :: condition. @ temp + "° F"; max.text = _xmlData.channel.item.yweather :: forecast [0]. @ high + "° F"; min.text = _xmlData.channel.item.yweather :: forecast [0]. @ low + "° F"; switch (day) case "Sun": tomorrow.text = "Monday"; rompere; caso "Mon": tomorrow.text = "Tuesday"; rompere; caso "Tue": tomorrow.text = "Wednesday"; rompere; caso "Wed": tomorrow.text = "Thursday"; rompere; caso "Thu": tomorrow.text = "Friday"; rompere; caso "Fri": tomorrow.text = "Saturday"; rompere; caso "Sat": tomorrow.text = "Sunday" break;
Ricorda gli otto campi di testo che abbiamo creato? Ora dobbiamo usare quei nomi qui nel codice. Quello interruttore la dichiarazione è perché non vogliamo mostrare solo "Wed", "Thu" o "Fri", vogliamo l'intero nome.
Passaggio 11: aggiungi un po 'di stile
In questo momento abbiamo solo un testo; sarebbe bello aggiungere alcune icone a seconda del tempo per quel giorno. Quindi quello di cui abbiamo bisogno è creare o cercare un set di icone meteo e assegnare un'icona a seconda del tempo. Possiamo caricare un'immagine da Yahoo, ma non è bello quindi troveremo il nostro set. Per questo, scarica un set di icone e importale in Flash, quindi esporta ciascuna di ActionScript con un nome di classe appropriato:
Le icone che sto usando sono di Garmahis e possono essere scaricate da garmahis.com. Grazie mille a Garmahis per averci permesso di usarli!
Passaggio 12: aggiunta dell'icona
Ora dobbiamo caricare l'icona corretta in base al codice meteo che abbiamo nel nostro XML. Proprio come i nomi dei giorni, possiamo farlo con un interruttore davvero grande ... ma prima dobbiamo creare un filmato per contenere l'icona.
private var _weatherToday: MovieClip = new MovieClip; private var _weatherTomorrow: MovieClip = new MovieClip; // sotto il codice va nel costruttore addChild (_weatherToday); addChild (_weatherTomorrow); _weatherToday .x = -80; _weatherToday .y = -40; _weatherTomorrow .x = 115; _weatherTomorrow .y = -60;
E ora le icone:
// questo codice va nella funzione loadData () (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; rompere; caso "32": caso "34": var weather02: weather02 = new weather02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "24": caso "25": var weather03: weather03 = new weather03 (); _weatherToday.addChild (weather03); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "0": caso "1": caso "2": caso "22": caso "36": caso "42": caso "43": var weather04: weather04 = new weather04 (); _weatherToday.addChild (weather04); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "19": caso "20": caso "21": caso "23": caso "26": var weather05: weather05 = new weather05 (); _weatherToday.addChild (weather05); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "41": caso "46": var weather06: weather06 = new weather06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "3": caso "4": caso "37": caso "38": caso "39": caso "45": caso "47": var weather07: weather07 = new weather07 (); _weatherToday.addChild (weather07); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "31": caso "33": var weather08: weather08 = new weather08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "27": caso "29": var weather09: weather09 = new weather09 (); _weatherToday.addChild (weather09); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "5": caso "6": caso "7": caso "35": var weather10: weather10 = new weather10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "8": caso "10": caso "13": caso "14": caso "15": caso "16": caso "17": caso "18": var weather11: weather11 = new weather11 (); _weatherToday.addChild (weather11); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "9": caso "11": caso "12": var weather12: weather12 = new weather012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere; caso "40": var weather13: weather13 = new weather13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0,7; rompere;
In questo caso ho usato solo 13 icone ma puoi usarne di più se vuoi, o meno, dipende da te. Ricorda, Yahoo usa 40 codici, quindi devi assegnarli tutti a un'icona. Puoi vedere un elenco dei significati di tutti i codici su developer.yahoo.com.
Passaggio 13: aggiungere un effetto di vibrazione
Bene, abbiamo coperto la parte difficile; ora facciamolo sembrare carino. Se vogliamo aggiungere più informazioni o modificare la posizione, avremo bisogno di più spazio, quindi metteremo tutto ciò che abbiamo creato in un solo filmato. Per farlo, basta selezionare tutto, premere F8 (per convertirlo in un simbolo) ed esportare il nuovo simbolo per ActionScript, con un nome classe di Davanti. Quindi cancellalo dallo stage, crea lo sfondo e convertilo in un clip filmato ed esportalo anche per ActionScript, con un nome classe di Indietro.
Ora chiamiamoli dal nostro file ActionScript:
private var _front: Front; private var _back: Back; // tutto sotto il codice va in costruttore di Weather () _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); // questo sarà dietro, quindi non vogliamo che sia ancora visibile, e abbiamo bisogno di impostare la rotazione a -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 (_torna);
Passaggio 14: impostare l'interpolazione
Abbiamo il nostro filmato, quindi ora dobbiamo farlo girare. Per farlo useremo la libreria Tweener che puoi trovare su http://code.google.com/p/tweener/. Scaricalo ed estrai in modo che la cartella \ caurina \ si trovi nella stessa cartella del tuo FLA.
Per questo progetto useremo solo una funzione: la faremo girare usando il girarsi() funzione per sembrare cool. Inserisci il seguente codice nelle posizioni appropriate nella classe del documento:
import caurina.transitions.Tweener; private var _currentFace: String; // capovolge i visi e quindi chiama la funzione che modifica l'ordine dei volti e termina la funzione privata di animazione turnAround (event: MouseEvent): void Tweener.addTween (_back, rotationY: -90, onComplete: changeIndex, time: 0,5, transizione: "lineare"); 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"); // usiamo una stringa, _currentFace, in modo che possa sapere quale faccia è nella funzione privata anteriore changeIndex (): 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, tempo: 0.6, transizione: "linear"); Tweener.addTween (_front, rotationY: 180, time: 0.5, transition: "linear"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, tempo: 0.6, transizione: "linear"); _currentFace = "indietro"; _front.visible = false; _back.visible = true; else this.setChildIndex (_back, 0); Tweener.addTween (_back, rotationY: -180, time: 0.5, transition: "linear"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, tempo: 0.6, transizione: "linear"); Tweener.addTween (_front, rotationY: 0, time: 0.5, transition: "linear"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, tempo: 0.6, transizione: "linear"); _currentFace = "front"; _front.visible = true; _back.visible = false;
Passaggio 15: aggiungere posizioni
Ora che abbiamo più spazio nella parte posteriore possiamo aggiungere più stati o informazioni o qualsiasi cosa tu voglia. In breve, aggiungerò altre posizioni. Quello che dobbiamo fare è andare su Flash e premere Ctrl + F7 (Windows) o Command + F7 (Mac) per mostrare il pannello Componenti. Trascina la casella combinata nella libreria, quindi aggiungila alla classe del documento:
import flash.xml. *; _comboBox = new ComboBox (); // all'interno del costruttore // il testo predefinito _comboBox.prompt = "Scegli la tua posizione:"; // ripeti questo per ogni posizione che vuoi aggiungere // ricorda di ottenere l'URL della posizione dal sito di Yahoo comboBox.addItem (Location: "Mahtomedi", url: "http://weather.yahooapis.com/forecastrss? w = 2444293 & u = c "); // chiama la funzione che fornisce il valore al ComboBox _comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = false; // chiama la funzione che sta per cambiare i dati _comboBox.addEventListener (Event.CHANGE, changeLocation); private function nameLabelFunction (item: Object): String var str: String; if (item == null) str = _comboBox.value; else str = item.Location; return str; // Ricalcola i dati e riassegna i dati della tua funzione privata change changeProvince (event: Event): void loadXML (_comboBox.selectedItem.url);
Step 16: divertiti!
Ora goditi la tua applicazione, aggiungi roba stravagante e crediti (non dimenticare Yahoo!)
Conclusione
Ora abbiamo la nostra applicazione meteo, spero che tu abbia imparato molto, se hai qualche domanda lascia un commento.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Share
Accentsconagua
