Aller au menu - Aller au contenu

Icône Transfert de variables

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 71 sur ce chapitre classé 39/786
Nous avons appris comment charger des photos ou des animations Flash dynamiquement. C'est bien beau, mais encore faudrait-il savoir quel est le nom de l'image à télécharger !
On va donc s'intéresser à la classe LoadVars, qui permet d'effectuer une requête HTTP sur une page Web, ce qui nous permettra de récupérer des variables contenant ce dont on a besoin. :D
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

La vieille technique

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. :D
Supposons que vous souhaitez afficher la progression d'un projet avec un petit graphique en Flash.

Image utilisateur


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

Vous pouvez télécharger la source de départ
.

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
titre=Mon+graph&barre_1=50&barre_2=75&barre_3=15&barre_4=89


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.

Pensez tout de même à utiliser un éditeur de texte plus avancé que le Bloc-notes, car il existe plusieurs façons d'enregistrer un fichier en UTF-8, et celle du Bloc-notes est mal supportée par PHP. (En fait, PHP n'aime pas la signature unicode BOM utilisée d'office par le Bloc-Notes.)


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. ;)

Ai-je besoin de rappeler que si vous mettez votre animation en ligne, il faudra penser au crossdomain.xml pour pouvoir charger des variables ?


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 : Actionscript
1
2
this.createEmptyMovieClip("variables", this.getNextHighestDepth());
loadVariables("graphique.txt", variables);


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

Code : Actionscript
1
2
3
4
_root.titre=variables.titre;
for (var i=1;i<=4;i++) {
_root['barre_'+i]._yscale = variables['barre_'+i];
}


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. :D

o_O Pourquoi ça ne marche pas ?

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)
Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
this.createEmptyMovieClip("variables", this.getNextHighestDepth());
loadVariables("graphique.txt", variables);
variables.onEnterFrame = function() { // On se place directement dans "variables"
        if (this.barre_4) { // Si barre_4 est défini 
                _root.titre = this.titre; // On est dans "variables", "this.titre" correspond à ce qui a été chargé du fichier texte
                for (var i = 1; i<=4; i++) {
                        _root['barre_'+i]._yscale = this['barre_'+i];
                }
                delete this.onEnterFrame; // Fait la même chose que "this.onEnterFrame = null;"
        }
};


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 :D (comme quoi la programmation n'est qu'une affaire d'esthétique :lol: ).
Retour en haut

Chargement avec LoadVars

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 : Actionscript
1
var variables:LoadVars = new LoadVars();


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 : Actionscript
1
2
3
4
5
6
variables.onLoad = function() {
        _root.titre = this.titre;
        for (var i = 1; i<=4; i++) {
                _root['barre_'+i]._yscale = this['barre_'+i];
        }
};


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 : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
variables.onLoad = function(succes:Boolean) {
        if (succes) {
                _root.titre = this.titre;
                for (var i = 1; i<=4; i++) {
                        _root['barre_'+i]._yscale = this['barre_'+i];
                }
        } else {
                trace("Quelque chose n'a pas fonctionné");
        }
};


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 : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var variables:LoadVars = new LoadVars();
variables.onLoad = function(succes:Boolean) {
        if (succes) {
                _root.titre = this.titre;
                for (var i = 1; i<=4; i++) {
                        _root['barre_'+i]._yscale = this['barre_'+i];
                }
        } else {
                trace("Quelque chose n'a pas fonctionné");
        }
};
variables.load("graphique.txt");


Et voilà ! Votre animation fonctionne parfaitement et proprement. ;)
Retour en haut

Envoyer des variables

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 :p ).

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



Pour tester cet exemple, il faut bien entendu le mettre en ligne, ou alors utiliser un serveur PHP en local (comme le permettent easyphp ou wamp), pour que le script PHP soit exécuté.


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 :D .)

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

