Créer une animation flash qui communique avec un serveur

Introduction du cours

Bonjour à tous. :)

Pour commencer, je dois vous prévenir que pour lire ce tutoriel, il faut des connaissances en AS (ActionScript) 2.0. Si vous voulez l'apprendre, un tuto a déjà été créé : Tuto AS 2.0.

Si vous avez ces connaissances, ce tuto devrait être très simple ou tout du moins, pas très compliqué.

XMLSocket : qu'est-ce que c'est ?

XMLSocket permet de faire dialoguer plusieurs animations (ici, des animations Flash).
Ces animations vont envoyer des données au serveur qui sera chargé de les renvoyer aux autres.

Animation 1 envoie : "je suis l'anim 1"

Animation 1 reçoit > "je suis l'anim 1"
Animation 2 reçoit > "je suis l'anim 1"
Animation 3 reçoit > "je suis l'anim 1"
Animation 4 reçoit > "je suis l'anim 1"
Animation X reçoit > "je suis l'anim 1"
Etc.

Si vous avez bien compris comment étaient réparties les données, la suite ne devrait pas poser de problèmes.

Un serveur ? Quel serveur ?

Il existe beaucoup de serveurs XMLSocket : personnellement, j'utilise AquaServer, que vous pouvez télécharger ICI.
Ou bien vous pouvez en choisir un autre, il n'y a aucune différence pour la partie du code.

Si vous avez choisi AquaServer, il suffit d'ouvrir le répertoire server et de lancer le fichier lance.bat. Une fenêtre va s'ouvrir et vous indiquer quel port le serveur écoute.

Vous avez deux commandes :

• List : affiche la liste des clients connectés au serveur ;

• Quit : arrête le serveur.

Connexion au serveur

Maintenant, nous allons nous occuper du code.

Pour vous connecter au serveur, il vous faut créer un objet XMLSocket, comme ceci :

var serveur:XMLSocket = new XMLSocket();

C'est cet objet qui va nous servir pour communiquer avec le serveur.

Connexion

Pour vous connecter au serveur, il va vous falloir deux choses :

• l'adresse IP du serveur ;

• le port écouté par le serveur.

Si le serveur est lancé sur votre PC et si l'animation est elle aussi sur ce PC, l'adresse IP à fournir sera alors 127.0.0.1 (l'adresse IP locale).
Si vous avez choisi AquaServer, il y a de grandes chances pour que le port soit 1024, sinon regardez sur le serveur : il devrait vous l'indiquer.

À présent, le code :

serveur.connect("127.0.0.1",1024);

Si vous aviez des informations différentes, il suffit de modifier les paramètres envoyés.

Il va maintenant falloir vérifier si la connexion a bien été établie. Pour cela, on utilise le gestionnaire d'évènement onConnect.

serveur.onConnect = function(etat) // la variable etat va nous dire si la connexion s'est terminée avec succès { if(etat) // Si la connexion a été établie { trace("Connexion établie"); }else{ trace("Erreur de connexion"); } };

À partir de maintenant, il vous suffit de connaître deux fonctions et vous serez à même de créer un chat en Flash !
(Je sais, je ne suis pas très original, mais c'est le plus simple.)

Envoi / réception de donnéesEnvoi

Pour envoyer des données au serveur XMLSocket sous forme de chaînes de caractères, il vous suffit d'utiliser une méthode simple de la classe XMLSocket : send.

Imaginons pour notre chat un message tout simple :

var msg:String = "Vive le SdZ !";? serveur.send(msg);

C'est aussi simple que ça ?

Oui, et on ne va pas s'en plaindre car la réception est un tout petit peu plus complexe, mais sans grandes difficultés.

Réception

La réception est, elle, un tout petit peu plus compliquée.
On va commencer par un code erroné, pour finalement mieux comprendre le fonctionnement.

Pour la réception, on utilise un gestionnaire d'évènement : onData.

serveur.onData = function(msg_recu) { trace(msg_recu); }

Maintenant, créez deux animations, les deux se connectent au même serveur, l'une envoie des messages tandis que l'autre les réceptionne et les affiche.

... et là, malheur ! Ça ne fonctionne pas !

Pourquoi ?

Parce que onData vérifie à l'instant même si des messages ont été envoyés par le serveur : sinon il ne fait rien, une fois exécuté, il ne vérifie plus l'arrivée des données.

Comment faire pour remédier à ça ?

C'est tout simple, on va l'appeler à chaque frame.

Code completvar serveur:XMLSocket = new XMLSocket(); serveur.connect("127.0.0.1",1024) // Connexion au <italique>serveur</italique> serveur.onConnect = function(etat) { if(etat) { _root.onEnterFrame = function() { serveur.onData = function(msg_recu) { trace(msg_recu); } }; }else{ trace("Erreur lors de la connexion avec le serveur"); } };

Voilà : vous savez tout ; maintenant, à la pratique !

Le tuto est fini mais qui sait... ^^

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : ActionScript Flash Flex Programmation

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.