Yahoo Weather App in Flash

In this tutorial I’m gonna show you how to create your own Yahoo Weather App in Flash, using AS 3.0 and Adobe Flash. There are many ways to build such an app, most of them use an API called Yahoo! ASTRA. The Yahoo! ASTRA Web APIs library is a set of wrapper tools that facilitate access to Yahoo! public APIs from Flex and Flash applications. You can find more info about ASTRA Web APIs here. In this tutorial we will not use this API becouse it shows only 2 days of Forecast and we want 5.

Setting the Flash file

Create a new Flash File (ActionScript 3.0) with size 630x360px and set a document-level classpath for this to be src. If you are not sure how to work with ClassPaths and Packages in Flash then I strongly recommend you to check Classpaths and packages in Adobe Flash Cs5. Then create a blank folder called src where will be all classes used in this widget.

Before proceeding, you must understand how this widget works. Go to weather.yahoo.com, browse or search for your city and you will see the weather forecast for 5 days. In the forecast table  press Extended Forecast that will redirect you to a new page. The small code from the URL of the page represents the location number (WOEID) for the forecast page – in my case Bucharest, Romania will be:

http://www.weather.com/outlook/travel/businesstraveler/extended/ROXX0003

With this code, just make a simple request to “http://xml.weather.yahoo.com/forecastrss/” + WOEID_CODE + “.xml” to receive the weather info from that city.  As you observe the URL address is mostly like a RSS feed; (trace this address to see the result). More info about the WOEID codes can be found here.

The XML file

Create a new XML file locations.xml and add 5  different WOEID codes from random locations:

[as3]
<?xml version="1.0" encoding="utf-8" ?>
<data>
<location title="United States, California" code="USCA0011" />
<location title="India, Chennai" code="INXX0075" />
………………………………….
</data>
[/as3]

Weather Icons

After the request was done to that RSS feed, you will find some weather codes for each day.  For example if outside it’s a sunny day then the weather code will be 32. These codes are from 1 to 47 but there is also an error code called 3200. Download some custom icons and rename them according with these weather codes and save them in a folder called images. Yahoo provide also some icons already in case you don’t want to use custom icons.

Weather Day Container

Before to start building the classes, we need a drop-down menu for location names and codes. From Window choose Components and drag to stage from User Interface a ComboBox component with instance name locationsCombo.

Also we need to create a new MovieClip – a container – for each Weather Day Forecast, where all weather info from that day will be displayed. This container will hold 4 new TextFields for:

  • dayTxt – will be the name of the day
  • num1 – for high degrees
  • num2 – for small degrees
  • weatherTxt – for weather description

..and one container for weather icons called pic, which is another new MovieClip. Finally the Weather Day Forecast container will be like this:
Duplicate this for 5 times and give them instance names from day1 to day5.

All together

Create 2 new ActionScript 3.0 classes and save them in src folder- one for pics PicLoader.as and one for the hole container DayTab.as.
PicLoader.as will load the weather icons and will display them with Caurina:

[as3]
public class PicLoader extends Sprite
{
private var loader:Loader;
public var mc:MovieClip;

public function PicLoader()
{
mc.visible = false;
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, objectLoaded);
}

private function objectLoaded(e:Event):void
{
e.target.content.alpha = 0;
e.target.content.smoothing = true;
Tweener.addTween(e.target.content, { alpha:1, transition:"easeOutSine", time:0.3 } );
}

public function getPath(c:int) {//here are the paths for icons
if (loader != null) {
loader.unload();
}
loader.load(new URLRequest("images/" + c + ".png"));
addChild(loader);
}
}
[/as3]

In DayTab.as declare all instance names as public variables:

[as3]
public var dayTxt:TextField;
public var num1:TextField;
public var num2:TextField;
public var weatherTxt:TextField;
public var pic:PicLoader;
public var bg:MovieClip;
[/as3]

…and create a function that will receive an object with all info about weather:

[as3]
public function getInfo(c:Object) {
pic.getPath(c.@code);
num2.text = c.@low;
num1.text = c.@high;
dayTxt.text = c.@day;
weatherTxt.text = c.@text;
}
[/as3]

That’s it with all these 2 classes, now go back to you flash file and locate in library the symbols created – pic and DayTab. Link these 2 symbols with their classes and let’s move to the final part of this tutorial.

Final part

Create a new ActionScript 3.0 class into src folder as Widget.as file. Declare all instance names as public variables:

