Met behulp van deze tutorial leert u hoe u de Yahoo Weather API gebruikt om weersverwachtingen te verkrijgen en weer te geven met AS3.
Eindresultaat voorbeeld
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Stap 1: Maak een nieuw bestand
Ik ga ervan uit dat je Flash zult gebruiken, hoewel je dit kunt doen met een Flex of standaard AS3-project.
Open Flash, ga naar Bestand> Nieuw, selecteer Flash-bestand (ActionScript 3.0) en stel de grootte in op 320x180 px en sla de FLA op waar u maar wilt.
Stap 2: Maak een documentklasse
Ga nu naar Bestand> Nieuw en selecteer dit keer ActionScript-bestand en sla het op als Weather.as in dezelfde map waar u uw FLA-bestand hebt opgeslagen. Ga vervolgens terug naar uw FLA, ga naar Eigenschappen en schrijf de naam van het ActionScript-bestand in de "Class" -ruimte. (Lees deze korte introductie voor meer informatie over het gebruik van een documentklasse.)
Stap 3: De documentklasse instellen
Ga naar het ActionScript-bestand en schrijf de code voor uw documentklasse:
pakket import flash.display.MovieClip; // de naam van de klasse moet hetzelfde zijn als het bestand public class Weer verlengt MovieClip // Constructor: deze functie moet dezelfde naam hebben als het bestand en class public function Weather () trace ("Dit is uw weer klasse "):
Test het en het moet "Dit is uw weerklasse" volgen in het outputvenster.
Stap 4: Check de Yahoo Weather API
Ga naar de Yahoo Weather API-sectie van de Yahoo-ontwikkelaarswebsite; daar vindt u enkele uitleg over de Yahoo Weather API.
Stap 5: Vraag naar uw XML
Wat we in Flash moeten lezen is een XML-bestand, dus we moeten weten hoe we het moeten vragen, wat vrij eenvoudig is. Je moet nadenken waar je wilt het weer weten en in wat eenheid (Celsius of Fahrenheit) wil je de temperatuur. Vervolgens kunt u XML met deze gegevens ophalen via deze URL:
var url: String = "http://weather.yahooapis.com/forecastrss" + "? w =" + (locatienummer) + "& u =" + ("c" voor celcius of "f" voor fahrenheit);
Stap 6: Het locatienummer krijgen
Het locatienummer moet een WOEID zijn. Om uw WOEID te vinden, bladert u of zoekt u naar uw stad op de startpagina van Yahoo Weather. De WOEID bevindt zich in de URL voor de prognosepagina voor die stad. U kunt ook de WOEID verkrijgen door uw postcode op de startpagina in te voeren. Als u bijvoorbeeld op de startpagina van Los Angeles op de startpagina zoekt, is de prognosepagina voor die stad: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, dus de WOEID is 2442047.
Stap 7: De XML begrijpen
Wanneer u een weerlocatie aanvraagt, ontvangt u XML als volgt:
Yahoo! Weer - Los Angeles, CA http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Yahoo! Weer voor Los Angeles, CAnl-nlMa, 01 mrt 2010 17:47 PST60Yahoo! Weer14218 http://weather.yahoo.com http://l.yimg.com/a/i/us/nws/th/main_142b.gifVoorwaarden voor Los Angeles, CA om 5:47 uur PST34.05-118.25 http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html Ma, 01 mrt 2010 17:47 PST De huidige omstandigheden: Redelijk, 12 C
voorspelling: Ma - grotendeels bewolkt. Hoog: 20 Laag: 10 Di - AM Clouds / PM Sun. Hoog: 19 Laag: 9
Volledige voorspelling bij Yahoo! Weer
(geleverd door The Weather Channel) ]]>USCA0638_2010_03_01_5_47_PST
(Als je het wilt begrijpen allemaal de XML, bezoek http://developer.yahoo.com/weather/.)
Voor deze toepassing is wat we nodig hebben de yweather: location label, yweather: atmosfeer tag en de yweather: prognose tags: de locatietag geeft ons de tekst voor de locatie, de sfeerlabel geeft ons de luchtvochtigheid en de prognosetags geven ons de temperatuur voor de huidige en de volgende dag.
Stap 8: Ontleed het
Nu we een beter begrip hebben van al die XML, hoeven we alleen maar gegevens aan variabelen toe te wijzen, zodat we die gegevens kunnen gebruiken om onze applicatie in te stellen. Daarvoor moeten we een aantal variabelen maken en de XML laden. Dit is hoe je het doet (zet de code op de relevante plaatsen in je documentklasse):
// Dit gaat alle gegevens van de XML private var _xmlData: XML bevatten; // Dit wordt de url van de XML die we zullen laden private var _xmlURL: String; private function loadXML (xmlURL: String): void var loader: URLLoader = new URLLoader (); var request: URLRequest = new URLRequest (_xmlURL); Loader.load (verzoek); loader.addEventListener (Event.COMPLETE, loadData); private function loadData (event: Event): void _xmlData = nieuwe XML (event.currentTarget.data); var yweather: Namespace = nieuwe naamruimte ("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;
Laten we die code eens doornemen.
Je hebt de _xmlData variabele die moet worden gedefinieerd buiten alle functies (ik heb deze gedefinieerd als een privévariabele) omdat u deze overal in de code moet krijgen, niet alleen binnen één functie.
De eerste functie, loadXML (), laadt het XML-bestand in Flash; we gebruiken een gebeurtenislistener om te controleren wanneer het is voltooid en uitvoeren loadData ().
De loadData () functie wijst de ontvangen gegevens toe aan de _xmlData variabele die we al hebben gemaakt. We gebruiken een naamruimte omdat Yahoo zo besloot om hun XML in te stellen (meer informatie over namespaces vindt u op livedocs.adobe.com). De andere variabelen in deze functie halen de informatie die we in onze app willen weergeven uit de XML.
(Voor meer informatie over het ontleden van XML in AS3, bekijk Dru Kepple's AS3: 101 - XML tutorial.)
Stap 9: maak tekstvelden aan
Nu moeten we die informatie weergeven. Om dit te doen kunnen we tekstvelden in de code maken en een indeling en tekst toewijzen, maar ik gebruik liever de Flash IDE om tijd te besparen. Dus wees creatief, we hebben acht tekstvelden nodig: temperatuur, vochtigheid, maximumtemperatuur en minimumtemperatuur voor de huidige dag. Dan hebben we maximale temp en minimum temp nodig voor de volgende dag, een voor de naam van de volgende dag en nog een die de locatie laat zien. Ze moeten allemaal zijn dynamisch tekstvelden zodat we de info kunnen toewijzen.
Vergeet niet om al uw textfields instantienamen te geven; ik heb gekozen temp, vochtigheid, max, min, Maxt, munt, morgen en staat.
Stap 10: toon de info
Nu we de tekstvelden hebben gemaakt, moeten we de informatie die we uit de XML hebben opgehaald, toewijzen. Daarvoor hebben we de instantienaam van elk tekstveld en de info die we al hebben, zoals deze (toe te voegen aan uw bestaande loadData () functie):
persoonlijke functie loadData (event: Event): void _xmlData = nieuwe XML (event.currentTarget.data); var yweather: Namespace = nieuwe naamruimte ("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; // De informatie toewijzen aan de tekstvelden 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; humidity.text = _xmlData.channel.yweather :: atmosphere. @ humidity + "%"; 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 (dag) case "Sun": tomorrow.text = "Monday"; breken; case "Mon": tomorrow.text = "Tuesday"; breken; case "Tue": tomorrow.text = "Wednesday"; breken; case "Wed": tomorrow.text = "Thursday"; breken; case "Thu": tomorrow.text = "vrijdag"; breken; case "Fri": tomorrow.text = "Saturday"; breken; case "Sat": tomorrow.text = "Zondag" pauze;
Weet je nog de acht tekstvelden die we hebben gemaakt? Nu moeten we die namen hier in de code gebruiken. Dat schakelaar verklaring is omdat we niet alleen "Wed", "Thu" of "Fri" willen laten zien, we willen de volledige naam.
Stap 11: voeg een stijl toe
Op dit moment hebben we alleen maar tekst; het zou leuk zijn om wat pictogrammen toe te voegen, afhankelijk van het weer voor die dag. Dus wat we nodig hebben, is een reeks weerpictogrammen maken of zoeken en een pictogram toewijzen, afhankelijk van het weer. We kunnen één afbeelding van Yahoo laden, maar dat is niet zo leuk, dus we zullen onze eigen set vinden. Download daarvoor een set pictogrammen en importeer deze naar Flash en exporteer ze vervolgens voor ActionScript met een geschikte klassenaam:
De pictogrammen die ik gebruik zijn van Garmahis en kunnen worden gedownload van garmahis.com. Grote dank aan Garmahis voor het feit dat we ze hebben mogen gebruiken!
Stap 12: Het pictogram toevoegen
Nu moeten we het juiste pictogram laden, afhankelijk van de weercode die we in onze XML hebben. Net als de namen van de dagen, kunnen we dit met een heel grote switch doen ... maar eerst moeten we een filmclip maken om het pictogram te bevatten.
privé var _weatherToday: MovieClip = nieuwe MovieClip; privé var _weatherTomorrow: MovieClip = nieuwe MovieClip; // onderstaande code komt in constructor addChild (_weatherToday); addChild (_weatherTomorrow); _weatherToday .x = -80; _weatherToday .y = -40; _weatherTomorrow .x = 115; _weatherTomorrow .y = -60;
En nu de pictogrammen:
// deze code gaat in de loadData () -functieknop (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; breken; case "32": case "34": var weather02: weather02 = new weather02 (); _weatherToday.addChild (weather02); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; case "24": case "25": var weather03: weather03 = new weather03 (); _weatherToday.addChild (weather03); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; 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; breken; 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; breken; case "41": case "46": var weather06: weather06 = new weather06 (); _weatherToday.addChild (weather06); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; 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; breken; case "31": case "33": var weather08: weather08 = new weather08 (); _weatherToday.addChild (weather08); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; case "27": case "29": var weather09: weather09 = new weather09 (); _weatherToday.addChild (weather09); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; case "5": case "6": case "7": case "35": var weather10: weather10 = new weather10 (); _weatherToday.addChild (weather10); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; 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; breken; case "9": case "11": case "12": var weather12: weather12 = new weather012 (); _weatherToday.addChild (weather12); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken; case "40": var weather13: weather13 = new weather13 (); _weatherToday.addChild (weather13); _weatherToday.scaleX = 0.7; _weatherToday.scaleY = 0.7; breken;
In dit geval heb ik slechts 13 pictogrammen gebruikt, maar je kunt meer gebruiken als je wilt, of minder, dat is aan jou. Vergeet niet dat Yahoo 40 codes gebruikt, dus je moet ze allemaal aan een pictogram toewijzen. Je kunt een lijst met de betekenissen van alle codes bekijken op developer.yahoo.com.
Stap 13: voeg een flip-effect toe
Welnu, we hebben het moeilijke deel behandeld; laten we het er nu leuk uit laten zien. Als we meer informatie willen toevoegen of de locatie willen wijzigen, hebben we meer ruimte nodig, dus we zullen alles dat we hebben gemaakt in één filmclip plaatsen. Om dat te doen, selecteert u het allemaal, drukt u op F8 (om het te converteren naar een symbool) en exporteert u uw nieuwe symbool voor ActionScript, met een klassenaam van Voorkant. Wis het vervolgens uit het werkgebied, maak de achtergrond en converteer dit naar een filmclip en exporteer het ook voor ActionScript, met een klassenaam van Terug.
Laten we ze nu vanuit ons ActionScript-bestand bellen:
privé var _front: Front; privé var _back: Back; // alle onderstaande code wordt weergegeven in 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); // dit gaat achter, dus we willen niet dat het nog zichtbaar is, en we moeten de rotatie instellen op -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);
Stap 14: Stel de Tween in
We hebben onze filmclip, dus nu moeten we hem omdraaien. Om dat te doen gebruiken we de Tweener-bibliotheek die u kunt vinden op http://code.google.com/p/tweener/. Download het en pak het uit, zodat de map \ caurina \ zich in dezelfde map bevindt als uw FLA.
Voor dit project gebruiken we er maar één functie van: we laten het omdraaien met behulp van de omdraaien() functie om er cool uit te zien. Zet de volgende code op de juiste plaatsen in uw documentklasse:
import caurina.transitions.Tweener; private var _currentFace: String; // draai de gezichten om en roep vervolgens de functie aan die de volgorde van de vlakken wijzigt en voltooi de privéfunctie van de animatie turnAround (event: MouseEvent): void Tweener.addTween (_back, rotationY: -90, onComplete: changeIndex, time: 0.5, overgang: "lineair"); 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"); // we gebruiken een String, _currentFace, zodat het kan weten welk gezicht zich voor de privéfunctie bevindt 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, time: 0.6, transition: "linear"); Tweener.addTween (_front, rotationY: 180, time: 0.5, transition: "linear"); Tweener.addTween (_front, scaleY: 1, scaleX: 1, time: 0.6, transition: "linear"); _currentFace = "terug"; _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, 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, transition: "linear"); _currentFace = "voorkant"; _front.visible = true; _back.visible = false;
Stap 15: Locaties toevoegen
Nu we meer ruimte achterin hebben, kunnen we meer staten of informatie toevoegen of wat u maar wilt. In het kort, ik voeg meer locaties toe. Wat we moeten doen is naar Flash gaan en op Ctrl + F7 (Windows) of Command + F7 (Mac) drukken om het deelvenster Componenten weer te geven. Sleep de keuzelijst met invoervak naar uw bibliotheek en voeg deze toe aan uw documentklasse:
import flash.xml. *; _comboBox = nieuwe ComboBox (); // in de constructor // de standaardtekst _comboBox.prompt = "Kies uw locatie:"; // herhaal dit voor elke locatie die u wilt toevoegen // vergeet niet om de URL van de locatie te achterhalen vanaf de Yahoo-site comboBox.addItem (Location: "Mahtomedi", url: "http://weather.yahooapis.com/forecastrss? w = 2444293 & u = c "); // roept de functie aan die de waarde geeft aan de ComboBox _comboBox.labelFunction = nameLabelFunction; _comboBox.width = 150; _comboBox.editable = false; // roept de functie aan die de gegevens _comboBox.addEventListener (Event.CHANGE, changeLocation) zal veranderen; persoonlijke functie naamLabelFunction (item: Object): String var str: String; if (item == null) str = _comboBox.value; else str = item.Location; return str; // reaload de gegevens en wijs de gegevens van uw toepassing toe private functie changeProvince (event: Event): void loadXML (_comboBox.selectedItem.url);
Stap 16: Geniet ervan!
Geniet nu van je applicatie, voeg leuke dingen en credits toe (vergeet Yahoo niet!)
Conclusie
Nu hebben we onze weerapplicatie. Ik hoop dat je veel hebt geleerd. Als je vragen hebt, kun je een reactie achterlaten.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Share
Accentsconagua
