Tutorials > Tutorial 3: Shared Ball

  

Tutorial 3: Shared Ball

This tutorial allows users to move a ball around the screen and to watch while other participants move the same ball around. It demonstrates that graphics, as well as text, can be shared between users.

 
Viewing the application

In a Web browser, open two instances of tutorial_sharedball.html. Move the ball in one instance to see the other immediately updated.

 
Re-creating the application

The tutorial_sharedball.fla provides the ActionScript for creating a remote shared object that synchronizes and updates the ball position for each user.

This tutorial uses a graphic shared object and the onSync event handler.

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 Circle tool and draw a circle.

3

Double-click the circle to select it, then choose Insert > Convert to Symbol.

4

In the Convert to Symbol dialog, name the symbol ball and click OK.

5

With the ball symbol selected on the Stage, in the Property inspector (Window > Properties), give it the instance name SharedBall_mc.

6

Save the file as tutorial_sharedball.fla.

7

To register your application with the server, create a directory with the same name as your application, tutorial_sharedball, 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

In the Actions panel, stop the progress of the movie.

 
stop();

3

Create a new network connection to connect to the server and handle any status messages with the onStatus function.

 
// Create a connection
client_nc = new NetConnection();
// Show connection status in output window

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

// Connect to the application
client_nc.connect("rtmp:/tutorial_sharedball/room_01");

4

Create a remote shared object to hold the x/y coordinates of the ball.

 
// Create a remote shared object
ball_so = SharedObject.getRemote("position", client_nc.uri, false);

// Update ball position when another participant moves the ball
ball_so.onSync = function(list) {
	SharedBall_mc._x = ball_so.data.x;
	SharedBall_mc._y = ball_so.data.y;
};

5

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

 
// Connect to the shared object
ball_so.connect(client_nc);

6

Create the function that updates the shared object data with the position of the ball.

 
// Manipulate the ball
SharedBall_mc.onPress = function() {
	this.onMouseMove = function() {
		ball_so.data.x = this._x = _root._xmouse;
		ball_so.data.y = this._y = _root._ymouse;

		// Constrain the ball to the stage
		if (SharedBall_mc._x>=Stage.width) {
			SharedBall_mc._x = Stage.width - 50;
		}
		if (SharedBall_mc._x<=0) {
			SharedBall_mc._x = 50;
		}
		if (SharedBall_mc._y>=Stage.height) {
			SharedBall_mc._y = Stage.height - 50;
		}
		if (SharedBall_mc._y<=0) {
			SharedBall_mc._y = 50;
		}
	};
};

7

When the user releases the ball, remove the hold on it.

 
// Release control of the ball
SharedBall_mc.onRelease = SharedBall_mc.onReleaseOutside=function () {
	delete this.onMouseMove;
};

 
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

Move the ball in one instance to see the other immediately updated.