Tutorials > Tutorial 2: Shared Text

  

Tutorial 2: Shared Text

This tutorial uses a remote shared object to allow users to share text. Any user can update the text on the stage, and other users can see it immediately updated on their own stages.

 
Viewing the application

In a Web browser, open two instances of tutorial_text.html. Type in one text box to see the other immediately updated.

 
Re-creating the application

The tutorial_text.fla file uses only a few lines of code to connect to the Flash Communication Server, create and connect to a remote shared object, and update the shared object on the Stage that all connected clients are viewing.

This tutorial introduces the idea of shared objects (for more information, see the <Body italic>Client-Side Communication ActionScript Dictionary). In this tutorial, you call SharedObject.getRemote("sharedtext", new_nc.uri, false). These shared objects are synchronized with the server over an RTMP connection. Shared objects consist of name-value pairs and can be updated by any client connected to the application and the shared object.

Before you start to re-create the application, see "Creating your working environment" in Developing Communication Applications.

 
To create the user interface:

1

In the Macromedia Flash MX authoring environment, select File > New to open a new file.

2

From the toolbox, select the Text tool and draw a text box.

3

In the Property inspector (Window > Properties), select Input Text for the type of text box, select the Show Borders Around Text option, and give it the instance name TypingStage.

4

Save the file as tutorial_text.fla.

5

To register your application with the server, create a subdirectory with the same name as your application, tutorial_text, in your /applications directory in the Flash Communication Server directory.

 
To write the Client-Side Communication ActionScript:

1

Select the keyframe in the Timeline and open the Actions panel (Window > Actions).

2

Open a connection to the server.

 
// Open connection to server
client_nc = new NetConnection();
client_nc.connect("rtmp:/tutorial_text/room_01");

3

Handle the messages coming from the server.

 
// Handle status message
client_nc.onStatus = function(info) {
	trace("Level: " + info.level + "   Code: " +  info.code);
}

4

Initialize the typing stage.

 
TypingStage.text = "";

5

Get a remote shared object to hold the text data from the client.

 
// Create a remote shared object. client_nc.uri is the URI of the
// NetConnection the shared object will use to connect to the
// server.
text_so = SharedObject.getRemote("sharedtext", client_nc.uri, false);

6

When you get a shared object, make sure you connect to it.

 
// The following is very important, nothing happens otherwise
text_so.connect(client_nc);

7

Create an onSync callback function to handle the text message.

 
// Each time something changes in the shared object, the server
// sends out a synchronization message. This onSync handler
// updates the movie based on the information.
text_so.onSync = function(list) {
	
	// Update the text area in the typing stage with the latest
	// text from the shared object. The 'for' loop condition searches
	// through the list of changes, and the 'if' condition ensures
	// that we apply the relevant change only if someone other than
	// this client has changed the value.
	for (var i = 0; i < list.length; i++)
		if (list[i].name == "textValue" && list[i].code != "success")
		{
			TypingStage.text = text_so.data.textValue;
			break;
		}
};

8

When the text in the typing stage changes, update the shared object with the new text.

 
// Update the shared object every time the user types in new text
TypingStage.onChanged = function()
{
	text_so.data.textValue = TypingStage.text;
};

 
To test your application:

1

In the Flash MX authoring environment, after you have saved your work, publish it by selecting File > Publish.

2

Open two instances of the SWF file.

3

Type in the text box of one instance to see the other immediately updated.