Advertisement
  1. Code
  2. XML
Code

Build a Handy AS3 Weather App with the Yahoo API

by
Difficulty:IntermediateLength:LongLanguages:

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.

Weather Application Step 1

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.)

Weather Application Step 2Weather Application Step 2

Step 3: Setting Up the Document Class

Go to the ActionScript file and write the code for your document 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.

Weather Application Step 4

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:

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:

(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):

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.

Weather Application Step 9

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):

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:

Weather Application Step 11

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.

And now the icons:

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.

My Front symbol
My Back symbol

Now let's call them from our ActionScript file:

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:

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:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.