HostMySite.Com is sponsoring this tutorial, please visit their site today!

Flash Remoting in 10 minutes by: Marcus J. Dickinson

[Download in PDF Format] [Download in FlashPaper Format]

Flash Remoting in 10 minutes

By now, you are looking at this title and perhaps thinking to yourself, Remoting in ten minutes? No way. Well, I say yes, most definitely. Flash Remoting is Macromedia’s newest tool for communicating Flash to a database. It is faster and more efficient than any previous method of database communication for Flash. It has many key features, which will make it a welcome asset to your arsenal of tools. Here are a few key features of the Flash Remoting MX:

1. The authoring tools are FREE
2. The Server Tools are enabled by default on a CFMX Server install
3. You can preview from the player directly. No need for uploading to test.

There are, of course, many other great reasons to use Remoting, and that is the focus of this quick tutorial. We are going to create a slide show, using nothing but Remoting, in under ten minutes. You can download the source files for this tutorial from the following address:

http://www.flashgoddess.com/tutorials/slideshow.zip

Now let’s look at our checklist, and make sure we are ready to go.

REMOTING CHECKLIST
  • I have access to a Server with Flash Remoting installed (localhost environment, CF Server, or Linux Server with Remoting installed)
  • I have the Flash Remoting Components installed on my authoring machine
  • I have MS Access installed on my authoring machine, and know how to use it

CHECKLIST FAQs

Q. I have read my checklist, and am not sure on the first two points. How do I know if my webhost supports Flash Remoting?
A. Well, I use Gearhost. I find their pricing and service excellent. And, of course, if you sign up with them, mention my name. But even if you don’t, it is easy to tell if you have Remoting on your server. Simply type in the following, where www.youdomain.com is actually your domain name.

http://www.yourdomain.com/flashservices/gateway

If this page is blank, you have remoting installed.
If you receive an error, page not found, you don’t.

Q. I have checked, and my server does have remoting. How do I know if I have it installed on my machine?
A. Did you download the necessary authoring components from this link?

http://www.macromedia.com/software/flashremoting/downloads/components/

Q. I think I might have installed them before, but I can’t remember. Is there any way for me to check?
A. Of course there is. Open Flash, and look under Help in the menu at the top. Does it have an item called “Welcome to Flash Remoting”? If it does, you have the authoring components installed.

STEP 1 Building the Backend

In my experience, I have always built the backend first. I do this because I have so many options for testing and ensuring functionality before I even think of adding Flash to the project. So for this tutorial, we are building the backend first.

Open MS Access and create a new database. Any database software will work, of course. I chose Access as it is easy to use, and convenient. I created a new database, and called it slideinfo. I choose Design View to create my table for this application. I called my table “images”. I have two columns in my table, imageID and imageTitle. ImageID is an autoNumber, and is my primary key. imageTitle is a memo field, so I can type more in it than I could had I chosen text.

I begin by typing some descriptive text into my imageTitle field. This causes the number 1 to appear in imageID. I do this until I have total of nine rows. I then save my database.

In my project folder, I create an “images” folder, and save my actual images for the slide show there. They are titled image1.jpg, image2.jpg, image3.jpg, etc…., all the way up to image9.jpg. I MUST have one image for each record in the database, or my slide show will not work properly.

Next, I move into the ColdFusion Administrator, and setup my slideinfo.mdb as a datasource called slideShow. I will not be covering that in this tutorial, as it has been covered in previous ColdFusion tutorials.

I am now ready to move on.

STEP 2 Making the Middle

We are going to use CFMX for this tutorial for many reasons. One, Remoting was designed to work seamlessly with Coldfusion. Two, Coldfusion is the most robust middleware I have found, and easy to learn. Finally, CFMX allows us to use components, which are incredibly extensible, and very powerful.

Begin by opening Dreamweaver MX (or your preferred CF editing tool), and create a new file. This particular component is not very complicated. All we need to do to build our slide show is to retrieve the necessary values from the database.


<cfcomponent hint="Populates a Flash array with image information.">

The first advantage of using a component is that we can use functions, which can be called directly from any external source. We give our function a name, just like we would anywhere else, and give it remote access. Remote access is the key here. It allows any external object to call this function. Without it, we can do nothing.

