[Tuto] Utilisation des remote SharedObject en AS3

Lorsqu’ils sont utilisés en mode locale, les SharedObjects permettent de lire et de stocker des données sur l’ordinateur d’un utilisateur. Mais si on les utilise en mode remote ils permettent de partager des données en temps réel entre plusieurs clients flash au travers du protocol RTMP et d’un serveur de type Flash Media Serveur.

Cette article montre comment utiliser les SharedObjects dans ce but, nous allons donc créer une simple application qui affiche une ball sur l’écran.Si plusieurs personne se connecte à l’application, lorsque un utilisateur déplace la balle les autres swf connecté reçoivent la nouvelle position de la balle et mette à jour l’affichage.

J’aurai aimé mettre en ligne un exemple pour vous montrez le résultat mais je ne dispose pas de serveur FMS en ligne. Il vous faudra donc compiler le code vous même et tester en local.

Voici le code source de l’application:

package
{
    import flash.display.Sprite;
    import flash.events.AsyncErrorEvent;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.events.SyncEvent;
    import flash.net.NetConnection;
    import flash.net.SharedObject;  
 
/**
         * Application simple pour montrer l'utilisation des shared Object en AS3
  * @author Idden
  */
 public class TestSO extends Sprite
 {
 	public function TestSO()
 	{
 
NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0 ;
 		SharedObject.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
 
// La ball déplacé par les utilisateurs
 		circle = new Sprite();
 		circle.graphics.beginFill(0xFFCC00);
 		circle.graphics.drawCircle(0, 0, 40);
 
addChild(circle);
 
// Créer une nouvelle NetConnection
 		client_nc = new NetConnection();
 		// conect le netCo au serveur FMS
 		client_nc.connect("rtmp://localhost/ball");
 
// Crée un remote shared object sur le serveur fms
 		ball_so = SharedObject.getRemote("position", client_nc.uri, false);
 		ball_so.client = this ;
 
// On ajoute les listenters pour les évenements de nos objets
 		ball_so.addEventListener(SyncEvent.SYNC, onSync);
 		ball_so.addEventListener(AsyncErrorEvent.ASYNC_ERROR, onAsync);
 
circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) ;
 
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
 
// Connect le shared object
 		ball_so.connect(client_nc);
 
}
 
public var ball_so : SharedObject;
 	public var client_nc : NetConnection ;
 	public var circle: Sprite ;
 
// Mets à jour la position de la ball lorsque un des utilisateurs la déplace
 	private function onSync(e : SyncEvent) : void
 	{
 
if(ball_so.data.x != null)
 	  {
 	      circle.x = ball_so.data.x;
 	      circle.y = ball_so.data.y;
 	  }
 	  trace("sync : " + ball_so.data.x);
 	  for (var prop2:String in e.target.data)
                  {
 	      trace(prop2+": "+e.target.data[prop2]);
 	  }
 	}
 
private function onAsync(e : AsyncErrorEvent) : void
 	{
 	    trace("async error : " + e.error);
 	}
 
public function mouseDown(event:MouseEvent):void
 	{
 	    circle.startDrag();
 	}
 
public function mouseReleased(event:MouseEvent):void
 	{
 	    circle.stopDrag();
 
// On change la valeur du SharedObject
             ball_so.data.x = event.stageX ;
        	    ball_so.data.y = event.stageY ;
 
// On notifie le serveur du changement dans le SharedObject
        	    ball_so.setDirty("x");
        	    ball_so.setDirty("y");
    	    }
 }
}

Au préalable pensez à créer une application coté fms pour héberger le shared object. Cette application peux aussi vous servir de debug pour vérifier si les utilisateurs se connecte bien a fms et refuser les connexion venant d’autres swf que le notre.

Note :
En rédigeant ce tuto je me suis aperçu d’une chose étrange au tout de mois différente de l’as2. Le shared object ne semble pas diffusé l’événement onSync lorsque sa propriété “data” est modifié, j’ai donc utilisé la méthode “setDirty” pour forcer la diffusion de cette événement. Une petite astuce qui peux faire économiser pas mal de temps ;)

 

Comme d’hab si vous avez des questions ou des remarques les commentaires sont la pour ça.

1 commentaire jusquà maintenant ↓

#1 Sebas on 08.26.08 at 20:51

Merci pour cet exemple et le truc du setDirty!

Laisser un commentaire