in Flash MX
       by Nate Pegman aka natronp | 3 June 2005

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:

  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:
$dataURL = "http://www.innergears.com//WebServices/WeatherByZip/ WeatherByZip.asmx/GetWeatherByZip?ZipCode=" . $zip;
  1. Once you have entered the above code, save the proxy.php file.
  2. 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
  3. Then make one input text field at the bottom and give it the
    variable name "UserZip".
  4. 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 ]

  1. 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:
//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");
  1. 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 on the next page!



page 1 of 2



kirupa.com's fast and reliable hosting provided by Media Temple.