Web services are a great way to add a little functionality to your website.
There are many free webservices out there which will allow you to do
scientific conversions, validate email addresses, validate credit card
numbers get stock reports and much more! Flash MX2004 has a built in
webservices connector component which I'm sure works great but is no
help to those of us still using Flash MX!

Before you continue with this tutorial, there are a few prerequisites for you to adhere to:

• For this Tutorial you should have experience with XML & Flash. If you're new to handling XML in flash check out this great tutorial.

• PHP knowledge is not required but you should have PHP installed and
  running on your server!

This tutorial will explain how to consume a simple webservice which gets
Today's weather statistics based on a user input Zipcode. It will also explain
how to use a PHP proxy to get around Flash's security sandbox which
prevents data from being loaded across different domains.

There are other ways to build a proxy (using other server-side scripting
languages). I will use a simple PHP file but if you have a good knowledge
of another language you can probably make something similar that does
the same trick.

The following animation is an example of what you will create. Enter your zip code and press the Blue button, and you should see the weather information for the Zipcode you entered:

[ an example of what you will create - pretty sweet design huh?]

Let's Get Started:

1. We need to find WebService that we can connect to. We'll be using a free webservice that gives weather statistics based on zipcode. The webservice is exposed at this address:
   
   WeatherByZip
2. Now, we will need to create a PHP proxy file! Create a new file called proxy.php. Open that file in a text/code editor and enter the following code:

<?php
$dataURL = "http://www.innergears.com//WebServices/WeatherByZip/ WeatherByZip.asmx/GetWeatherByZip?ZipCode=" . $zip;
readfile($dataURL);
?>

3. Once you have entered the above code, save the proxy.php file.
4. It's time for our Flash animation! Our Flash movie will be very simple ("First make it work...then make it look good", I always say).
   
   Open Flash make a new document and make 8 dynamic text fields stacked vertically with the following instance names:
    
   1. location
   2. winddir
   3. visib
   4. skies
   5. highs
   6. lows
   7. humidity
   8. barometric
5. Then make one input text field at the bottom and give it the
   variable name "UserZip".
6. Next to the input text field make a button. Mine is just a blue square...nice design huh? Give it an instance name of "weatherBtn" You should now have something like the following image:

[ your animation should look like the above ]

7. We haven't added any ActionScript code yet! Let's do that now. Create a new layer called Actions. In the first frame of your Actions layer, add the following ActionScript code:

stop();
//create loadvars object to send zipcode and an xml object to recieve output from web service
var SendZip = new loadVars();
var GetWeather = new XML();
GetWeather.ignoreWhite = true;
//when webservice data comes in do this
GetWeather.onLoad = function() {
  //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;
  //set the dynamic text boxes to display data
  _root.location.text = city+", "+state;
  _root.closestairport.text = airport;
  _root.country.text = country;
  _root.todaydate.text = todaydate;
  _root.winddir.text = winddir;
  _root.visib.text = visib;
  _root.skies.text = skies;
  _root.highs.text = highs;
  _root.lows.text = lows;
  _root.humidity.text = humidity;
  _root.barometric.text = barometric;
};
//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");
};

8. Save the file, and upload your SWF to the same folder/location as that of your proxy.php file. If you were to run your SWF from your web-server, you should be able to enter a zip code and get weather data similar to what saw in the example above.

You aren't done with the tutorial just yet. I have not explained what all of these sections of code do, but I will do that in the next section!

---

---

In the previous section 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.

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!

---

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