[as3]
public var pic:PicLoader;
public var locationsCombo:ComboBox;
public var day1:DayTab;
public var day2:DayTab;
public var day3:DayTab;
public var day4:DayTab;
public var day5:DayTab;
[/as3]

For XML path we need a variable, for XML object after the file is loaded, a variable to load the file and one for a proxy file (I will describe later about this) and one variable as Array to store the info from XML. If you remember what we’ve discussed before, we need to make an request to “http://xml.weather.yahoo.com/forecastrss/” + WOEID_CODE + “.xml” in order to receive the weather info from that city. If you just do this, you’ll observe that will work only on your local computer – that’s because of the Yahoo Security sandbox violation; to resolve this problem we need to create a php file as proxy.

[as3]
private var xmlPath:String = "locations.xml";
private var xml:XML;
private var urlLoader:URLLoader;
private var rssLoader:URLLoader;
private var links:Array;
[/as3]

The constructor function will look like this:

[as3]
links = new Array();

urlLoader = new URLLoader();
urlLoader.load(new URLRequest(xmlPath));
urlLoader.addEventListener(Event.COMPLETE, onDataLoaded);

rssLoader = new URLLoader();
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
locationsCombo.addEventListener(Event.CHANGE, changeLocation);
[/as3]

…after the XML is loaded we receive the results:

[as3]
private function onDataLoaded(e:Event):void
{
xml = new XML(URLLoader(e.target).data);
var c:Number = -1;
for each(var locations:XML in xml.location) {
c++;
links.push([locations.@title, locations.@code]);
locationsCombo.addItem( { label:locations.@title, data:c } );
}

getInfo(0);
}
[/as3]

…make the request with the WOIED code:

[as3]
private function getInfo(c:int) {
rssLoader.load(new URLRequest("proxy.php?cod=" + links[c][1]));
}
[/as3]

The function that allow us to change trough drop-down menu different locations:

[as3]
private function changeLocation(e:Event):void
{
getInfo(e.target.selectedItem.data);//data is the WOIED code from xml
}
[/as3]

…after the request was completed and we get the results:

[as3]
private function rssLoaded(e:Event):void
{

xml = new XML(URLLoader(e.target).data);
//see every node called forcast
//RSS feeds like Yahoo! weather have data that can’t be retrieved by using the regular XML class. So we need to use the Namespace class that will give you access to data inside an RSS feed.
var yweather:Namespace = new Namespace("http://xml.weather.yahoo.com/ns/rss/1.0");
day1.getInfo(xml..item.yweather::forecast[0]);
day2.getInfo(xml..item.yweather::forecast[1]);
day3.getInfo(xml..item.yweather::forecast[2]);
day4.getInfo(xml..item.yweather::forecast[3]);
day5.getInfo(xml..item.yweather::forecast[4]);
}
[/as3]

…and each DayTab container will receive the weather info. Also proxy.php will read the URL address (as RSS feed) and will return the content of XML – in this way we avoid the security problems.

[as3]
<?php
$url = "http://xml.weather.yahoo.com/forecastrss/" . $_GET[‘cod’] . "_c.xml";
echo file_get_contents($url);
?>
[/as3]

That’s it ladies and gentlemen, hope you will have a good winter and that you learn something from today. Until my next tutorial, Merry Christmas Everybody!

Preview


Twitter Digg Delicious Stumbleupon Technorati Facebook

