Flash client-server communication using Flash Remoting and WebOrb. Tutorial.

What you will learn…

– How to send data from flash movie to server using Flash Remoting
– What your server should have for successful communication with flash movie.
– Arrangement of flash-server dialog, sample actionscript code needed.

What you should know…

– You must be familiar with ActionScript classes, Flash IDE and components.
– You should have a basic knowledge of PHP
– You should have an access to your web server and be able to install needed packages on it

Intro.

It’s not a secret that Flash was born as a tool for designers, letting them to create and integrate vector animated graphics into web content. Later it grew up, ActionScript language was implemented, which allowed animations to have some logic, rules, be programmed.
With ActionScript2, Flash programming came into OOP way.
ActionScript3 presented new facilities and I believe AS became a programming language in true.

While transforming from Flash of banners and menus to Flash of Web applications, the needs of ActionScript developers increased a lot. And in this article I will shad some lights on implementation of a communication between your flash movie and server. Someday you will meet a requirement to save data to server. And what to begin with is described below.

As an illustration we will create a flash class which will save a message into a file on server.
Let’s create a very simple guestbook with flash form to post new messages.
For this article I will talk about Flash 8 IDE and ActionScript2.

Create Flash Form.

Open our Flash IDE and create new Flash Document. Put needed elements on it, just as it shown on Figure 1.

flash form

Figure 1. Simple Flash Form content

Here we have couple of text fields and a button to send data to server. We named them “txtName“, “txtComment” and “sendButton” respectively. For easier implementation, we convert all this controls to a movie clip and link it to as2 class file. To do so, select all controls and then press Ctrl+F8, put name ‘form1‘ as a movie clip name. Then, to link it to the future actionscript class, you need to rightclick on ‘form1‘ in Library, and select “Linkage…” item. We will create a class named sendMessageForm, so the form should be filled like shown on Figure 2.

Linkage dialog
Figure 2. Linking movieclip with actionscript class

That’s it. Now we go a bit into actionscripting. Create a new .as file and name it just as we will name our class “sendMessageForm.as”

Refer to Listing 1 and see a sample code we will need.

import mx.utils.Delegate;
 
class sendMessageForm extends MovieClip
{
 
	function sendMessageForm()
	{
		this["sendButton"].onRelease = Delegate.create(this,sendMessage);
	}
 
	private function sendMessage()
	{
		var name:String = this["txtName"].text;
		var comment:String = this["txtComment"].text;
 
		trace("name: "+name+"\nComment: "+comment);
 
                                //here we will add Flash remoting code later, to send data to server
 
	}
}

Listing 1. Basic AS2 class, prepared to send data to server

Now, if you test your movie, and input any data into Name and Comment field, they will be traced in Output window.

ActionScript Class structure

In Listing 1 we are accessing the button and textfields via ‘this[]‘ , this is possible as we have the instances with proper names created in the ‘form1‘ movie, which was then linked to sendMessageForm class. This is pretty useful technique, which may allow you to control complex timeline animations from within the code.

One more helpful thing used in the above listing is Delegate class. This utility class allows calling the function in needed scope. In our case we need onRelease button handler to interact with our class’ data, which will not be easy to implement if assigning the function directly as shown in Listing 2.

class sendMessageForm extends MovieClip
{
 
	function sendMessageForm()
	{
		this["sendButton"].onRelease = function()
		{
			var name:String = this._parent["txtName"].text;
			var comment:String = this._parent["txtComment"].text;
 
			trace("name: "+name+"\nComment: "+comment);
 
		}
	}
}

Listing 2. Accessing the movie clip’s data via _parent reference

In the listing ‘this’ is a reference of sendButton, and we need to use _parent to access sibling controls.
Delegate class helps us to resolve the scope issue and function sendMessage() of the sendMessageForm class will be called when sendButton’s onRelease event occurs.

Install Flash Remoting Components.

To proceed with Flash Remoting you need to download and install it from Adobe website:
http://www.adobe.com/products/flashremoting/downloads/components/

When installed new entry should appear in Components pane. It’s Remoting Connector, placed under Data Components group. Note, you need to restart Flash IDE for this entry to appear. See Figure 3.

flash remoting

Figure 3. Remoting components installed and ready to be used.

Along with this installation, your Flash help content is updated with detailed info on Flash Remoting.

Prepare Server. Install WebOrb

Next step is to prepare our server to be ready for communication with flash movie, in particular, with Flash Remoting. Especially for this purpose Action Message Format (AMF) was developed and we need a gateway installed on our server, which supports that format.

For that purpose, I’d recommend trying WebOrb by Midnight Coders, which is free for personal and non-commercial usage. It’s available at http://www.themidnightcoders.net/downloadcenter/

