Customizable HTML Shoutbox

Categories Flash apps

The front end is html and css, powered by flash p2p and javascript

I just wanted to see if I can build a shoutbox/group chat app that has the front end build in html and styled with css. And here it is: Shoutbox/Chat in HTML, CSS, powered by JavaScript and Flash Player 10.1. Open a few of them in different windows to see how it works.

This technique would let any designer implement it’s own front end looks via the CSS styling. Download the files from here and try a different look.

Here is the JavaScript functionality (located in the “shoutbox.js” file):

  1. function onLoadedSwf(){
  2.      var flashobj = document.getElementById("flash_obj");
  3.      flashobj.focus();
  4. }
  5.  
  6. function onConnected(){
  7.  
  8.  var chatiframe = document.getElementById("chat_iframe");
  9. chatiframe.style.visibility = "visible";
  10. chatiframe.style.height = "300px";
  11.  
  12.  var shoutbox_elem = document.getElementById("shout_box");
  13.  shoutbox_elem.style.visibility = "visible";
  14.  shoutbox_elem.style.height = "80px";
  15.  
  16.  var flashobj = document.getElementById("flash_obj");
  17.   flashobj.style.height = "0px";
  18.  flashobj.style.visibility = "hidden";
  19.  
  20.    sendToJavaScript("connected", "");
  21. }
  22.  
  23. function getFlashMovie(movieName) {
  24.   var isIE = navigator.appName.indexOf("Microsoft") != -1;
  25.   return (isIE) ? window[movieName] : document[movieName];
  26. }
  27.  
  28. function sendMessage(value) {
  29.     getFlashMovie("flash_obj").sendToFlash(value);
  30.     document.getElementById('chatmessage').value = "";
  31. }
  32.    
  33. function sendToJavaScript(user, message){
  34.  
  35.  
  36.     var oIframe = document.getElementById("chat_iframe");
  37.     var oDoc = oIframe.contentWindow || oIframe.contentDocument;
  38.     if (oDoc.document) {
  39.         oDoc = oDoc.document;
  40.     }
  41.     oDoc.write("<br />" + user + ": " + message);
  42.    
  43.     oIframe.contentWindow.scrollTo(0, oDoc.body.scrollHeight);
  44.    
  45.     return true;
  46.  
  47. }
  48.  
  49. function onEnter(e){
  50. var keynum
  51. if(window.event) {keynum = e.keyCode} else if(e.which){keynum = e.which}
  52. if(keynum == 13){sendMessage(document.getElementById('chatmessage').value);}
  53. }
  54.  
  55. function onEnterUp(e){
  56. var keynum
  57. if(window.event){keynum = e.keyCode} else if(e.which){keynum = e.which}
  58. if(keynum == 13){document.getElementById('chatmessage').value = "";}
  59. }

Also here is the actionscript code.

ActionScript

  1. const StratusAddress:String = "rtmfp://stratus.rtmfp.net/your-own-stratus-ley/";
  2. var nc:NetConnection;
  3. var netGroup:NetGroup;
  4. var user:String;
  5.  
  6. var messageIncrement:int = 0;
  7.  
  8. var myGroupName:String = "your-shoutbox-adress";
  9.  
  10. function connect():void
  11. {
  12.     conMc.visible = true;
  13.  
  14.     user = usr.text;
  15.     nc = new NetConnection();
  16.     nc.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
  17.     nc.connect(StratusAddress);
  18.  
  19. }
  20.  
  21. function setupGroup():void
  22. {
  23.     var groupspec:GroupSpecifier = new GroupSpecifier(myGroupName);
  24.     groupspec.serverChannelEnabled = true;
  25.     groupspec.postingEnabled = true;
  26.     netGroup = new NetGroup(nc,groupspec.groupspecWithAuthorizations());
  27.     netGroup.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
  28. }
  29. function netStatus(event:NetStatusEvent):void
  30. {
  31.     switch (event.info.code)
  32.     {
  33.         case "NetConnection.Connect.Success" :
  34.             setupGroup();
  35.             break;
  36.         case "NetGroup.Connect.Success" :
  37.             ExternalInterface.call("onConnected");
  38.             break;
  39.         case "NetGroup.Posting.Notify" :
  40.             receiveMessage(event.info.message);
  41.             break;
  42.     }
  43. }
  44.  
  45. function sendMessage(msg:String):void
  46. {
  47.     messageIncrement++;
  48.  
  49.     var message:Object = new Object();
  50.  
  51.     message.sender = netGroup.convertPeerIDToGroupAddress(nc.nearID);
  52.     message.user = user;
  53.     message.mi = messageIncrement;
  54.     message.text = msg;
  55.     message.action = "postChat";
  56.  
  57.     netGroup.post(message);
  58.  
  59.     receiveMessage(message);
  60.  
  61. }
  62.  
  63. function receiveMessage(message:Object):void
  64. {
  65.  
  66.     var removeBreakRegExp:RegExp = new RegExp("\n","gi");
  67.     var ms:String = message.text;
  68.  
  69.     ms = ms.replace(removeBreakRegExp,"");
  70.  
  71.     if (ms != "")
  72.     {
  73.         ExternalInterface.call("sendToJavaScript", message.user, message.text);
  74.     }
  75.  
  76. }
  77.  
  78. if (ExternalInterface.available)
  79. {
  80.  
  81.     try
  82.     {
  83.         ExternalInterface.addCallback("sendToFlash", receivedFromJavaScript);
  84.  
  85.     }
  86.     catch (error:Error)
  87.     {
  88.         ExternalInterface.call("sendToJavaScript", error.message);
  89.     }
  90.  
  91. }
  92.  
  93. function receivedFromJavaScript(value:String):void
  94. {
  95.     sendMessage(value);
  96. }
  97.  
  98. conBt.addEventListener(MouseEvent.CLICK, onConnectClick);
  99.  
  100. function onConnectClick(event:MouseEvent)
  101. {
  102.     connect();
  103. }
  104. usr.addEventListener(KeyboardEvent.KEY_DOWN, onEnterKey);
  105. function onEnterKey(event:KeyboardEvent)
  106. {
  107.     if (event.keyCode == 13)
  108.     {
  109.         connect();
  110.     }
  111. }
  112.  
  113. user = "user" + Math.round(Math.random() * 10000);
  114. usr.text = user;
  115. conMc.visible = false;
  116.  
  117. usr.addEventListener(MouseEvent.ROLL_OVER, focusOnUserName);
  118. function focusOnUserName(event:MouseEvent)
  119. {
  120.     stage.focus = usr;
  121.     usr.setSelection( 0, usr.length );
  122.  
  123. }
  124. stage.focus = usr;
  125. usr.setSelection( 0, usr.length );
Share this
Facebooktwitter

No Comments

Leave a Reply

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