Making a Flashy Weather Widget
Posted by Brett Tackaberry on December 7th, 2005
We’re in the midst of building a website for a local golf course and the client asked if there was any way to display the current weather conditions and a short-range forecast on the homepage. Being a poor excuse for a golfer myself, I quickly saw the potential to build something a lot more useful to visitors than those tacky sponsored GIFs that tell you what the weather is like right now (no forecast unfortunately).
Here’s a quick tutorial that shows how to use a service like Yahoo! weather that offers RSS feeds to build a fancy little Flash widget to display current conditions and an upcoming forecast — and obviously style it so it fits with the look and feel of your own design.
In the end, you’ll end up with something like this. The default view loads the current conditions and the forecast can be viewed using two arrow buttons on the bottom. Try it out. First, let’s find the feed. Since the course is in Ottawa, we’ll browse to the city forecast page and grab the URL for the feed (see the RSS icon in the top right):http://xml.weather.yahoo.com/forecastrss?p=CAXX0343&u=c
If you click on that link you’ll probably see the raw data we’ll be working with. Beautiful, isn’t it?
Without getting into too much detail (that’s what the source files are for), we’ll scan through the XML using some FOR and IF loops to pull out the exact data we want (temperature, date, conditions and the “code” that we’ll use to show the proper icon) and then create a series of movie clips — one for the current conditions and one for each of the 3 days in the forecast.
Now, the “code” for the icon tells you what little picture describes what the current weather is like. Yahoo! uses an integer between 1 and 47 (see the list here - scroll down a bit) to identify what the conditions are. You just need to come up with some icons.
Admittedly, this isn’t exactly the most exciting use of Flash and XML under the sun, but hopefully some the basic principle used here will give you the fundamental knowledge to integrate Flash with other web services like Flickr and del.icio.us. Just think of the possibilities!
UPDATE: With the change in Flash player’s security (at least that’s what I guess it is), it’s not possible to retrieve the RSS data directly from Yahoo!’s site. The workaround we came up with that I mentioned in my comment below is to use a local PHP file that basically grabs the RSS feed and prints the entire thing so as to trick the Flash player into thinking it’s on the same server. Here’s a ZIP file that contains our PHP Script.
March 14th, 2006 » 3:36 pm
This weather feed rocks - or it used to, but now it doesn’t work. Any ideas?
March 30th, 2006 » 9:33 am
For some strange reason it’s not as simple to grab the Yahoo! feed as it used to be. Works when we export the SWF on our machines, but doesn’t work when it’s on the net. Could be something related to security in the Flash player. We got around it by building a simple php file that just outputted the contents of the feed - basically tricked the FLA into using a “local” file to import the data. Drop me an email if you’d like a copy of the php file.
April 21st, 2006 » 2:13 am
As Steve’s opinion, i also get the problem when i would like to show flash widget in the browser such IE, i doesn’t work. Anyway, i think this tutorial is rather useful. As i am not sophisticated in PHP,possible, it is very kind of you (Steve), if you contribute your source file for later education. Nevertheless, anybody can fix this flash weather forecast widget to be compatible when it is on the in the Internet. Thank you very much.
April 21st, 2006 » 2:15 am
My Email is infonatzu@hotmail.com
April 21st, 2006 » 2:35 am
As Steve’s opinion, i also get the problem when i would like to show flash widget in the browser such IE, i doesn’t work. Anyway, i think this tutorial is rather useful. As i am not sophisticated in PHP,possible, it is very kind of you (Steve), if you contribute your source file for later education. Nevertheless, anybody can fix this flash weather forecast widget to be compatible when it is on the in the Internet. Thank you very much.
My Email is infonatzu@hotmail.com
May 4th, 2006 » 3:42 pm
I would also like a copy of the PHP/XML trickery…
Also… do you have any idea how you can build the widget to allow the user to TYPE IN their zip code and then see their results displayed?
Thanks for a great little tool…..
Jeremy
May 5th, 2006 » 5:27 am
I have a problem making this widget load into anotehr swf file. It seems that the path to the library of the weather file doesn’t work correctly when it’s placed in anotehr swf. Anyone done this and managed to get it right?
Any comment and suggestions would be appreciated.
Thanks
May 5th, 2006 » 9:39 am
Please email me at the PHP/XML converter at:
jeremy@aheadofmytime.com
Thanks
May 25th, 2006 » 9:26 am
Hey
I downloaded your files and I’m having some trouble opening up the flash document. Says its in an “unexpected format.” I was hoping to check out the inner workings since I’ve never created one before and would like to in the future.
Comments/Suggestions are appreciated
Thanks
May 31st, 2006 » 9:17 pm
Hey there,
I tried putting the forecastrss.php file in place of the yahoo feed within the flash source file and it will not work.
Is there anything else I have to modify?
Thanks.
June 12th, 2006 » 9:53 am
wow…
this source file is so convoluted.
this example would be much easier to digest if:
1. you used on Stage text feilds so users that are DESIGNERS could see what is going on.
2. You don’t include external AS… the app is so lite there is no need for this show-offy developer style… it only adds to one more thing that has to be examined in this small example.
3. yes it is neat. BUT I’m not really able to figure out what is going on here. While it does make YOU look cool… it doesn’t help me learn.
June 27th, 2006 » 11:27 am
Can you send me the PHP file — Thanks. I like the setup you’ve got there.
August 1st, 2006 » 2:59 pm
How can we make the weather widget update automatically??
i.e go and grab the new information every 15 min.
If a user decided to stay on this page for 2 hours, the real weather/temperature will change, but the browser will still show the original informaiton.
Your feedback would be greatly appriciated.
Thanks,
Ifeta
October 2nd, 2006 » 10:35 am
Hmm, good day guys.
I have a strange bug with the widget that I placed at http://www.houtbayonline.com in that it pulls the weather fine the first time it loads. I then go to another section of the site and when the weather reloads, it’s loading old data. I came here to check your widget and behold, it does the same thing. In otehr words, it’s Monday today, and the first time it loads, the current conditions, plus Monday’s and Tuesday’s forecast is shown. When you reload, the current conditions plus sunday’s and Monday’s conditions are shown.
Weird huh?
Any ideas why this might be the case? Check yours out and you’ll see what I mean. Has Yahoo! changed anything on their side lately?
Thaanks
Nathan
November 9th, 2006 » 7:53 pm
Thanks for the script…just what I was looking for.
I had to change this part of the part to get it it work:
$str.=fgets($fp, 128);
To this: $str = $str.fgets($fp,128);
Using PHP Version 5.1.5
November 26th, 2006 » 2:35 pm
The PHP script also needs this line:
$url=”xml.weather.yahoo.com/”;
Without the “/”
$url=”xml.weather.yahoo.com”;
November 30th, 2006 » 12:01 am
I’m also experiencing the problem with the SWF working offline, but not online.
I downloaded the PHP file, but I’m not too sure what to do now. What do I need to change?
December 15th, 2006 » 11:13 am
I have the component, and its working fine…. but the degrees are incorrect. Not the number, but the temp type. Celcius, is reveresed with feirenheit.
Any Idea what I have done wrong?
Thanks for this component thus far!!!
December 18th, 2006 » 12:17 pm
Ok, so now I have changed the temp number…. so the temp is correct… but how can I get the Large Celcius number to swap with the small Ferenheit number. Our primary temp is F and I would love to get it to show as the primary temp. Everything else works great.!!!
HELP!
PLEASE!!
December 20th, 2006 » 10:22 am
Ok, nevermind… I have it worked out now… Thanks MacBros!!!
December 22nd, 2006 » 11:45 am
Ok peeps. here is an update that is going to make you happy. I have been trying to get help on this for days now… with no result. But finally i have this bad boy working, and working on my live site. So herego’s:
the actionscript on the main timeline.. frame 1, needs to be changed. Change the “feedURL”, and address it to wherever your placing the php file. This needs to be the full address. So if your site was billybobs.com, it would look like this:
feedURL = “http://www.billybobs.com/forcastrss.php”
Then make sure the php file is there. Also, in the php file itself, on the very first line, after the questionmark add “php”. It should look like this:
December 22nd, 2006 » 11:49 am
(ammend last post)
December 22nd, 2006 » 11:50 am
hahaha… so this post’s that I am trying to make are messing up because I am adding php code in them…
ha!
Well if your trying to use this… and cant get it to work… just post here, or email me, and I will help you out with it.
Merry Christmas!
February 11th, 2007 » 12:09 am
This is pretty neat! I am having some trouble getting it to work though, I used the php file but it is still not working. I have been trying to do this forever, so I would be SOOO happy if someone could help me out here. My email is drummerboy2@cox.net.
Thanks in advance!!
March 18th, 2007 » 3:19 am
Can you send me the PHP file — Thanks.
April 2nd, 2007 » 11:32 am
Great little swf thanks for making it. I was having trouble pulling the file into my site and with a bit of digging I found this page on the adobe site. The proxy works great and makes it all work nicely. Plus they have lots of different files for java, asp and php.
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16520
April 27th, 2007 » 6:00 am
I like many others it seems am having problems getting this to work. I have made all the amendments outlined on this page. If anyone is still watching this thread any help will be appreciated. My email is brucewilson23@hotmail.com
June 20th, 2007 » 10:00 pm
Looks great to me but…
I seem to have the same problem as everyone else. It works fine ofline, but I can’t seem to get it to work online.
Please help?
September 8th, 2007 » 6:23 am
it doesn’t work?
Can you send me the PHP file — Thanks.
My email is info@bohema.org
September 24th, 2007 » 8:44 am
Hi all!
I can get the information to display, but i am having the same problem Corey was… The degrees and feirenheit are the wrong way round… I dont think london has ever been 55C since the great fire lol!
Can anyone point me in the right direction on how I can fix this please? my email is andyvickery@easyray.co.uk
cheers in advance
October 11th, 2007 » 6:00 pm
how do you get the weather to update automatically without having to press a button to do so?
My email is: lu_pa@hotmail.com
Thanks!
November 1st, 2007 » 9:06 am
Thanx man, u saved my life!
November 29th, 2007 » 4:25 pm
Hey
This thing is what I’ve been looking for…
It works for more needs but I’m looking for just a little more…
I’m noticing the text resizes when I adjust, can I stop this?
November 29th, 2007 » 4:25 pm
(my needs)
December 9th, 2007 » 12:35 am
One problem, it doesnt display in firefox?
http://76design.com/shiftcontrol/wp-content/uploads/2006/03/weather.html
December 9th, 2007 » 1:13 am
Sorry yes it does display in firefox, this is a great script!
December 9th, 2007 » 1:48 am
I am having the same problenm as everyone else, Can I have the php file too, please, it’s not displaying on the internet.
December 9th, 2007 » 2:17 am
Corey is this what we are meant to do?
contentDP.load(feedURL = “www.mywebsite.com/forcastrss.php”);
December 28th, 2007 » 6:32 pm
I spent a lot of time trying to figure out why the feed didn’t work went it went live. The answer is that the link needs to be updated to:
http://weather.yahooapis.com/forecastrss
Yahoo allows anyone to use their data from this entry point.
January 14th, 2008 » 6:33 pm
Hi,
If anyone is still following this thread, i’d appreciate a few pointers. I’ve followed the posting throughout and made the noted changes to the FLA, PHP and AS files.
Unfortunately, when this widget is live, it doesn’t work, while it loads perfectly offline.
Examples of working source files, or specific pointers would be much appreciated.
Thanks
January 16th, 2008 » 9:23 am
This example is great. I’m using it locally and it seems to work fine. The problem I’m having is that I added the code to the stage of another flash file and now I’m having trouble moving the movie around. Can’t figure out what is going on in the code or know enough actionscript to move it. Any help would be appreciated. Thnx.
January 30th, 2008 » 12:12 pm
I really like the weather widget, it works great. I was just curious is there a way to add a ‘Feels Like’ temperature. Because where i live it may say it is -30 or so but with the wind its more like -45. If this is do able i would be really greatful for any help. Thanks
February 6th, 2008 » 8:54 pm
i’m try to use this weather ideal in flash, but i’m also get the same trouble as everyone else its not loading in the browser. please help out….
thanks
February 20th, 2008 » 1:37 pm
Hi Guys
I’ve been playing with your script and it works when it’s on it’s own. The moment I pull it into a blank MC in another movie, it no longer works properly and will only allow me to see Sundays weather report. Eevery other day does not seem to exsist. So I can flick through, see nothing then I land on Sunday and I have weather. Any idea on how to go about fixing this?
February 24th, 2008 » 6:42 pm
Script works offline…but its not working online… please help
February 25th, 2008 » 6:55 am
Thanks very much for the script!
Working Perfect, No complaints.
I want to also add a drop down menu to the script to pull different weather results by country.
I have sent an email to you,
kindly awaiting reply
Dan
February 25th, 2008 » 7:13 am
How can I make it an desktop widget?
February 26th, 2008 » 3:29 pm
Is this widget server sensitive, cause I tried it on 2 different hosting, works on one …and on the other one, even if I upload the same files doesn’t work…
February 27th, 2008 » 12:14 pm
I don’t have php on my server and was wondering if anyone happens to know how to create an external asp file that would work the same as the external php?
February 27th, 2008 » 5:31 pm
Working great! I’d like to remove the loading box and loading text at the beginning. Any ideas? thx
March 2nd, 2008 » 11:44 am
Happen the same to me. With my server I can not work offline.
I use the PHP file and have to use these add a line:
print “&str=”;
print $str;
when reading from flash I get the whole text but not in XML format. So then is hard work to extract the forecast…
Any idea then?
Then is hard work to extract the information.
April 14th, 2008 » 7:15 am
hello, same problem, wont work online, please can i have the php and any other files i need to get this working. Thanks. my email is: info@unit28design.com
May 23rd, 2008 » 7:06 pm
Hello…I found your site via Yahoo! when i was searching for tyler cooper, and this post regarding Making a Flashy Weather Widget from shift+control really sounds very interesting to me.. Thanks
June 6th, 2008 » 10:02 am
I’m new to flash, like two weeks ago. I’ve created a flash website that I’d like to add weather to, however I’m facing difficulties importing the .swf file into my main .fla movie file in flash cs3.
So far I’ve imported the weather.swf into my library and then dragged it into an empty symbol on my stage. When I run my movie I only see a couple frames of the weather.swf. Not looking for an in dept tutorial, but a little guidance would go a long way. Any help appreciated.
Thanks,
Eric
djvanguard@gmail.com
June 7th, 2008 » 3:53 pm
Anyone know how to integrate the widget into a flash website?
June 26th, 2008 » 6:51 pm
hello, same problem, wont work online, please can i have the php and any other files i need to get this working. Thanks. my email is: robinpowell24@hotmail.com
July 15th, 2008 » 12:55 pm
im lookin for a wigit, i need it to have the weather for every section of the us, so u can typ in tour zip code and state, and it needs to be costimizable i need to change the animations every once and a wile and it needs to be simple enough i can chane it easily, does any body know how to do this?
July 28th, 2008 » 8:53 am
Can I please have the php file as well. This widget is fine offline but I still can’t get it to work online origonal_homer@hotmail.com thanks.
August 3rd, 2008 » 9:35 pm
hello,
Thanks a lot for the tutorial.
I was trying feedURL = “http://xml.weather.yahoo.com/forecastrss?p=UKXX0052&u=c”;
it worked at localhost but when I upload to the server, it shows
“You don’t have permission to access /weather/weather.swf on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”
Any help would be much appreciated! Thanks…
August 16th, 2008 » 2:50 am
you are a freaking legend … thank you sooooo sooo much for providing source files and php addon script … bloody legend! :)
September 8th, 2008 » 4:01 pm
this parameter reads coolant temp it comes across in celcius how would i add a formula to read ferinhiet
65557
1
3500B MARINE
COOLANT TEMPERATURE
0
0
DEG C