So, we’ve taken the decision to cancel 2.5 and continue development towards a new multi-platform release: Mesmotronic Multiuser Server 3.

More information coming soon…

Mesmotronic Multiuser Server 2.5 makes it even easier to add push data and real-time interactivity to you Flash, Flex and AIR applications by enabling ActionScript developers to build client and server functionality using nothing more than their existing knowledge and an easy-to-use ActionScript 3 API.

Watch this space for further announcements.

You can download the update here

Unlike the various desktop editions of Windows (XP, Vista and 7), you can’t simply an exception to the Windows Firewall settings or wait for the access dialogue to appear. Instead, you’ll need to update the Local Security Settings by running “secpol.msc /s” from the command line or Run… option on the Start menu; by default, Mesmotronic Multiuser Server uses port 2040 for applications and 2080 for administration.

The next step is to make the Admin Console available remotely by creating a virtual directory on one of your websites which points to the admin folder in the Mesmotronic Multiuser Server installation directory:

1. Open the Internet Information Services (IIS) Manager, found under Start > Administrative Tools
2. Expand Web Sites, in the left hand column, and click on the website that you would like to add the virtual directory to
3. Right click in an empty area of the right hand pane and select New > Virtual Directory… from the menu
4. Use the wizard to create a new virtual directory, entering an alias on the second screen, e.g. “admin”, and the full path to the admin folder on the third, usually C:\Program Files (x86)\Mesmotronic\Mesmotronic Multiuser Server 2\admin

Finally, you should change the admin password, “password” by default, by opening the admin console in a web browser and selecting the Configuration tab.

And that’s all there is to it.

There’s more information about how to configure Mesmotronic Multiuser Server here and if you don’t already have a server, there are a wide range of options available here.

A server-side application is a standard ActionScript 3 SWF like any other, except that it cannot display any graphics and extends the MultiuserServerApplication class, rather than Sprite or MovieClip. Applications can therefore be created using any ActionScript 3 IDE, including Flex/Flash Builder, Flash CS3/4 and FlashDevelop.

In this tutorial, we’re going to create a very simple server-side application which sends, on request, a random colour to the client which the client will then apply to the stage. As usual, we’re assuming you have a reasonable working knowledge of ActionScript 3 and have Mesmotronic Multiuser Server installed locally, with the API added to your library path.

The first step in creating any new server-side application is to create a new document class which extends MultiuserServerApplication. Your initial class structure would typically look something like this:

package
{
    import com.multiuserserver.server.MultiuserServerApplication;

    public class RandomColourApp extends MultiuserServerApplication
    {
        override public function main():void
        {
            // Entry point
        }
    }
}

The main entry point is called immediately after the application property of your class (inherited from MultiuserServerApplication) has been initialized, enabling you to communicate with the outside world, and should be used in preference to a class constructor. Although we won’t be doing anything here in this tutorial, this is where you would normally configure your application and add any event listeners you may require.

By default, all calls made to the server by clients, via the MultiuserServerClient call method, will invoke public functions of your application class. So, to allow clients to request a random colour, we need to add a function called getColour:

package
{
    import com.multiuserserver.server.MultiuserServerApplication;

    public class RandomColourApp extends MultiuserServerApplication
    {
        override public function main():void
        {
            // Entry point
        }

        public function getColour():uint
        {
            return Math.round(Math.random()*0xFFFFFF);
        }
    }
}

Now that the function is in place, you simply need to publish your class in the usual way and copy the resulting SWF, RandomColourApp.swf, to a folder of the same name within the applications directory of Mesmotronic Multiuser Server. Based on the default installation folder, this would be:

 C:\Program Files\Mesmotronic\Mesmotronic Multiuser Server\applications\RandomColourApp\

Once copied, your application is ready to go.

Now, all we need to do is create a simple client application to test that our server-side application works (the elements which relate to the server call are highlighted):

package
{
    import com.multiuserserver.events.MultiuserServerEvent;
    import flash.events.IOErrorEvent;
    import flash.events.MouseEvent;

    public class RandomColourClient extends Sprite
    {
        public var client:MultiuserServerClient;

        public function RandomColourClient()
        {
            client = new MultiuserServerClient();
            client.addEventListener(MultiuserServerEvent.CONNECT, onConnect);
            client.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
            client.delegate = this;
            client.connect("localhost", 2040, "RandomColourApp", 10);

            stage.addEventListener(MouseEvent.CLICK, onClick);
        }

        public function onConnect(event:MultiuserServerEvent):void
        {
            trace("Connected!");
        }

        public function onIOError(event:Event):void
        {
            trace("Connection Error.");
        }

        public function onClick(event:MouseEvent):void
        {
            client.call("getColour", null, "setColour");
        }

        public function setColour(colour:uint):void
        {
            graphics.clear();
            graphics.beginFill(colour);
            graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
        }
    }
}

Publish the class above and you will find that every time you click on the stage it will change to the colour received from the server!

