Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

MXNA (blog aggregator)
Adobe blogs

ADC program

Additional resources

Flash Article

Data for Designers: Connecting to Data in Flash Using Data Wizards

Jen deHaan

Flash Authoring QE
Adobe
Jen deHaan's blog
flashthusiast.com
webvideoblogger.com

The features of Macromedia Flash MX Professional offer a lot of flexibility to both designers and developers for creating almost anything you could imagine in any number of ways. Depending on what you're best at, Flash enables you to build files primarily with your design or programming skills. You probably use at least a bit of each in any given project but when your skill set needs to cross over to the "other side," things can sometimes get a bit tricky. What happens when you are a designer who is not used to writing code and you have a project that calls for using a bit of dynamic data? You could hire someone to do the work for you, learn the required skills yourself, or try the new Data Connection wizard to see if it can get the job done instead.

The Data Connection wizard and its buddy extension, the DataGrid Column Editor, install into Flash as MXP files that you can download from the Macromedia Exchange. Here's a sampling of what you can do with the Data Connection wizard:

Connect to an XML- or web service–based data source
Display the data in a DataGrid component
Manipulate the DataGrid columns (with the DataGrid Column Editor)

As a designer, you'll find that using dynamic data is incredibly useful, even mandatory, to display certain kinds of information in a SWF file. If you want to display the current weather, stocks, or team statistics in your movie, the best way to do this is with dynamic data. It's also very useful for any kind of regularly changing content. For example, it is much easier to update something in a database than by reopening a FLA file.

But some designers may find that using dynamic data in Flash isn't exactly a walk in the park, particularly if you aren't used to writing ActionScript or binding data. With the new components in Flash MX Professional 2004, you might even find it more difficult to get started using dynamic data and making that data work with the components you use. As the Flash program develops and the files you build become more complex, combining design and development frequently occurs. That is where the Data Connection wizard can help.

This article gets you started using the new Data Connection wizard extension and Data Column Editor. Even if you have never used dynamic data with Flash, you will discover how easy these wizards make it to integrate live data with a SWF file. You won't be building a complex Rich Internet Application here because that isn't what the Data Connection wizard was designed for. But keep reading if you want to find out how to add a bit of data and interactivity to your sites, advertisements, or widgets without writing any ActionScript at all.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Flash MX Professional 2004 (version 7.0.1)

Getting the Required Software

Before you can use the new Data Connection wizard in your applications, you have to make sure that Flash is updated to version 7.0.1 and that you have the latest version of the Extension Manager installed. In Flash, choose Help > About Flash Professional to check what version of Flash MX Professional you have installed. The current version number is found in the lower right corner of the window.

Note: If you don't have Macromedia Flash MX Professional 2004 version 7.0.1 yet, you can download the (free) updater at www.macromedia.com/support/flash/downloads.html.

If you are unsure what version of the Extension Manager you are running, open the Extension Manager (from Flash, Help > Manage Extensions) and choose Help > About Macromedia Extension Manager. The version number is found in the lower right corner of the window.

Note: If you don't have at least Extension Manager 1.6 installed, march on over to www.macromedia.com/exchange/em_download/ and download the latest version.

Installing the Extensions

To start out, you need to install the Data Connection wizard and DataGrid Column Editor extensions using the Extension Manager:

Choose File > Install Extension and then locate the first extension on your hard drive using the file browser and click on the Install button. Alternatively, just double-click the extension itself to open the Extension Manager and install the file.
You might be asked to accept license agreements, or if you want to overwrite existing classes (good to install regardless because the extension fixes prior issues with Data Binding too). Agree to both and the extension will be installed into the Extension Manager (see Figure 1).

Figure 1. The two new extensions appear in the list in the Extension Manager

Congratulations, you have just installed a new extension. Repeat this process for the DataGrid Column Editor then close the Extension Manager and restart Flash.

Finding the Wizards

After you have everything installed and updated, you can find the Data Connection wizard in Flash by choosing Commands > Data Connection Wizard. Finding the wizard in the Commands menu might seem like an odd choice; why don't you access it through the Component Inspector panel? You must select a component instance before you can click the Wizards For This Component button in the Component Inspector panel. Because the Data Connection wizard adds the instance itself, there is no component instance to select first. Therefore, you must use the Commands menu to start the wizard.

Find the DataGrid Column Editor by first selecting an instance of a DataGrid component. Then click the Wizards For This Component button in the Component Inspector panel.

Understanding the Data Connection Wizard

The Data Connection wizard and DataGrid Column Editor were created to make developing in Flash easier for designers. Being able to interface quickly with dynamic data without using much ActionScript helps Flash users who are either new to code or don't like to write it and yet who have to meet the need for more interactive or data-rich files. The Data Connection wizard allows you to connect to web services or XML data sources at runtime and return records of data to SWF files.

