L'on associe souvent la technologie Flash de Macromedia à de belles animations présentes sur les pages web. Certaines animations riment avec applications; ce sont en effet parfois de véritables jeux auxquels nous sommes invités à participer.

Les animations Flash sont peut-être moins connues pour leur capacité à pouvoir échanger de l'information avec l'extérieur, fichiers ou scripts côté serveur. Pourtant ces flux d'informations peuvent s'effecteur dans les deux sens, du flash vers un script (Php ou autre) ou l'inverse.

Nous allons tenter aujourd'hui de visualiser dans une animation Flash des données issues d'un script Php. Nous verrons que pour le programmeur Php et néophyte en Flash, la difficulté ne provient pas du script Php mais plutôt du côté Flash. Il faut en effet se familiariser avec l'interface utilisée pour la création de ces animations et en comprendre quelques rudiments.
Précisons que si nous utilisons Php ici, d'autres langages côté serveur sont susceptibles d'effectuer le même travail (rudimentaire nous le verrons).

Notre tutoriel se base sur la dernière version du logiciel de Macromedia : Flash 5. Si vous ne le possédez pas, et souhaitez reproduire les étapes qui vont suivre, une version limitée à 30 jours est disponible sur le site de l'éditeur.

But et principe

Nous nous appuyons aujourd'hui sur une table SQL issue d'un tutoriel précédent "Les commandes de sélection en SQL". Il s'agissait d'afficher différentes caractéristiques de plusieurs consoles de jeux. Une table "consoles" avait été créee pour l'occasion, elle contient les champs suivants :

- Nom
- Prix
- Fabricant

Si vous souhaitez vous construire la même table, il suffit de copier les scripts de création et d'insertion disponibles sur le tutoriel indiqué ci-dessus.

Le but de notre animation flash sera de nous afficher quelle est la console la plus chère de la table "consoles", le tout bien sûr dynamiquement.

Ce mode de fonctionnement peut s'avérer très utile pour une animation Flash référençant plusieurs prix par exemple, ces derniers sont en effet susceptibles d'évoluer. Avec notre méthode, il vous suffit de mettre à jour la base de données pour que l'animation répercute également ce changement.

Comme précisé en introduction, la partie propre au Php est classique. Il va s'agir de déterminer en interrogeant la base de données quelle est la console la plus chère.


Du côté du Php

Liquidons rapidement le cas du Php, ce n'est pas lui le sujet principal aujourd'hui.
Nous avons déjà rencontré plusieurs fois ce type de script. Si ça n'est pas le cas pour vous, vous trouverez votre bonheur dans notre rubrique de tutoriels dédiée à ce langage.

Voici à quoi va ressembler notre script. Nous passons sous silence la phase de connexion à votre base, dont les paramètres dépendent bien évidemment de votre compte personnel chez votre hébergeur mais également de sa charte de nommage pour en ce qui concerne les bases de données ("sql.mabase", "mabase_db"...).

(find_console.php)

$req="select nom, fabricant from consoles order by prix desc limit 0, 1";
$idreq=mysql_query($req,$db);

while ($row=mysql_fetch_array($idreq))
{
     $console = $row[nom];
     $fabricant = $row[fabricant];
}

$console_flash="$console de $fabricant";
$console_flash=rawurlencode($console_flash);
$console_flash="console=".$console_flash;

echo "$console_flash";

mysql_free_result($idreq);

Détaillons en quelques mots les effets de ce script. La requête ramène un tuple unique représentant notre console la plus chère (c'est un exemple basique, nous ne gérons pas l'éventualité de deux consoles au même prix).
Nous récupérons dans les variables $console et $fabricant respectivement le nom de la console et celui du fabricant. Nous formons une chaîne de caractères à partir de ces deux noms en rajoutant l'article "de" entre les deux :

$console_flash="$console de $fabricant";

Nous encodons ensuite grâce à la fonction rawurlencode le contenu de notre chaîne de caractères. Cela a pour but de protéger celle-ci lors du transfert, les caractères spéciaux sont ici "neutralisés". Exemple, un espace devient un "%20" avec cette fonction.

La ligne...

$console_flash="console=".$console_flash;

... Mérite quelques explications. Flash s'attend à recevoir d'une part une réponse encodée et d'autre part de la forme suivante :

prenom=arnaud&nom=gadal

ou bien

prenom=arnaud
&nom=gadal


Nous définissons la variable $console_flash comme la concaténation entre la chaîne "console=" (qui sera notre identificateur pour Flash, nous le verrons par la suite) et la chaîne déjà définie dans l'étape précédente par l'instruction :

$console_flash=rawurlencode($console_flash);

Le résultat de ce script est visible en ligne. Voilà donc concrètement la chaîne de caractères à laquelle notre animation Flash accèdera. En cliquant sur le lien ci-dessus, vous pourrez lire en avant-première le contenu dynamique ramené de la base, à savoir la console la plus chère, celle-la même que nous cherchons à afficher dans notre animation.

Passons à l'étape suivante.

Du côté du Flash

La difficulté de cette seconde partie réside surtout (uniquement ?) dans la méconnaissance que peut avoir le développeur vis à vis de l'application Flash 5 (à ne pas confondre avec le simple lecteur d'animations).
En effet cette difficulté ne réside pas du tout dans un codage conséquent en ActionScript (le langage utilisé par les animations Flash), puisqu' une seule ligne de code ou presque, suffit pour accéder à notre script Php.

L'interface du logiciel Flash 5 ne peut pas se résumer en quelques phrases, elle mérite un ou plusieurs tutoriels complets. Nous irons ici droit au but, notre animation flash sera d'un aspect graphique minimaliste, c'est le moins que l'on puisse dire :




