Flash XML Weather Feed
Sunday, February 22nd, 2009Integrating Flash with XML is increasingly becoming more and more common and useful! Working with XML has also become a whole lot easier with Actionscript 3.0. In this example we will create a Flash file that will display the current weather. We will get our weather information from Boy Genius. The weather feeds are available here. For this example we are going to use the weather from Toronto Ontario Canada.
Here is the XML we will be working with:
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="/weather.xsl" alternate="no" ?>
<city>
<name>Toronto</name>
<state>Ontario</state>
<temperatures>
<fahrenheit>27</fahrenheit>
<celsius>-2</celsius>
</temperatures>
<conditions>FLURRIES</conditions>
<dewpoint>18</dewpoint>
<relative_humidity>69</relative_humidity>
<wind>W28G33</wind>
<wind_english>West 28 MPH Gusts Reaching 33 MPH </wind_english>
<barometric_pressure>29.88R</barometric_pressure>
<notes></notes>
<wind_chill_fahrenheit>11</wind_chill_fahrenheit>
<heat_index_fahrenheit>Not Applicable</heat_index_fahrenheit>
<image>http://www.srh.noaa.gov/weather/images/fcicons/na.gif</image>
<coordinates>
<latitude>N/A</latitude>
<longitude>N/A</longitude>
</coordinates>
<last_updated>February 22, 2009 18:19:18 GMT</last_updated>
<last_updated_seconds_gmt>1235344758</last_updated_seconds_gmt>
<info_courtesy_of>The National Weather Service</info_courtesy_of>
<source_url>http://weather.noaa.gov/pub/data/raw/as/asus43.kfgf.rwr.fgf.txt</source_url>
<feed_problems_contact>xml@boygenius.com</feed_problems_contact>
<xml_generation_script_author>Todd Finney, Boy Genius Incorporated</xml_generation_script_author>
</city>
Writing the Actionscript to import this XML and display it on the stage is a common assignment I give to my students. In this example we are just going to import the city, state and the image.
First lest define a Text Format Object to use with the weather city and state.
var newFormat:TextFormat = new TextFormat();
newFormat.size = 20;
newFormat.color = 0x666666;
newFormat.font = "Arial";
Next we need to define a URL Loader and an XML Object. We will load the XML using the URL Loader and then on the Load Complete Event we will put the content into an XML Object.
When the Loader Complete Event is triggered all the information about that event will go into the variable evt defined in the function definition. Inside that Event variable is the target of the event and in this case the data loaded. We need to put that data, which is just text at this point, and put it in an XML Object. This was Flash can do all sorts of XML type things.
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("http://weather.boygenius.com/feeds/ontario-toronto.xml"));
function LoadXML(evt:Event):void {
xmlData=new XML(evt.target.data);
}
Inside the loadXML function we need to add code that will create a Text Field, use our Text Format Object defined earlier and display the city and state from the XML document. Add the following code to the loadXML function.
To get the city and state our of our XML Object we simply refer to the XML Object and then add a dot and the item we are looking for. So in this example we want xmlData.name and xmlData.state. This gets a little more complicated when there are multiple copies of items in an XML document. For example pulling information about one image out of an XML document that includes information about many images.
var nameTextField:TextField = new TextField();
nameTextField.text = String( xmlData.name ) + ", " + String( xmlData.state );
nameTextField.selectable = false;
nameTextField.width = 200;
nameTextField.x = 10;
nameTextField.y = 10;
nameTextField.setTextFormat( newFormat );
addChild(nameTextField);
And lastly we need to add more code to the loadXML function to load the weather image and add it to the stage.
var imageLoader:Loader = new Loader();
var imageRequest:URLRequest = new URLRequest(xmlData.image);
imageLoader.load(imageRequest);
imageLoader.x = 10;
imageLoader.y = 100;
addChild(imageLoader);
The current weather in Toronto Ontario Canada is:
Download the Flash Weather XML File
For anyone who has had some experience with Flash and XML you will quickly learn about a cross-domain policy. For some reason Flash has added a security feature to Flash which prevents an SWF from loading content from another domain at run-time. There is lots of information about this on the Adobe web site. In theory this isn’t a bad idea; trying to prevent people from using other people’s content and their bandwidth is kind of noble. Except this security feature is so easy to get around they may as well have not built it in.
Our Weather example above will work fine when previewing the file in Flash. As soon as you put the file online Flash will refuse to load the XML from the Boy Genius site because they do not have a cross-domain policy. All we have to do is create a PHP file to grab the weather XML from Boy Genius and regurgitate it. Here is a three line PHP file that will regurgitate what ever XML file you tell it to.
<?php
header ("content-type: text/xml");
$file = file( $_GET['url'] );
echo implode( $file, chr(13) );
?>
Lets say for example we want to load the Toronto weather from the Boy Genius web site. All we need to do is call the above file, lets say it is called xmlCaller.php, and pass it a URL. The XML call in Flash would be:
xmlCaller.php?url=http://weather.boygenius.com/feeds/ontario-toronto.xml
