Transfert de variables

Je vais d'abord vous présenter l'ancienne technique, car elle vous permettra de mieux comprendre les différents mécanismes.

Mettons-nous en situation

On va prendre la situation la plus simple possible.
Supposons que vous souhaitez afficher la progression d'un projet avec un petit graphique en Flash.



On pourrait passer directement les données à l'animation, comme nous l'avons fait dans Transmission des variables. Mais nous allons utiliser la technique inverse : c'est l'animation qui va aller chercher elle-même les informations qui l'intéressent !

On va déjà créer une petite animation toute bête, avec 4 barres colorées qui vont représenter la progression de votre projet dans 4 domaines différents. On donnera comme nom d'occurrence : barre_1, barre_2, barre_3 et barre_4.

En haut de votre graphique, vous pouvez rajouter un champ de texte dynamique de variable : titre

.

Les variables à charger

Flash va charger 5 variables : la progression pour les 4 barres, et le titre du graphique.

On va donc enregistrer ces variables dans un fichier texte, et on va encoder ces variables au format urlencode, comme nous l'avions déjà fait quand nous passions directement les variables à l'animation.

Créez donc un fichier graphique.txt :
Citation : graphique.txt

N'oubliez pas d'enregistrer votre fichier texte au format UTF-8. Dans le Bloc-Notes, par exemple, il faut faire Fichier-> Enregistrez Sous -> Codage -> UTF-8.



Grâce à l'UTF-8, vous n'aurez pas de problème avec les accents et caractères spéciaux, vous pourriez même mettre du chinois mandarin dans le titre de votre graphique.

Du côté d'ActionScript

Maintenant qu'on a toutes les ressources nécessaires, reprenons notre animation, et passons à l'ActionScript.

La fonction loadVariables(url:String, target:Object); permet de charger les variables d'un fichier externe dans un objet.

Nous allons donc devoir créer un clip, qui va être chargé de recevoir les variables que nous allons charger, car les variables portant le même nom que des objets sur la scène, il y aurait un risque à les charger directement dans _root.

Ça commence donc comme ça :
Code : Autre

Ensuite, il ne reste plus qu'à faire correspondre les variables :

Code : Autre

Histoire de ne pas devoir écrire 4 fois barre_1._yscale = variables.barre_1, j'ai fait une petite boucle qui va le faire pour moi.

Maintenant, testons l'animation.


Parce qu'on a oublié un "détail" gênant. On essaye d'utiliser des variables qui ne sont pas encore nécessairement chargées ! En effet, le temps de charger le fichier graphique.txt, Flash a déjà exécuté le code pour faire correspondre les variables...

Nous allons donc devoir attendre que toutes les variables soient chargées avant de les faire correspondre. Pour cela, nous allons exécuter à chaque image un script qui vérifiera que la dernière variable du fichier texte (barre_4) est bien chargée. Le cas échéant, on fait correspondre les variables et on arrête le code.

Allez, je vous ai tout dit : à vous de bosser, maintenant !

Secret (cliquez pour afficher)

Et maintenant, tout fonctionne parfaitement ! Vous pouvez même vérifier que les caractères accentués passent bien dans le titre.

Avantages et inconvénients

Cette méthode possède l'avantage d'être rapide à mettre en oeuvre au niveau du code. Par contre, elle n'est pas très propre, car elle fait appel à un onEnterFrame. Et dans une grosse animation, l'accumulation de ce genre de méthodes peut rendre l'application très lourde.

