We believe that Mesmotronic Multiuser Server 2 is the quickest, easiest way to create real-time multiuser and with the Adobe Flash Platform, including Adobe Flash, Flex and AIR, and if you haven’t already installed Mesmotronic Multiuser Server, you can download the latest version here.

This tutorial shows how to create a basic peer-to-peer application to track other users’ mouse positions using Mesmotronic Multiuser Server 2 and ActionScript 3 (AS3), so it’ll work regardless of whether you’re using Flash, FlashDevelop or Flex Builder. We’ll take a look at Flex/MXML and client-server applications at a later date.

We’re assuming at this point that you’ve already installed Mesmotronic Multiuser Server 2, made the ActionScript API available to your chosen IDE and have a reasonable understanding of AS3.

The first thing you need to do is create a new document class which extends flash.display.Sprite, let’s call it Main, and import the classes you’ll need to use the Mesmotronic Multiuser Server API:

import com.multiuserserver.client.MultiuserServerClient;
import com.multiuserserver.events.MultiuserServerEvent;
import flash.events.IOErrorEvent;

Next, declare an instance of the MultiuserServerClient class. Once instantiated, this will handle all of the communication with the other clients:

public var client:MultiuserServerClient;

You’re now ready to set up your connection by instantiating the MultiuserServerClient class and configure your connection. For this example, we’ll do everything in the class constructor, but the chances are you’ll want to do things like connect via a button in your own multiuser applications:

public function Main()
{
    client = new MultiuserServerClient();
    client.addEventListener(MultiuserServerEvent.CONNECT, onConnect);
    client.addEventListener(MultiuserServerEvent.CLIENT_DISCONNECT, onClientDisconnect);
    client.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
    client.delegate = this;
    client.connect("localhost", 2040, "AS3Tutorial", 10);
}

The events we’re using are pretty self-explanatory: CONNECT is dispatched when you initially connect to the server, CLIENT_DISCONNECT when a client disconnects and IO_ERROR if there’s a problem with your connection.

The delegate property indicates where the functions you’d like to make available to other clients and/or the server live. In this case, we’re setting it to the current class.

The connect method has 4 required parameters: server name (or IP address), server port (2040 is the default), application name (this must be unique for each application you create) and the maximum number of clients that can be in each room at any give time.

In this example, we’re assuming that you’ll just want to test locally, but if you’d like to test over a network, simply change localhost to the name or IP address of the computer running Mesmotronic Multiuser Server.

Everything you need to connect to Mesmotronic Multiuser Server is now in place, so now we need to create the properties and methods to actually make something happen once you’re connected.

First, we import a the MouseEvent class:

import flash.events.MouseEvent;

Then we create the properties and methods we need to bring the application to life:

public var cursors:Array = [];

// Announce the connection and start to broadcast your cursor position
public function onConnect(event:MultiuserServerEvent):void
{
    trace("You've connected to Mesmotronic Multiuser Server!");
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}

// Remove the blobs when clients leave
public function onClientDisconnect(event:MultiuserServerEvent):void
{
    var cursor:Sprite = cursors[event.clientIndex] as Sprite;
    removeChild(cursor);
    cursors[event.clientIndex] = null;
}

public function onIOError(event:IOErrorEvent):void
{
    trace("Connection Error: is Mesmotronic Multiuser Server installed and running?");
}

// Broadcast your mouse position
public function onMouseMove(event:MouseEvent):void
{
    // The run method is used to call a function on 1 or more clients
    client.run("setCursorPosition", [client.info.clientIndex, mouseX, mouseY]);
}

// This is the function that clients call to let you know where their mouse cursor is
public function setCursorPosition(clientIndex:uint, cursorX:Number, cursorY:Number):void
{
    var cursor:Sprite;

    // Create a coloured blob to represent the client's cursor if it doesn't exist
    if (!cursors[clientIndex])
    {
        cursor = new Sprite();
        cursor.graphics.beginFill(0xCCCCCC/client.info.clientsPerRoom*clientIndex);
        cursor.graphics.drawCircle(0,0,10);

        cursors[clientIndex] = addChild(cursor);
    }

    cursor = cursors[clientIndex] as Sprite;
    cursor.x = cursorX;
    cursor.y = cursorY;
}

That’s it! Just publish the class in the normal way, open up a few copies of the SWF and watch in amazement as the blobs follow your cursor around the screen. It really is that easy.

For more information about the events, properties and methods of the MultiuserServerClient class, take a look at the API reference or browse through the examples included with your Mesmotronic Multiuser Server installation, a link to which can be found on your Start Menu.