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.