Connecting to a Web Service using Flash - Page 1
by kirupa  |  7 September 2010

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

If you don't know what web services are, don't worry. A web service is basically a friendly, consistent face through which you can communicate to some application behind the scenes. This application can be as simple as something that returns the current time to something more complicated like a Twitter or a Facebook server.

To get more specific, a more technical term for a "friendly, consistent face" is API. An API, which stands for application programming interface, defines how you can communicate between two applications that know how to speak the API's language.
Similarly, think of the web service as a mini-application that exposes a common language, an API. Your application can use the common language to communicate with the web service, and the web service will take your message and communicate with the remote application that is hiding behind it.

Below, you will find a simple example of a Flash application communicating with a web service to return a movie name. Keep clicking on the Click Me button to see one of ten different movie titles displayed:

[ click on the Click Me button to display a movie name returned from a web service ]

By the end of this tutorial, you will learn how to create the above application by using Flash and ActionScript 3 (AS3) to communicate with a web service. Let's roll on.

Getting Started
For this tutorial, make sure you have Flash CS5 as well as Flash Builder 4 installed. Trial versions of both are available on Adobe's site, so feel free to give them a whirl if you haven't had a chance.

Once you have both Flash and Flash Builder installed, download and extract the following source files to a folder on disk:

From the extracted files, open kirupa_webservice.fla in Flash CS5. your artboard will basically look as follows:

[ your artboard pretty much looks like the example you saw earlier ]

A basic UI will be displayed with a button and a textfield. There is some code associated with this document, but we'll get to that later.

Reading the Flash Builder (Flex) Libraries in Flash
The first thing we are going to do is tell Flash to load some libraries from Flash Builder. These libraries are essential to having our app communicate with a web service, but for some reason, these libraries are not incuded by Flash. Fortunately, these libraries are provided by a default Flash Builder installation, and best of all, those libraries pretty much "just work" when you tell Flash to use them.

To specify a library location, select an empty part of your artboard to deselect everything. From your Properties panel, click on the Edit button found to the right of the ActionScript 3.0 Settings property:

[ go ahead and edit your ActionScript settings ]

The Advanced ActionScript 3.0 Settings dialog will appear. From this dialog, make sure the Library path tab is selected:

[ find your Library path settings ]

This Library path view allows you to specify additional locations Flash loads libraries from if needed. It is here that we will specify the location of the libraries installed by Flash Builder.

Go ahead and click on the Browse to Path button:

[ we'll need to browse to the location where the Flash Builder libraries live ]

Once you have clicked on the Browse to Path button, the Browse For Folder dialog will appear. In this dialog, browse to the folder where your Flash Builder libraries live. Relative to the Flash Builder installation directory, the path to the libraries folder is: \sdks\4.1.0\frameworks\libs

In case it helps, on my 64-bit Windows 7 setup, the full path to access the libraries folder is: C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\sdks\4.1.0\frameworks\libs

After you have selected the libs folder, click the OK button to select this folder and to close this dialog:

[ browse to the libs folder in your Flash Builder installation directory ]

You should now see our newly added folder path visible in the Library path tab of your Advanced ActionScript 3.0 Settings dialog:

[ your libraries have now been added ]

Wohoo. By adding the path to the Flash Builder libraries, Flash now knows where to go in case you use classes that need them...which you will!

Ok, in the next page we'll get to more interesting things such as actually getting our application up and running.

Onwards to the next page!

1 | 2 | 3




SUPPORTERS:

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