WebServices

In the previous page you created the animation and the PHP file that make our webService application work, but on this page you will learn why it works!

The PHP Proxy File
What? Huh? What the heck do we need a "Proxy" for? A proxy is
something that has the authority or power to act for another (Gotta love Webster's). The reason we need a proxy file is that Macromedia built a security feature into Flash which prevents it from loading data across domains.

You can load data from other domains all you like in the Flash application (when you test your movie locally). It's when you upload your flash movie to your domain, that you'll soon find nothing happens if you are attempting to load data from another domain.

<?php

$dataURL = "http://www.innergears.com//WebServices/WeatherByZip/ WeatherByZip.asmx/GetWeatherByZip?ZipCode=" . $zip;

readfile($dataURL);

?>

The above PHP code is fairly straightforward. We are, as you will find later, passing the zip code data from your Flash file, represented as $zip. That data is combined with the URL code, and the PHP file returns the data that Flash can read, such as the following:

<?xml version="1.0" encoding="utf-8"?>

< ArrayOfString xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://innergears.com/WebServices/WeatherByZip">

<string>CA</string>

<string>BEVERLY HILLS</string>

<string>33.786594</string>

<string>-118.298662</string>

<string>KSMO</string>

<string>15.4588221977214</string>

<string>NE</string>

<string>Santa Monica, Santa Monica Municipal Airport</string>

<string>CA</string>

<string>United States</string>

<string>34.00912</string>

<string>-118.2708</string>

<string>Santa Monica, Santa Monica Municipal Airport, CA, United States</string>

<string>Jun 02, 2005 - 05:51 PM EDT</string>

<string>from the SW (220 degrees) at 9 MPH (8 KT)</string>

<string>10 mile(s)</string>

<string>partly cloudy</string>

<string>70.0 F (21.1 C)</string>

<string>54.0 F (12.2 C)</string>

<string>56%</string>

<string>29.82 in. Hg (1009 hPa)</string>

<string />

<string>KSMO 022151Z 22008KT 10SM SCT045 21/12 A2982 RMK AO2 SLP098 T02110122</string>

< /ArrayOfString>

The above data should be a hopefully familiar sight. It is just a bunch of simple XML waiting to be utilized by us Flash experts (ha!). Go ahead and copy/paste that xml into notepad or whatever and take a look at it. I like to print it out and use a highlighter to figure out the nodes and the structure of the XML file.

Speaking of the structure, you'll see that this is a very simple XML file with one parent node < ArrayOfString> with a bunch of child nodes each named <string>. This should be relatively easy to use in Flash since all we need to know is the
position of the <string> nodes that we are interested in.

For this exercise we'll only be interested in a few and a lot of the nodes are gobbledygook anyhow. Save the XML from the webservice or print it out so that we can look at it when we write our Actionscript.

The ActionScript Code
The AS Code is fairly straightforward. The main section of the code lies in retrieving data from the XML-formatted file and processing it in Flash. Kirupa wrote extensively on that topic in Page 4 of his XML Photo Gallery code: http://www.kirupa.com/developer/mx2004/xml_flash_photogallery4.htm The idea behind what he explains and what you mention above is very similar.

Let's take a look at this section of code:

//define a variable for the whole array

list=GetWeather.firstChild.childNodes;

//pick out what i want from the returned xml

var city=list[1].firstChild.nodeValue;

var state=list[0].firstChild.nodeValue;

var airport=list[7].firstChild.nodeValue;

var country=list[9].firstChild.nodeValue;

var todaydate=list[13].firstChild.nodeValue;

var winddir=list[14].firstChild.nodeValue;

var visib=list[15].firstChild.nodeValue;

var skies=list[16].firstChild.nodeValue;

var highs=list[17].firstChild.nodeValue;

var lows=list[18].firstChild.nodeValue;

var humidity=list[19].firstChild.nodeValue;

var barometric=list[20].firstChild.nodeValue;

An XML file structure is analogous to a multidimensional array. Similar to arrays, you can use index values to retrieve data from various positions in your array. That is what I am doing in the code above. The numbers in red are the index positions.

Because I am not interested in all of the data or the data in the particular order they provide, notice that my numbers neither increment consistently or are in order. Again, Kirupa explains the idea behind it in his explanation in the link I provided earlier.

//set an initial zip code to load

SendZip.zip = 90210;

//trigger loadvars (to proxy.php page) assign container object GetWeather to recieve reply

SendZip.sendAndLoad("http://www.natepegman.com/proxy.php", GetWeather, "POST");

//set btn to take user input zipcode and trigger loadvars again

weatherBtn.onRelease = function() {

SendZip.zip = UserZip;

SendZip.sendAndLoad("http://www.natepegman.com/proxy.php", GetWeather, "POST");

};

The above code "sendAndLoad" sends the proxy.php file data from the SendZip.zip variable. The proxy.php file takes the zip data you send and retrieves the appropriate data from the WeatherByZip WebService for Flash to access.

Download Source Files

That's it! You can find tons of free webservices if you do a search engine search but here's a link to some really handy ones: list of handy webservices [as.org]. If you have any questions or comments, feel free to post them on the kirupaForum at http://www.kirupa.com/forum.

Best regards!

 

---

page 2 of 2

---