Dennis Baldwin

Subscribe to Dennis Baldwin: eMailAlertsEmail Alerts
Get Dennis Baldwin: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: ColdFusion on Ulitzer

CFDJ: Article

ColdFusion Meets Flash

ColdFusion Meets Flash

Most developers use Flash for animation and Web site introductions, but aren't aware of how powerful a scripting environment it is. Now in Flash 5, ActionScript is larger than life and is here to stay.

It's pretty much a programming language with access to variables, expressions, arrays, objects, and user-defined functions. ActionScript is very similar to JavaScript and both are based on the ECMA-262 specification.

Developers rave about how great ColdFusion is for rapidly developing e-commerce sites and its ease of use. Flash advocates can't get over its small file sizes, cross-browser compatibility, and Flash player domination throughout the Web. Wouldn't it be great to integrate the two! We would end up with a powerful, server-side technology that does all the dirty work along with a client-side app that looks great.

This article demonstrates how to integrate ColdFusion and Flash to create a dynamic navigation menu. (Source files for this article can be found on the CFDJ Web site, www.sys-con.com/coldfusion/sourcec.cfm) The process basically goes as follows:
1. Flash loads variables from ColdFusion.
2. ColdFusion queries databases and outputs variables to a template.
3. Flash checks to see that the variables are fully loaded and then parses them.
4. Movie clips are duplicated and variables are set to create the navigation menu.

The Server Side
For simplicity, we'll use an Access database (flashmenu.mdb) for this tutorial. Pretty much any database that ColdFusion can talk to can be used. We'll be dealing with two database tables: "cats" and "subcats." The structure of these tables is fairly simple.

The CatID field is the primary key for the cats table and the foreign key for the subcats table. This allows us to link the subcategories that correspond with the main categories. Once the data structure has been developed, we can create the DSN. In our example we name the DSN "flashmenu", but feel free to use whatever you prefer. Just make sure you change this reference in the ColdFusion template (cats.cfm). Let's look at the cats.cfm template. Flash is picky about white space and carriage returns, so it's good practice to use the <CFCONTENT> and <CFSETTING> tags.

<cfcontent type="text/plain">
<cfsetting enablecfoutputonly="yes">

This will set the MIME type of the template to text and eliminate any unnecessary white space. We'll then query our database and grab the categories from the cats table.

<!--- query to get the main categories --->
<cfquery datasource="flashmenu" name="get_cats" dbtype="odbc">
select catid,category
from cats
</cfquery>

A few variables need to be initialized so we can use them in our loop. We create a count variable that will be used to track our current index in the loop. We also create an empty container for the categories that store in a pipe-delimited list. You can specify anything for the delimiter, but I prefer using the pipe symbol. In most cases it doesn't conflict with any of the data in the list.

<!--- initialize the category list --->
<cfset cats="">
<!--- initialize the counter --->
<cfset count=0>

Now we can loop through our initial "get_cats" query and create a subquery that will grab our subcategories based on our foreign key - CatID. This allows us to join our data so that CatID 1 will pull all the subcategories that fall under this category ID. We're now able to start filling our cats container with data that will be used in Flash (see Listing 1).

Now that we've taken care of the main categories we need to start building the subcategory lists. To do this we need to initialize a few more variables and create a subloop that will loop through the "get_subcats" query (see Listing 2).

We've now established all the necessary lists that we need: cats, subcats, and URLs. This data will be used shortly, but first we need to output our information to the page (see Listing 3).

We use the loaded variable to check inside Flash that all the variables are fully loaded. You can see the output of this template by hitting the "cats.cfm" page through your Web browser. Everything is in place on the ColdFusion end; now we need to load the information from our template into Flash.

The Client Side
Now that we've tackled the server code we'll look into the Flash end of things. "Flashmenu.fla" is the Flash source file we'll be dealing with in this tutorial. Our file mainly consists of two movie clips: "cat" and "subcat." You can view all symbols used in our Flash movie by going to Window>Library or using "Ctrl+L". This displays the Flash library for the current movie. You'll see two folders that contain all of the components used in our navigation menu. There are two layers in our movie; the top layer "AS" contains the ActionScript and the bottom layer "cats" holds the movie clip that we'll duplicate to create the categories in the menu.

Let's look at the code in frame 1 of the AS layer. You can activate the ActionScript window by double-clicking the frame, using the keyboard shortcut "Ctrl+Alt+A", or by going to Window>Actions. In the first frame you'll see the following code:

// Load the variables from ColdFusion
loadVariablesNum ("cats.cfm", 0);
// set the initial cat clip visibility to 0
cats_clip._visible=0;
// initialize the selected variable
selected="default";

You'll see that we load the variables from the ColdFusion template we created earlier. One important thing to note about loading variables from CF: if you would like to test inside of Flash make sure to use an absolute URL:

// Load the variables from ColdFusion
loadVariablesNum ("http://localhost/cats.cfm", 0);