Use the Data Connection wizard when you want to work with an array of data that's returned to the movie. An array is any number of specifically arranged items, such as a series of daily forecasts or the names and statistics of players on a baseball team. The Data Connection wizard must display more than one record of data in an array. The data is stored in the DataSet component and you control how to display the data in the SWF file. The complex DataSet component is not terribly easy to work with without the wizard; not only does it organize data, but it sorts, filters, and modifies data as well.

By default, the Data Connection wizard connects and consumes the data feed and organizes it in a DataGrid component instance. The DataGrid is similar to a spreadsheet with columns and rows that contain information; you bind (connect) the data that you import to the DataGrid. Data doesn't need to be placed in a DataGrid component; you can choose to bind the data to other components and trigger it in other ways (you'll find out one way in the first example). However, you will have to construct those bindings in Flash yourself if you choose to use components other than DataGrid. You can find information on how to bind data in the Flash documentation.

What the Wizard Isn't Meant For

The Data Connection wizard isn't meant for connecting to all web services and XML data, or for all kinds of projects that incorporate them. You shouldn't use the wizard if you only want to work with a couple fields of data that are returned to Flash because an array is required. Also, the wizard does not allow you to use nested arrays, which is a complex data structure incorporating an array of data inside another array. Remember that it is possible to use this data with Flash because you can use nested arrays in the Bindings tab of the Component Inspector panel.

After spending the better part of a day playing with the new wizard and trying to consume various web services on xmethods.com, I found that well over half of the web services I tried worked using the Data Connection wizard, but the others did not. Although there were some methods I could consume using the WebServiceConnector component, these same methods didn't always work with the new Data Connection wizard. In my experience, web services that did work with the wizard worked very well. It was dead simple to define a new web service using the Web Services panel and then run through the wizard and make a fully populated DataGrid component work in a SWF file without writing a single line of code.

Summing Up the Wizard

The Data Connection wizard isn't revolutionary in the world of Flash but it simplifies connecting to sources of external data. Flash MX Professional already consumes and uses XML and web service data using the data connector components, and both versions use ActionScript and classes found in the common libraries. Therefore, the Data Connection wizard doesn't do anything that Flash can't already do, and at times the wizard is not able to use or handle the data that the Web Service classes and some ActionScript is able to accomplish. However, the wizard can be very useful for prototyping features quickly, or if you quickly want to syndicate some content from an external web service or XML file into your Flash movie. Be forewarned, however: This wizard won't necessarily work with every web service out there.

Syndicating XML with the Data Connection Wizard

Before we go too far, let's look at a simple example of XML feed syndication. If you work with XML data, you should check out some of the issues and good habits to follow when working with XML and the Data Connection wizard:

White space within the XML packets is ignored by default.
The XML must return an array for the wizard to work effectively.
If you get errors while working with XML, view the XML file in a web browser and check that the XML packet doesn't contain errors. If the XML has errors, the wizard will not work.
If you specify a relative path to an XML file, it might be necessary to save the Flash document before testing the movie so that Flash knows where to find the XML file.

The very first project I tried after downloading the new components syndicated my blog's XML file. If you're one of the two dozen people on the Internet without your own blog (what are you waiting for?), you can use my markme.com news feed for testing at http://www.markme.com/dehaan/index.rdf

The easiest way to syndicate my markme.com news feed is to open a new Flash document in Flash MX Professional 2004 and then choose Commands > Data Connection Wizard. If you have a slower computer, launching the wizard might take a few seconds. The Data Connection wizard has four major steps that make it easy to connect external data sources to your SWF file. Let's go through each of these steps now.

Step 1: Choose a Data Source

After launching the Data Connection wizard (choose Commands > Data Connection Wizard), you have the choice of using one of two different data sources:

XML is data structured in a flexible yet consistent way. This information might be on the same or different server than your SWF.
Web services is data provided by a web server for use by other users or applications either on the web or on your desktop and connected to the web. You can also use custom or private web services on the same server.

Select XML from the Type of Data Source drop-down menu. Flash will prompt you to type in a URL or file path to the XML document (like the markme.com address earlier).

Note: Unfortunately, it seems like you are unable to paste a value into the Document URL text field using Control-V. However, if you give focus to the text field by clicking in it, and then right-click or Control-click the Document URL field, you can then paste the URL. Also remember that you must prefix URLs with http:// or else you will get an error.
Type in a remote document URL to an XML file in the Document URL field.
Make sure the From The Document URL radio button is selected.
Click the Get Schema button to retrieve and display the XML file's schema in the list box. Here you choose the items you want to display in the resulting DataGrid.

