Construye una aplicación práctica para el clima AS3 con la API de Yahoo

Con la ayuda de este tutorial, aprenderá cómo usar la API de Yahoo Weather para obtener y mostrar los pronósticos del tiempo con AS3.

Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:

Paso 1: Crear un nuevo archivo

Supongo que utilizará Flash, aunque puede hacerlo con un proyecto Flex o AS3 estándar..

Abra Flash, vaya a Archivo> Nuevo, seleccione Archivo Flash (ActionScript 3.0), luego configure el tamaño en 320x180px y guarde el FLA donde desee..

Paso 2: crear una clase de documento

Ahora vaya a Archivo> Nuevo y esta vez seleccione Archivo ActionScript, luego guárdelo como Weather.as en la misma carpeta donde guardó su archivo FLA. Luego regrese a su FLA, vaya a Propiedades y escriba el nombre del archivo ActionScript en el espacio "Clase". (Para obtener más información sobre el uso de una clase de documento, lea esta introducción rápida).

Paso 3: Configuración de la clase de documento

Vaya al archivo ActionScript y escriba el código para su clase de documento:

paquete import flash.display.MovieClip; // el nombre de la clase debe ser el mismo que el archivo public class El tiempo extiende MovieClip // Constructor: esta función debe tener el mismo nombre que el archivo y la clase public function Weather () trace ("Este es su clase del tiempo "):

Pruébelo y debería rastrear "Esta es su clase de clima" en la ventana de resultados.

Paso 4: Revisa la API de Yahoo Weather

Vaya a la sección de API del tiempo de Yahoo del sitio de desarrolladores de Yahoo; Allí encontrarás algunas explicaciones sobre la API de Yahoo Weather..

Paso 5: pide tu XML

Lo que necesitamos leer en Flash es un archivo XML, así que necesitamos saber cómo solicitarlo, lo cual es bastante simple. Tienes que pensar dónde quieres saber el clima y en que unidad (Celsius o Fahrenheit) quieres la temperatura. Luego, puede obtener XML con estos datos a través de esta URL:

var url: String = "http://weather.yahooapis.com/forecastrss" + "? w =" + (número de ubicación) + "& u =" + ("c" para celcius o "f" para fahrenheit);

Paso 6: Obtener el número de ubicación

El número de ubicación debe ser un WOEID. Para encontrar su WOEID, navegue o busque su ciudad en la página de inicio de Yahoo Weather. El WOEID está en la URL de la página de pronóstico para esa ciudad. También puede obtener el WOEID ingresando su código postal en la página de inicio. Por ejemplo, si busca Los Ángeles en la página de inicio de Weather, la página de pronóstico para esa ciudad es: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, por lo que el WOEID es 2442047.

Paso 7: Entendiendo el XML

Cuando solicites una ubicación meteorológica, lo que recibirás es un XML como este:

   http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Yahoo! El tiempo en Los Angeles, CA en-us Lun, 01 de marzo 2010 5:47 am 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 Lun, 01 de marzo 2010 5:47 am PST   
 Condiciones actuales:
 Justo, 12 c
 
Pronóstico:
 Lunes - Mayormente nublado. Alta: 20 Baja: 10
 Mar - AM Nubes / PM Sol. Alta: 19 Baja: 9
 
 Pronóstico completo en Yahoo! Clima

 (proporcionado por The Weather Channel)
 ]]>   USCA0638_2010_03_01_5_47_PST   

