WebServices

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!

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 on the next page!

 

---

page 1 of 2

---