More and more developers are becoming aware of creating dynamic applications with Flash and Cold Fusion Getting Data Into Flash - Part 1
The query string and loadVariables

More and more developers are becoming aware of creating dynamic applications with Flash and Cold Fusion. Now the question is, "How do I get external data into my Flash movie and what are my options?". There is not one simple answer to this question since there are a few ways to accomplish this. These will be discussed in the following order: appending a query string to the .swf file reference, loadVariables, JavaScript, and the XML Object, listed in order of simplest to most complex. This article comes in two parts with the first covering the query string and loadVariables, while the second will cover JavaScript and XML. We will also cover the pros and cons of each technique along with a description of the best place to utilize each technique. Lets get started.

The Flash Query String Method

The Flash query string is very similar to a URL query string in that variables are appended to the file name. A URL containing a query string would look something like:

 

http://www.flashcfm.com/file.cfm?first_name=Dennis&last_name=Baldwin

Well the Flash equivalent would be to append these variables to the object and embed code that calls the Flash file:

 

query_string.swf?first_name=Dennis&last_name=Baldwin

Click here to view a sample of the query string method. You'll see that we've appended these variables to both the object and embed tags which will ensure that these variables will be available to both Internet Explorer and Netscape. So now your data is in Flash and you can choose to do what you want with it. The variable now sits on the _root timeline in Flash and is accessible anywhere in your movie. You can set it to display in a dynamic text field as in the example above or it might be a number that you are passing into some sort of calculation.

You've probably noticed that the example above leaves lots to be desired. It's pretty static and there's not a whole lot we can do with it. That's where ColdFusion comes in. For a simple example lets say we want to get the user's IP address and display it in Flash. Of course we can't do this with Flash alone. We can create a movie with a dynamic text field called IP. The IP address can then be appended to the .swf file reference via:

 

query_string.swf?ip=<cfoutput>#cgi.remote_addr#</cfoutput>

Cold Fusion will output the IP address and make it readily available to Flash. You could also use this method to query a database and output the data to the query string. Your data would be pulled from the database, to the query string, and into Flash. You can see that it's easy to take advantage of Cold Fusion's power and share it with Flash. Try to think of other things that can be done using this method and see what you come up with.

For simple and small variables this is a great technique to use. The data is almost instantly available to Flash and it's very easy to implement. One limitation is the amount of data that can be loaded via the query string. This varies from browser to browser and it's hard to always get consistent results. Another problem is that the data isn't very well structured and it can easily become complicated to debug your application with one long query string. This leads us to our next method.

The loadVariables Method

This is probably the most widely used method and effective means of getting data into Flash. The beauty of this method is that you can send HTTP post and get requests without ever leaving the page. The Flash movie takes care of sending and loading the data without ever having to refresh the page. In this article we are only going to be covering data being loaded into Flash and we will discuss sending data in future articles.

First off, lets cover a common question that gets asked time and time again, "What's the difference between loadVariables and loadVariablesNum?". The answer is short and sweet, loadVariables pulls data into a target location like the _root timeline or another movie clip timeline while loadVariablesNum loads data into a specific level of your movie. With that said let's walk through an example of loadVariables. Lets say we have a template called "data.cfm" with the variables first_name and last_name just to be consistent with our query string example. The template could query a database and output the following to the page.

 

&first_name=Dennis&last_name=Baldwin&

Note the preceding and trailing "&" symbols. These aren't particularly necessary but it's good practice since CF sometimes throws in line feeds and spaces in your code (see Load Variables Best Practices for more information). So now our "data.cfm" template is ready to go. We need to get this into Flash and therefore make the following call in Frame 1 of our movie:

 

loadVariables("data.cfm", _root);

This will take the variables from "data.cfm" and place them in our _root timeline. One thing to note is that these variables are not immediately available since they do take time to load. Therefore it wouldn't be effective to load the variables on Frame 1 and in the same frame do some sort of logic like:

 

if (first_name == "dennis") {
     // do this
}

This will probably never evaluate to true since your variables haven't had time to load. There are a couple of ways to tackle this. The first one being to create a "loaded" variable at the end of your "data.cfm" template:

 

&first_name=Dennis&last_name=Baldwin&loaded=1&

Then inside your Flash movie on Frame 1 you can do your loadVariables call and in Frame 3 add the following logic:

 

if (loaded==1) {
     gotoAndPlay(4);
} else {
     gotoAndPlay(2);
}

This will continue to loop between Frames 2 and 3 until the variables are fully loaded. Once they are fully loaded the logic will send the user to Frame 4 and the rest is up to you. Click here to see this method in action. It's hard to see what's going on behind the scenes so all of the example files will be available for download at the end of this article.

Another method to use is the onClipEvent(data) method available to all movie clips. All you need is a blank "dummy" clip that will serve as a data container. So create an empty movie clip and drag an instance of it onto the stage. Be sure to give this instance a name, in this example we'll use "container". Now go to frame 1 of the _root timeline and we'll place the following code:

 

container.loadVariables("data.cfm");

Since we're not sending any variables to CF we do not specify a GET or POST method. This code loads the variables from "data.cfm" into the dummy clip. To be consistent with our previous examples we're going to place the variables into dynamic text fields in _root. To do this we need to transfer our variables from the "container" clip to _root. We need to place the following code on our clip:

 

onClipEvent(data) {
     _root.first_name = first_name;
     _root.last_name = last_name;
}

Once the clip detects that the variables are fully loaded it will run the code and transfer the variables to _root. This is a simple example but could be modified to run some sort of custom function once the data is loaded. Click here to see it work.

Conclusion

In this article we've covered some of the simpler methods for getting data into Flash. As you can tell it's not an extremely difficult process but there a some quirks here and there that have to be dealt with. Flash is picky about whitespace and it's always good practice to use URL Encoded variables. We will cover many of these topics in future articles. With that said, appending a query string to your .swf or using loadVariables is great way to get simple data into Flash and start creating dynamic applications. Once again these methods of loading data are extremely fast but the price you pay is less structure. In part two of this article we will discuss how to gather data using the JavaScript object and XML object. Stay tuned for part two and try putting what you learned to work!

If you would like to download all the examples from this article in a single .zip file click here

If you have any questions or comments about this article please feel free to email dennis@flashcfm.com

Tutorial provided courtesy of:

About This Tutorial
Author: Dennis Baldwin
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5
Total Views: 122,817
Submission Date: October 09, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
  • i have a url from that i need to pick two variable and need to write them in .txt file, may you plz help me how to do this in coldfusion, i am a newbie

  • &first_name=#firstName#&last_name=#lastName#

  • It would be nice to see how the data is sent from the data.cfm file to the flash movie. I tried using the following code in the data.cfm and it doesn't work.

    First Name:
    Last Name:

  • how to inverse a string by typing it to a web form using javascript

  • well the tutorial are very nice and i had used in my documents...quite successfull....everybody should try for once... Thanks Jaspal Mehta

  • I am using ColdFusion with flashMX 2004 Professional. I want to use dynamic applications. I want retriving the data from database in flash remoting script. I am trying in so many books using this script but i did not get any result. I am thinking may be the problem with 2004 professional. Please let me know the script Thanking u, Jaya Lakshmi

  • Sir I am Balu i am a web developer i dont know about cold fusion wiht flash plz send the tutorila and help for the coldfusion and with flash connections with coldfusion. thank u sir. Baluworks@yahoo.co.in

Advertisement


Website Designed and Developed by Pablo Varando.