Powering Flash Applications with a Server

ver the past few years, Flash has made a big transition from a straightforward animation tool to a full-fledged development environment that makes its specialty in rich front ends for applications. To make this transition possible, Macromedia needed to introduce ways to easily integrate external data into Flash applications, to allow for more complex and robust data-driven applications. With the release of Flash MX in 2002, and the subsequent release of Flash MX 2004, application developers now have these tools at their disposal.

Choosing an Application Server
Developers have been using Application servers to integrate back end data into Web applications for at least the past decade. With the advances being made by the Flash player for data connectivity, it is now easier than ever to leverage an application server for your Flash applications. Finding an app server that is right for you needn’t be a daunting task.

What You Need
Flash MX Professional 2004, ColdFusion MX

There are a lot of choices in application servers these days: CF, PHP, IIS, JBoss, JRun, etc. Each of these technologies is capable of providing the same functionality: database connectivity, file system manipulation, mail services, connectivity to other network resources, conditional processing, XML parsing, etc.

Frequently, some of these facilities are built in to the app server natively while others are accessed via external libraries. Therefore, the decision of which application server is right for any individual project is often decided on other factors, such as the company’s existing technology investments.

Further, many developers show a fierce loyalty to the technology they use. The good news is: It doesn’t matter. Regardless of which app server you pair it with, Flash will use it to create powerful, data-driven applications.

Connecting Flash to an Application Server
There are three basic ways to integrate external data into Flash applications: passing single values (such as FlashVars), passing text files (such as XML or LoadVars) or connecting to remote objects (such as Web services or Flash remoting). The first two categories do not actually require an application server, although they are made more powerful with the use of one.

FlashVars/URL Vars
The simplest way to integrate external data into a Flash application is to pass variables in the HTML code used to call a Flash movie. The code sample below shows an example using flashvars to pass the string “jeff tapper” into a Flash movie using LoadVars. A few things to note about this method: The FlashVars must be passed in both a param tag (for Internet Explorer-based browsers) as well as the embed tag (for Netscape/Mozilla-based browsers); any non-URL safe characters, such as spaces, must be replaced with a % sign followed by a two-digit hexadecimal value (note the %20 in place of a space).

Another similar approach is to pass variables along the URL within the HTML calling a Flash movie. The following code shows a sample of this approach. The same two notes from the FlashVars approach are also applicable here, the variables must appear in both the param tag and embed tag; and non-URL safe characters must be properly escaped.

These two examples show a simple, but functionally limited way to integrate external data into Flash. There are a few factors that limit its utility:

  • Only name/value pairs can be passed into Flash (no arrays or objects)
  • There is a 64KB limit for the string being passed

LoadVars
Another method to add external data to Flash is using the LoadVars class, which was introduced with Flash MX. LoadVars allows for reading a specially formatted external text file into a Flash Movie. These can be static, hand-coded files, or they can be created by an application server. To format a text file that will be read via LoadVars, there are a few basic rules:

  • File must begin and end with an ‘&’
  • File must contain only name/value pairs, separated by an equal sign
  • An ‘&’ must appear between each name/value pair
  • If line breaks are to be inserted between each name/value pair, an ‘&’ must begin and end each line

Now I’ll show you two separate ways that the same data can be formatted for use with the LoadVars class.This code will create the variables firstname, lastname, and e-mail within Flash.

[email protected]&

This will behave identically to the code just above, but is more “human readable.”

[email protected]&

Because this version of the text file is easier to read, it is probably a better approach if the file is to be hand coded. However, if the file is to be created and maintained by an application server, it’s not necessary to make it more readable.

The following code shows the use of the LoadVars class to read these variables from a file called customer.txt. Once a LoadVars object is created, the URL to a text file is specified in the load Method. An onLoad method is written to handle the results asynchronously once the file is done loading.

var customerData:LoadVars = new LoadVars();customerData.load("customer.txt");customerData.onLoad = function(success:Boolean){    if(success){        fname.text = customerData.firstName;        lname.text = customerData.lastName;        email.text = customerData.email;    }}

This same approach can be used to read in dynamic data created by an application server such as ColdFusion. To do this, instead of specifying the URL of a text file, point the URL to a ColdFusion page, which will output a properly formatted text file. The following code shows a ColdFusion page that reads the contents of a directory, and outputs the file list specifically formatted to be used with LoadVars. The cfdirectory tag is used to retrieve the contents of the devx subdirectory of the webroot. Next, cfloop is used to iterate over those files, with each being output as a variable named file1, file2, etc. The final line outputs the total number of files.

    &file#fileList.currentRow#=#fileList.name#&&numFiles=#fileList.recordCount#&

And here is the ActionScript for a Flash movie using this page. Notice that the load method of the LoadVars object is pointing to a dynamic .cfm file, rather than a static .txt. This allows for the file to be generated specifically for each request. Once the data is loaded, it loops from 1 to the number of files, creates a textfield for each file, and outputs the file name into the textfield.

var theRoot = this;var myLoadVars:LoadVars = new LoadVars();myLoadVars.load("http://localhost:8500/devx/fileList.cfm");myLoadVars.onLoad = function(){    for(var i=1;i<=myLoadVars.numFiles;i++){    theRoot.createTextField("t"+i,i*10,0,i*20,200, 20);        theRoot["t" + i].text=myLoadVars["file"+i];    }}

This example should help you see the usefulness of integrating dynamic data into a Flash application. To achieve the same results with a static text file would require changing the file each time the contents of the directory changes.

