Construire une application météo AS3 pratique avec l'API Yahoo

Avec l'aide de ce didacticiel, vous apprendrez à utiliser l'API Yahoo Weather pour obtenir et afficher des prévisions météorologiques avec AS3..

Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:

Étape 1: Créer un nouveau fichier

Je suppose que vous utiliserez Flash, bien que vous puissiez le faire avec un projet Flex ou AS3 standard.

Ouvrez Flash, accédez à Fichier> Nouveau, sélectionnez Fichier Flash (ActionScript 3.0), puis définissez la taille sur 320x180px et enregistrez le fichier FLA où vous voulez..

Étape 2: créer une classe de document

Maintenant, allez dans Fichier> Nouveau et cette fois sélectionnez Fichier ActionScript, puis enregistrez-le sous. Weather.as dans le même dossier où vous avez enregistré votre fichier FLA. Revenez ensuite à votre fichier FLA, accédez à Propriétés et écrivez le nom du fichier ActionScript dans l'espace "Classe". (Pour plus d'informations sur l'utilisation d'une classe de document, lisez cette introduction rapide.)

Étape 3: Configuration de la classe de document

Accédez au fichier ActionScript et écrivez le code de votre classe de document:

package import flash.display.MovieClip; // le nom de la classe doit être identique au fichier public. Weather extension MovieClip // Constructor: cette fonction doit avoir le même nom que le fichier et la classe public function Weather () trace ("This is your classe météo "):

Testez-le et il devrait tracer "Ceci est votre classe météo" dans la fenêtre de sortie.

Étape 4: consultez l'API Yahoo Weather

Descendez dans la section Yahoo Weather API du site des développeurs Yahoo; vous y trouverez des explications sur l'API Yahoo Weather.

Étape 5: demandez votre code XML

Ce qu’il faut lire dans Flash, c’est un fichier XML. Nous devons donc savoir comment le demander, ce qui est assez simple. Vous devez penser à où tu veux savoir le temps qu'il fait et dans quoi unité (Celsius ou Fahrenheit) vous voulez la température. Ensuite, vous pouvez obtenir du XML avec ces données via cette URL:

var url: String = "http://weather.yahooapis.com/forecastrss" + "? w =" + (numéro d'emplacement) + "& u =" + ("c" pour celcius ou "f" pour fahrenheit);

Étape 6: Obtenir le numéro de lieu

Le numéro d'emplacement doit être un WOEID. Pour trouver votre WOEID, parcourez ou recherchez votre ville à partir de la page d'accueil Yahoo Weather. Le WOEID se trouve dans l'URL de la page de prévision pour cette ville. Vous pouvez également obtenir le WOEID en entrant votre code postal sur la page d'accueil. Par exemple, si vous recherchez Los Angeles sur la page d'accueil de Weather, la page des prévisions pour cette ville est la suivante: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, de sorte que WOEID est 2442047.

Étape 7: Comprendre le XML

Lorsque vous demandez n'importe quel point météo, vous recevrez un XML comme ceci:

   http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Yahoo! La météo à Los Angeles, Californie en-nous Lun., 01 mars 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 mars 2010 5:47 am PST   
 Conditions actuelles:
 Foire, 12 C
 
Prévoir:
 Lun - Nuageux. Haute: 20 Basse: 10
 Mardi - nuages ​​AM / PM dim. Haute: 19 Basse: 9
 
 Prévisions complètes sur Yahoo! Météo

 (fourni par The Weather Channel)
 ]]>   USCA0638_2010_03_01_5_47_PST   