34 Responses to “Yahoo Weather App in Flash”

  1. thanks very much for this awesome tutorial

  2. You’re welcome 😉

  3. This is going to sound lazy. but…

    I would like to use this for a website that I am building but don’t want to learn more than I need to. I did modify the one of the locations and uploaded the files to a test website. http://www.octoberskydesigns.com

    All I get is static information.

    What did I miss?

  4. Did you upload also the proxy file?

  5. Yes, I did upload the proxy file

    I really like this design!

  6. the problem is simple, be sure you change the paths because now you are trying to access some files from my domain and there is no cross-domain, in order to allow your app to use them.

  7. I’m having the same static image issue also, where all do I have to enter my domain? I found the one spot in the widget.as file, but I’m still having the issue. I’d like to write my own flash widget, so I’m just practicing with yours first. Thanks for the awesome write up!

  8. whether it should be run through the website, just run the swf file but can not, sorry my english is weak, please help me, I because i get a job like this and the timing is not long

  9. src\PicLoader.as, Line 29 1120: Access of undefined property Tweener.

    src\PicLoader.as, Line 3 1172: Definition caurina.transitions:Tweener could not be found. ??

  10. Hi, first of all thanks for the tutorial! Now, i’m having a problem with the language of the rss from yahoo, it doesn not feed the xml in portugues and i wanted to use it on a portugues website, so if i use the yahoo rss all the text will be in english, is it possible to use a diferent rss that provides xml in portugues? I know i would have to adapt the widget for the new rss.

  11. Hi, the problem is that the feed is in english…an option is to translate all the forecast words in your language… for example: if(value == “hot”) { value == “your language word”}

  12. Yes, that would be the easiest solution, i’ve tried to do that but i’m having some problems since i’m new to as3. So to translate ir would i just have to create a function with the if statemente like the exemple? ex:

    public function translation()
    {
    if(value ==”Tue”)
    {
    value ==”Ter”;
    }
    }

    would this be right? Thanks for your help!

  13. Yes, something like this.

  14. Have you found a way to dynamically retrieve a WOEID that works with this service?

  15. Hello,nice tutorial,when I edit movie this error pops out

    1172: didnt find definition ascb.filters:ConvolutionMatrixArrays.
    import ascb.filters.ConvolutionMatrixArrays;

    How can I fix it?

  16. Hi, you can make trough a php a selection by default of your city and to add all these codes, but it’s a little bit hard to do this.

  17. try to download that class, it might be from your Flash version.

  18. 1172: didnt find definition ascb.filters:ConvolutionMatrixArrays.
    import ascb.filters.ConvolutionMatrixArrays;

    what is the class name?

    thanks

  19. Thank you for your generous share.Something makes me confused.How can I get 5-days weather through woeid?I can only get 5- days weather through location ID and US zip-code.Thanks for your help.

  20. Google it for this class and add her after to your project.

  21. Hi Robert thanks for a great tutorial and application. when I run the application on the local network it runs perfectly. when I deploy the application on my host server I get static data. I replaced line 64 in widget.as3 to rssLoader.load(new URLRequest(“http://pucaru.us/proxy.php?cod=” + links[c][/c][1])); what else i need to do? Please help thank you so much
    Joey

  22. Hi, May I know how to receive the Xml in server? Because on my Pc it work fine but when I upload to server it would’t update the weather forecast. How to solve this problem?

  23. Hi thanks for this great tutorial, i have been having some issues, i have followed the tutorial as followed but when running the swf file it just sits there like no info is being loaded. When i hover over the combo it registers as being active as it changes colour but when i click on it nothing happens. Is there anything i am doing wrong? Even when i run the source folder with the flash file you provided the same thing happens.

  24. Hi i have a really stupid question to ask when you say “Also we need to create a new MovieClip – a container – for each Weather Day Forecast, where all weather info from that day will be displayed” do you mean like the comboBox in the first step or in this coding i have tried looking for answers on google but nothing seems to answer it, as you can tell i’m very new to actionscript and flash but very interested in trying to re-create this app.
    Thank you
    Sarah

  25. What response do you receive? Look in console, using firebug.

  26. do you have a screenshot?

  27. insert > new movieclip; put in on stage, and name it “container”. that’s it

  28. Great article. I have used this as part of my multimedia display I have in our lobby. I am running into a problem where if I leave the movie running the days of the week don’t update. For example, if I load the movie up on Monday the forecast shows M,T,W,Th,F. Then on Tuesday it still shows M,T,W,Th,F. If I manually reload the swf then it will display the correct forecast. Is there a way to have the forecast update automatically every 6 hours or so?

  29. You can put a setTimeout or a timer, to call on each interval that function. Also, when you make a request, let’s say to http://www.google.com, try to add a random number at the end http://www.google.com?i= + Math.random()*500

  30. Hello!
    How to redesign this, to get current weather data based on a local ip? Is it possible? I would appreciate for any answers 🙂
    Thanks in advance.

  31. This is what I get when i run the ‘movie’ for this and the drop down menu goes wakko. looks like its trying to exit stage right…

    1114: The public attribute can only be used inside a package. public class PicLoader extends Sprite

    Your comment is awaiting moderation.

    (accidentally posted this on the Tween install thread sorry)

  32. Hi, you can do this with PHP, then according to a list with cities you can do it.

  33. Did you put something else on stage and you don’t declared?