Les données textuelles (fla_dyn_01.fla)
Depuis l'apparition des variables dans Flash, il est possible de directement communiquer avec l'animation depuis l'extérieur en utilisant le principe de propriété = valeur. Le plus simple moyen de le mettre en oeuvre et en évidence reste de créer une animation ne contenant qu'un champ texte ayant un nom de variable défini, par exemple nom_variable. Lancez le swf dans un navigateur puis ajoutez à la fin de l'URL la chaine suivante...
URL?nom_variable=coucou
...recharger l'animation, vous verez alors apparaître la valeur de la varaible dans le champs texte. Vous pouvez lier de la sorte plusieurs paires propriété:valeur, en les séparant par le caractères &.
La classe LoadVars
Afin de travailler de manière plus élégante, nous avons à disposition la classe LoadVars() qui apporte l'ensemble des méthodes, propriétés et gestionnaires d'évènement nécessaires. Le fichier texte auquel nous allons faire référence se doit d'être formaté de la manière variable=valeur, séparées par le signe éperluette &. De ce fait il n'est pas permis de l'utiliser au sein d'une des valeurs de variable. Il faut pour cela utiliser l'entité url %26. Les chaines de caractères ne nécessitent pas de quote "d'encadrement, si vous les utilisez ils apparaitront comme contenu de la chaine de caractères.
Le fichier de données extérieures (datas_01.txt)
Commençons par préparer les données dans un fichier texte. Afin d'en simplifier la lisibilité nous n'allons traiter qu'un seul livre dans cette phase du tutorial. Il est néanmoins possible d'en traiter plusieurs, mais le fichier de données devient alors très rapidement illisible. Vous pouvez créer votre propre fichier et le sauvegarder le dans votre dossier de travail sous le nom datas_01.txt ou bien récupérer celui mis à disposition en téléchargement. Si vous créez votre propre fichier de données, pensez à repsectez le nommage suivant ainsi que de ne pas utilisez de & à l'intérieur de vos données mais bien des %26.
titre= &auteur= &description_short= &description= &biographie= &ISBN-10= &ISBN-13= &prix= &lien_commercial= &lien_editeur= &
Le fichier Flash (fla_dyn_ 02.fla)
Afin de ne se concentrer uniquement que sur l'aspect des fonctionalités de l'animation, ouvrez le fichier préparé à cet effet fla_dyn_02.fla.
Ce fichier contient divers calques et représente l'interface d'accueil d'une fiche de présentation.
Le calque code contient le code des boutons en savoir plus et retour. Le calque décor, contient les éléments visuels de l'interface et les calques textes présentent les contenus de la fiche.
Le calques bouton contient les deux boutons (un par image), le bouton En savoir plus permet d'atteindre la fiche détaillée de cette unique fiche et le bouton Retour d'en revenir. (la palisse)
Il existe également un clip vide placé en haut à gauche de la scène qui se nomme image et qui recvera l'image de couverture du livre.
Créez un calque loadDatas et ouvrez la fenêtre Action - Image.
L'instanciation de la classe
La première chose est de créer une instance de la classe LoadVars() qui va nous permettre de charger le fichier texte externe. Appliquons ensuite la fonction de chargment load() à cet instance et passons comme paramètre le nom du fichier à charger. Notez que seuls le nom du fichier et son extension sont nécessaires, cela est du au fait que le fichier se trouve au même biveau que l'animation Flash, sinon il aurait fallu entrer un chemin d'accès plus détaillé soit en relatif soit en absolu. Ajoutons un trace(chargeur.titre), titre étant une des propriétés contenues dans le fichier texte pour voir ce que cela donne.
var chargeur = new LoadVars
chargeur.load("livres.txt")
trace(chargeur.titre)
Si vous lancez votre animation, la fenêtre de sortie affiche undefined... normal. Les variables sont elles chargées ?
Listons les variables
Depuis le Flash Player, sélectionnez le menu Déboguer > Lister les variables. Vous allez obtenir pas mal de verbosités du fait de la présence de tous les champs texte sur la scène, mais avec l'asseceur si vous remontez au début du listage, vous verez apparaître des informations concernant l'instance de la classe LoadVars(), et son contenu.
Le fichier texte a donc bien été chargé, et le contenu des diverses paires propriétés / valeur est bien présent.
En regardant de plus près vous constaterez que certains caractères sont remplacés par des carrés. Ceci vient du fait que l'encodage du fichier texte n'est pas Unicode et que le player interprète mal tout les caractères spéciaux.
Nous sommes face à deux solutions, soit il faut encoder le fichier en UTF-8, soit il faut placer une première ligne de code à notre script pour demander au player de s'adapter au système d'encodage du fichier chargé.
System.useCodepage = true;
Ajoutez la ligne de code au script et ralncez l'animation. Si vous listez les variables, cette fois ci les caractères tronqués ne le sont plus, et il n'y a plus de carrés dans le texte. Par contre la fenêtre de message affiche toujours undefined, lors du lancement de l'animation.
Gestion de l'aspect asynchrone d'un chargement
Si l'on décortique le script et les jeux d'instructions qui s'ecnhainent, sur une première ligne l'animation demande le chargement de fichier et immédiatement après sur la ligne suivante l'animation demande d'extraire une donnée de ce fichier. S'il a fallu quelques nanos secondes au processeur pour lire ces deux lignes, il en aura fallu certainement plus pour aller quérir le fichier, l'ouvrir, en récupérer les données et les transmettre à l'objet LoadVars().
On appelle cela des opérations asynchrones, c'est à dire des opérations qui ne se déroulent pas en simultanées. Il faut donc faire appel à un gestionnaire d'évènements qui prend cela en charge. La classe LoadVars() possède son propre gestionnaire, onLoad() qui s'exécute une fois l'ensemble des données récupérées. Ajoutons donc cette ligne entre l'instanciation de la classe et l'appel à la fonction de chargement. Relancez l'animation et vérifiez le message qui apparaît dans la fenêtre de sortie.
chargeur.onLoad = function(){
trace(chargeur.titre);
}
Distribution des valeurs dans chaque champs texte
Les données chargées il ne reste plus qu'à les distribuer dans les champs textes correspondants. Le but de ce tutorial portant principalement sur la communication de Flash avec des données extérieures, nous n'allons pas nous attarder sur l'optimisation de cette partie. Afin d'assouplir le processus, nous allons isoler cette tâche dans une fonction dédiée. Commencons par définir une fonction :
function populateField() {
titre.text = chargeur.titre;
auteur.text = chargeur.auteur;
description.text = chargeur.description_short;
}
Cette fonction doit être attribué au gestionnaire d'évènement onLoad(). Soit on la place à l'intérieur du bloc d'instruction, soit on l'applique comme valeur, remarquez l'utilisation ou non des parenthèses après l'intitulé de la fonction :
chargeur.onLoad = function(){
populateField();
}
//ou
chargeur.onLoad = populateField;
