Pages 1 | 2

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.

Pages 1 | 2