With Flash's ability to create rich, engaging, and fully interactive front end interface environments and Web services being able to offer data in a standardized, easy-to-work-with format, the possibilities of what can be accomplished with these two technologies is endless. But before the "how" is covered, it's important to know the "what" and the "why."

What Is a Web Service?
A Web service is exactly what it says; it's a service being provided on the Web. So what services does a Web service provide?

A Web service's goal is to provide raw data in well-formed XML format to any application that makes a request to it. That may not make sense by itself, so here is exactly what a Web service does.

A Web service sits on a server, much like any server-side page, and when a request is made to it, the Web service will perform a desired task, and return data in the form of XML. XML is a W3C standard way of packaging data and is a language that nearly any application can read because it is, in fact, not a language at all, but a well-structured document containing raw data. And Web services can provide data for such things as weather and stock information, and can even be used to translate text into other languages, as you will see in a later example.

So, that is what Web services are and what they do, but that doesn't explain why anyone should use them.

Why Use a Web Service?
Before Web services were so prevalent on the Web, data consumption was a tricky business with everyone having their own ideas of how data should be formatted and returned. If you wrote your own middleware to control how the data was being returned, it wasn't too bad to work with, but if someone else wrote it, you would have to do a lot of guesswork, and patch things together until you got the results you wanted.

But with Web services, the format of the data is already known: XML. And because Web services are standard, the results will be consistent across nearly all Web services. All you need to know is what the data being returned is, and how to work with XML.

Working With XML Data in Flash
Before you jump right in and connect to Web services in Flash, you should understand how to walk through an XML document in Flash using the built-in XML object.

To use the XML object with Web services, you pass the load method of the XML object, the path to the Web service, followed by a slash, and then the name of the Web method being called. It looks a bit like this:

myXML.load("http://www.where-ever.com/myWebService.asmx/myWebMethod");

Enough of the academics; here is a short example using the XML object to consume a Web service that will display a new tip about XML every day:

1. Create a new Flash document with two layers: "actions" & "content".
2. Select the first frame of the content layer, drag a TextArea component onto the stage, give it an instance name of xmlTip_ta, and size it to 200x100.
3. Now switch to the actions layer and open up the Actions panel in the first frame and place these actions in it.

var myXML:XML = new XML();
myXML.ignoreWhite=true;
myXML.onLoad=function(){
	xmlTip_ta.text = this.firstChild.firstChild;
}
myXML.load("http://www.xmlme.com/WSDailyXml.asmx/GetXmlDailyFact");

What this code does is to first create the XML object into which we are going to load the Web service. We then turn on the ignoreWhite property so that when we parse the object it doesn't count white space as a node. After that, we create the callback for when data loads into the XML object. At that point, we set the text of our TextArea component to the tip being returned. Finally, we load the Web service in using the GetXmlDailyFact Web method, which is part of the Web service we used.

Go ahead and test the movie, and you should see something like Image I. Using the XML object is a good way to get started with Web services.

Although there was not much data being returned, we still had to parse the XML (firstChild.firstChild) because the data coming back was in raw XML format, and looked something like this:

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://xmlme.com/WebServices">
	This is where the tip would be.
</string>

Even though that example worked, using the XML object isn't always the easiest way to work with Web services, especially if large sets of data are being returned.

But before we revisit this example, we need to go over three things that will make connecting to Web services quick and easy: data binding, the WebServiceConnector component, and the Web Services panel.

Data Binding
Data binding is a Flash 2004 Professional feature that allows seamless data integration between components. With data binding, you can link a property of component A to a property of component B, and when a component A event is triggered, (in this case, when the Web service sends back data), component B will automatically be updated without any ActionScript required.

In the case of the next few examples, component A will be represented by the WebServiceConnector component. Using data binding, when this component receives data back, it will automatically send the results to the other components to which it is bound. But before you can data bind it, here is a brief description of what the WebServiceConnector component is and what it does.

The WebServiceConnector Component
The WebServiceConnector component is a Flash 2004 Professional component designed to easily and quickly connect to Web services on the Web. To use it, simply drag it onto the stage, set the URL for the Web service, and call the trigger method on the component to make it connect to the Web service.

And you don't have to maintain a list somewhere on your computer to keep track of all of your Web services and how they work. You can store them right in Flash using the Web Services panel.

The Web Services Panel
With the release of Flash MX 2004, Macromedia included a very helpful panel in the mix, the Web Services panel. It's an easy way to keep track of all of the Web services with which you are working or experimenting. To open it, go to Window/Development Panels/Web Services.

You will see two buttons at the top, the Define Web Services and the Refresh Web Services buttons. The former will add Web services and the latter will refresh all the information with regard to the current Web services in the panel.

The great thing about the Web Services panel is that it will keep track of all of your Web services. It will also display all of the Web methods for each service, with details such as the parameters that are required to be sent with their prospective data types as well as the results being returned. The Web Services panel finds this information by examining the WSDL (Web Service Description Language) that all Web services have. Here is the link to the WSDL with which we have already worked: www.xmlme.com/WSDailyXml.asmx?WSDL.

Now you have seen the WSDL; you should add it to the Web Services panel by pressing the Define Web Services button. The Define Web Services pop-up will appear. Then, use the Add Web Service button to create a new spot in which to put the link to the Web service. Place the full path to the WSDL and press OK. After that, the Web Services panel will load the WSDL in (if you are connected to the Internet) and all the Web methods with their specific details can be visible within the panel as seen in Image II. The Web Services panel is a great way to keep track of all of your Web services and their Web methods.

