Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Powering Flash Applications with a Server

Integrating an application server with Macromedia's ever-popular front-end solution allows for rapid development of engaging rich Internet applications. Find out just how easy it is to make Flash talk to the middle tier.


advertisement
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).

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" > <PARAM NAME="FlashVars" VALUE="name=jeff%20tapper"> <param name="movie" value="test1.swf" /> <embed src="test1.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="name=jeff%20tapper" /> </object>

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.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" > <param name="movie" value="test1.swf?name=jeff%20tapper" /> <embed src="test1.swf?name=jeff%20tapper" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

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.

&firstName=jeff&lastname=tapper&email=jeff@tapper.net&

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

&firstName=jeff& &lastname=tapper& &email=jeff@tapper.net&

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.

<cfdirectory directory="c:\cfusionmx\wwwroot\devx" action="list" name="fileList"> <cfloop query="fileList"> <cfoutput>&file#fileList.currentRow#=#fileList.name#&</cfoutput> </cfloop> <cfoutput>&numFiles=#fileList.recordCount#&</cfoutput>

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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date