<cffunction name="slideProvider"
                hint="Retrieve the slide information."
                returntype="any"
                access="remote">

So now we say what we want our function to do. Again, for our tutorial, it is quite simple. We create a query to the database. We call it retrieveSlides (just a name), and make sure it is run against the datasource we previously setup in ColdFusion, which was entitled “slideshow”.

<cfquery name="retrieveSlides" datasource="slideShow">

Then we run our query. In this instance, we just want to select all the images from the datasource.

  SELECT *
  FROM    images
</cfquery>

Then we return the values of our query to use them in our application.

<cfreturn retrieveSlides>

</cffunction>
</cfcomponent>

I save this as slideEngine.cfc and I am ready to move on to the final step.

STEP 3 Flashing the Frontend

Now we are on to the fun stuff.

Open Flash MX. From the File menu, choose New from Template, and go down to web. When we installed Remoting, it added a template to Flash MX for us. Choose this web template. All the code we need for remoting is inserted for us.

The first thing we do is include the necessary links to external Actionscript files that enable Flash Remoting.

#include "NetServices.as"
//#include "NetDebug.as"
//#include "Dataglue.as"
Next, we initialize the connection. This is where Flash tries to connect to our ColdFusion Component, which we are about to define as a “service” to Flash. By making it a service, we can simply pass information to it at any time.

if (inited == null) {
   inited = true;
   NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");
   gateway_conn = NetServices.createGatewayConnection();
   myService = gateway_conn.getService("slideshow.slideEngine", this);
   myService.slideProvider();
}

Let’s dissect the above code. This will only run once, as when we first run the app, inited will equal null. The first line sets inited to true, so this condition will never run again. It then establishes our “gateway” as localhost, as we are testing locally. I have a ColdFusion Server running locally, so this will work. Flash Remoting is powered on the server end, so this gateway is successfully created. Next, it looks at my slideEngine.cfc page as a service. My project folder is called “slideshow”, and exists in my wwwroot folder. This is very important. The getService line above says “slideshow.slideEngine”. It is looking in a path structure, starting with the folder slideshow, looking for a CFC called slideEngine. Make sure your structure is the same, or you will get errors in Flash. The last line runs a function located externally, called slideProvider, which as you will remember from step 2, is the name of our function inside of our CFC.

So we have just told Flash to create a connection, and then run an external function called slideProvider. The great thing about Flash Remoting is that it will automatically return a “result” object to us in Flash, which we can directly manipulate. The other great thing is that we can create our own function to manipulate that data directly, once it is received. We do this by creating a “whateverTheServiceWas_Result” function. So in this case, we will create a function called “slideProvider_Result” which will pass all the results of our slideProvider ColdFusion function quickly into Flash.

function slideProvider_Result(result) {

I load an image directly into my imageHolder MC so that there is something that shows up immediately, while I wait for the setInterval action to fire for the first time.

    imageHolder.loadMovie("images/image1.jpg");

Result is returned to us as an array in this case. We want the descriptive text from our database to show under our photo, so we access that information in the following way:

notes.text = result.items[0].imageTitle;

We then set up the setInterval to rotate the slides:

  thisImage = setInterval(showImage, 7000, i=1);

function showImage() {
  imageHolder.loadMovie("images/image"+result.items[i].imageID+".jpg");
  notes.text = result.items[i].imageTitle;
  if (i<result.items.length-1) {
     i++;
  } else {
     i = 0;
  }
 }
}

This is the initial creation of the textfield:

  _root.createTextField("notes",2,20,320,100,20);
  _root.notes.autoSize = true;

This is the initial creation of our image holder:

  _root.createEmptyMovieClip("imageHolder", 1);
  imageHolder._x = imageHolder._y=20;

And we are done.

FINAL THOUGHTS
Please keep in mind that this is a simple example to help you understand the nature of Flash Remoting. It is a very powerful tool. Also, you are more than likely going to run into many issues as you do this tutorial, and see many new debugging messages as you experiment. I cannot cover all of these possibilities in one tutorial. However, you can visit our Flash Remoting/Flash Comm Server MX forum at www.flashgoddess.com/forum/index.php where I would be happy to answer your questions.
 

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Please rate this tutorial:

Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase: