In this tutorial I’m presenting you a little weather widget, that could come handy for travel websites, or our personal page. If you make some changes on the code, you could show a different interface on your website, according to the weather on your city. Pretty cool stuff. We gonna connect weather.com XML data file with our flash widget. Weather.com offers us a free service to do that.
Requirements
Adobe Flash CS3
Source Files
Sign up to weather.com
The first thing we gonna do is login in our weather.com account:
https://registration.weather.com/ursa/profile
Or if we already don’t have an account we could register for free in here:
https://registration.weather.com/ursa/profile/new?
Registering for weather.com XML Data Feed
Once we are in our account, we gonna have a page like this one, where on the left we gonna have all the services we are subscribed and on the right, all the available services, the XML data feed is not there, it’s a little bit tricky.
So, we gonna signup to the XML data feed on this page https://registration.weather.com/ursa/xmloap/ Where we gonna tell to weather.com in which way we gonna use the data. If it’s for personal purpose, there’s no problem, but if it’s commercial purpose, you have to contact them, but everything is better explained on the mail you are going to receive.
So if our registration it’s ok, we gonna receive an email like this one (check on the spam inbox too, just in case).
The email explains us about the service, and there’s three important things to see in here:
- Where to download the weather.com SDK (http://download.weather.com/web/xml/sdk.zip)
- The weather.com XML Partner ID & License Key
- How to make a properly formatted XML request for the service
Contents of the wheater.com SDK
On this package you gonna find a PDF, with the license agreement and some useful information about how to make a request for the services, and two folder, one with the weather.com logos, and the other with the weather icons we gonna use on this tutorial as reference. There’s 3 type of icon sizes, for this tutorial we gonna use the 93×93 icons. The icons are not too fancy, so we could download a free cool set of weather icons from here:
http://liquidweather.net/icons.php#iconsets
This iconsets and backgrounds are from the Liquid Weather++ appi.
Setting up our api key
We could put all our data inside flash, like the code of our city, our partner id, and so on, but it’s gonna be a pain in the ass every time we want to change it. So, it’s much better if we load this type of data externally form an XML file. The XML structure should looks like this:
ARBA0009 XXXXXXXXX XXXXXXXXXX m
Loading our data in Flash
Now our hands on AS. We gonna do all the programming in just 2 frames, pretty easy. On the first frame, we load all the data to use it when we call the weather.com xml service. On the second frame, called “weather”, we load the weather.com xml and display the data. So, in our first frame:
- We define the variables we gonna use
- We call the xml that holds our data
- Then we pass the data from the xml to our variables
- And if everything it’s oki, we could go to the weather frame
stop();
//=================
//ini variables
//=================
//we define our variables to be loaded
var city:String;
var par_id:String;
var key:String;
var units:String;
//call the xml with our data
var data_xml_url:String = "data.xml";
var user_data:XML = new XML();
var data_url:URLRequest = new URLRequest(data_xml_url);
var dataLoader:URLLoader = new URLLoader(data_url);
dataLoader.addEventListener(Event.COMPLETE, dataLoaded);
function dataLoaded(e:Event):void
{
user_data = XML(dataLoader.data);
//pass the data from the XML to our variables
city = user_data.city.toString();
par_id = user_data.parid.toString();
key = user_data.key.toString();
units = user_data.units.toString();
//if everything it's oki, we could go to the weather frame
gotoAndStop("weather");
}
The weather icons
To display the different type of weather, we need a movieClip that holds all the possible weathers, there’s not too much, just 47. So, we create a new movieclip and call it “icons_mc”, and inside the icons_mc we import all the icons from the Weather.com SDK icons folder, or from the cool icons from liquidweather. There’s a lil bit differences between the Weather.com SDK icons and the liquidweather icons. On the weather.com SDK, the icons 25 and 44 are N/A, if you gonna use the liquidweather icons, just replace the 25 and 44 icons with the N/A png. Don’t forget to put a stop(); in the first frame of the icons_mc, so the MC start stopped.
Loading the weather.com xml service
Now we could load the data from weather.com. We allow our swf to make calls from the domain “xoap.weather.com”, we make the icons_mc MovieClip invisible, because we don’t know which icon use yet, and we compose the weather xml url with the variables from the frame 1.
stop();
//=================
//allow domains
//=================
Security.allowDomain("*", "xoap.weather.com");
//=================
//ini settings
//=================
icons_mc.visible = false;
//=================
//XML
//=================
var weather_xml_url:String = "http://xoap.weather.com/weather/local/"+city+"?cc=*&link=xoap&par="+par_id+"&key="+key+"&unit="+units;
The xml from weather.com have this structure with some interesting data. As you can see there’s a lot of useful data to load, but we gonna load just the necessary by now. Later you could play with it and make an advanced one.
en_USC km km/h mb mm Buenos Aires, Argentina 1:39 PM -34.61 -58.37 8:01 AM 5:52 PM -3 6/27/08 1:00 PM Local Time Buenos Aires Air Park, Argentina 13 13 Fog 20 1021.0 falling 11 N/A 360 N 82 2.5 2 Low 10 23 Waning Crescent
Displaying the data
To display the data, we have three different sprites:
- The icons MovieClip
- A dynamic text field to load the outside temp called “temp_txt”
- A dynamic text filed in the bottom to make a lil speech about how feels to be outside called “info_txt”
Our main interest is on the XML file on the icon number, so we could show the right icon. We load the xml using our well formatted “weather_xml_url”, and traverse the xml three to find what we are looking for.
In this step we:
- we load the temp on the temp_txt text field
- make the icons visible, load the icon number and tell the icons:mc to stopn on thet icon frame
- and finally we set the complementary text
var weather:XML = new XML();
var weather_url:URLRequest = new URLRequest(weather_xml_url);
var weatherLoader:URLLoader = new URLLoader(weather_url);
weatherLoader.addEventListener(Event.COMPLETE, weatherLoaded);
function weatherLoaded(e:Event):void
{
weather = XML(weatherLoader.data);
//we load the temp on the temp_txt text field
temp_txt.text = weather.cc.tmp;
//we make the icons visible, load the icon number and tell the icons:mc to stopn on thet icon frame
icons_mc.visible = true;
var weather_icon:int = Number(weather.cc.icon.toString())+1;
icons_mc.gotoAndStop(weather_icon);
//and finally we set the complementary text
var ud:String = weather.head.ud;
var us:String = weather.head.us;
var city:String = weather.loc.dnam;
var time:String = weather.loc.tm;
var temp:String = weather.cc.tmp;
var flik:String = weather.cc.flik;
var term:String;
if (temp == flik)
{
term = "and it feels like "+flik+" degrees,";
} else {
term = "but it feels like "+flik+" degrees,";
}
var wind_v:String = weather.cc.wind.s;
var wind_gust:String = weather.cc.wind.gust;
var wind_d:String = weather.cc.wind.d;
var wind_t:String = weather.cc.wind.t;
var hmid:String = weather.cc.hmid;
var vis:String = weather.cc.vis;
info_txt.text = "It's "+time+" here in "+city+". It's "+temp+" degrees out there "+term+" the wind blows from the "+wind_t+" at "+wind_v+" "+us+", the humidity is "+hmid+"% and the visibility is "+vis+" "+ud+".";
}
Now we could export our movie and if it’s cold outside, it’s good to be inside.
Final thoughts
We gonna need to know the international code of our city, so we could go to http://www.weather.com/common/welcomepage/world.html Search for our city, and find the code on our address bar. I know it’s a lil bit tricky but it works fine.
Hope you enjoyed this lil tutorial as much as I enjoyed writing for you.
July 28th, 2008 at 2:22 pm
Cool, nice tutorial
Keep them coming
August 5th, 2008 at 10:14 pm
great tutorial! i have some questions though. are we only limited to the some of the xml data? i’d like to add the day and date information to the widget, so i’m trying to pull out the attributes “t” and “dt” in the day “0″ child element under dayf into a text box, but it’s not showing up. i’m probably doing it wrong as i’m very new to AS3.0 & XML. is there any way you could help me? thanks!
August 17th, 2008 at 8:24 pm
I get an ERROR:
Error #2044: Unhandled securityError:. text=Error #2048: Security sandbox violation: http://www.worldkit.com/weather/weather.swf cannot load data from http://xoap.weather.com/weather/local/35216?cc=*&link=xoap&prod=xoap&par=1072119334&key=4d4b9329018d4592&unit=s.
at weather_fla::MainTimeline/frame2()
August 19th, 2008 at 5:48 pm
Anyway to change the language or locale?
August 24th, 2008 at 2:51 am
@Fusionice: I’m not sure, but check the PDF on the SDK zip file, sure you could finde the call to change the lang and locale.
@Abel: I’m at linux right now, so let me try to figure out why it’s the sandbox violation.
August 24th, 2008 at 11:20 pm
John, ¿have you tried to replace the line:
var time:String = weather.loc.tm;
to this one:
var time:String = weather.cc.lsup;
?
October 5th, 2008 at 8:56 pm
I get the exact same sandbox violation error as Abel.
Haven’t found a fix yet despite creating a crossdomain.xml file and placing it on the server.
Have you manage to sort anything out ?
/Johnny
October 14th, 2008 at 7:19 pm
i have the same problem it will not connect to the weather page, i change the security permitions in the adobe page and it works but only wen you test it in you computer but when is in the server it dosent work, PLEASE HELP i need to find why.
thanks
October 20th, 2008 at 8:58 pm
Is anyone else having issues when publishing to a server the flash movie no longer gets the weather feed but on my local machine it works just find. Is there a fix for this? Thanks.
October 28th, 2008 at 8:28 pm
John, I don’t know if you figured the multiple day forecast out but here is an example I made shows city, cc, days 1,2 and 3 temperature, Icon and day of the week.
Hope it helps..
Tim
function weatherLoaded(e:Event):void
{
weather = XML(weatherLoader.data);
temp_txt.text = weather.cc.tmp;
day2_txt.text = weather.dayf.day[1].hi;
day3_txt.text = weather.dayf.day[2].hi;
day4_txt.text = weather.dayf.day[3].hi;
text2_txt.text = weather.dayf.day[1].attribute(“t”);
text3_txt.text = weather.dayf.day[2].attribute(“t”);
text4_txt.text = weather.dayf.day[3].attribute(“t”);
icons_mc.visible = true;
var weather_icon:int = Number(weather.cc.icon.toString())+1;
var weather2_icon:int = Number(weather.dayf.day[1].part[0].icon.toString())+1;
var weather3_icon:int = Number(weather.dayf.day[2].part[0].icon.toString())+1;
var weather4_icon:int = Number(weather.dayf.day[3].part[0].icon.toString())+1;
icons_mc.gotoAndStop(weather_icon);
day2_mc.gotoAndStop(weather2_icon);
day3_mc.gotoAndStop(weather3_icon);
day4_mc.gotoAndStop(weather4_icon);
var city:String = weather.loc.dnam;
var time:String = weather.loc.tm;
var temp:String = weather.cc.tmp;
var day2:String = weather.dayf.day[1].hi;
var day3:String = weather.dayf.day[2].hi;
var day4:String = weather.dayf.day[3].hi;
var text2:String = weather.dayf.day[1].attribute(“t”);
var text3:String = weather.dayf.day[2].attribute(“t”);
var text4:String = weather.dayf.day[3].attribute(“t”);
info_txt.text = city;
day2_txt.text = day2;
day3_txt.text = day3;
day4_txt.text = day4;
text2_txt.text = text2;
text3_txt.text = text3;
text4_txt.text = text4;
}
October 29th, 2008 at 1:39 pm
I’m also having the same problem Abel, Jon Hnefill…… The thing works fine on desktop when the security settings are chnaged on the adobe page… but not on websitee!!! PLzzzz help!!!
November 7th, 2008 at 7:01 am
Great Tutorial.. but i cant get this working either. I’m using this service to get the location code.. for example http://xoap.weather.com/search/search?where=Dallas
works great in flash, but i just can get past the sandbox issue.. tried all the recommendations and I’m stuck at this point.. tried it with my key and partner id as well.
November 19th, 2008 at 2:23 am
preview in flash does work
but once it is published i loose all the fancy weather stuff!
November 26th, 2008 at 1:19 pm
Tim, I’m trying to use multiple days forecast… but I don’t know how… I read the entire XML and I only get one day results… I have to load another XML Url? Thanks a lot!
December 4th, 2008 at 8:22 pm
To get this working from a web server, you can not do this by simply calling the xml file through a URLRequest. You need to use a proxy script that is placed locally on your webserver. I used proxy.php which looks like this:
then, in flash assign the URLRequest to proxy.php instead of weather.com’s xml.
Also, dont waste your time with policy file since weather.com has to allow you, which it doesnt unless youre one of ten sites.
December 4th, 2008 at 8:23 pm
you can google proxy.php
January 2nd, 2009 at 5:59 pm
Thanks a lot dear jhvh. I tried the proxy.php and it worked. I LOVE YOU. *KISSSS!*
January 11th, 2009 at 9:35 pm
jhvh1134 …please tell at which exact line and frame i have to make changes. plssss i don’t understand at all because i don’t see your code you’ve post on December 4th, 2008 at 8:22 pm
January 15th, 2009 at 6:49 pm
Hi all,
The solution is easy for the sanbox security.
You juszt have to add a .php file in your flash directory called
secu_flash.php. It ll contains :
Next, we go back into the flash in the second frame :
and we put this little code.
Replace the http://www.moroccom.com … by yours
//=================
//XML
//=================
var moroccom_xml_url:String = “http://www.moroccom.com/argazelabs/weather/v1/”;
var xoap_xml_url:String = “http://xoap.weather.com/weather/local/”+city+”?cc=*&link=xoap&par=”+par_id+”&key=”+key+”&unit=”+units;
var weather_xml_url:String = moroccom_xml_url+”secu_flash.php?maVariable=”+xoap_xml_url;
//var weather_xml_url:String = “http://xoap.weather.com/weather/local/”+city+”?cc=*&link=xoap&par=”+par_id+”&key=”+key+”&unit=”+units;
//trace(weather_xml_url);
var weather:XML = new XML();
var weather_url:URLRequest = new URLRequest(weather_xml_url);
var weatherLoader:URLLoader = new URLLoader(weather_url);
weatherLoader.addEventListener(Event.COMPLETE, weatherLoaded);
I m sorry for my so bad english, french people
Hope i help.
Happy new year
F.
January 21st, 2009 at 5:05 pm
Hi again,
I need help for receiving the information in metric unit ???
The url i request :
http://www.moroccom.com/argazelabs/weather/v3/secu_flash.php?maVariable=http://xoap.weather.com/weather/local/MOXX0008?cc=*&link=xoap&par=1092309493&key=64ae8626d1c6b01b&units=C
THx
F.
March 22nd, 2009 at 11:56 am
@F.
You need to create a var which converts miles to meters. Or, in the texfield which shows the miles, you convert it directly to meters. Simple math 1.8 km = 1 mile
April 16th, 2009 at 9:21 pm
Hi all, Moroccom, could you please paste the code for the secu_flash.php file, your last one didn´t appear, so, pleaseeeee!!! I´ve been struggling a lot for the last few weeks. Help!!!
Moroccom Says:
January 15th, 2009 at 6:49 pm
Hi all,
The solution is easy for the sanbox security.
You juszt have to add a .php file in your flash directory called
secu_flash.php. It ll contains :
Next, we go back into the flash in the second frame :
and we put this little code.
Replace the http://www.moroccom.com … by yours
//=================
//XML
//=================
var moroccom_xml_url:String = “http://www.moroccom.com/argazelabs/weather/v1/”;
var xoap_xml_url:String = “http://xoap.weather.com/weather/local/”+city+”?cc=*&link=xoap&par=”+par_id+”&key=”+key+”&unit=”+units;
var weather_xml_url:String = moroccom_xml_url+”secu_flash.php?maVariable=”+xoap_xml_url;
//var weather_xml_url:String = “http://xoap.weather.com/weather/local/”+city+”?cc=*&link=xoap&par=”+par_id+”&key=”+key+”&unit=”+units;
//trace(weather_xml_url);
var weather:XML = new XML();
var weather_url:URLRequest = new URLRequest(weather_xml_url);
var weatherLoader:URLLoader = new URLLoader(weather_url);
weatherLoader.addEventListener(Event.COMPLETE, weatherLoaded);
I m sorry for my so bad english, french people
Hope i help.
Happy new year
F.
April 30th, 2009 at 3:55 am
this is what U need Samantha
May 12th, 2009 at 3:55 pm
Great tutorial, exactly what i needed. Thanks
May 21st, 2009 at 1:17 pm
Do You know hot to change °F Fahrenheita to °C degrees??
I’ve cheked sdk documantationa but I’haven’t found any answer.
June 2nd, 2009 at 8:37 pm
@Jacek
As for the distance, you need to create a var that convert ºF to ºC.
ºC=(ºF-32)/1,8 – This is the formula to convert ºF to ºC for more formulas check wikipedia.
In this case, i think it should be something like:
var temp:String = weather.cc.tmp;
var celc:String = (temp-32)/1,8;
Let me know if it worked.
July 8th, 2009 at 9:53 pm
its’not working
August 8th, 2009 at 7:57 pm
for anyone like me who couldn’t get weather.com to work. (i tried like 4 different php methods, eh.. yea). you can easily use google weather and the same concept here.
in fact i even went ahead and matched all the google icons to the ones in this tutorial, so thought i’d share that. if anyone’s interested in the php script (using curl) here it is http://www.abdulqabiz.com/blog/archives/2007/05/31/php-proxy-script-for-cross-domain-requests/Below are the things to change in order to use the icon set in this (excellent!) tutorial. You can fetch the other variables from xml easily. hope it helps someone out there, i spent way too much time fooling with weather.com. not worth it, trust me.
var my_xml_url:String = “http://www.yoursite.com/”;
var xoap_xml_url:String = “http://www.google.com/ig/api?weather=94107″;
var weather_xml_url:String = my_xml_url+”load_xml.php?url=”+xoap_xml_url;
var weather:XML = new XML();
var weather_url:URLRequest = new URLRequest(weather_xml_url);
var weatherLoader:URLLoader = new URLLoader(weather_url);
weatherLoader.addEventListener(Event.COMPLETE, weatherLoaded);
function weatherLoaded(e:Event):void
{
weather = XML(weatherLoader.data);
trace(weather);
var weather_num:int = new int();
var weather_icon:String = weather.weather.current_conditions.icon.@data;
if(weather_icon == “/ig/images/weather/chance_of_rain.gif”){weather_num = 12;}
else if(weather_icon == “/ig/images/weather/sunny.gif”){weather_num = 33;}
else if(weather_icon == “/ig/images/weather/mostly_sunny.gif”){weather_num = 35;}
else if(weather_icon == “/ig/images/weather/partly_cloudy.gif”){weather_num = 31;}
else if(weather_icon == “/ig/images/weather/mostly_cloudy.gif”){weather_num = 29;}
else if(weather_icon == “/ig/images/weather/chance_of_storm.gif”){weather_num = 6;}
else if(weather_icon == “/ig/images/weather/rain.gif”){weather_num = 13;}
else if(weather_icon == “/ig/images/weather/chance_of_snow.gif”){weather_num = 9;}
else if(weather_icon == “/ig/images/weather/cloudy.gif”){weather_num = 27;}
else if(weather_icon == “/ig/images/weather/mist.gif”){weather_num = 3;}
else if(weather_icon == “/ig/images/weather/storm.gif”){weather_num = 5;}
else if(weather_icon == “/ig/images/weather/thunderstorm.gif”){weather_num = 1;}
else if(weather_icon == “/ig/images/weather/chance_of_tstorm.gif”){weather_num = 38;}
else if(weather_icon == “/ig/images/weather/sleet.gif”){weather_num = 6;}
else if(weather_icon == “/ig/images/weather/snow.gif”){weather_num = 16;}
else if(weather_icon == “/ig/images/weather/icy.gif”){weather_num = 8;}
else if(weather_icon == “/ig/images/weather/dust.gif”){weather_num = 20;}
else if(weather_icon == “/ig/images/weather/fog.gif”){weather_num = 21;}
else if(weather_icon == “/ig/images/weather/haze.gif”){weather_num = 22;}
else if(weather_icon == “/ig/images/weather/smoke.gif”){weather_num = 23;}
else if(weather_icon == “/ig/images/weather/flurries.gif”){weather_num = 7;}
else{weather_num = 0;
var weaLoader2:Loader = new Loader();
var weaReq2:URLRequest = new URLRequest(“http://www.google.com” +weather_icon);
weaLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, showWea);
weaLoader2.load(weaReq2);
function showWea(event:Event):void
{
weaLoader2.x = 18;
weaLoader2.y = 45;
addChild(weaLoader2);
}
}
//trace(weather_num);
icons_mc.gotoAndStop(weather_num);
icons_mc.visible = true;
//add the rest of your parsed xml data to dynamic text fields in your mc here
// ie temp_txt.text = weather.weather.current_conditions.temp_f.@data;
}
October 9th, 2009 at 7:14 pm
Me corre en flash!!!! y no en el servidor!!!!
HELP!!!!
October 9th, 2009 at 7:18 pm
help please not work on the server!!!!
October 27th, 2009 at 12:02 pm
Display weather for any location in the world.
Allow users to search and change locations, view current conditions, 5 day forecast for both night and day.
Caches weather data locally. Weather data comes from the Weather.com XML feed.
October 30th, 2009 at 8:18 am
it works fine when you preview it on flash(ctrl+ENTER) but when i tried to upload and open in Mozilla Firefox and IE i cant see the weather.swf inside the page…
any ideas?
December 4th, 2009 at 11:59 am
i cant get this work on the server but work on my system
can anyone share a work proxy.php ?
thank you
December 18th, 2009 at 1:18 pm
Hi,
Example works fine. when i try with flash but shows error when i tried to run it independent on locale system.
Error:- Asking for flash player security it shows –
SecurityError: Error #2028.
How to avoid it to run independently to show weather.
Please help…..
March 9th, 2010 at 4:58 pm
hello, can anyone help me use the same script to preview the next 4 days weather also ?? thanks !
April 29th, 2010 at 10:38 pm
Hi,
great script, problem is if I load it inside an other flash movie the first icon in set flickers and shows no temp. When I preview the weather.fla on its own it works fine. It seems it’s not staying in place on the second frame and just jumps from 1 to 2 and back again… Any ideas?
April 30th, 2010 at 8:29 am
As I’m testing this movie I see that there’s a problem when loading your AS3 coded weather swf inside an AS2 file, while if it’s loaded inside another AS3 it works fine.
I have all files attached at the link below, any ideas?
http://www.sendspace.com/file/tiflm7
May 24th, 2010 at 10:34 pm
hi, why would you put up this tutorial that obviously doesn’t work due to Security issues and not only NOT address the security issues is a WORKING manner but also NOT answer all your readers’ questions about the Security problem?
Tutorial Fail.
August 23rd, 2010 at 3:00 pm
No tiene soporte este tutorial, no informa sobre la creación de proxy ni los problemas de seguridad ni crossdomain, asi que solo funciona localmente, en conclusión es un mal tutorial.
No funciona!