Note: The schema is the organization and structure of the XML file. Getting and viewing schema is useful because you can choose what data to bind. The schema is also a visual representation of the data you are bringing into Flash.
After the schema has been loaded into the wizard, expand the RDF:Object entry and click the item:Array entry. Notice that the item Array has a red arrow, which means it can be used by the wizard. Red arrows can be used by the wizard, while black arrows cannot (the information might be in a nested array). Also notice that the XPath text field automatically populates when you click the appropriate entries (see Figure 2).
XML arrives in packets, which is the data that you use in Flash. If you want to view the structure of the XML packet, expand the item array by clicking the plus (+) icon next to the arrow.
When you are finished, make sure item:Array is still selected and click the Next button to continue with the wizard.

Figure 2. Using the schema in the Data Connection wizard

Step 2: Choose Data Fields

The next step in the wizard allows you to select columns to display in the DataGrid component you're creating. You can choose to display all or none of the columns by using the buttons below the data field's list box component. Alternatively, choose particular columns by clicking your selections in this window:

Click to display both the title:String and creator:String data fields (see Figure 3). The List component doesn't allow you to click two rows and keep them both selected. In order to select two rows simultaneously, Control-click (or Command-click) each row separately.
Click Next.

Figure 3. Selecting data fields to work with in Flash

Step 3: Set Up Data Fields

For this simple example you can click Next and skip this step because you only need the two fields of data (title and creator) that are already selected. However, if you need to define additional fields, Step 3 in the wizard lets you add or remove fields, as well as define a data type (values that have defined characteristics) for each field. For example, use this step if you are using ColdFusion and need to define the fields manually. XML data with XPath but without an XML data source also need the fields defined here. Do this if the schema doesn't import into the wizard.

Step 4: Choose Components

The final step of the wizard allows you to choose a prefix for the generated components:

In the Generated Components label enter rdf. This means this string is prefixed to the instance name for the XML (or WebService) connector, the DataSet, and the DataGrid.
Make sure both the Create a DataGrid and Create "Get Data" Button check boxes are both selected so the DataGrid component and Get Data button are added to the Stage (see Figure 4).
Click Finish to complete the wizard and behold the magic.

Figure 4. Labeling components and choosing which ones are generated

Looking at the Final Product

If this is the first time you have employed the services of the XMLConnector or DataSet component (components from Flash MX Professional that the wizard adds to your document), you might be interested to know that even though the component icons are located on the Stage, they don't appear within the SWF file at runtime. Therefore, it is safe to place the components anywhere you want around the Stage, or even completely off the Stage if you prefer.

Notice that Flash places four components on the Stage:

XMLConnector (with an instance name of rdfReceiveXMLConnector)
DataSet (instance name rdfDataSet)
DataGrid (instance name rdfDataGrid)
Button (no instance name)

Test the movie by pressing Control+Enter (Command+Return on the Mac). The XML file doesn't load into the DataGrid until you click the Get Data button on the Stage. Now you can read the news headlines. The author's name after the DataGrid populates from the contents of the XML file. Resize the column widths by dragging the vertical line between the Title and Creator columns.

Voilà! You managed to syndicate content from an external source and bind the results to a DataGrid without writing a single line of ActionScript. No, you don't have to be a developer to use this stuff.

Note: One of the best parts of the Data Connection wizard is the fact that help is always accessible throughout the process. On the left side of the wizard, the context-sensitive Questions area helps you look up answers to frequently asked questions. Additionally, you can click the Help button near the bottom-left corner of the Data Connection wizard at any point to learn how to use the wizard.

If you find it annoying always having to click Get Data on the Stage to load the data, don't fret. You can delete the Button instance on the Stage and add a Flash behavior (from the Behaviors panel) that loads the data automatically. You still don't have to write any ActionScript to accomplish this impressive feat:

Add a new layer and select Frame 1 on the new layer.
Open the Behaviors panel.
In the Behaviors panel, click the Add Behavior button (+) and select Data > Trigger Data Source from the menu.
In the resulting Trigger Data Source window, select the XMLConnector component (it should have the instance name rdfReceiveXMLConnector)
Click OK to add the behavior to the document.

Now when you test the movie, you won't have to click Get Data to load the XML. The data automatically loads when the SWF file runs because it triggers in the first frame. You can now delete that pesky Get Data button from the Stage.

Using the DataGrid Column Editor