Obviously, this is just scratching the surface of what’s possible with server-side applications, but it should give you a good idea of how basic client-server interaction can be implemented.

We’ll be taking a look at more advanced functionality at a later date, but if you’d like to find out more in the mean time, there are several examples included with your Mesmotronic Multiuser Server installation (follow the link on your start menu), which are also available as a separate download.

Why is this useful? It means you can create things like connection status indicators or display the client and room ID without having to add any additional event handlers to your code.

For example, if you have a button that should only be available to users when they’re connected to the server, you can simply bind the enabled property of the button to the connected property of an instance of MultiuserServerClient, in this case client:

<mx:Button label="Enabled when connected" enabled="{client.connected}" />

Or, alternatively:

<mx:Binding source="client.connected" destination="myButton.enabled" />

This is equally true of all MultiuserServerClientInfo class properties, which is accessed via the info property of any MultiuserServerClient instance:

<mx:Label text="{client.connected ? 'You are in room '+client.info.room : 'You are not connected'}" />

If you’re new to Flex data binding, Adobe has a quick start guide here.

We’re assuming that you already have at least a basic knowledge of MXML and ActionScript 3, that Mesmotronic Multiuser Server is installed locally and you have made the ActionScript API available to your chosen IDE. If you don’t already have an MXML editor, you can follow this tutorial using either FlashDevelop or the trial version of Flex Builder.

Regardless of which editor you’re using, the first step is to create a new Flex Project and open the main MXML file (usually called main.mxml, or similar).

First, create the various MXML elements of the application, starting by adding a new namespace declaration to the Application tag to allow you to instantiate classes from the Mesmotronic Multiuser Server API using MXML:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:client="com.multiuserserver.client.*">

Next, add a new MXML tag to instantiate the MultiuserServerClient class, setup the event listeners and assign a delegate:

<client:MultiuserServerClient
  id="client"
  delegate="{this}"
  connect="onConnect(event);"
  clientConnect="onClientConnect(event);"
  clientDisconnect="onClientDisconnect(event);"
  ioError="onIOError(event);"
  />

The delegate property indicates the class or object that contains functions you would like to make available to other clients and/or the server, in this case we’re making all of the public functions of the current class available.

The connect event is dispatched when you initially connect to the server, clientConnect when a new client joins the room (including you), clientDisconnect when a client leaves the room and ioError when a connection error occurs.

Next, create a Panel with a very simple form inside of it, made up of a large TextArea to display messages, a TextInput field to input messages and a button you can press to send messages which calls a function called showMessage on all of the clients in the current room using the run method of the MultiuserServerClient class:

<mx:Panel id="panel" title="Mesmotronic Multiuser Server Example" status="Connecting...">
  <mx:Form width="100%" defaultButton="{input_btn}">
    <mx:TextArea id="output_txt" width="400" height="160" editable="false" />
    <mx:TextInput id="input_txt" width="400" />
    <mx:Button id="input_btn" width="100" label="Send"
      click="client.run('showMessage', [client.info.clientIndex, input_txt.text]); input_txt.text = '';" />
  </mx:Form>
</mx:Panel>

The final MXML element is a creationComplete event in the Application tag. This will allow you to connect automatically once your Flex application has finished loading:

<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:client="com.multiuserserver.client.*"
  creationComplete="client.connect('localhost', 2040, 'FlexExample', 10);"
  >

Finally, we need to create the ActionScript functions necessary to handle the various MultiuserServerClient events:

<mx:Script>
  <![CDATA[
    import com.multiuserserver.events.MultiuserServerEvent;
    import flash.events.IOErrorEvent;

    public function onConnect(event:MultiuserServerEvent):void
    {
      panel.status = "Connected";
      output_txt.text += "Hi user "+client.info.clientIndex+", welcome to room "+client.info.room+"!\n";
    }

    public function onClientConnect(event:MultiuserServerEvent):void
    {
      if (event.clientIndex != client.info.clientIndex)
        output_txt.text += "User "+event.clientIndex+" has joined the room.\n";
    }

    public function onClientDisconnect(event:MultiuserServerEvent):void
    {
      output_txt.text += "User "+event.clientIndex+" has left the room.\n";
    }

    public function onIOError(event:IOErrorEvent):void
    {
      panel.status = "Unable to contact server";
      output_txt.text = "It was not possible to connect to the server, please ensure that Mesmotronic Multiuser Server 2 is running.";
    }

    public function showMessage(clientIndex:int, text:String):void
    {
      output_txt.text += "[User "+clientIndex+"] "+text+"\n";
      output_txt.validateNow();
      output_txt.verticalScrollPosition = output_txt.maxVerticalScrollPosition;
    }
  ]]>
</mx:Script>

As you can see, there’s nothing complicated involved: the ActionScript functions simply populate the TextArea and update the Panel’s status. If you prefer, much of this functionality can be included within your MXML declarations.

And that’s it. Now all you need to do is run your application and send yourself a few messages to try it out!

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.

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.