Secret (cliquez pour afficher)
Code : PHP
1
2
3
4
5
if ($_GET['password'] == 'sdz') {
echo 'titre=Mon+graphique&barre_1=50&barre_2=75&barre_3=15&barre_4=89';
} else {
echo 'titre=Accès+refusé';
}



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 : Actionscript
1
variables.load("graph_pass.php?password="+this.password.text);

- 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)
Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var variables:LoadVars = new LoadVars();
variables.onLoad = function(succes:Boolean) {
        if (succes) {
                _root.titre = this.titre;
                for (var i = 1; i<=4; i++) {
                        _root['barre_'+i]._yscale = this['barre_'+i];
                }
        } else {
                trace("Quelque chose n'a pas fonctionné");
        }
};
this.onEnterFrame = function() {
        if (Key.isDown(Key.ENTER)) {
                variables.load("http://www.jouhaud.eu/sdz/graph_pass.php?password="+this.password.text);
                this.password._visible = false;
        }
};



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 : Actionscript
1
var a_envoyer:LoadVars = new LoadVars();


Lors de l'appui sur "Entrée", nous allons préciser les données à transférer par a_envoyer
Code : Actionscript
1
a_envoyer.password = this.password.text;


Et ensuite, nous allons modifier la ligne qui envoie le tout pour qu'elle puisse utiliser les deux loadVars en même temps :
Code : Actionscript
1
a_envoyer.sendAndLoad("http://www.jouhaud.eu/sdz/graph_pass.php",variables,"GET");


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 : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var variables:LoadVars = new LoadVars();
var a_envoyer:LoadVars = new LoadVars();
variables.onLoad = function(succes:Boolean) {
        if (succes) {
                _root.titre = this.titre;
                for (var i = 1; i<=4; i++) {
                        _root['barre_'+i]._yscale = this['barre_'+i];
                }
        } else {
                trace("Quelque chose n'a pas fonctionné");
        }
};
this.onEnterFrame = function() {
        if (Key.isDown(Key.ENTER)) {
                a_envoyer.password = this.password.text;
                a_envoyer.sendAndLoad("http://www.jouhaud.eu/sdz/graph_pass.php",variables,"GET");
                this.password._visible = false;
        }
};


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.
Retour en haut

Exercice : Zozor dynamique

Vous vous souvenez de notre premier fil rouge avec le Zozor qui parle ? :D
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
Salut je m'appelle Zozor, symbole du SDZ


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
1
2
3
if ($_POST['action'] == 'lire') {
echo 'replique='.file_get_contents('zozor.txt');
}


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

Code : PHP
1
2
3
4
5
6
if ( ($_POST['action'] == 'ecrire') && ($_POST['password'] == 'sdz') ) {
        $zozor = fopen('zozor.txt','w');
        fwrite($zozor, $_POST['replique']);
        fclose($zozor);
        echo 'replique='.file_get_contents('zozor.txt');
}


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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
if ($_POST['action'] == 'lire') {
        echo 'replique='.file_get_contents('zozor.txt');
} else if ( ($_POST['action'] == 'ecrire') && ($_POST['password'] == 'sdz') ) {
        $zozor = fopen('zozor.txt','w');
        fwrite($zozor, $_POST['replique']);
        fclose($zozor);
        echo 'replique='.file_get_contents('zozor.txt');
} else {
        echo 'replique=ca+bug+...';
}


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 : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
//-
//- CONTENU DE LA BULLE
//-
var a_recevoir:LoadVars = new LoadVars();
var a_envoyer:LoadVars = new LoadVars();
//-- Lecture
a_recevoir.onLoad = function(succes:Boolean) {
        if (succes) {
                _root.bulle.htmlText = this.replique;
        } else {
                trace("Quelque chose n'a pas fonctionné");
        }
};
a_envoyer.action = 'lire';
a_envoyer.sendAndLoad("zozor.php", a_recevoir, "POST");


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 : Actionscript
1
password._visible = false;