(Si quieres entender todos el XML, visite http://developer.yahoo.com/weather/.)

Para esta aplicación lo que necesitamos es el yweather: ubicación etiqueta, yweather: ambiente etiqueta y el yweather: previsión Etiquetas: la etiqueta de ubicación nos dará el texto para la ubicación, la etiqueta de la atmósfera nos dará la humedad y las etiquetas de pronóstico nos darán la temperatura para el día actual y el siguiente..

Paso 8: Analízalo

Ahora que tenemos una mejor comprensión de todo ese XML, lo que debemos hacer es asignar datos a las variables para que podamos usar esos datos para configurar nuestra aplicación. Para eso necesitamos crear algunas variables y cargar el XML. Así es como lo hace (ponga el código en los lugares relevantes en su clase de documento):

// Esto contendrá todos los datos del XML privado var _xmlData: XML; // Esta será la url del XML que cargaremos privado var _xmlURL: String; función privada loadXML (xmlURL: String): void var loader: URLLoader = new URLLoader (); solicitud var: URLRequest = new URLRequest (_xmlURL); loader.load (solicitud); loader.addEventListener (Event.COMPLETE, loadData);  función privada 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; 

Repasemos ese trozo de código.

Necesitas el _xmlData La variable se definirá fuera de todas las funciones (la he definido como una variable privada) porque necesitará obtenerla en todas partes del código, no solo dentro de una función.

La primera función, loadXML (), carga el archivo XML en Flash; Usamos un detector de eventos para verificar cuándo se ha completado, luego ejecutamos Cargar datos().

los Cargar datos() función asigna los datos recibidos a la _xmlData Variable que ya hemos creado. Utilizamos un espacio de nombres porque así es como Yahoo decidió configurar su XML (puede encontrar más información sobre los espacios de nombres en livedocs.adobe.com). Las otras variables en esta función extraen la información que queremos mostrar en nuestra aplicación del XML.

(Para obtener más información sobre el análisis de XML en AS3, consulte el tutorial de AS3: 101 - XML ​​de Dru Kepple.)

Paso 9: Crear campos de texto

Ahora necesitamos mostrar esa información. Para hacerlo, podríamos crear campos de texto en el código y asignar un formato y el texto, pero prefiero usar el IDE de Flash para ahorrar tiempo. Entonces, sea creativo, necesitamos ocho campos de texto: temperatura, humedad, temperatura máxima y temperatura mínima para el día actual. Luego necesitamos la temperatura máxima y la temperatura mínima para el día siguiente, una para el nombre del día siguiente y otra más que muestre la ubicación. Todos necesitan ser dinámica campos de texto para que podamos asignar la información.

No olvide dar todos los nombres de instancia de los campos de texto; He elegido temperatura, humedad, max, min, maxt, menta, mañana y estado.

Paso 10: Muestra la información

Ahora que hemos creado los campos de texto, debemos asignar la información que hemos recuperado del XML. Para eso necesitamos el nombre de instancia de cada campo de texto y la información que ya tenemos, como esta (agregando a su actual Cargar datos() función):

función privada 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; // Asignar la información a los campos de texto 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; Humedad: = _xmlData.canal.yweather :: Atmósfera. @ Humedad + "%"; 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"; interruptor (día) caso "Sun": tomorrow.text = "lunes"; descanso; caso "Mon": tomorrow.text = "martes"; descanso; caso "mar": tomorrow.text = "miércoles"; descanso; caso "Mié": tomorrow.text = "jueves"; descanso; caso "Jue": tomorrow.text = "Viernes"; descanso; caso "viernes": tomorrow.text = "sábado"; descanso; caso "Sat": tomorrow.text = "Sunday" break; 

¿Recuerdas los ocho campos de texto que creamos? Ahora tenemos que usar esos nombres aquí en el código. Ese cambiar declaración es porque no queremos mostrar solo "Wed", "Thu" o "Fri", queremos el nombre completo.

Paso 11: Añadir un poco de estilo

Ahora mismo solo tenemos texto; Sería bueno agregar algunos iconos dependiendo del clima para ese día. Entonces, lo que necesitamos es crear o buscar un conjunto de íconos del tiempo y asignar un ícono según el clima. Podemos cargar una imagen de Yahoo, pero no es tan agradable, así que encontraremos nuestro propio conjunto. Para eso, descargue un conjunto de iconos e impórtelos a Flash, luego exporte cada uno para ActionScript con un nombre de clase apropiado:

Los iconos que estoy usando son de Garmahis y se pueden descargar de garmahis.com. Muchas gracias a Garmahis por permitirnos usarlos.!

Paso 12: Agregar el icono

Ahora tenemos que cargar el ícono correcto según el código del clima que tenemos en nuestro XML. Al igual que los nombres de los días, podemos hacer esto con un interruptor realmente grande ... pero primero necesitamos crear un clip de película para contener el icono.

private var _weatherToday: MovieClip = new MovieClip; private var _weatherTomorrow: MovieClip = new MovieClip; // el siguiente código va en el constructor addChild (_weatherToday); addChild (_weatherTomorrow); _weatherToday .x = -80; _weatherToday .y = -40; _tiempoMañana .x = 115; _weatherTomorrow .y = -60;

Y ahora los iconos:

// este código va en el modificador de función 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; descanso; caso "32": caso "34": var weather02: weather02 = new weather02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; caso "24": caso "25": var weather03: weather03 = new weather03 (); _weatherToday.addChild (weather03); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; 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; descanso; 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; descanso; caso "41": caso "46": var weather06: weather06 = new weather06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; 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; descanso; caso "31": caso "33": var weather08: weather08 = new weather08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; caso "27": caso "29": var weather09: weather09 = new weather09 (); _weatherToday.addChild (weather09); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; caso "5": caso "6": caso "7": caso "35": var weather10: weather10 = new weather10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; 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; descanso; caso "9": caso "11": caso "12": var weather12: weather12 = new weather012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; caso "40": var weather13: weather13 = new weather13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; descanso; 

En este caso, solo he usado 13 iconos, pero puedes usar más si quieres, o menos, eso depende de ti. Solo recuerda, Yahoo usa 40 códigos, por lo que debes asignarlos a un ícono. Puede ver una lista de los significados de todos los códigos en developer.yahoo.com.

Paso 13: Añade un Efecto Flip

Bueno, hemos cubierto la parte difícil; ahora vamos a hacer que se vea bien. Si queremos agregar más información o cambiar la ubicación, necesitaremos más espacio, así que pondremos todo lo que hemos creado en un clip de película. Para hacerlo, simplemente selecciónelo todo, presione F8 (para convertirlo en un símbolo) y exporte su nuevo símbolo para ActionScript, con un nombre de clase de Frente. Luego, bórrelo del escenario, cree el fondo, conviértalo en un clip de película y expórtelo también para ActionScript, con un nombre de clase de Espalda.

Ahora llamémoslos desde nuestro archivo ActionScript:

privada var _front: Frente; var_back privado: Volver; // todo el código a continuación va en 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); // esto va a quedar atrás, por lo que no queremos que sea visible todavía, y necesitamos establecer la rotación en -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 = falso; this.addChild (_back);

Paso 14: Configurar la interpolación

Tenemos nuestro clip de película, así que ahora tenemos que hacerlo voltear. Para ello vamos a utilizar la biblioteca Tweener que puede encontrar en http://code.google.com/p/tweener/. Descárguelo y extráigalo para que la carpeta \ caurina \ esté en la misma carpeta que su FLA.

Para este proyecto, vamos a usar solo una función: lo haremos voltear usando el Giro de vuelta() Funciona para verse bien. Coloque el siguiente código en los lugares apropiados en su clase de documento:

importar caurina.transitions.Tweener; private var _currentFace: String; // voltea las caras y luego llama a la función que cambia el orden de las caras y finaliza la función privada de animación turnAround (evento: MouseEvent): void Tweener.addTween (_back, rotationY: -90, onComplete: changeIndex, time: 0.5, transición: "lineal"); Tweener.addTween (_back, scaleY: 0.6, scaleX: 0.6, time: 0.3, transición: "linear"); Tweener.addTween (_front, scaleY: 0.6, scaleX: 0.6, time: 0.3, transición: "linear"); Tweener.addTween (_front, rotaciónY: 90, tiempo: 0.5, transición: "lineal");  // usamos una cadena, _currentFace, para que pueda saber qué cara está en la función privada delantera changeIndex (): void if (_currentFace == "front") this.setChildIndex (_front, 0); Tweener.addTween (_back, rotaciónY: 0, tiempo: 0.5, transición: "lineal"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, time: 0.6, transición: "linear"); Tweener.addTween (_front, rotaciónY: 180, tiempo: 0.5, transición: "lineal"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, transición: "linear"); _currentFace = "back"; _front.visible = falso; _back.visible = true;  else this.setChildIndex (_back, 0); Tweener.addTween (_back, rotaciónY: -180, tiempo: 0.5, transición: "lineal"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, time: 0.6, transición: "linear"); Tweener.addTween (_front, rotaciónY: 0, tiempo: 0.5, transición: "lineal"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, transición: "linear"); _currentFace = "front"; _front.visible = true; _back.visible = falso; 

Paso 15: Añadir ubicaciones

Ahora que tenemos más espacio en la parte posterior, podemos agregar más estados o información o lo que quieras. En pocas palabras, voy a añadir más ubicaciones. Lo que debemos hacer es ir a Flash y presionar Ctrl + F7 (Windows) o Comando + F7 (Mac) para revelar el panel Componentes. Arrastre el cuadro combinado a su biblioteca, luego agregue esto a su clase de documento:

importar flash.xml. *; _comboBox = nuevo ComboBox (); // dentro del constructor // el texto predeterminado _comboBox.prompt = "Elija su ubicación:"; // repita esto para cada ubicación que desee agregar // recuerde obtener la URL de la ubicación del sitio comboBox.addItem de Yahoo (Ubicación: "Mahtomedi", url: "http://weather.yahooapis.com/forecastrss? w = 2444293 & u = c "); // llama a la función que le da el valor al ComboBox _comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = falso; // llama a la función que va a cambiar los datos _comboBox.addEventListener (Event.CHANGE, changeLocation); función privada nameLabelFunction (item: Object): String var str: String; if (item == null) str = _comboBox.value;  else str = item.Location;  return str;  // recargar los datos y reasignar los datos de la función privada de la aplicación changeProvince (evento: Evento): void loadXML (_comboBox.selectedItem.url); 

Paso 16: disfrutar!

Ahora disfrute de su aplicación, agregue cosas de fantasía y créditos (no se olvide de Yahoo!)

Conclusión

Ahora tenemos nuestra aplicación de clima, espero que hayas aprendido mucho, si tienes alguna pregunta, simplemente deja un comentario.

Espero que te haya gustado este tutorial, gracias por leerlo.!