Fabio Biondi Blog » Blog Archive » P2P - Share real-time data across Android and desktop AIR applications to build multiuser games and collaborative RIA

Home » AIR, AIR for Android, Adobe, Flash AS 3, _Featured

P2P - Share real-time data across Android and desktop AIR applications to build multiuser games and collaborative RIA

23 November 2010 13 Comments

Using native IP-only multicast feature available with Adobe AIR 2.0 and Flash Player 10.1 you can easly establish a connection and share real-time data between two or more clients over the same network (LAN).

The immediate advantage you can get from this tecnique is that you won’t need to use a dedicated server (like Flash Media Server, AFCS, and so on) to share real-time data across multiple clients.

Another cool stuff is that you can use P2P to share data between mobile Air for Android apps and desktop AIR applications, and in this post I’ll provide you a video demo and the source code to put in place this, getting you the fundamentals to build your own multiuser game or collaborative application.

What you can also do using this technology:

- Building real-time chats
- Collaborative whiteboards
- real-time multiusers games
- manage a desktop AIR application from your Android device: let’s think about an AIR Media Center on your TV managed from your mobile device; or moving a slide presentation on your laptop from your Android smartphone, and so on
- everything else needs to share real-time data across multiple clients and different platforms.

Below, the video demo (no-sound) where I show you the final result.
Moving the movieclip on my Android device, I will move the clip on my desktop application too, and viceversa.

Following the ActionScript source code (full-commented) to build the Air for Android application in Adobe Flash Professional CS5.

Document class:

package  {
 
	import flash.display.MovieClip;
	import flash.events.NetStatusEvent;
	import flash.events.MouseEvent;
	import flash.net.NetConnection;
	import flash.net.NetGroup;
	import flash.net.GroupSpecifier;
	import fl.transitions.Tween;
	import fl.transitions.easing.Strong;
 
 
	public class Main extends MovieClip {
 
		private var nc:NetConnection;
		private var group:NetGroup;
 
 
		/**
		 * Constructor
		 */
		public function Main() 
		{
 
			mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			this.stage.addEventListener(MouseEvent.MOUSE_UP, drop);
 
			connect();
		}
 
 
		/**
		 * Connect
		 */
		private function connect():void
		{
			nc = new NetConnection();
			nc.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
			nc.connect("rtmfp:");			
		}
 
 
		/**
		 * Net Status event handler
		 */
		private function netStatus(event:NetStatusEvent):void{
 
			switch(event.info.code){
 
				// The connection attempt succeeded
				case "NetConnection.Connect.Success":
					setupGroup();
					break;
 
				// The NetGroup is successfully constructed and authorized to function.
				case "NetGroup.Connect.Success":
					// Do nothing
					break;
 
				// A new group posting is received
				case "NetGroup.Posting.Notify":
					moveObject(event.info.message);
					break;
			}
		}
 
 
		/**
		 * Create a group 
		 */	
		private function setupGroup():void
		{
			// Create a new Group Specifier object
			var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/groupA");
 
			// Enable posting
			groupspec.postingEnabled = true;
 
			// Specifies whether information about group membership can be exchanged on IP multicast sockets
			groupspec.ipMulticastMemberUpdatesEnabled = true;
 
			// Causes the associated NetStream or NetGroup to join the specified IP multicast group and listen to the specified UDP port.
			groupspec.addIPMulticastAddress("225.225.0.1:30000");
 
			// Constructs a NetGroup on the specified NetConnection object and joins it to the group specified by groupspec.
			group = new NetGroup(nc,groupspec.groupspecWithAuthorizations());
 
			// Set the NET_STATUS event listener
			group.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
		}
 
 
 
		/**
		 * Drag the object
		 */
		protected function drag(e:MouseEvent):void
		{
			this.stage.addEventListener(MouseEvent.MOUSE_MOVE, move);
		}		
 
 
		/**
		 * Move the object in accordind of the mouse position
		 */
		protected function move(e:MouseEvent):void 
		{
			mc.x = this.mouseX - mc.width/2;
			mc.y = this.mouseY - mc.height/2;
			e.updateAfterEvent();		
		}
 
 
		/**
		 * Drop the object and send a message to all members of a group.
		 */ 
		protected function drop(e:MouseEvent):void 
		{
 
			// Create the object to send to all members
			var obj:Object = new Object();
 
			// Save the current movieclip position
			obj.x = mc.x ;
			obj.y = mc.y ;
 
			// Set the peerID to a group address suitable for use with the sendToNearest() method.
			obj.sender = group.convertPeerIDToGroupAddress(nc.nearID);
 
			// Sends a message to all members of a group.
			group.post(obj);
 
			// REmove the move event listener
			this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, move);
		}
 
 
 
		/**
		 * Move the object after posting has been received
		 */
		public function moveObject(message:Object):void
		{
			var myTweenX:Tween = new Tween(mc, "x", Strong.easeInOut, mc.x, message.x, 1, true);
			var myTweenY:Tween = new Tween(mc, "y", Strong.easeInOut, mc.y, message.y, 1, true);
		}
 
 
	}
}

