Build a Handy AS3 Weather App with the Yahoo API

With help from this tutorial you will learn how to use the Yahoo Weather API to obtain and display weather forecasts with AS3.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Create a New File

I'm assuming you'll use Flash, though you can do this with a Flex or standard AS3 Project.

Open Flash, go to File > New, select Flash File (ActionScript 3.0), then set the size as 320x180px and save the FLA wherever you want.

Step 2: Create a Document Class

Now go to File > New and this time select ActionScript File, then save it as Weather.as in the same folder where your saved your FLA file. Then go back to your FLA, go to Properties and write the name of the ActionScript file in the "Class" space. (For more info on using a document class, read this quick introduction.)

Step 3: Setting Up the Document Class

Go to the ActionScript file and write the code for your document class:

package{

	import flash.display.MovieClip;

	//the name of the class has to be the same as the file
	public class Weather extends MovieClip{
		
		//Constructor: this function has to have the same name as the file and class
		public function Weather(){

			trace("This is your weather class"):

		}
	}
}

Test it and it should trace "This is your weather class" in the output window.

Step 4: Check Out the Yahoo Weather API

Get yourself off to the Yahoo Weather API section of the Yahoo developers site; there you will find some explanations about the Yahoo Weather API.

Step 5: Ask For Your XML

What we need to read in Flash is an XML file, so we need to know how to ask for it, which is pretty simple. You need to think about where you want to know the weather and in what unit (Celsius or Fahrenheit) you want the temperature. Then, you can get XML with this data through this URL:

1	var url:String = "http://weather.yahooapis.com/forecastrss" + "?w=" + (location number) + "&u=" + ("c" for celcius or "f" for fahrenheit);

Step 6: Getting the Location Number

The location number needs to be a WOEID. To find your WOEID, browse or search for your city from the Yahoo Weather home page. The WOEID is in the URL for the forecast page for that city. You can also get the WOEID by entering your zip code on the home page. For example, if you search for Los Angeles on the Weather home page, the forecast page for that city is: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, so the WOEID is 2442047.

Step 7: Understanding the XML

When you request any weather location, what you'll receive is XML like this:

<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#">
	<channel>
		<title>Yahoo! Weather - 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>
		<description>Yahoo! Weather for Los Angeles, CA</description>
		<language>en-us</language>
		<lastBuildDate>Mon, 01 Mar 2010 5:47 am PST</lastBuildDate>
		<ttl>60</ttl>
		<yweather:location city="Los Angeles" region="CA"   country="United States"/>
		<yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/>
		<yweather:wind chill="12"   direction="0"   speed="0" />
		<yweather:atmosphere humidity="80"  visibility="16.09"  pressure="1018.4"  rising="1" />
		<yweather:astronomy sunrise="6:22 am"   sunset="5:49 pm"/>
		<image>
			<title>Yahoo! Weather</title>
			<width>142</width>
			<height>18</height>
			<link>http://weather.yahoo.com</link>
			<url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url>
		</image>
		<item>
			<title>Conditions for Los Angeles, CA at 5:47 am 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>Mon, 01 Mar 2010 5:47 am PST</pubDate>
			<yweather:condition  text="Fair"  code="33"  temp="12"  date="Mon, 01 Mar 2010 5:47 am PST" />
			<description><![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>Current Conditions:</b><br />
			Fair, 12 C<BR />
			<BR /><b>Forecast:</b><BR />
			Mon - Mostly Cloudy. High: 20 Low: 10<br />
			Tue - AM Clouds/PM Sun. High: 19 Low: 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 Forecast at Yahoo! Weather</a><BR/><BR/>
			(provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/>
			]]></description>
			<yweather:forecast day="Mon" date="1 Mar 2010" low="10" high="20" text="Mostly Cloudy" code="28" />
			<yweather:forecast day="Tue" date="2 Mar 2010" low="9" high="19" text="AM Clouds/PM Sun" code="30" />
			<guid isPermaLink="false">USCA0638_2010_03_01_5_47_PST</guid>
		</item>
	</channel>
</rss><!-- api7.weather.re4.yahoo.com compressed/chunked Mon Mar  1 06:59:00 PST 2010 -->