The DataGrid Column Editor reorders, resizes, adds, and deletes columns from the DataGrid and can be used to change cells between editable and noneditable. You might want to tweak the columns slightly in the DataGrid component you just created in the previous example to change the heading titles and component dimensions. This is a simple task, thanks to Macromedia's buddy wizard, the DataGrid Column Editor:

Select the DataGrid on the Stage from the previous example
Open the Component Inspector panel.
Choose DataGrid Column Editor from the Component wizards menu. The DataGrid Column Editor might seem a bit intimidating at first, but it is actually straightforward.
The columns aren't visible in the wizard by default, so click the Import Columns button in the lower-left corner of the wizard to make them visible.
Select the Title column and type Title in the Column Label text field.
Click the Creator column and type Author in the Column Label field (see Figure 5).

Figure 5. Changing column labels in the DataGrid Column Editor
Click OK to finish the wizard and return to the Flash document. If you test the movie again, notice that the columns in the DataGrid have now updated, although now the column sizes need to be adjusted because the default width for each column is 50 pixels wide.
Before you run the Column Editor wizard again, get the width of the DataGrid component itself. The default size of the DataGrid should be 460 pixels wide by 270 pixels high.
Select the DataGrid and run the Column Editor wizard again from the Component Inspector panel. Select the Title column, set the column width to 360 pixels, and set the creator column to 100 pixels.
When you are finished, click OK to close the wizard and test the movie (see Figure 6).

Figure 6. Read the current article titles and authors when you're finished.

Note: When dealing with column sizes, the scroll bar comes into play. Even though you specify a width of 100 pixels for the Author column, in reality it will be a lot closer to 80 pixels because of the presence of the scroll bar.

Addressing Cross-Domain and Security Issues

Movies running in Flash Player 7 can only access data from the same domain. Therefore, a SWF file cannot access data from another server without a special file, called a cross-domain policy file, placed on the server from which it accesses the data. For more information, read Security Changes in Macromedia Flash Player 7 (Macromedia Developer Center) and About Allowing Cross-Domain Data Loading (Flash livedocs).

Consuming Web Services Using Wizards

In addition to parsing and binding XML packets to a DataGrid, the Data Connection wizard binds results from a web service. The wizard doesn't work equally well with all web services however; some require more massaging than other data formats.

When I tested web services, I had about 13 web services defined in the Web Services panel but when I ran the Data Connection wizard, only eight of them were visible. After a bit of research, and some trial and error, I discovered that certain web services don't return data that can be used with a DataGrid component. If a web service doesn't have any compatible methods, they won't be displayed in the list. This behavior saves a lot of headache in the long run; however, it can be a bit mind-boggling at first. Of the eight web services I entered that were compatible with the wizard, only about 70 percent of the methods were available.

The wizard has problems with any web services returning ASP.NET DataSets; therefore, services returning a .NET DataSet cannot be used with the wizard. Likewise, a web service won't be able to function with the Data Connection wizard if it only returns a numeric or simple string value.

The Data Connection wizard (and the DataGrid component itself, for that matter) is really only designed to work with a series of similar items, such as an array. Before using the Data Connection wizard, you need to be aware of the following conditions:

The wizard doesn't work in every situation. The target XML or web service must return an array for the wizard to work effectively.
The wizard only works with Flash MX Professional 2004 because it requires the DataGrid, DataSet, XMLConnector, and WebServiceConnector components.
Only arrays with red arrows can be selected in the wizard. Arrays with black arrows indicate that they are nested.
If you choose not to create the DataGrid or Button component with the wizard, make sure you add your own Submit button or use ActionScript or a behavior to trigger XMLConnector or WebServiceConnector.
If the web service requires parameters passed to it, you need to define the parameters within the wizard or bind values manually after the wizard is closed. A parameter is an item of information that you or the user passes to the operation, which affects how it runs.

Note: Record sets returned by ColdFusion are assigned uppercase column names and each column must be manually added in Step 3 of the wizard.

This example connects you to an ASP.NET web service that grabs current rosters for Major League Baseball teams.

Note: Check out the web service's home page at http://webservices.empowered.com/statsws/stats.asmx.

Before you can use a web service with the wizard, define the web service within the Web Services panel:

Create a new Flash document and open the Web Services panel by selecting Window > Development Panels > Web Services.
Click the Define Web Services button.
In the Define Web Services window click the Add Web Service (+) button.
In the new blank entry, enter the following URL: http://webservices.empowered.com/statsws/stats.asmx?WSDL (see Figure 7).
Click OK to close the Define Web Services window and view the new web service in the Web Services panel.

Figure 7. Defining a new web service in Flash

Now you can expand the web service to view the methods and properties for each defined service. After you are finished, close the Web Services panel and start the Data Connection wizard by choosing Commands > Data Connection Wizard.