Il ne reste plus qu'à écrire ce qui doit se passer quand l'utilisateur clique sur le bonnet :
Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
bonnet.onRelease = function() {
        if (!password._visible) {
                a_envoyer.action = 'ecrire';
                a_envoyer.replique = bulle.text;
                password._visible = true;
                password.text = 'mot de passe ?';
        } else {
                password._visible = false;
                a_envoyer.password = password.text;
                a_envoyer.sendAndLoad("zozor.php", a_recevoir, "POST");
        }
};


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.

Vous pouvez télécharger la source du projet fini au format flash 8.
Retour en haut

Q.C.M.

On n'aurait pas dû utiliser une variable dans notre code ActionScript, laquelle ?
Il y a une grosse faille dans notre exemple, il y a un caractère qui ne passera pas quand on enregistre une nouvelle réplique ! Lequel ?
Comment corriger le problème du côté de PHP ?
Cette fois, on ne touche plus au script PHP, mais on peut modifier le code Flash lors de l'envoi des données.
Comment corriger le problème du côté de Flash ?

Statistiques de réponses au QCM

Retour en haut
Surtout, n'hésitez pas à vous entraîner à utiliser les LoadVars, ce sont des objets indispensables.

Maintenant, vous avez la capacité de créer un mini-chat, en conjuguant Flash avec un script PHP, et éventuellement une base de données ! :D
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
5 commentaires pour "Transfert de variables"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne kanalkyte # Posté le 01/11/2006 à 18:26:36
plop
Avatar

Études : Télécom Bretagne

 Salut,

Je voulais savoir comment faire pour envoyer à PHP le contenu de cette variable:

http://www.monsite.net/index.php?id=2
En utilisant la fonction pour envoyer oui mais il faut mettre quoi dedans ?

Merci d'avance pour votre réponse !
Tuto Eyetoy sur PC
Image utilisateur
0 invitation Soptify restante.
 
Hors ligne Oly # Posté le 10/09/2007 à 18:28:17
Zog Zog !
Avatar

 Je croit que je pose la meme question mais comment envoyer des données a PHP

exemple je crée mon programme de verification en flash qui renvoi a php si le mots de passe a bien été rentrer ( il y a plein d'autre facon de faire sa mais la il faut que j'envoie des variable a php )

Code : PHP - Afficher / masquer les numéros de ligne
  1. <?php
  2.  
  3. $pass = "machin";
  4.  
  5. // envoi du pass a l'animation
  6.  
  7. ?>
  8.  
  9. // dans un autre fichier
  10. <?php
  11.  
  12. if($valid)
  13. {
  14.  
  15.  echo "Salut =) ";
  16.  
  17. }
  18.  
  19. ?>


Oui on peut envoyer le variable comme sa machin.php?variable=truc

mais ou ets la sécuriter ????

Voila merci de ton tuto et d'avance merci pour votre réponse
Image utilisateur
 
Hors ligne zarnergun # Posté le 13/05/2008 à 20:37:35
Zer0 n°1680
Avatar

Études : IUT Dijon

 Salut, je met un bon 18, pour l'ensemble

Merci
N’attribuez jamais à la malveillance ce qui s’explique très bien par l’incompétence - Napoléon Bonaparte
 
Hors ligne Valck # Posté le 22/09/2008 à 21:01:43
"Dude ... "
Avatar

Études : ESEO Angers Dijon Paris

 Les liens de démonstration ne marchent pas (ou plus).
Tutoriel : Les listes chaînées en C (PDF)
Mes langages: xHTML, CSS, PHP, SQL, C, JavaScript, Java.
 
Hors ligne simocinco # Posté le 28/08/2009 à 05:32:01

bjr, je veux savoir l'organisation de nos fichiers pour faire ce genre de communication entre php et flash, autrement dit, est ce que l'animation SWF doit etre portée sur la meme page php ou on met le code php ? et est ce que ça a une relation avec la methode a choisir (POST ou GET).
merci bien de vouloir me repondre !

Voir tous les commentaires