Néanmoins, le contenu dynamique sera au rendez-vous, vous pourrez le tester à la fin de ce tutoriel (sous réserve d'avoir installé soit le logiciel Flash 5 soit le plug-in Flash, tous deux disponibles sur le site de Macromedia).


Nous partons de zéro

Si vous êtes néophyte dans l'utilisation de Flash 5 et souhaitez ne pas vous perdre dans les méandres de l'interface, nous vous conseillons d'effectuer pas à pas ce "walk-through". Vous éviterez ainsi de vous poser des questions, pas inutiles mais hors-sujet ici, concernant les notions de calques, d'animation, de scénarios, ou autres layers et vitesse de défilement (vécu).

Afin de faire simple et court, nous employons ici un langage synthétique.


Lancez Flash 5, vous devriez voir une fenêtre principale, intitulée "Animation". Employez la commande "Fichier -> Nouveau" pour créer une animation vierge.

Plusieurs boites à outils et autres "panneaux" entourent normalement cette fenêtre principale, si ça n'est pas le cas, rendez-vous sur "Fenêtre -> Jeux de panneaux -> Disposition par défaut" pour obtenir les outils les plus courants, certains nous seront utiles par la suite.

Pour écrire la phrase qui résume notre animation "Nous recherchons la console la plus chère de notre base", choisissez dans la boîte à outils en haut à gauche de votre écran (normalement) le grand caractère "A" transformant ainsi votre pointeur de souris classique en un pointeur indiquant une zone de texte.

Définissez un cadre pour cette phrase, peu importe les couleurs, ce sont des détails que vous pourrez régler seul par la suite de manière intuitive.

Nous avons ici crée une zone de texte statique.
Il nous faut maintenant définir une zone dynamique, destinée à recevoir le résultat du script Php.

Reproduisez la même étape que précedemment et donnez un contenu temporaire à cette zone de texte (qui pour l'instant ne se distingue pas d'une zone statique).

Si vous souhaitez déplacer vos zones de texte dans la fenêtre "Animation", repassez par le curseur traditionnel, disponible dans le panneau d'outils (en haut à gauche).

Nous devons maintenant définir cette dernière zone de texte comme dynamique. Choisissez le troisième panneau en partant du haut à droite de votre écran, il se nomme "Caractère" (l'onglet en tout cas). Prenez le troisième onglet "Options de texte" et indiquez "texte dynamique" via le menu déroulant de cet onglet. Vous remarquez qu'un champ "variable" est apparu dans cet onglet, indiquez maintenant "console". C'est le nom de ce champ dynamique mais également celui de la variable renvoyée par le Php, quelle coïncidence...

Indiquez "une seule ligne" ou "multiligne" dans le champ au-dessus de "variable", selon la taille de votre champ de texte dynamique.

Nous pouvons déjà visualiser à quoi ressemble notre animation via le menu "Contrôle->Tester l'animation".

Il nous manque un bouton. Nous les étudierons plus en détail dans un tutoriel ultérieur mais sachez pour résumer qu'ils possèdent 4 positions. Celle du bouton à l'origine, celle du bouton sur lequel le curseur de la souris passe (un changement destiné à faire comprendre que le bouton est cliquable), celle du bouton "appuyé", et au final celle du bouton cliqué.

Afin de gagner du temps nous utilisons un bouton des "bibliothèques communes", menu "Fenêtre -> Bibliothèques communes -> Boutons". Double-cliquez par exemple sur l'icône de gauche de la série de boutons intitulée "(circle LED Button set)", c'est la forme que nous avons utilisé, puis choisissez une couleur. Une fois celle-ci choisie, faites glisser le bouton via son intitulé vers la fenêtre "d'animation".

Oui le bouton est énorme, mais qu'importe, ce genre de détails peut se régler plus tard. Sélectionnez le bouton, puis faites apparaître le menu "actions" via l'enchaînement "Clic droit -> Action" avec votre souris. Cliquez sur l'onglet "Actions sur objet" si ça n'est pas déjà fait. Passez en mode "expert" (CRTL-E).
Une petite fenêtre s'affiche à droite de ce menu, tapez :

on (release)
{
loadVariables("http://www.trajectons.com/jdndev/find_console.php", "")
}

Ceci a pour effet de déclencher la fonction "loadVariables" lors de l'évènement "release" qui correspond en fait ici au relâchement de notre bouton (lorsqu'on clique dessus en fait).

La fonction "loadVariables" prend deux paramètres. Le premier est le nom du fichier à charger (faites par exemple le test avec un fichier texte en local, cela fonctionne) ou du serveur, pour cet exemple un site personnel héberge ce fichier (plus rapide qu'un hébergement gratuit). Le second paramètre désigne l'objet dans lequel la variable est chargée, par défaut c'est celui qui contient le script.

Notre bouton est désormais fin prêt, lorsque nous cliquerons dessus, il lira le contenu fourni par le script php, voici ce qu'on peut lire à l'écran lorsqu'on exécute ce script (Php pour nous) dans un navigateur (rappel) :

console=PS2%20de%20Sony

C'est terminé !

Faites le test via la commande ("Tester l'animation") vue plus haut, cela devrait fonctionner.

Il s'agit maintenant d'exporter notre chef d'oeuvre. Choisissez un nom pour votre animation puis passez par le menu "Fichier -> Exporter l'animation". Exportez celle-ci en Flash 5 ou 4 pour une compatibilité avec de plus vieux lecteurs (c'est cette option que nous avons choisi). Passez enfin par le menu "Publier" afin que Flash 5 vous génère le fichier HTML qui va appeler l'animation.

Si vous le souhaitez vous pouvez tester notre animation et/ou télécharger (fichier zip) son code source.