This saves a lot of time when developing an application because you don't have to publish the movie every time and test it. It also helps for debugging purposes so you can use the Flash debugger and output your variables to the window. Once you have created an absolute path to your template, you can test the movie by going to Control>Test Movie or using "Ctrl+Enter". If you have configured everything correctly, the navigation menu should display with all the categories and subcategories. When a category is selected, the menu will expand so you can select a subcategory. When a subcategory is clicked, you'll be sent to the corresponding Web site.

Let's take a closer look into how the menu is dynamically created. First, the ActionScript in frame 3 looks like:

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

When the LoadVariables command is used we don't immediately have access to the variables. Frame 3 tests to see if the "loaded" variable is equal to 1. If so, we'll go to frame 4 and stop or go back to frame 2 and keep looping until the "loaded" variable equals 1. Remember when we created the ColdFusion template we placed this variable last. This means that if Flash sees this variable, then everything has completely loaded. Frame 4 might be a bit intimidating at first, but a simple explanation should clear everything up (see Listing 4).

Our ColdFusion variables are now fully accessible to us in the main timeline. So the first thing we do is take the "cats" variable and split in into an array. This will allow us to have easy access to the elements in the array, which you'll see shortly. We then set a "ystart" variable that gets the y position of the main cat clip. This will be our reference point when we begin duplicating the movie clips. No matter where we place the initial clip on the stage, the "ystart" variable will be dynamic and our menu will be built correctly. Also, movie clips are referenced through an instance name, in this case "cats_clip". You can set the instance name by accessing the instance panel under Window> Panels>Instance or using "Ctrl+I". Each movie clip can have its own instance name with its own set of properties. This is one reason Flash is so powerful, we can create a symbol one time and use it over and over without drastically increasing file size.

We now loop through the categories, duplicate the "cats_clip", and set the category names. Inside each category movie clip exists a clip called "subcat_container". This container clip holds the subcategory movie clip and the ActionScript that duplicates the subcategory clips. The ActionScript in this clip is similar to the previous code snippet.

We need to consider what happens when the user clicks on a category or subcategory. Inside the "cats_clip" is a button containing the ActionScript that controls the movie clips when a category is selected. When a category is clicked, the selected clip that displays the subcategories will play. The other clips are repositioned along the y axis to accommodate this. When a subcategory is clicked, the URL loaded from ColdFusion is targeted and the user is sent to that Web site.

Conclusion
The power of this tutorial lies in how dynamic the menu is. If a new category and subcategory are added to the database, the Flash file is automatically updated with the new information. All clips will reposition accordingly and everything should be in working order.

There are a few things to consider when implementing this in a production environment. This tutorial was developed to demonstrate the power of integrating ColdFusion and Flash. It's not very efficient to query the database for categories and subcategories every time the page is loaded. This information might not be frequently updated, therefore query caching might be a good idea. Another suggestion is to set a scheduled task every night to query the database and write the output to a text file. This text file can be loaded into Flash and will reduce the load on the server.

If you have any questions about this article or the source files please feel free to contact me at dennis@zapdesigns.com. For more information on integrating Cold-Fusion and Flash, check out www.flashcfm.com.

More Stories By Dennis Baldwin

Dennis Baldwin is a software developer for SensorLogic Inc, an M2M application service provider. He also runs and maintains an online community for Flash and ColdFusion developers at www.devmx.com.

Comments (8) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
owen 10/23/01 04:48:00 PM EDT

The article was very informative. The source files had to be downloaded from www.flashcfm.com (the ones on this site did not work).

Overall, nice article!

Joe 09/13/01 03:53:00 PM EDT

This article was very thorough and not for the novice developer. I have looked through the source files and implemented the menu on my own site. The code was well documented and very straight forward to follow. A job well done.

John Bentham 09/05/01 03:48:00 PM EDT

Perhaps you should have purchased a book on how to write English.

Dr. Michael Maloney 09/01/01 04:09:00 PM EDT

the author is makeing a great point and should not be cricized that it is a unavoidable fact that nothing is free, I have puchest the book, with this artical and am greatly thankful of my decison.

velum 08/31/01 04:36:00 PM EDT

the provided .swf work fine but not the .fla. What's missing from the flash file? I open the .fla in Flash5, export to .swf without making any changes, and all I get is the #cat# variable in the menu.

Reader 08/29/01 06:47:00 AM EDT

Should have let the article fully opened.. I've wasted my time reading the first page ...

Douglas Campbell 08/28/01 10:10:00 PM EDT

I've been looking for something like this for a while. Very disappointed I couldn't get past page 1 though. Guess I'll have to hunt for the journal, but I know it'll be difficult or impossible to find here in Russia. What a pity!!

Colin Blunt 08/27/01 09:47:00 PM EDT

Absolutely no use, unless you going to give all the information.

Regards
Col