More and more the idea of having a social experience has become part of what makes the internet a unique experience compared to other mediums. Over time sites have added the ability to share, comment and evaluate information.

To deliver things like chat, file sharing or a multi-user game can require a fair amount of work on both the client side and the server side.

The Adobe Flash Collaboration Service gives developers a way to create their own multi-user experience, without the need to manage and maintain servers and work with tools that Flex developer are all ready used to using.

A combination of Flex components on the client side and services on the server allows developers to quickly build our application. If anyone has used the ConnectNow service at acrobat.com then you have experienced the type of application we are about to build.
In our example we will create a simple AIR application what will connect to our room, then let people use the chat and white board features.

Set up your account
First, go over to AFCS Developer Portal and sign up for an account. If you all ready have a Connect Now account you will have to come up with a unique name for this account. The reason for this is that each room name needs to be unique, just like name spaces in actionscript. Once signed in you will see your account URL:

http://connectnow.acrobat.com/YourUserName

This will be used for directing our air application to the right place on the server. Also you will see your secret key, for this example we won't use it.

At the top right of the screen you should see "Download the SDK". This is going to give you all you need to setup your Flex project. Within the download you will get a PDF file what will explain how the Collaboration service works. SWC files for both Flash Player 9 and 10 and API Reference.

Setup your room
Now that you have what you need, lets set up your room then start coding in Flex. On the right side there is a section called "Room Instances" here you can create a room that people will connect to from within your application.

Create a room called "testRoom". The bottom of the screen will show you information about how the room is being used. How much bandwidth being used, messages and connection time are all shown so you can get an idea of whats going on in the room.

In the zip file you downloaded, there is an AIR application that gives you the same features on your desktop. If you install AFCSDevConsole you can control the account and all room features just as if you went to the website.

Set up Flex
Now that the room is ready we can create our AIR application to connect to it.

Create a new AIR project. Mine is called "CocomoApplication". First thing we need to do is add all the new code to our project by going over to properties of our new project. Then select "Flex Build Path" point to your downloaded SWC file by using the "Add SWC" button. You can find the files inside the lib\player9 or player10 folders.

You have two options, you can choose Flash Player 9 or 10 SWC files. Each is created to take advantage of the individual player features.

Once added to your project we can get started.

Lets start building
The first line of code we will update is the WindowedApplication line.
It will look like this:

 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" xmlns:rtc="AfcsNameSpace"
        width="100%" height="100%">

Notice the extra namespace (xmlns:rtc="AfcsNameSpace") the new components will be referred to in the application as "rtc", instead of the regular "mx:".

Lets then add the "AdobeHSAuthenticator" tag. The AdobeHSAuthenticator handles access to the service. Give it an ID called "HSAuthenticator". This tag also includes attributes for the success or failure of a login, "authenticationSuccess" and "authenticationFailure" can help you handle each option.

Authentication becomes more important for projects you want to use in production, as you want to know who is moving in and out of the room and assign certain levels of privileges inside your room.

The best way to handle this is to use your own authentication method. For example, having someone login to your server or perhaps using their facebook account using the new AS3Facebook API can ensure you have a larger level on control over who has access and what they can do. There are also examples in the SDK download on how to setup external authentication.

Right now our code would look like this:

 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" xmlns:rtc="AfcsNameSpace"
        width="100%" height="100%">

<rtc:AdobeHSAuthenticator id="HSAuthenticator" /> 

Next we add a "ConnectSessionContainer" tag to your application. With that tag we are going to set both the width and height to 100%. Then add the "roomURL" attribute to the URL you were assigned to when you signed up for the service. After that we will give our tag an ID called "sessionContainer" and use the "authenticator" attribute and set it to the ID of our AdobeHSAuthenticator tag.

 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" xmlns:rtc="AfcsNameSpace"
        width="100%" height="100%">

<rtc:AdobeHSAuthenticator id="HSAuthenticator" /> 

<rtc:ConnectSessionContainer  height="100%" id="sessionContainer"
 authenticator="{HSAuthenticator}" 
roomURL="http://connectnow.acrobat.com/YOUR ID/testroom/" 
autoLogin="true" width="100%">

The contents of the application will live in side this container. Once we are authorized to enter, all the components we are about to add will start to work.

Add the RTC components
Inside a HBox component we are going to add a VBox, Roster, SimpleChat a second VBox and a SharedWhiteBoard. Again this is going to be very simple, with and height set to 100% for everything in this example.

Here is the code

 
<mx:HBox width="100%" height="100%">
    <mx:VBox width="100%" height="100%">
      <rtc:Roster id="roster" height="100%" width="100%"/>
      <rtc:SimpleChat id="chat"  height="100%" width="100%"/>
    </mx:VBox>
    <mx:VBox width="100%" height="100%">
      <rtc:SharedWhiteBoard id="wb"  height="100%" width="100%"/>				
    </mx:VBox>
</mx:HBox>
</rtc:ConnectSessionContainer>
</mx:WindowedApplication>

If you compiled the movie now it would not work. The reason for this is that the service does not yet know who you are. Lets fix that by adding a the user name and password attributes to the AdobeHSAuthenticator. This will be the same as your the user name and password that you use to log in to Adobe.com.

Lets make a quick update to the code so your name will show up.

 
<rtc:AdobeHSAuthenticator id="HSAuthenticator"
        userName="User Name" password="Password" /> 

Now when you recompile your name should show up in the roster. When using the application you can now type into the chat pod and draw on the white board. If the items are not erased on the board they will still be there the next time you log in.

Conclusion
The Adobe Flash Collaboration Service provides a very quick way for developers to provide multi user experiences. Using these components that extend the Flex framework, the experiences created can be customized to reflect the needs at hand.

Here are some additional resources and the Flex project file.

• Adobe TV: Videos about AFCS
• Ryan Stewart's article on the Adobe's Developer Connection
• AFCS on Adobe Labs
• The Official blog for AFCS
• The Flex Project File

Read more from Russ Ferguson.