Macromedia - Developer Center: A ColdFusion User's First Look at Macromedia Flash MX and Macromedia Flash Remoting

Home / Developer Center / ColdFusion MX Application Developer Center

Tom Link
Senior Product Support Engineer
Macromedia

I have programmed with Macromedia ColdFusion for several years, but until recently had never looked at Macromedia Flash. ColdFusion MX incorporates a new technology called Macromedia Flash Remoting, which allows ColdFusion to interact with Macromedia Flash movies. While this was possible before, Macromedia Flash Remoting handles all the "plumbing" for the developer, and does so with great efficiency. Coupled with new UI (User Interface) Components in Macromedia Flash MX, Macromedia Flash Remoting allows developers to build rich applications far beyond the capabilities of HTML and without the compatibility headaches of JavaScript and DHTML.

Having never seen Macromedia Flash before (and since I don't have a creative bone in my body), I was a bit overwhelmed by the prospect of learning to use Macromedia Flash (a tool for "designers" not "developers", or so I thought). I was happy to find that working with Macromedia Flash MX to build a simple application using Macromedia Flash Remoting was relatively painless.

This brief demonstration shows how I took an existing Macromedia Flash movie and modified it to incorporate Macromedia Flash Remoting Components and ColdFusion.

Hopefully, it will serve as a useful introduction that ColdFusion developers can use to leverage Macromedia Flash MX in next generation applications.

Here is the ActionScript for each movie. (link will open in a new window). This side-by-side comparison will show you the differences between ActionScript for a Macromedia Flash Movie and ActionScript that uses ColdFusion MX and Macromedia Flash Remoting.

Here is the ColdFusion service (page) getSlide.cfm (it is available in the ZIP file at the end of this article):

<!--- Get the incoming parameters --->
<cfset photoID = flash.params[1]>

<!--- dummyQuery.cfmc creates a query manually 
	(so that I don't need a DB for this example) --->
<cfinclude template="dummyQuery.cfm">

<!--- query of queries from the manually built query --->
<cfquery name="qSlide" dbtype="query">
	select photoid,description,filename 
	  from qAllSlides
	 where photoID = #photoID#
</cfquery>

<cfset slideRecord.description = qSlide.description>
<cfset slideRecord.slidePath = qSlide.filename>

<!--- Return the results --->
<cfset flash.result = slideRecord>

Note: This query recordset is created manually instead of querying a database. While you would normally query a database, I created the recordset manually for this tutorial so that you would not be required to configure a data source.

You'll need to install the following software before running the code:
•	Macromedia Flash MX
•	Macromedia ColdFusion MX
•	Macromedia Flash Remoting Components (This allows you to access CFML from your FLA within Macromedia Flash MX.)

Look at the first FLA file in Macromedia Flash MX.

Extract the contents of remotingslideshow.zip (618 KB) to your ColdFusion MX webroot.

Note: If you unzip it to "[webroot]/myGatewayApps/slideshow" you will not need to modify the "serviceAddress" variable in your ActionScript. The steps that follow assume you extracted to this location.

Open Macromedia Flash MX.

Note: Ensure that you are using the Developer "panel set"; Window -> Panel Sets->Developer [choose your resolution].

Open the simpleSlideshow.fla file.

In the Timeline, click the "Action" layer. In the "Actions" window, the ActionScript displays.

In the Action window, you may need to click the blue arrow (bottom right-hand corner) to change the View Option to Expert Mode. This will improve your view of the Actionscript code.

Test the movie. Go to the Control menu ->Test Movie. Click the slideshow buttons to move forwards and backwards to test the movie.

Publish the movie. Go to the File menu. Select Publish.

Note: When you publish a movie, Macromedia Flash creates a SWF file and an HTML file that calls the SWF file. Both files have the same name as the FLA file and are created in the same directory.

Now, call the movie in your browser using the following URL: http://localhost:8500/myGatewayApps/slideshow/simpleSlideshow.html .

Note: This assumes ColdFusionMX is running on port 8500 (the default port if you install ColdFusion MX with the standalone web server). Modify the port number if this is not the case.

Publish the simpleSlideshow_CF movie using steps 5 and 6 above.

Browse the simpleSlideshow_CF ColdFusion generated movie at the following URL: http://localhost:8500/myGatewayApps/slideshow/simpleSlideshow_CF.html.

Note: If you did not extract to "[webroot]/myGatewayApps/slideshow/", change the assignment of the serviceAddress variable to the appropriate location, on the second to last line in the ActionScript.

When the movie appears, you are successfully running Macromedia Flash MX with the Macromedia Flash Remoting Components and Macromedia ColdFusion MX.

Challenges

•	Experiment with creating a text area to handle dynamic text by following the Macromedia Flash tutorials. To access this information, browse the following file: [Your Macromedia Flash MX install path]\Help\Flash\html\tut_FlashIntro30.html. This is one of many useful tutorials that can be accessed through the Macromedia Flash MX Help menu. Select Tutorials in the menu.
•	Create a textarea in this movie, and dynamically populate it by modifying the ActionScript. You can use the simpleSlideshow_CF.fla file and ActionScript as a guide.
•	Have fun and see what you can do to extend the Macromedia Flash MX examples.

Where do you go from here?

•	The simple slideshow demonstrated in this sample application is a simplified version of a sample movie that ships with Macromedia Flash MX called "load_images." The version that ships with Macromedia Flash MX fades images in and out as you browse. This is slightly more complicated to accomplish using ColdFusion.
•	The current application limits your images to five. How would you modify it to dynamically set the number of images based on records in a database?

About the author

Tom Link is a Senior Product Support Engineer in the Macromedia Strategic Onsite Services group, working onsite with clients worldwide to tune and troubleshoot the ColdFusion platform. He is a Certified Advanced Coldfusion Developer.