Fabio Biondi Blog » Blog Archive » How to develop and eLearning Platform using Flex and Adobe Flash Collaboration Service (AFCS)

Home » Adobe, Flex 3, Real Time Collaboration, _Featured

How to develop and eLearning Platform using Flex and Adobe Flash Collaboration Service (AFCS)

18 September 2009 One Comment

In this article we’ll use the Adobe Collaboration Service components (codeName : CoCoMo) to develop a simple eLearning platform with following features:
1) WebCam
2) Audio on/off
3) User List
4) Text Chat
5) Shared notes
6) Shared whiteboard

I already introduced this topic on post Adobe Cocomo - Adobe Flash Collaboration Service, where instead using standard component i used the collectionNode class sharing a Value Object to move a displayObject synchronized across users.
I suggest to view the video tutorial available on AFCS SDK Navigator, an AIR application inside the last AFCS SDK release (see next image)

HOW TO DEVELOP THE ELEARNING PLATFORM

We’ll spend really few time to developed it because 98% of the code will be MXML and we’ll use actionscript 3 just to hide the loading message after user authentication.
Naturally we’are developing this application using default AFCS components. Customizing this components, manage users or create your own shared components will require a deeper architecture study. I’ll provide you more samples in the next weeks.

LET’SO GO TO THE CODE
1) First thing we have to do is create a new AFCS room using the ROOM CONSOLE, provided with SDK

2) Let’s create a new Flex Project and copy the AFCS SWC inside your /lib folder.

3) Copy following mxml code inside your main mxml file, changing username, password and room url in the AdobeHSAuthenticator and ConnectSessionContainer class.

Following code is so simple that I won’t comment it.

MAIN MXML FILE:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="100%" height="100%"
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="horizontal" 
	backgroundGradientAlphas="[1.0, 1.0]" 
	backgroundGradientColors="[#000000, #000000]"
	xmlns:rtc="AfcsNameSpace">
 
 
 
	<!-- ADFS AUTHENTICATION-->
	<rtc:AdobeHSAuthenticator id="auth"
		userName="Sostituire con il proprio username" 
		password="Sostituire con la propria password"
		authenticationSuccess="loadingTxt.includeInLayout = false;
					loadingTxt.visible = false"
		/>
 
 
 
	<!-- ADFS COMPONENT Container -->
	<rtc:ConnectSessionContainer width="100%" height="100%" 
		roomURL="http://connectnow.acrobat.com/PERCORSO_STANZA" 
		id="cSession" 
 
		authenticator="{auth}">
 
		<mx:HBox width="100%" height="100%" >
 
		    <mx:VBox width="280" height="100%" >
 
			    <mx:Panel width="100%"  title="Webcam" layout="vertical"
			    	horizontalAlign="center">
 
			    	<!--WEB CAMERA / AUDIO -->
			    	<rtc:WebCamera width="100%" height="120"/>
 
			    	<!-- AUDIO PUBLISHER-->
				    <rtc:AudioPublisher id="audioPub"/>
 
				    <!-- AUDIO LISTENER -->
				    <rtc:AudioSubscriber/>
 
				    <!-- ENABLE / DISABLE AUDIO-->
				    <mx:Button label="Audio on/off" 
						toggle="true" id="audioButt" color="#000000"
						click="(audioButt.selected) ? audioPub.publish() : audioPub.stop()"/>
			    </mx:Panel>
 
 
 
			    <!--USER LIST-->
			    <mx:Panel width="100%" height="100" title="User List">
			    	 <mx:List 
						width="100%" height="100%" 
						dataProvider="{cSession.userManager.userCollection}" 
						labelField="displayName" color="#000000" fontWeight="bold"/>			    	
			    </mx:Panel>
 
 
 
			    <!--SIMPLE CHAT -->
				<mx:Panel width="100%" height="100%" title="Chat">
					<rtc:SimpleChat width="100%" height="100%"/>	
				</mx:Panel>	
 
 
 
				<!--SHARED NOTES -->
				<mx:Panel width="100%" height="140" title="Shared Note">
					<rtc:Note width="100%" height="90"/>
				</mx:Panel>	
 
		    </mx:VBox>
 
 
 
		    <!--WHITEBOARD -->
		    <mx:Panel width="100%" height="100%" title="WhiteBoard" 
					backgroundColor="#ff0000">
				<rtc:SharedWhiteBoard id="sharedWB" width="100%" height="100%" />
			</mx:Panel>
 
		</mx:HBox>
 
 
	</rtc:ConnectSessionContainer>
 
	<!--LOADING MESSAGE -->
	<mx:Label id="loadingTxt" text="Loading.. wait few seconds" color="#ffffff" />
 
</mx:Application>

MANAGE ROOMS
Yo can monitor and manage your rooms using the Room Console. For example, following screenshot show you how view and remove chat messages.