To test this sample you should use the previous class as document class of a new Air for Android Flash file (using Flash Professional CS5) and create a movieclip on your stage setting its instance name to ‘mc’ (see image below):

To verify if P2P is working, let’s run two instances of the application on your desktop and drag the movieclips.
If it works, install the application on your Android device, open an instance on your desktop and move the movieclip on both platforms to see if clients are connected.

Remember to set the android manifest permission to allow internet connections on your android xml-descriptor file:

  <android>
    <manifestAdditions>
       <![CDATA[
<manifest>
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>]]>
    </manifestAdditions>
  </android>

-
Download the source code and the APK installation file for Android

–
Related articles from flashrealtime.com
I got inspiration from flashrealtime.com blog and I suggest you to read and watch following tutorials:
- Building P2P Multiplayer Games at Adobe MAX 2010 (interesting video)
- Local Flash Peer-to-Peer Communication over LAN (without Cirrus/Stratus)
- Flash gets GPU-accelerated 3D! MAX Racer with P2P multiplayer

13 Comments »

Drupal Development India - Wordpress 201 said:

[...] Fabio Biondi Blog » Blog Archive » P2P – Share real-time data … [...]

# 27 November 2010 at 14:09

Flash Tutorial: How to use P2P to share data between mobile Air for Android apps and desktop AIR applications | Adobe Flash Lite said:

[...] 10.1, Tutorials — Li YongFei @ 8:29 am Fabio Biondi has posted a new Flash tutorial: P2P – Share real-time data across Android and desktop AIR applications to build multiuser game…, the tutorial will teach you how to use native IP-only multicast feature available with Adobe AIR [...]

# 27 November 2010 at 15:29

Helge Betzinger said:

Nice, but where is the long latency is coming from?

# 27 November 2010 at 19:30

iBrent said:

Awesome tutorial! This is by far one of the coolest features that hardly gets mentioned when discussing Flash Player 10.1 and AIR 2. I was blown away by some of the demos shown at MAX this year.

iBrent

# 28 November 2010 at 00:15

Fabio Biondi (author) said:

@Helge: if you try to sync every single point (x,y) you won’t obtain a fluid movement in the receiver client, so I have used tweens to create smooth transitions.
This is a Tom Krcha’s trick (from FlashRealTime.com) that suggest to use interpolation in the receiver client. See the FlashRealTime links to get more info about it.

# 28 November 2010 at 14:06

stef said:

Adding interpolations won’t reduce the latency. This is just a trick, and a dirty one… User experience won’t be better.

# 2 December 2010 at 10:45

Fabio Biondi (author) said:

@stef: yes it’s a trick but i’m not agree with you.
You can’t avoid the latency, so this is good way to provide a good UX in games and many apps.
Naturally you can find other ways… this is just a sample using Tween (that it’s not the best and fast solution).

# 2 December 2010 at 11:13

Diether said:

Congrat’s Fabio.
Only one question. Everytime when i execute the swf, my firewall is activated and asks me if I want to authorize to run the application. is there any way my swf not get blocked by windows firewall?

# 17 January 2011 at 18:12

azhar said:

hi. I have tried following the steps you have proposed. It works well between 2 swf files but not when I tried on my mobile. Have I missed out any important steps? I do hope to hear from you soon.

# 24 March 2011 at 05:11

Fabio Biondi (author) said:

Did you set the INTERNET permission when publishing the apk file?

# 24 March 2011 at 11:13

Tan said:

Hi there,

Really nice article showcasing the p2p capabilities with AIR for Android. I am trying to create an application to use this method to control the power point slides in my PC but I am not sure how to start.Do I need to convert the .ppt slides into a .swf file?And how do i actually program to move from one slide to another? Any advice would be appreciated. Thanks!

Regards

# 28 March 2011 at 08:22

Stephen said:

Works perfectly with packager for iOS too.

# 26 May 2011 at 14:58

Geo said:

Hi Fabio,

Thanks for the nice article.

Can you please explain me how you are setting up a Peer-to-peer connection between your android mobile and the Laptop? Are you using the USB or WiFi Tethering? If we use WiFi Tethering in Android 2.2, will this application work? I’m trying to use this method, but was not successful.

Thanks,
Geo

# 21 December 2011 at 13:04

P2P - Share real-time data across Android and desktop AIR applications to build multiuser games and collaborative RIA

13 Comments »

Leave your response!

Archives

Categories

Blogs

Recent Posts

Most Commented

Recent Comments