Another great thing about adding Web services to the Web Services panel is that the WebServiceConnector component will automatically be able to list the Web methods for a particular Web service in the parameters. Also, when you data bind components, you can bind them directly to the parameters of a Web method and even the results of the Web method.

This example will use the same Web service we just used, but this time we will use the WebServiceConnector component and some data binding techniques:

1.  Create a new Flash Document with two layers: "actions" & "content".

2.  Select the first frame of the content layer and drag a TextArea component onto the stage, give it an instance name of xmlTip_ta, and size it to 200x100.

3.  While still in that frame, drag an instance of the WebServiceConnector component onto the stage, give it an instance name of "myConnector", set the WSDLURL to "http://www.xmlme.com/WSDailyXml.asmx?WSDL" and set the operation parameter to "GetXmlDailyFact" (see Image III). Use the Properties panel to set the parameters of the WebServiceConnector component.

4.  With the WebServiceConnector component still selected, open up the Component Inspector panel by going to Window/Development Panels/Component Inspector, select the Bindings tab, press the add binding button, and you will see two options (see Image IV):

• params:Object
• results:String

6.  While the Bindings tab is still up, and the newly created binding is still selected, select the Bound To field and a magnifying glass will appear at the end of the field. Select it and the Bound To pop-up will appear (or you can double-click the field itself).

7.  In the Bound To panel, all of the components to which you can bind will be visible, but in this case, select the TextArea component, and the bindable properties will appear in the Schema location window, which is the text property. Select the text property and press OK (see Image V). Now the results of the Web service are bound to the TextArea component, so the final step is to tell the WebServiceConnector to go out and get the data.

8.  Select the first frame in the actions layer, open the Actions panel (Window/Development Tool/Actions), and place this line of code in:

myConnector.trigger();

Now you can test the file, and providing you are connected to the Internet, a tip about XML should appear in the TextArea component.

So far, all we have done is receive data from a Web service. The next step is to send some data to a Web service and collect the results.

For the next example, you will need to add this Web service's WSDL to the Web Service panel: www.aspxpressway.com/maincontent/webservices/piglatin.asmx?WSDL.

This Web service has a Web method called toPigLatin with one parameter, textToTranslate, which is a String data type. It takes the string and translates it into Pig Latin and then returns the translation as a string.

So, if you have a sentence just like this, it would read like this: So, if you avehay a entencesay ustjay ikelay isthay it ouldway eadray ikelay isthay.

Here is an example that will create a small application using the Pig Latin translator Web service:

1.  Create a new Flash document with two layers: "actions" & "content".

2.  In the first frame of the content layer, drag an instance of the TextArea component onto the stage, give it an instance name of "translate_ta", and change its dimensions to 250x130.

3.  Now drag an instance of the Button component onto the stage under the Text Area component, give it an instance name of "translator_butn", and change its label parameter to "Translate".

4.  Next, drag an instance of the WebServiceConnector component onto the stage, give it an instance name of "transCon", and set its WSDLURL parameter to the Pig Latin Web service: "http://www.aspxpressway.com/maincontent/webservices/piglatin.asmx?WSDL", then set the operation parameter to "textToTranslate".

5.  With the WebServiceConnector still selected, open up the Component Inspector panel, select the Bindings tab, and press the Add binding button (see Image VI). The first binding will be the text that is being sent to the Web service, so select textToTranslate:String, and press OK (see Image VII).

6.  With the new binding selected, double-click the Bound To field and in the Bound To panel, select the TextArea component, and hit OK.

7.  Now create another binding, select results:String, and press OK.

8.  Select the Bound To field again, and again bind it to the TextArea component and press OK. What these bindings do is take data from the TextArea component, send it to the Web service, and then put the results back in the TextArea component. The last step is to put the trigger within the click event of the button.

9.  Select the first frame of the actions layer and place this code in:

translator_butn.clickHandler=function(){
	transCon.trigger();
}

This code creates an event callback for the click event of the button. Because the information being sent and received from the Web service is bound to the TextArea component, everything else is done automatically.

You can test the movie now, by typing anything you want in the TextArea component, then translating it to Pig Latin.

And if you still want to use XML instead of the WebServiceConnector component, remove that component and replace the code in the actions frame with this:

	//create the XML object
	var myXML:XML = new XML();
//ignore the white space
myXML.ignoreWhite = true;

//create the path to the Web service, // and append the Web method,
// and parameter to the end
var thePath:String =
"http://www.aspxpressway.com/maincontent/webservices/
piglatin.asmx/toPigLatin?textToTranslate=";
//create event for the button
translator_butn.clickHandler=function(){
	//get the text
	var myString_str:String = translator_ta.text;
	//call the Web method
	myXML.load(thePath+myString_str);
}
//collect the results myXML.onLoad=function(){
	//display the results
	translator_ta.text=this.firstChild.childNodes[0].nodeValue;
}

This code creates the XML object and sets it to ignore white space. Then, a String variable is created to hold the full path to the Web service as well as the Web method, and the parameter name for the Web method. Next, it creates the event callback for the button. Within the callback, a variable is created to hold the text from the TextArea component, which loads the XML with the main path, and then the variable holding the info string is used to translate. Finally, a callback event is created for when the results load into the XML object, and is displayed back into the TextArea component.

Summary
As you can see, tying into Web services with Flash is quick and easy using the WebServiceConnector component and data binding, or you can use the XML object for more hands-on control. You can also use Flash Remoting to create a more streamlined connection between Flash and the Web service. And don't forget, whenever you want to start working with a new Web service, add it to the Web Service panel to keep track of it.

Here are a few links to collections of Web services, as well as a few popular ones I have used.

• Figure 1
• Figure 2
• Figure 3
• Figure 4
• Figure 5
• Figure 6
• Figure 7