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% [?]
Related posts:
_03.gif)
_03.gif)