(Si vous voulez comprendre tout XML, veuillez visiter http://developer.yahoo.com/weather/.)

Pour cette application, nous avons besoin du temps: emplacement étiquette, il fait beau tag et le temps: prévisions tags: la balise d'emplacement nous donnera le texte pour l'emplacement, la balise d'atmosphère nous donnera l'humidité et les balises de prévision nous donneront la température pour le jour actuel et le lendemain.

Étape 8: Analyser

Maintenant que nous avons une meilleure compréhension de tout ce XML, nous devons assigner des données à des variables afin de pouvoir les utiliser pour configurer notre application. Pour cela, nous devons créer des variables et charger le XML. Voici comment vous le faites (placez le code aux emplacements appropriés dans votre classe de document):

// Cela va contenir toutes les données du XML privé var _xmlData: XML; // Cela va être l'URL du XML que nous allons charger private var _xmlURL: String; fonction privée loadXML (xmlURL: String): void chargeur var: URLLoader = new URLLoader (); var request: URLRequest = new URLRequest (_xmlURL); loader.load (demande); loader.addEventListener (Event.COMPLETE, loadData);  fonction privée 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; 

Passons en revue ce bloc de code.

Vous avez besoin du _xmlData variable à définir en dehors de toutes les fonctions (je l'ai définie en tant que variable privée) car vous devrez l'obtenir partout dans le code, pas seulement dans une fonction.

La première fonction, loadXML (), charge le fichier XML dans Flash; nous utilisons un écouteur d'événement pour vérifier son achèvement, puis exécutons loadData ().

le loadData () fonction assigne les données reçues au _xmlData variable que nous avons déjà créée. Nous utilisons un espace de noms parce que c'est comme ça que Yahoo a décidé de configurer son XML (vous pouvez en savoir plus sur les espaces de noms sur le site www.eurocdoc.com). Les autres variables de cette fonction extraient les informations que nous voulons montrer dans notre application à partir du XML.

(Pour plus d'informations sur l'analyse XML dans AS3, consultez le didacticiel AS3: 101 - XML ​​de Dru Kepple.)

Étape 9: Créer des champs de texte

Nous devons maintenant afficher cette information. Pour ce faire, nous pourrions créer des champs de texte dans le code et attribuer un format et le texte, mais je préfère utiliser Flash IDE pour gagner du temps. Alors faites preuve de créativité, nous avons besoin de huit champs de texte: température, humidité, température maximale et minimale pour la journée en cours. Ensuite, nous avons besoin des températures maximales et minimales pour le jour suivant, une pour le nom du jour suivant et une autre indiquant l'emplacement. Ils ont tous besoin d'être dynamique champs de texte afin que nous puissions attribuer l'info.

N'oubliez pas de donner tous les noms d'occurrence de vos champs de texte j'ai choisi temp, humidité, max, min, maxt, menthe, demain et Etat.

Étape 10: Afficher les informations

Maintenant que nous avons créé les champs de texte, nous devons affecter les informations que nous avons récupérées à partir du XML. Pour cela, nous avons besoin du nom d’instance de chaque champ de texte et des informations dont nous disposons déjà, comme ceci (l’ajout à votre loadData () une fonction):

fonction privée loadData (événement: événement): 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; // Affectation des informations aux champs de texte 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; humidité.text = _xmlData.channel.yweather :: atmosphère. @humidité + "%"; 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 (jour) case "Soleil": demain.text = "Lundi"; Pause; case "lundi": demain.text = "mardi"; Pause; case "mardi": demain.text = "mercredi"; Pause; case "mer": demain.text = "jeudi"; Pause; case "jeu": demain.text = "vendredi"; Pause; case "ven": demain.text = "samedi"; Pause; case "sam": demain.text = "dimanche" pause; 

Rappelez-vous les huit champs de texte que nous avons créés? Nous devons maintenant utiliser ces noms ici dans le code. Cette commutateur déclaration est parce que nous ne voulons pas montrer que "mercredi", "jeu" ou "vendredi", nous voulons le nom complet.

Étape 11: Ajoutez du style

En ce moment, nous avons juste du texte; il serait bien d’ajouter des icônes en fonction de la météo du jour. Nous avons donc besoin de créer ou de rechercher un ensemble d’icônes météo et d’attribuer une icône en fonction de la météo. Nous pouvons charger une image de Yahoo, mais ce n'est pas très agréable, nous allons donc trouver notre propre ensemble. Pour cela, téléchargez un ensemble d’icônes et importez-les dans Flash, puis exportez-les au format ActionScript avec un nom de classe approprié:

Les icônes que j'utilise proviennent de Garmahis et peuvent être téléchargées à partir de garmahis.com. Un grand merci à Garmahis de nous avoir laissé les utiliser!

Étape 12: Ajout de l'icône

Maintenant, nous devons charger la bonne icône en fonction du code météo que nous avons dans notre code XML. Tout comme les noms des jours, nous pouvons le faire avec un très grand commutateur… mais nous devons d'abord créer un clip pour contenir l'icône.

private var _weatherToday: MovieClip = new MovieClip; private var _weatherTomorrow: MovieClip = new MovieClip; // le code ci-dessous va dans le constructeur addChild (_weatherToday); addChild (_weatherTomorrow); _weatherToday .x = -80; _weatherToday .y = -40; _weatherTomorrow .x = 115; _weatherTomorrow .y = -60;

Et maintenant les icônes:

// ce code va dans la fonction loadData () switch (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; Pause; case "32": case "34": var weather02: weather02 = new weather02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "24": case "25": var weather03: weather03 = new weather03 (); _weatherToday.addChild (weather03); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "0": case "1": case "2": case "22": case "36": case "42": case "43": var météo04: météo04 = nouvelle météo04 (); _weatherToday.addChild (weather04); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; 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; Pause; case "41": case "46": var weather06: weather06 = new weather06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "3": case "4": case "37": case "38": case "39": case "45": case "47": var météo07: météo07 = nouvelle météo07 (); _weatherToday.addChild (weather07); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "31": case "33": var weather08: weather08 = new weather08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "27": case "29": var weather09: weather09 = new weather09 (); _weatherToday.addChild (weather09); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "5": case "6": case "7": case "35": var weather10: weather10 = nouvelle météo10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "8": case "10": case "13": case "14": case "15": case "16": case "17": case "18": var météo11: météo11 = nouvelle météo11 (); _weatherToday.addChild (weather11); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; case "9": case "11": case "12": var météo12: météo12 ​​= nouvelle météo012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; cas "40": var weather13: weather13 = new weather13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0,7; _weatherToday.scaleY = 0,7; Pause; 

Dans ce cas, je viens d'utiliser 13 icônes mais vous pouvez utiliser plus si vous voulez, ou moins, c'est à vous de choisir. Rappelez-vous que Yahoo utilise 40 codes, vous devez donc les attribuer tous à une icône. Vous pouvez voir une liste des significations de tous les codes sur developer.yahoo.com.

Étape 13: Ajouter un effet de bascule

Eh bien, nous avons couvert la partie difficile; maintenant faisons en sorte que cela paraisse bien. Si nous voulons ajouter plus d'informations ou modifier l'emplacement, nous aurons besoin de plus d'espace. Nous mettrons donc tout ce que nous avons créé dans un seul clip. Pour ce faire, il suffit de tout sélectionner, d'appuyer sur F8 (pour le convertir en symbole) et d'exporter votre nouveau symbole pour ActionScript, avec un nom de classe de De face. Ensuite, effacez-le de la scène, créez l’arrière-plan, convertissez-le en clip et exportez-le également pour ActionScript, avec le nom de classe suivant. Retour.

Appelons-les maintenant à partir de notre fichier ActionScript:

var_front privé: Avant; private var _back: Back; // tout le code ci-dessous va dans le constructeur 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); // ceci va être en retard donc nous ne voulons pas qu'il soit visible pour le moment, et nous devons définir la rotation sur -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);

Étape 14: Configurez le Tween

Nous avons notre clip vidéo, nous devons donc maintenant le faire basculer. Pour ce faire, nous allons utiliser la bibliothèque Tweener que vous pouvez trouver à l'adresse http://code.google.com/p/tweener/. Téléchargez-le et extrayez-le pour que le dossier \ caurina \ se trouve dans le même dossier que votre fichier FLA..

Pour ce projet, nous n’utiliserons qu’une fonction: nous le ferons basculer en utilisant le tourner autour() fonction pour avoir l'air cool. Placez le code suivant aux endroits appropriés dans votre classe de documents:

importer caurina.transitions.Tweener; private var _currentFace: String; // retourne les faces, puis appelle la fonction qui change l'ordre des faces et termine la fonction privée d'animation turnAround (event: MouseEvent): void Tweener.addTween (_back, rotationY: -90, onComplete: changeIndex, heure: 0,5, transition: "linéaire"); 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, temps: 0,5, transition: "linéaire");  // nous utilisons une chaîne, _currentFace, afin qu'il puisse savoir quelle face se trouve en face de la fonction privée changeIndex (): void if (_currentFace == "front") this.setChildIndex (_front, 0); Tweener.addTween (_back, rotationY: 0, heure: 0.5, transition: "linéaire"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); Tweener.addTween (_front, rotationY: 180, heure: 0.5, transition: "linéaire"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); _currentFace = "back"; _front.visible = false; _back.visible = true;  else this.setChildIndex (_back, 0); Tweener.addTween (_back, rotationY: -180, temps: 0,5, transition: "linéaire"); Tweener.addTween (_back, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); Tweener.addTween (_front, rotationY: 0, heure: 0.5, transition: "linéaire"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); _currentFace = "front"; _front.visible = true; _back.visible = false; 

Étape 15: Ajouter des emplacements

Maintenant que nous avons plus d’espace à l’arrière, nous pouvons ajouter plus d’états, d’informations ou tout ce que vous voulez. En bref, je vais ajouter plus de lieux. Ce que nous devons faire est d'aller dans Flash et d'appuyer sur Ctrl + F7 (Windows) ou Commande + F7 (Mac) pour afficher le panneau Composants. Faites glisser la liste déroulante dans votre bibliothèque, puis ajoutez-la à votre classe de document:

import flash.xml. *; _comboBox = new ComboBox (); // à l'intérieur du constructeur // le texte par défaut _comboBox.prompt = "Choisissez votre emplacement:"; // Répétez cette opération pour chaque emplacement que vous souhaitez ajouter // n'oubliez pas d'obtenir l'URL de l'emplacement à partir du site Yahoo comboBox.addItem (Location: "Mahtomedi", url: "http://weather.yahooapis.com/forecastrss? w = 2444293 & u = c "); // appelle la fonction qui donne la valeur à la ComboBox _comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = false; // appelle la fonction qui va modifier les données _comboBox.addEventListener (Event.CHANGE, changeLocation); fonction privée nameLabelFunction (item: Object): String var str: String; if (item == null) str = _comboBox.value;  else str = item.Location;  return str;  // recharge les données et réaffecte les données de la fonction privée de votre application changeProvince (événement: événement): void loadXML (_comboBox.selectedItem.url); 

Étape 16: Profitez!

Maintenant, profitez de votre application, ajoutez des trucs et crédits géniaux (n'oubliez pas Yahoo!)

Conclusion

Nous avons maintenant notre application météo. J'espère que vous avez beaucoup appris. Si vous avez des questions, laissez un commentaire..

J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!