Flash Remoting in Ten Minutes Tutorial

[Warangel]

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 (or equivalent) 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 (www.gearhost.com). 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.yourdomain.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 images table in our 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.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Warangel]

PS. You can view a working example of this tutorial at :

http://webdev.webleicester.co.uk/test/slideshow/ * this is no longer working... sorry.

My good friend Alex allows me to play on his server. Thanks Alex.

Also note, there are no preloaders in this example.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Flash Goddess]

Thanks Warangel!

Hmm, I don't have Flash Remoting set up with my hosting company. I will definitely have to upgrade in the future.
_________________
:: FAQ :: Search :: Books :: Tutorials ::
www.FlashGoddess.com :: inspire :: create ::

[themonarch]

Ok, got an error:

NetServices info 2: slideProvider_Status was received from server: Service threw an exception during method invocation: No service named slideshow.slideEngine is known to Flash Remoting.

Do I need to change something on the server, in flash actionscript, or my coldfusion component page?
_________________
Nancy (themonarch)
monarchdesignstudios.com

[Warangel]

ok, in your localhost environment, you need to have a slideshow folder. In that folder, you MUST have slideEngine.cfc

That is the way this tutorial is setup. Are you using CFMX with mySQL? Or just doing PHP? I really don't know if remoting even works with PHP very well. I have strictly been using .NET and CFMX.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[themonarch]

Yeah, CFMX with MySQL. Ok, got my cfc working, I think, because when I browse directly to it (http://localhost:8500/slideshow/slideEngine.cfc, I get this message, which looks pretty positive:

slideshow.slideEngine
Component slideEngine


hierarchy: WEB-INF.cftags.component
slideshow.slideEngine

path: C:\CFusionMX\wwwroot\slideshow\slideEngine.cfc
Populates flash array with image information.
properties:

methods: slideProvider

* - private method

slideProvider
remote any slideProvider ( )

Retrieve the slide info.

Output: enabled
_________________
Nancy (themonarch)
monarchdesignstudios.com

[themonarch]

It works! Totally freakin awesome!!
This is my local url:
http://localhost:8500/howpeoplegrow/slideshow.html

Whoot! Whoot! Remoting party in da house!
_________________
Nancy (themonarch)
monarchdesignstudios.com

[Warangel]

One thing there. Do you have any other web server installed??? If you do, you probably don't need the port 8500 at the end.

Also, you can let other people from outside of your house see it quite easily. If you are behind a firewall, enable port 80 for the web. If you aren't, just goto www.whatismyip.com and that is your IP address on the Net, and we can look at it from here. Won't that be fun???

On to lesson two in remoting now I guess??? Congrats. I am happy you are enjoying it. I think remoting is the bomb.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[themonarch]

Oh, yeah, I got webservers running all over the place. I've got Apache piped to 80, IIS 5.1 piped to 8080, and then there's CF and it's version of a webserver running on 8500.

Most excellent - I'll give the firewall a tweak and let you know. This is totally fun! I'm working today thru the tutorial by Ben Forta in CFMX Web App Construction Kit on the part for Flash Remoting.
_________________
Nancy (themonarch)
monarchdesignstudios.com

[Flash Goddess]

[Warangel]

nononononono!!!! Stop that Forta tutorial. It will confuse you. He has an entirely different approach then I do, not really using the remoting in the best way possible. I will be adapting that tutorial for here soon, so please just don't get confused !!!!!
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[themonarch]

Ok, can you guys see my tutorial here:

http://192.168.1.1:8500/howpeoplegrow/slideshow.html
_________________
Nancy (themonarch)
monarchdesignstudios.com

[Warangel]

no, and they won't be able to. That IP address is a local address. Use www.whatismyip.com to find out what your IP address to people OUTSIDE of your firewall.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[themonarch]

Right-o. Ok, here it is:

http://216.135.192.110:8500/howpeoplegrow/slideshow.html
_________________
Nancy (themonarch)
monarchdesignstudios.com

[Warangel]

nope. Nothing. Might be your firewall. Make sure you enable port 80. Also, you don't need port 8500 showing for a remote host. Still doesn't work if you take that off, so I am thinking you just don't have the firewall set.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.