Nous allons donc passer à une méthode plus belle (comme quoi la programmation n'est qu'une affaire d'esthétique ).

Voilà la classe qui va tous nous sauver : LoadVars

Nous allons reprendre le même exemple que précédemment, et le mettre à la sauce LoadVars ! Vous pouvez déjà supprimer tout le code utilisant LoadVariables().

On n'a plus besoin du clip variables, on va utiliser par contre un objet loadvars pour charger les données. Pour ne pas se dépayser, on l'appellera aussi variables.

Code : Autre

Maintenant, on va utiliser l'événement onLoad livré avec la classe LoadVars, qui va grandement nous faciliter la tâche. Cet événement est en effet appelé lorsque le chargement est terminé : plus besoin d'utiliser d'astuce avec onEnterFrame !

Code : Autre

Il suffit de reprendre le code précédent, et de remplacer onEnterFrame par onLoad. De plus, onLoad possède un argument bien pratique qui permet de savoir si le chargement a fonctionné ou pas. Notre code donnera donc :

Code : Autre

Il ne reste plus que le plus important : le code pour charger les données.
Il faut utiliser la méthode load(), qui demande le chemin d'accès au fichier contenant les données comme argument. Le code complet sera donc le suivant :

Code : Autre

Et voilà ! Votre animation fonctionne parfaitement et proprement.

C'est bien beau de pouvoir charger des variables, mais dans de nombreux cas, les variables que l'on chargera dépendront de la requête.

Imaginons que l'état d'avancement de votre projet ne doit être accessible que par mot de passe. On pourrait bien entendu conserver l'animation précédente, et rajouter un champ de texte, avec une bête vérification du mot de passe directement avec ActionScript avant de charger les données externes. Mais ça ne serait pas sécurisé, car il est possible de décompiler une animation Flash pour voir son code ActionScript, et donc le mot de passe, voire directement l'adresse du script auquel on fait appel !

Alors que si c'est le script PHP qui fait la vérification et ne renvoie les données que si le mot de passe est bon, le système devient inviolable (théoriquement ).

Nous allons donc transmettre le mot de passe par la méthode GET à notre script lors de la requête.

Du côté de PHP

Intéressons-nous déjà au script PHP qui va vérifier le mot de passe, et renvoyer les données.
Nous allons créer un fichier graph_pass.php en UTF-8.
Ce script recevra le mot de passe dans la variable $_GET['password']. (Nous prendrons comme mot de passe : sdz .)

Maintenant, à vous de jouer : faites moi ce petit script PHP !

Secret (cliquez pour afficher)

Du côté de Flash

Rajoutez sur la scène un champ de saisie, et donnez-lui comme nom d'occurrence (je ne parle pas du nom de variable) : password.

Maintenant, nous avons deux possibilités pour envoyer le mot de passe (contenu dans la propriété text du champ de texte password, c'est-à-dire dans password.text) au script PHP.

- Soit on reprend le code précédent, et on rajoute soi-même la variable pour avoir une ligne de ce genre :
Code : Autre
- Soit on utilise un second objet loadVars, qui aura pour seule fonction d'envoyer la variable.

Méthode rapide

Je vous ai montré comment faire pour pouvoir envoyer rapidement la variable au script : à vous de modifier le code précédent, pour que les données soient chargées lorsque l'utilisateur appuie sur "Entrée".

Correction possible :
Secret (cliquez pour afficher)

Méthode lente

Continuons avec le code que nous venons d'écrire.

Dans cette méthode, nous allons créer un second objet LoadVars tout au début du script :
Code : Autre

Lors de l'appui sur "Entrée", nous allons préciser les données à transférer par a_envoyer
Code : Autre

Et ensuite, nous allons modifier la ligne qui envoie le tout pour qu'elle puisse utiliser les deux loadVars en même temps :
Code : Autre

Expliquons un peu cette ligne. L'objet qui contient les données à envoyer est l'objet qui porte la méthode sendAndLoad() : il s'agit ici de a_envoyer. Ensuite, en second argument, on doit préciser le nom de l'objet qui recevra les données retournées par le script PHP : variables. Enfin, en troisième argument, on précise la méthode de transmission : ici, c'est "GET".

Le code complet donne donc :

Code : Autre

C'est un peu plus long que l'autre méthode. Mais imaginez qu'on ait beaucoup de variables à transmettre ; si en plus, on devait utiliser la méthode POST, alors on serait obligés d'utiliser la seconde méthode avec les deux objets LoadVars.

Vous vous souvenez de notre premier fil rouge avec le Zozor qui parle ?
Vous pouvez visionner ici le résultat qu'on avait obtenu.

Nous allons le rendre dynamique, c'est-à-dire que nous stockerons sa réplique dans un fichier texte qui sera chargé et qui pourra être modifié par l'animation.

Téléchargez ici la source de notre Zozor comme il était à la fin de notre précédent fil rouge.

Côté serveur - PHP

Il vous faut créer deux fichiers :

• zozor.txt, qui accueillera la réplique de Zozor
• zozor.php, qui fait le lien entre le fichier texte et l'animation

Enregistrez zozor.txt en UTF-8 et surtout, surtout, n'oubliez pas de mettre son CHMOD à 777 grâce à votre logiciel de transfert FTP. Sinon, votre script ne pourra pas modifier le fichier.
Pour l'instant, vous pouvez mettre ça comme réplique :
Citation : zozor.txt

Maintenant, nous allons coder un petit script PHP qui va aller lire ou écrire dans zozor.txt, selon la requête qu'on lui transmet.
Si l'animation veut lire la réplique, elle enverra la variable suivante au script PHP en POST :
action=lire

Si l'animation veut écrire une nouvelle réplique, elle devra en plus envoyer un mot de passe pour s'authentifier :
action=ecrire
password=sdz
replique=une nouvelle réplique

La première partie de notre script donnera donc :
Code : PHP

Maintenant, nous allons rajouter la partie qui permet de changer la réplique, et qui renvoie ensuite la nouvelle réplique :

Code : PHP

Ensuite, on n'a plus qu'à mettre tout ça bout à bout, et à prendre en compte le cas où l'animation envoie un mauvais code d'action, ou un mauvais mot de passe. Au total, ça donne :

Code : PHP

Côté client - Flash

Reprenez donc notre Zozor là où nous l'avions abandonné. Dans le code déjà écrit, supprimez tout, sauf la partie qui gère les yeux. Supprimez même la partie qui gère le bonnet, il nous servira de bouton pour valider : il doit donc être tout le temps affiché.

Pour la réception simple de la réplique, le code est facile, il n'y a rien de nouveau :
Code : Autre

Maintenant, nous allons concevoir la partie "écriture". Commencez par créer une zone de saisie, et donnez-lui comme nom d'occurrence (je ne parle pas du nom de variable) : password

On va rendre cette zone invisible :
Code : Autre

Il ne reste plus qu'à écrire ce qui doit se passer quand l'utilisateur clique sur le bonnet :
Code : Autre

Ai-je besoin d'expliquer ?
L'utilisateur peut modifier la bulle, ensuite il clique sur le bouton. Flash stocke alors dans a_envoyer l'action qu'on souhaite effectuer, 'ecrire', et la nouvelle réplique. Il affiche la zone de saisie où on peut rentrer un mot de passe.
Ensuite quand on reclique, le mot de passe est ajouté à a_envoyer, et le tout est transmis au script PHP !
Enfin, quand Flash reçoit les données transmises par le script, la partie qu'on a déjà écrite est exécutée, car on utilise aussi a_recevoir : la bulle est donc mise à jour.