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.