(If you want to understand all the XML, please visit http://developer.yahoo.com/weather/.)

For this application what we need is the yweather:location tag, yweather:atmosphere tag and the yweather:forecast tags: the location tag will give us the text for the location, the atmosphere tag will give us the humidity and the forecast tags will give us the temperature for the current and the next day.

Step 8: Parse It

Now that we have a better understanding of all that XML, what we need to do is assign data to variables so that we can use that data to set up our application. For that we need to create some variables and load the XML. This is how you do it (put the code in the relevant places in your document class):

//This is going to contain all the data from the XML
private var _xmlData:XML;
//This is going to be the url of the XML that we will load
private var _xmlURL:String;

private function loadXML(xmlURL:String):void {
	var loader:URLLoader = new URLLoader();
	var request:URLRequest = new URLRequest(_xmlURL);
	
	loader.load(request);
	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;
}

Let's go over that lump of code.

You need the _xmlData variable to be defined outside all functions (I've defined it as a private variable) because you will need to get it everywhere in the code, not just within one function.

The first function, loadXML(), loads the XML file into Flash; we use an event listener to check when it's completed, then run loadData().

The loadData() function assigns the received data to the _xmlData variable that we have already created. We use a namespace because that's how Yahoo decided to set up their XML (you can find more about namespaces at livedocs.adobe.com). The other variables in this function extract the information that we want to show in our app from the XML.

(For more info on parsing XML in AS3, check out Dru Kepple's AS3:101 - XML tutorial.)

Step 9: Create Text Fields

Now we need to display that information. To do so we could create text fields in the code and assign a format and the text, but I prefer to use the Flash IDE, to save time. So get creative, we need eight text fields: temperature, humidity, maximum temp and minimum temp for the current day. Then we need maximum temp and minimum temp for the next day, one for the name of the next day and one more that shows the location. They all need to be dynamic text fields so we can assign the info.

Don't forget to give all your textfields instance names; I've chosen temp, humidity, max, min, maxt, mint, tomorrow and state.

Step 10: Display the Info

Now that we've created the text fields, we need to assign the information that we retreived from the XML. For that we need the instance name of each text field and the info that we already have, like this (adding to your existing loadData() function):

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;

	//Assigning the information to the text fields
	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 (day) {
		case "Sun":
			tomorrow.text = "Monday";
		break;
		case "Mon":
			tomorrow.text = "Tuesday";
		break;
		case "Tue":
			tomorrow.text = "Wednesday";
		break;
		case "Wed":
			tomorrow.text = "Thursday";
		break;
		case "Thu":
			tomorrow.text = "Friday";
		break;
		case "Fri":
			tomorrow.text = "Saturday";
		break;
		case "Sat":
			tomorrow.text = "Sunday"
		break;
	}
}

Remember the eight text fields that we created? Now we have to use those names here in the code. That switch statement is because we don't want to show just "Wed", "Thu" or "Fri", we want the entire name.

Step 11: Add Some Style

Right now we have just text; it would be nice to add some icons depending on the weather for that day. So what we need is to create or look for a set of weather icons and assign an icon depending on the weather. We can load one image from Yahoo, but it's not that nice so we'll find our own set. For that, download a set of icons and import them to Flash, then export each one for ActionScript with an appropriate class name:

The icons I'm using are from Garmahis and can be downloaded from garmahis.com. Big thanks to Garmahis for letting us use them!

Step 12: Adding the Icon

Now we have to load the correct icon depending on the weather code that we have in our XML. Just like the names of the days, we can do this with a really big switch... but first we need to create a movie clip to contain the icon.

private var _weatherToday:MovieClip = new MovieClip;
private var _weatherTomorrow:MovieClip = new MovieClip;

//below code goes in constructor
addChild(_weatherToday);
addChild(_weatherTomorrow);
_weatherToday .x = -80;
_weatherToday .y = -40;
_weatherTomorrow .x = 115;
_weatherTomorrow .y = -60;

And now the icons:

//this code goes in the loadData() function
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;
	break;
	
	case "32":
	case "34":
		var weather02:weather02 = new weather02();
		_weatherToday.addChild(weather02);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
	
	case "24":
	case "25":
		var weather03:weather03 = new weather03();
		_weatherToday.addChild(weather03);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
	
	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;
	break;
		
	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;
	break;
	
	case "41":
	case "46":
		var weather06:weather06 = new weather06();
		_weatherToday.addChild(weather06);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
	
	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;
	break;
	
	case "31":
	case "33":
		var weather08:weather08 = new weather08();
		_weatherToday.addChild(weather08);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
	
	case "27":
	case "29":
		var weather09:weather09 = new weather09();
		_weatherToday.addChild(weather09);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
	
	case "5":
	case "6":
	case "7":
	case "35":
		var weather10:weather10 = new weather10();
		_weatherToday.addChild(weather10);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
				
	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;
	break;
	
	case "9":
	case "11":
	case "12":
		var weather12:weather12 = new weather012();
		_weatherToday.addChild(weather12);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
	
				
	case "40":
		var weather13:weather13 = new weather13();
		_weatherToday.addChild(weather13);
		_weatherToday.scaleX = 0.7;
		_weatherToday.scaleY = 0.7;
	break;
}

In this case I just used 13 icons but you can use more if you want, or fewer, that's up to you. Just remember, Yahoo uses 40 codes, so you have to assign them all to an icon. You can see a list of the meanings of all the codes at developer.yahoo.com.

Step 13: Add a Flip Effect

Well, we've covered the hard part; now let's make it look nice. If we want to add more information or change the location we will need more space, so we'll put all that we have created into one movie clip. To do that, just select it all, press F8 (to convert it to a symbol) and export your new symbol for ActionScript, with a class name of Front. Then erase it from the stage, create the background, and convert this to a movie clip and export it for ActionScript too, with a class name of Back.

Now let's call them from our ActionScript file:

private var _front:Front;
private var _back:Back;

//all below code goes 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);

//this is going to be behind so we don't want it to be visible yet, and we need to set the rotation to -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);

Step 14: Set Up the Tween

We have our movie clip, so now we need to make it flip. To do that we are going to use the Tweener library which you can find at http://code.google.com/p/tweener/. Download it, and extract it so that the \caurina\ folder is in the same folder as your FLA.

For this project we are going to use just one function from it: we'll make it flip using the turnAround() function to look cool. Put the following code in the appropriate places in your document class:

import caurina.transitions.Tweener;

private var _currentFace:String;

//flip the faces and then calls the function that change the order of the faces and finish the animation
private function turnAround(event:MouseEvent):void {
	Tweener.addTween(_back, { rotationY: -90, onComplete:changeIndex, time:0.5, transition:"linear" } );
	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 use a String, _currentFace, so it can know which face is in front
private function 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 = "back";
		_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 = "front";
		_front.visible = true;
		_back.visible = false;
	}
}

Step 15: Add Locations

Now that we have more space in the back we can add more states or info or whatever you want. Briefly, I'll add more locations. What we need to do is to go to Flash and press Ctrl+F7 (Windows) or Command+F7 (Mac) to reveal the Components panel. Drag the Combo Box to your Library, then add this to your document class:

import flash.xml.*;

_comboBox = new ComboBox();

//inside the constructor
//the default text
_comboBox.prompt = "Choose your location:";
//repeat this for each location that you want to add
//remember to get the location's URL from the Yahoo site
comboBox.addItem( { Location:"Mahtomedi", url: "http://weather.yahooapis.com/forecastrss?w=2444293&u=c"} );
//calls the function that give the value to the ComboBox
_comboBox.labelFunction = nameLabelFunction;
_comboBox.width = 150;
_comboBox.editable = false;
//calls the function that is going to change the data
_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;
}

//reaload the data and reassign the data of your application
private function changeProvince(event:Event):void {
	loadXML(_comboBox.selectedItem.url);
}

Step 16: Enjoy!

Now enjoy your application, add fancy stuff and credits (don't forget Yahoo!)

Conclusion

Now we have our weather application I hope you learned a lot, if you have any questions just leave a comment.

I hope you liked this tutorial, thanks for reading!