Archive for June, 2010

This quick tutorial is going to show you how to make an application that will serve as a white board. The entire application can be put together using a Red5 Server and Flash. Before getting started with the tutorial itself, let’s go over some of the basics that we will use to create the application itself to make sure you are familiar with the terminology.

Shared Object – These are data storage units that will be in place across multiple sessions. They are similar to a cookie in a web browser that stores data for multiple visits to a website and ‘remembers’ the user. A given application is capable of retrieving a Shared Object from either a local machine (your computer) or a remote machine (a web server).

Action Script Drawing API – This is a type of API that can be used to draw objects on the local computer or remotely via a Movie clip.

Java Server Application: This is the application that will run on the Red5 server and serve as the host for the remote Shared Objects.

Now, let’s take a look at the creation of the white board, step by step, beginning with the server.

The Shared Object is going to be created when the Red5 server starts up the application. The Java code needs to be the following:

Public Boolean appStart() {
createSharedObject(Red5.getConnectionLocal().getScope(), “myline_so”, false);
log.debug(“White Board Application Started!”);
return true;
}

There are two parts on the client sidem one is the Moderator (source) and the other is Attendee (destination). Moderator will feed its information to the server and then the server will show the details it received to each Attendee.

To understand this, we need to look at how the source informs the server when a line gets drawn onto the White Board.

A line will begin when a mouse button is pressed on the movie clip and it runs as long as the button is held down and the cursor continues to move. Once the button is released, the line stops.

This means we have to capture different events in the White Board movie clips such as Mouse Press (where the line begins), Mouse Move and Release (which ends the line). To do this, use the action script code show below:

whiteboard.onPress = function(){
myConnectionToServer.call(“onLineDraw”,null, “START-LINE”,this._xmouse, this._ymouse);
}

whiteboard.onMouseMove = function(){
myConnectionToServer.call(“onLineDraw”,null, “DRAW-LINE”,this._xmouse, this._ymouse);
}

whiteboard.onRelease = function(){
myConnectionToServer.call(“onLineDraw”,null, “STOP-LINE”, this._xmouse, this._ymouse);
}

The function myConnectionToServer is a NetConnection object and it holds the connection for the Red5 Server.

The call to the onLineDraw remote server method accepts 3 parameters: “STOP-LINE”, this.ymouse and this._xmouse. Here is that call:

myConnectionToServer.call(“onLineDraw”,null, “STOP-LINE”, this._xmouse, this._ymouse);

That is house the client Moderator transfers data to the server. Here is how the server receives the data and informs the Attendee:

public void onLineDraw(Object[] params){
line_SO = getSharedObject(Red5.getConnectionLocal().getScope(),”myline_so”);
line_SO.setAttribute(params[0].toString()+”~”+params[1].toString()+”~”+params[2].toString());
}

With line_SO we have the variable ISharedObject while retrieves the instance of myline_so, a shared object that got created during startup. The Moderator then sends 3 parameters which will be assigned as attributes to a shared object. The method setAttribute from Moderator invokes the onSync event on the remote Atendee client’s local machines.

Now, let’s take a look at the way the Attendee machines receive the information, keeping in mind that line_SO is a copy of SharedObject stored on Attendee’s local computer the way a browser cookie would be:

line_SO = SharedObject.getRemote(“line_SO”, myConnectionToServer.uri, false);
//Creating instance of remote option
line_SO.connect(myConnectionToServer);
line_SO.onSync = function(infoList)
{
In “change” event:
var dataFromServer = this.data[id];
var todrawData:Array = dataFromServer.split(“~”);
var lineAction = todrawData[0];
var lineX = todrawData[1];
var lineY = todrawData[2];

Using the above parameters you will now be able to draw on your White Board. That is all you need to know to put your very first White Board to work today.

Popularity: 7% [?]

To prove just how easy it is to get a simple application made using the right technologies, this tutorial was built to show how Red5 and Flash help you build something from scratch in a very short amount of time once you have the right code in place. In five quick steps we will show you how to get your first app up and running!

First Step -

You will need a default application template which you can find inside your Red5 directory on your hardrive, usually located here:

C:\Program Files\Red5\doc\templates\myapp

Copy the folder about into this directory:

C:\Program Files\Red5\webapps\

Easy enough. Once that’s taken care of, it’s time to move on to the next step.

Second Step -

Since the default template is in the right place to run the server side application we want, we can now change its configuration to meet that need. All you need to do is change the name of the “myapp” directory to “sample”. The directory’s title is the name of your application. Next, let’s edit the configuration files within this sample directory.

We’ll structure our application so that it has Sample linking with WEB-INF and lib. The WEB-INF will link directly to:

red5.web.properties
red5-web.xml
web.xml
log4j.properties

Now we open red5-web.properties and edit the contextPath to the folder “sample” to look like this:

webapp.contextPath=/sample
webapp.virtualHosts=localhost, 127.0.0.1

Then we open web.xml so we can change the webAppRootKey and display to look like this:

My tutorial application made with Red5

Then we are going to open red5-web.xml so we can alter the application names to look like this:

class="org.xyz.Application"
singleton="true" />

In the example above, org.xyz represents the package structure we’re using. You could replace it with the application’s real structure if you wanted to. In this instance, the lib directory will have the application’s jar file inside it.

Third Step -

Now that we’re prepared for the server side configuration of the application we will make the application itself so that it can work with the Flash client.

Using a Java IDE such as Eclipse, you need to create a new Java project. You’ll name this sample and give it a structure where Sample links to:

src (which links to org that in turn links to xyz)
classes
lib

The folder named “src” will hold the application package structure we’ve named org.xyz, our compiled class file will reside within the “classes” folder and the folder “lib” will hold the jar file of our compiled class.

It’s time to create build.xml so we can build this project a tool. Our build file will look like this: