There are many examples of red5 chat tools and apps all over the web. The downside is, we have yet to see any examples used in commercial projects or any real world examples, which makes it difficult for most developers, who are not involved in open source collaboration’s, to see the benefit of using Red5.

However, that being said, I am very excited and proud to say that I, including many other talented developers, was involved in the conceptualization and development of an outstanding, groundbreaking, and innovative use of Red5 for a major web project…

ZOS – Last Tango in Jadac – http://zostv.com/interactive

Last Tango in Jadac, follows an interactive cinematic following the characters of the series featured on The Movie Network.

The experience is a mix of Papervision3D, Red5, and interactive video that take you on a journey while allowing you to explore and discover your own paths and unfold the dense storyline. This project was produced by Whizbang films in association with the Bellfund and LifeCapture Interactive.

The chat tool is quite an accomplishment, it is very unique, and definitely adds to the over all user experience.  It allows for users to communicate with each other while they are exploring the the PV3 world of Jadac. Considering there are no avatars the chat tool becomes an essential part of the experience and game play by aiding users follow the storyline and successfully complete the 3 missions, and discover hidden secrets and easter eggs.

The chat tool is a multi-layered application that can be minimized and maximize, sort users, find friends, and choose from to different display options. It also allows users users to log in anonymously, randomly puts users in different rooms, displays current population, handles special characters and html tags, stores and tracks user sessions, disconnects during idle time, and more.

ZOS Chat Organized View

ZOS Chat Random View

We had many obstacles and challenges to over come while working on this project. Initially the chat tool was written in AS2 and eventually we decided to port it over to AS3, as well we had to learn how to uses eclipse, compile java, and build server Red5 modules to handle all our functions. Working on this projec was a labour of love and well worth it it.I hope that in the near future we will be able to extend the chat tool and more features as well as open source it.

At some point I will embark on a step by step tutorial of both the java and as, as well I hope to open source it. In the mean time we hope you enjoy it.

Original concepts for the chat are the brain child of Geoff Whitlock ( CEO, Lifecapture Inc. ), creative concept developed by  Dan Riley ( Creative Director, Lifecapture Inc. ), Lead developers Brendan Sera-Shriar and Ryan Andal ( Contracted by Lifecapture Inc. for this project ), Red5 Java developers Brendan Sera-Shriar and Andy Shaules ( Contracted by Lifecapture Inc. for this project ).

The entire project took over 10 months to develop with team of 20 plus developers, designers, writers, directors, producers, motion graphic artists, animators, and other specialty staff, please visit http://zostv.com/interactive for a full list of credits.

Visit http://zostv.com/interactive for the full experince.

One of many software packages out there exploiting this new trend:

The Software: XRumer Platinum v4.0
Basically Xrumer finds blogs, forums anything else it can post to, then registers an account and sends your link to those forums. It does this all automatically without you needing to do much of anything. It also solves and enters over 750 different kinds of capcha’s. Capcha’s are those annoying things/pictures you have to put in to register an account. It even solves the math ones now! After it registers the account it will post links that you specify in different formats etc. REALLY fast backlinks TThe software literally works with millions of different forums! Xrumer also supports both SOCKS4/5 proxies along with HTTP types.

Read the full review

A must see!

I’ve modified the code a little more by playing around with functionality, adding features like tool tips, user list, user icons, clearing the history, and a bit of skinning. I’m still trying to figure out how to add emo’s, sound, and user colour options.

I won’t go into all the code for the features I added, just the important chat stuff. I found a really great tool tip on google code you can grab it here, also a thank
you to Nick La of ndesign studios for the icons.

You can view the demo here.


We are still using the same connection method to red5

var nc:NetConnection = new NetConnection();
nc.connect("rtmp://localhost/oflaDemo");
var remote_so:SharedObject = SharedObject.getRemote("chat", nc.uri, false);
remote_so.connect(nc);

I have added a welcome screen that asks the user to enter a name. This way I can display a unique user list and easily add the user name to the output display. We create a var called username and datatype it as a string. We will build an array out of this later. The login window is inside an mc called login with the name field and submit button. When the submit buttton is clicked we will pass the name var to the user array and display it in the userlist. We will also add an icon to the name in the display list only.

var username:String;
Login.Name.setFocus();

function login():Void{
	ChatInput.setFocus();
	username = Login.Name.text;
	if (username == ""){username = "anonymous";}
	if (remote_so.data.users == undefined){
		remote_so.data.users = username;
	}else{
		remote_so.data.users += "," + username;
	}
	Login._visible = false;
}
Login.Submit.onRelease = login;

We will wrap all key events and messages into eventListers, it’s easier this way and it condenses the code.

keyListener = new Object();
keyListener.onKeyDown = function (){
if(Key.getAscii() == 13 && Login._visible == false){
sendMessage();
}else if(Key.getAscii() == 13){
login();
}
}

Key.addListener(keyListener);

Enter.onRelease = sendMessage;

function sendMessage(){
if (remote_so.data.chatText == undefined){
remote_so.data.chatText =  "" + username + ": " + ChatInput.text;
}else{

remote_so.data.chatText = "" + username + ": " + ChatInput.text;
}
ChatInput.text = "";
}

For the onSync function we call the list and pass the user names to an array and display them in the userlist. we will also pass the chatText to the output and set the scrollbar positions.

remote_so.onSync = function(list){
	if (remote_so.data.chatText != undefined){
		ChatOutput.text += remote_so.data.chatText;
		ChatOutput.vPosition = ChatOutput.maxVPosition;
	}
	var userArray:Array = remote_so.data.users.split(",");
	Userlist.dataProvider = userArray;
}

That’s all…not bad eh! For the skinning I just used some basic setStyles. I hope this helped.

In terms of testing red5 locally you can download and run a one click setup that will install a localhost, all the necessary com/org files, and a bunch of other goodies. You can find it here http://osflash.org/red5/070final.

This is one of my first attempts at building a simple red5 chat tool. I started with the sample chat source that comes bundled with red5 and I made a few adjustments to the code. In this sample I have not built any custom java files, I am using the SharedObject from the oflaDemo (which you can find in the src directory of your red5 install). There is a bit of a learning curve, red5 consist of more than just AS, as I have just recently discovered. I have started upgrading my java skills in order to start customizing and developing more powerful red5 apps. To all Flash developers out there, “don’t be afraid, it’s a lot easier than you think!”.

Ok, enough rambling, let’s get to the code…

[ JUST ADDED AN UPDATED VERSION WITH NEW FEATURES. VIEW HERE. ]

You can view the demo here.

We will start by importing some basic flash utils and setting the initial variables to make a netConnection to our SharedObject and connect to our red5 server. We will the create a ShareObject to connect to. Then we will setup our onSync events to handle the messages we will be sending. Finally we will setup 2 basic EventListerners for click and key events.

import mx.utils.Delegate;// create basic netConnection object

var nc:NetConnection = new NetConnection();

// connect to the local Red5 server

nc.connect("rtmp://localhost");

// create StoredObject

var so:SharedObject = SharedObject.getRemote("chat", nc.uri, false);

// setup the onSync events.  We need to know when someone has added something to the chat

so.onSync = Delegate.create(this, newMessageHandler);

// connect to the SO using the netConnection reference

so.connect(nc);

// listen for the send button clicks

send.addEventListener("click", Delegate.create(this, sendMessage));

// add a listener for key events

Key.addListener(this);

Next we will set up our sendMessage function which will pass both the user name and message to the chat output display. We will also setup the key event as well so the user can press enter or click on the mouse.

function sendMessage():Void

{

 remote_so.data.chatMessage =  + userName.text +  - message.text;	message.text = "";

}

function onKeyUp():Void

{

 if(Key.getCode() == 13 && message.length > 0)

 {

 	sendMessage();

 }

}

The last function we will build is our newMessageHandler which essentially display all user output in a text area.

function newMessageHandler(evtObj:Object):Void

{	var newChat:String = remote_so.data.chatMessage;

if(newChat == null) return;

chatOutput.text += newChat + "\n";

chatOutput.vPosition = chatOutput.maxVPosition;

}

It’s that easy! Playing around with the code and some fun….please feel free to reply to this post with examples and variations on this project.

Chris Allen walked us through the basic setup and installation of red5. The overall presentation was a basic intro to the red5 environment…I felt he did a really good job of explaining how what red5 is and how it works…especially considering majority of the attendees had never touch red5 before.

The examples included the demo files that are bundled in the current distribution of red5. If you have not yet had a chance to check these out I highly recommend you do http://www.digs.jp:5080/demos/ !

The highlight of the presentation was Trevor Burton’s demo of his new project paperworld3D, which is built on red5 and papervision3d…very cool stuff…paperworld3D is only a month old and is already dropping mouths in the pv3 and red5 communities….essentially paperword3D is a 3D multi-user environment.

Check out the online demo at http://www.paperworld3d.com and if you like what you see make sure you help contribute any way you can to this project because it !@#$% ROCKS!!!

- Brendan