Creating a simple shared whiteboard application in red5 is very easy, All you need is to get the corrdinates and put them in the shared object and let shared object work for you.
On Client Side:- We have a shared object say
var whiteboard_SO:SharedObject = SharedObject।getRemote("whiteboard",nc.uri,"false");
Now when we move mouse pointer over a movie clip for drawing , we capture the xmouse and ymouse to send them to server. For Example.
sample_MC.onPress = function(){
//Send xmouse and ymouse to server along with "press" event string
NetConnectionObj.call("somemethod", null,param1, param2,param3); //sending values
};
sample_MC.onMouseMove = function(){
//Send xmouse ymouse along with "move" event string
NetConnectionObj.call("somemethod", null,param1, param2,param3); //sending values
}
Now on server(java) side change the shared object with these values
E.g.
public void somemethod(Object[] params){
whiteboard_SO.setAttribute("point",params[0].toString()+":"+params[1].toString()+":"+params[2].toString());
// The above code will fire the onSync event on all connected clients.
}
Now on Client side :-
Whiteboard_SO.onSync = function(infolist){
// Inside the change event we will get the xmouse and ymouse and press string
//If event string is press, jump to new line(i.e. lineto(x,y))
//If event string is move, move with drawing(i.e. moveto(x,y))
}
This way , A shared whiteboard can easily be created.
To create a new Red5 application , follow my post here
Reference:-
Create whiteboard application with Flash communication server
8 comments:
I was working on a sample whiteboard application but due to lack of time, i have left it in the middle, flash client side development is almost ready, the server side part done are freehand, line.
You can check and download the code from here and can modify according to your needs
http://code.google.com/p/red5-shared-whiteboard/
Thanks tooo much
I am now trying to complete the functionality of your great whiteboard, just one function left, ..
The clear button, how can i implement it to clear the shapes at other clients ??
Please help
Hi Mohammed,
Thats pretty simple actually. All you need to do is to send a message to Red5 when someone clears the whiteboard. Red5 pass this message to every connected client and every client clear his base movieclip where all shapes are being drawn.
Something like this
for(var mc in drawingarea_MC){
if(typeof(drawingarea_MC[mc]) == "movieclip"){
drawingarea_MC[mc].removeMovieClip();
delete drawingarea_MC[mc];
}
}
This snippet is from the original source code. Hope that helps.
Thanks Tooo much, It worked for me ..
Thank You :)
Hi,
Thansk for a great tool. Now i'm trying to complete the other functions : shape, object, text... But, i don't know the parameters to send them to server ? Can you help me ? Thanks
Hi Utroka,
The parameters to send to server will depend on the functionality. For ex. for line drawing, you need startX, startY and endX, endY. For a circle, it will be different.
Hope that answers your question
Hi Sunil
I know that the parameters will different. But i don't understand the concrete parameters of other functions. For exapmle, for LineDrawing and FreeHandDrawing there are 6 parameters (mode, mouse event mode, color, thickness, xmouse and ymouse), but for circle, for TextDrawing ... ? there are how many pararmetes and what are ?
Thanks
Hi Utroka,
That will completely depend on your logic to handle client side events. I can't actually tell what it will be. When i will work, then only i can tell. Some of the parameters you can always have like color, thickness and ofcourse the xmouse and the ymouse. Apart from this, all will depend on your own logic and need.
Post a Comment