XML: Passing Arrays and Objects
One of the limitations of passing data into Flash as name/value pairs is that complex data, such as arrays or objects, cannot be used. As shown in the directory listing example, if there are several pieces of related data, they have to be passed as uniquely named variables. Using XML to pass data into Flash allows you to pass a group of data as a single object or array, making for easier coding and better encapsulation.

To further ease this process, Flash MX Professional 2004 introduced the XMLConnector as a component. Using this component, it becomes trivial to consume an XML document, and display selected parts, with a minimum of coding. For those who prefer a more code-centric approach, there is an XML class that can be used instead. Figure 1 shows an XML connector being used to read a books.xml file and binding the book titles from that file to a combo box.

Figure 1. The XML Connector: The XMLConnector greatly eases the process of working with XML files. The Properties panel at the bottom of the screen shows the parameters set to read the XML file, while the Component Inspector panel shows the resulting data being bound to the combo box.

In the same way that LoadVars could be used to read a static or dynamic text file, you can also use XML for both static and dynamic XML files. ColdFusion gives several options for creating XML files. The next two code samples show the ColdFusion page used to create an XML file and the resulting XML file, respectively.

The XML file creation script here is very similar to the text file creation script shown in earlier. The key difference is that with XML it is much easier to associate related data, allowing for easier access to other information about the files such as date last modified and file size.

        

With a ColdFusion page in place to dynamically create the XML file, you can easily use this data in a Flash application by simply telling Flash to load the .cfm page as XML. The ActionScript for making use of this XML file is below.The movie consists of a Combo box and two text fields. When the XML object is done loading the XML document supplied by ColdFusion, the combo box is populated with the name attribute as the label and the entire file object as the data. With this underlying data, the size and date modified properties are available to populate the text fields when the selected item is changed.

var cbFile:mx.controls.ComboBox;var txDate:TextField;var txSize:TextField;var xFile:XML = new XML();function handleEvent(evtObj:Object){    if(evtObj.type == "change"){        txDate.text = cbFile.selectedItem.data.attributes.modified;        txSize.text = cbFile.selectedItem.data.attributes.size + " bytes";    }}function loadCombo(){    for(i=0; i

Capability and Performance with Web Services/Remoting
Each of the previous methods for loading external data involved loading an entire text file of variables at once. With the use of Flash remoting or Web services, you now have the ability to connect to an object on an application server and to exchange discrete pieces of data with that object. This allows for vast performance increases, as well as the ability to create more complex applications.

Figure 2 shows an interface for the song requestor module of Radio Free Astoria (http://radio.tapper.net). This module connects to a ColdFusion Component (CFC) and uses one method to retrieve an array of artists, another to retrieve an array of songs for an artist, and a third method to send an e-mail with the details of the requested song. Listing 1 shows the source code for the ColdFusion Component.

Figure 2. Song Requestor Interface: This simple interface allows users to browse through the songs available for an artist and to make a request that a particular song be played.

This ColdFusion Component has four methods (each defined with a tag). The first method queries for all artists, and returns an array of them to Flash. The second takes an artist name as an argument (defined with the tag), and queries for all songs by that artist, returning an array of songs. The third method processes the song request, taking the artist and song name as arguments, and e-mailing the request (using a tag). The final method is used to convert the results of a query (such as those in the first two methods) to an array of objects, easing the use of the data in Flash.

By implementing this functionality in a ColdFusion Component, you have the ability to use the same methods from both traditional ColdFusion/HTML pages, as well as from technologies capable of using Web services or Flash remoting. For simplicity sake, the code shown in Listing 2 makes use of Web services and Flash MX Professional 2004's WebServiceConnector component. A future article may address implementing this same solution using the WebServices classes (without the use of the component) or Flash remoting.

Assuming a simple interface (shown in Figure 2) of two list boxes, a text field, a button, and three WebServiceConnector components drawn on the stage in Flash, the ActionScript below defines the corresponding functionality. The handleEvent method routes all the broadcast events to their appropriate handlers.The same ActionScript from Listing 2 would work identically regardless of which technology you choose to implement the Web service.

Shedding its Past
Flash has become a very powerful tool for building application interfaces, and its power grows exponentially by connecting it to an application server. What application server you choose is a matter of preference, but if you are comfortable working with HTML, XML, and other tag-based solutions, ColdFusion would be a good fit; it is easy to learn, allows for ultra rapid development, and offers great power for applications. Additionally, ColdFusion's native support for Web services and Flash remoting will make the going extra easy when you're ready to integrate your data into Flash applications

Regardless of which application server you choose, using Flash for the front end will give you all the richness and interactivity of client-server applications but without all the distribution issues. And it's platform and browser independent; all you need is the Flash player. It's taking awhile for Flash to shake its reputation as an 'animation tool,' but more and more frequently, large companies are making the transition to intranet- and extranet-based applications?and powering them with Flash.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may

man on floor with data

DevX Quick Guide to Data Ingestion

One of the biggest trends of the 21st century is the massive surge in internet usage. With major innovations such as smart technology, social media, and online shopping sites, the internet has become an essential part of everyday life for a large portion of the population. Due to this internet

payment via phone

7 Ways Technology Has Changed Traditional Payments

In today’s digital world, technology has changed how we make payments. From contactless cards to mobile wallets, it’s now easier to pay for goods and services without carrying cash or using a checkbook. This article will look at seven of the most significant ways technology has transformed traditional payment methods.