Tutorial: Multiplayer P2P Demo with AS3MUL

A couple months ago I created a simple demo using the AS3 Multiuser Library. The post has generated very positive feedback and I've also received a few requests for a tutorial so here it is! In this tutorial you will learn how to build a basic multiplayer, p2p application.

The application will function very similarly to the one I posted before. When it starts, we will prompt the user to enter a username and then add them to the world once they click the submit button. We will have a status bar at the top of the application that will announce certain events and tell us how many users are currently in the room.

Before we get started, I should point out that in this tutorial I will be using FlashDevelop to create the application. If you have never used it, now would be a great time to get started! You will also need to download the AS3MUL code. You can do so here. Just download the as3mul.zip file and you should be all set. This tutorial is fairly lengthy, but if you don't feel like reading through it all, you can jump to the end and download the source code.

Open up FlashDevelop and choose Create a new project from the project panel. In the box that pops up, select AS3 Project under the ActionScript 3 category. Fill in the project details (name, save location, etc) and click OK to create your project. You'll notice FlashDevelop creates three folders: bin, lib and src. The src folder is where your source code goes. If you open it up, you will see an auto-generated Main.as file.

We're going to add a couple more directories to our src folder. So inside the src folder create two new folders; one named components and another named events. Soon we will be adding class files to these directories, but first, let's also add the as3mul source files. To do this, find the as3mul.zip file you downloaded earlier. This zip actually contains a whole Flash Builder project, but we only need the as3mul code. Unzip the file and go into the multiuser folder. From there, go into the src folder. You should see a folder named com. Copy the com folder and paste it into the src folder that FlashDevelop created for you. Once done, your directory structure should look like the image below.

The Main.as class will contain the bulk of our code, but in order to keep things organized, we're going to add several helper classes that will work together to create our application. We'll start with a simple event class. This class won't contain much code so we can knock it out pretty quickly; let's get to it!

First we need to add the class so right-click on the events folder and choose Add > New Class. The class name is AppEvent. This class will extend the flash.events.Event class so you can either fill in the base class in the dialog box or just add it once the class is created. The entire class is shown below.

package events 
{
    import flash.events.Event;
    
    public class AppEvent extends Event 
    {
        public static const NAME_SUBMIT:String = "AppEvent.Name.Submit";
		
        public var data:*;
		
        public function AppEvent(type:String, bubbles:Boolean = false, cancel:Boolean = false, inData:* = null) 
        {
            super(type, bubbles, cancel);
            data = inData;
        }
    }	
}

The code should be pretty simple to read, but we'll go over it just to be safe. First, we've got the class declaration and it is extending the Event class. The first member in the class is a public static constant: NAME_SUBMIT. This string will be used as the event type later on. Next we have a public variable: data. This variable is a wildcard and can be any data type we wish. We will use this variable to send along extra information with our event.

Lastly we have the class constructor. It takes in several arguments including a type, whether or not the event bubbles, whether or not the event can be cancelled and finally any extraneous data we might wish to send. Inside the constructor we call the Event super class constructor passing in our type, bubbling value and cancellation value. We then assign the parameter inData to the class variable data.

Pages: 1 2 3 4 5

Bookmark and Share

12 Responses to “Tutorial: Multiplayer P2P Demo with AS3MUL”

  1. Grey says:

    thanks bro

  2. Grey says:

    I’ve noticed that if i open the project’s swf file i’m not able to use the multiplayer feature: is that normal?

  3. Rhuno says:

    I’m just guessing, but perhaps it’s the Flash security sandbox that’s blocking it? You may need to add the directory/file to the trusted locations list.

  4. Grey says:

    it’s me again……. i have a problem with closing the connection through _con.close() : if i want to close the connection when i want to change “room” flash develop says that i can’t because connection.close() is null (in Session.as)…. how can i fix it?

  5. Rhuno says:

    The connection object should only be null if you’ve already called close on it as in Session.as you can see that in the close function, it calls connection.close() and then sets connection to null. You may want to try adding a delay after you call close prior to attempting to reconnect.

  6. Grey says:

    i’ve already put a delay of 2 seconds (a fade effect before i change room and game mode)

  7. Grey says:

    found a solution:

    used try
    {
    if(_con && _con.channelManager)
    _con.close();
    }
    catch(e:Error) { trace(‘error’);}

  8. batangmakulit says:

    Is it possible to use the codes here for flash cs4??

  9. Rhuno says:

    I believe so.

  10. Mattincho says:

    ¿Podrías explicarme que es “SERVER” y “DevKey”? (Sé que suena estúpida la pregunta).
    Sucede que quiero hacer un juego multijugador online; ya he hecho algunas páginas web en Flash, y tengo servidores de pago (Realmente económicos 45 dólares al año), pero no estoy seguro si con “SERVER” te refieres a la ubicación del programa que funciona como servidor de nuestro proyecto, o de si sólo se trata de la url de nuestro dominio (Lo cual no tendría mucho sentido en realidad).
    Ojalá puedas ayudarme.

  11. Mattincho says:

    Ok… ok… ya lo leí… lamento haber molestado.

  12. Paul says:

    I downloaded the source code and modified the devkey to be my own devkey. I recompiled it in flashdevelop and now if I open two instances of index.html from /bin, I can see 2 users.

    The problem is that I can only see users when I open the instances of index.html from my own computer. When my friend on a different computer, using the same devkey, opens index.html, she can see only her own user, and isn’t communicated to me. Am I missing a step? I thought that as long as we use the same cirrus devkey we would be able to see each other through different computers. But that isn’t the case.

Leave a Reply

Subscribe to RSS feed FGS5 Badge