Realtime Data Synchronization between Flex and Air for Android using Red5

After a January break, i going to write more about Air for Android specifically targeting to Realtime data synchronization, in this post i'm going to show you how you can synchronize Adobe Air with Adobe Air for Android in true realtime using Red5 RTMP.

Requirements:

• Adobe Flash Builder Burrito Preview.
•  Flex 4.5 "Hero" (Comes with Flash Builder Burrito)
• Red5 Server.
• Eclipse 3.4+ with Red5 Plugin installed. If you don't know how to install here is a little tutorial.
• Some basic AS3 knowledge is recommended. 

Hardware:

• Toshiba dualcore laptop 6gb ram running windows 7.
• Google Nexus S smartphone with Air for Android installed.  

 So let's code.

Server Side:
If you successfully install Red5 plugin into eclipse, this part will be straightforward. Create a new Dynamic Web Application and call it MoveServer, set the Target Runtime to Red5, in Configuration click the Modify button and make sure  that Red5 Application Generation is Selected.

Now click finish and the Red5 Plugin will generate two Projects a Java Dynamic Web Application and a Flex application, delete the flex application. Now one more change, go to the red5-web.properties located in under WebContent/Web-INF and add the ip of your machine in your virtualHosts. You might wondering why do this since there is a localhost well when you try to connect from your phone it will try to connect to localhost and since there is no localhost in the phone it will not work.

red5-web.properties
webapp.contextPath=/MoveServer
webapp.virtualHosts=localhost, 127.0.0.1, 192.168.1.2,


Thats all for the server side. Now let's continue with the client side: The application that i will build is pretty simple an image in the screen that uses the phone accelerometer to move around the screen and for the desktop version instead of the accelerometer y use mouse events to move the image this to applications will be synchronize in real time.

Client Side:
In Flash Builder Burrito create a new Flex Mobile Project call this BallMovementMobile and Select Hero has your Flex SDK.

Next target to Google Android, select Blank as the application template and finally uncheck Automatically Reorient, you don't need any server settings so hit finish.

 Now search for any image and use it, i use a soccer ball. Put the image in a assets folder under the src folder

 Now add and image component to your mxml file:

BallMovementMobile.mxml


Now let check if our phone has accelerator and add the event listeners so we can use the accelerometer events, add an creation complete event in your main application tag and add the following:

BallMovementMobile.mxml


The next step is add a net connection and a shared object to out application:

BallMovementMobile.mxml


Some words about the code above:

• I put the accelerometer.setRequestUpdateInterval to 50 so i can get a faster update from the accelerometer, here you can play with the values to preserve your battery life.
• In the SharedObject getRemote method i named it "victor" you can put any value you want.
• The Sync event is where all the magic happens, here all the clients are notified that something has change and they must synchronize with that changes.

 Now let's add the code for sync and accelerometer update events:

BallMovementMobile.mxml


Some words about the code:

• In the accelerometerUpdate handler i calculate the upper bound and the lower bound for the width and height, then get the x and y values given by the accelerometer, check if the value is not greater than the upper bound or lower than the lower bound and update the image x and y has necessary.
• When i update the shared object i call it "ballCoordinates" again you can use any word here.
• In the sync event i get the shared object data and update the image x and y.
• Finally i add and native deactivate event so the application will not run in the background, again this is for cpu saving. (You can read more Air for Android tips here)

The final step for the mobile application, change the application descriptor properties as follows:

Now create an Air application (not mobile) use the same image and add the following code:



There are a little code differences but it's almost the same application.

Now run both applications and move your phone and the two screens will be synchronized in realtime.

That's all here is the source code for the mobile the desktop and the server application. Here is a quick demo of the application:



Recommendation: When you use the source code please make sure you change the parameters according to your system.

If you have any question or found a mistake or bug please let me know. Thanks