For this article we will need WebOrb for PHP. Installation is pretty simple, you just need to unpack the archive. So you may setup it to any subfolder on the server. We have it installed locally at http://localhost/communication/

Now, you should note the following paths:
http://localhost/communication/WebOrb – it is a flash services gateway
http://localhost/communication/Services – the directory where all PHP services are located

Putting them all together.

Well, now we have everything ready to establish flash client-server communication.

See Listing 3 with just a few new lines of code where we create a service object, call the service method and set the response handlers. Note a bunch of new imports.

import mx.remoting.Service;
import mx.rpc.RelayResponder;
import mx.remoting.PendingCall;
import mx.rpc.FaultEvent;
import mx.rpc.ResultEvent;
…
	private function sendMessage()
	{
		var name:String = this["txtName"].text;
		var comment:String = this["txtComment"].text;
 
		//create service object, connect it to "SimpleGuestBook" service
		//which is located at http://localhost/communication/Services/ SimpleGuestBook.php file
		var service:Service = new Service("http://localhost/communication/Weborb/", null, "SimpleGuestBook", null, null);
 
		//call saveMessage method of SimpleGuestBook service, passing our values
		var pc:PendingCall = service.saveMessage(name,comment);
 
		//set handlers for service responds
		pc.responder = new RelayResponder(this, "getReply_result", "getReply_fault");
	}
 
	private function getReply_result(re:ResultEvent):Void
	{
		//this is called when service is called successfully
		//it returns a new url of saved message so navigate to it
		getURL(String(re.result));
	}
 
	private function getReply_fault(fault:FaultEvent):Void
	{
		trace("Error occurred while saving the message");
	}

Listing 3. Creating Flash Remoting service and setting the response handlers

The code is pretty self explanatory. The only question left is the service. How is it created? See Listing 4 for more info. There are just few lines of php code:

".$nameText." comment".$commentText."";
 
	  //save it to the server
	  file_put_contents($temp_url , $content );
 
	  //return url for flash to navigate to
	  return $temp_url;
	}
}
?>

Listing 4. SimpleGuestBook.php file. PHP service class

Note, this php file should be located at http://localhost/communication/Services/SimpleGuestBook.php

That’s it. Of course the functionality of the service is quite dummy, however it’s meant to show you the way you may create your great and powerful flash applications.

Summary and conclusion.

In this article you got the information about components of flash client-server communication. Free tools are available for fellow developers to create nice flash movies, which will have a bit more interactivity in them. WebOrb and Flash Remoting components have much more functionality that I have described here. Try them, test them and you’ll be definitely rewarded for your efforts.

P.S.: This article has been printed in Flash and Flex Developer magazine.

Please visit our book store for more tips and tricks described in good books that we recommend

6 Responses to “Flash client-server communication using Flash Remoting and WebOrb. Tutorial.”


  1. 1 Maali

    Hi

    I would like to build a Flash Client/Server Chat.
    Do you have any guid for this?
    I have allready bulid one in java, but in Flash looks much nicer and you do not need a java VM.

    Best Regards
    Maali

  2. 2 Paul

    If you are looking for server solution, I would suggest to take a look at Red5, which is free, unlike Flash Media Server 😉

    I can’t think of any particular guide for “building a flash chat”, but you can take a look at a ready solution offered by Boonex:

    http://www.boonex.com/products/ray/

  3. 3 Jay

    I would like to ask for the elaborate explanation on where the exact directory where I can extract the Weborb. I’m encountering difficulty in locating the http://localhost/communication/Services/SimpleGuestBook.php.And can I know the specific server that you are pointing where i can extract my Weborb downloaded files

  4. 4 Paul

    @Jay,

    Ok, let’s say your have some server with ftp access, right?
    Usually, there is ‘public_html’ folder, which contain all html pages or other data accessible. The index.html (the main html page for your website) must be there.
    Let’s say your domain name is http://www.weborbforflash.com and you want to access weborb just similar to the example shown above for localhost. Then you need to create ‘communication’ folder in ‘public_html’ directory and extract weborb in it, so your weborb installation will be accessible via http://www.weborbforflash.com/communication, or your services will be accessed like http://www.weborbforflash.com/communication/Services/yourWeborbServiceName.php

    Hope that’s quite elaborate explaination 😉 Let me know if not!

    Cheers,

  5. 5 Jay

    Thanks Paul for the explanation I’ll be following the steps that you stated above.I can have a clearer understanding of it now thank you so much and hope you will not be tired of helping out novice like me.More power.

  1. 1 Recent Faves Tagged With "remoting" : MyNetFaves

Leave a Reply