Multiuser flash Whiteboard

Categories Flash apps

To view the app you will need flash player 10.1.

The Flash p2p Whiteboard, let’s you:

  • Broadcast an image
  • Simple drawing
  • Text annotation
  • Simple group chat
  • Image, drawing and text annotations X, Y screen position sharing

Video:

How it works:

The whiteboard uses the new p2p flash player 10.1 NetGroup Class to connect app users and netGroup.post(message) to broadcast a message to the group.

Here is some of the code it uses:

ActionScript

  1. const StratusAddress:String = "rtmfp://stratus.rtmfp.net/your-stratus-key/";
  2. var nc:NetConnection;
  3. var netGroup:NetGroup;
  4. var user:String;
  5. var messageIncrement:int;
  6.  
  7. var myGroupName:String = "your.app.group.name";
  8.  
  9. function connect():void
  10. {
  11.     nc = new NetConnection();
  12.     nc.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
  13.     nc.connect(StratusAddress);
  14.  
  15. }
  16. function setupGroup():void
  17. {
  18.     var groupspec:GroupSpecifier = new GroupSpecifier(myGroupName);
  19.     groupspec.serverChannelEnabled = true;
  20.     groupspec.postingEnabled = true;
  21.  
  22.     netGroup = new NetGroup(nc,groupspec.groupspecWithAuthorizations());
  23.  
  24.     netGroup.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
  25.  
  26.  
  27.     user = "user" + Math.round(Math.random() * 10000); // we need unique usernames
  28.  
  29.     userNameText.text = user;
  30.  
  31.     createDrawLayer(user); // creates the drawing layer based on the username
  32.  
  33.  
  34. }
  35. function netStatus(event:NetStatusEvent):void
  36. {
  37.     //trace(event.info.code);
  38.  
  39.     switch (event.info.code)
  40.     {
  41.  
  42.         case "NetConnection.Connect.Success" :
  43.             setupGroup();
  44.             break;
  45.         case "NetGroup.Connect.Success" :
  46.             txtChatMessages.text = "connected to group";
  47.             break;
  48.         case "NetGroup.Posting.Notify" : // fires each time a message is posted in the group
  49.             receiveMessage(event.info.message);
  50.             break;
  51.         case "NetGroup.Neighbor.Connect" :
  52.    
  53.             break;
  54.         case "NetGroup.Neighbor.Disconnect" :
  55.  
  56.             break;
  57.     }
  58. }
  59. function sendMessage():void
  60. {
  61.     messageIncrement++;
  62.  
  63.     var message:Object = new Object();
  64.  
  65.     message.sender = netGroup.convertPeerIDToGroupAddress(nc.nearID);
  66.     message.user = user;
  67.     message.rnd = messageIncrement;
  68.     message.text = txtMessage.text;
  69.     message.action = "postChat";
  70.  
  71.     netGroup.post(message);
  72.     incomingMessage(message);
  73.     txtMessage.text = "";
  74. }
  75.  
  76. function receiveMessage(message:Object):void
  77. {
  78.  
  79.     if (message.user != user)
  80.     {
  81.         if (message.action != null)
  82.         {
  83.             switch (message.action)
  84.             {
  85.                 case "postChat" :
  86.                     incomingMessage(message);
  87.                     break;
  88.                 case "clear" : // delete your own drawing across all users connected
  89.                     clearMc(message.user);
  90.                     break;
  91.                 case "postImage" :
  92.                     showGroupImage(message.image);
  93.                     break;
  94.                 case "postImagePozition" : // changes the position of the broadcasted image
  95.                     showGroupImagePoz(message.imageX, message.imageY);
  96.                     break;
  97.                 case "postTextField" : // creates the text annotation for all users in the group
  98.                     recreateTextField(message.txtObj);
  99.                     break;
  100.                 case "postTextFieldPozition" : // changes the position of  a text annotation
  101.                     pozitionTextField(message.txtMc, message.px, message.py);
  102.                     break;
  103.                 case "editTextField" : // function that edits the changes made to a text annotation
  104.                     editedTextField(message.txtName, message.txtContent);
  105.                     break;
  106.  
  107.             }
  108.         }
  109.     }
  110.  
  111. }
  112. connect(); // start the application
Share this
Facebooktwitter

3 Comments

  • Tom
    October 2, 2010

    nice one! how does the drawing part work? would be interesting to see the rest of the application.
    cheers

    • admin
      October 4, 2010

      I store the draw data in an array and on mouse up I send it to the group along with an user id, so each user draws on a separate layer. Once the app receives the array, it draws on the canvas using myShape.graphics.moveTo(myArray[i].x, myArray[i].y);

  • Working with a multi-user environment in Flash | The Mixing Bowl
    December 1, 2011

    […] an example of a multi-user whiteboard done in Flash. That’s probably the most useful real-world example I can think of. Not too much to do in […]

Leave a Reply

Your email address will not be published. Required fields are marked *