I am a FlasDev!

Je m’éclate à programmer en Flash. Ca reste pour l’instant de l’AS2 (soupir), et je pense que ce que je code pourrait être infiniment mieux composé.

Mais, pour quelqu’un dont les formations n’ont jamais inclus que de la création graphique et vidéo et quasiment aucune ligne de code, je suis quand même assez fier de ce que je suis capable de faire maintenant.

Ce n’est pas encore en ligne, mais je termine par exemple ce que l’on appelle dans le jargon de ma boite un ministe. C’est tout simplement un flash de 1400 par 600 pixels qui présente un ou plusieurs produits.

Le principe de celui que je suis en train de développer consiste justement à présenter un bon panel de produits (16 en fait). Le flash est composé de trois parties; la première, l’en-tête, est un fond graphique affichant un téléphone dans l’écran duquel défile des images des produits.

La seconde partie est la plus compliquée ; il s’agit d’une barre de quatre boutons qui permettent d’afficher de manière fluide des rubriques contenant chacunes quatre blocs composés d’une image, d’un micro-rédactionnel et d’un bouton permettant de sélectionner le produit.

La dernière partie se trouve être ce que nous appelons le bloc de commande. Il s’agit simplement d’un champ de saisie pour le numéro de téléphone portable et d’un bouton “télécharger” qui permet de passer à l’étape d’abonnement.

En soit, rien de bien différent de ce que nous avions déjà en boutique. Mais le challenge était à deux étages ; la première contrainte est qu’il fallait que quelqu’un n’ayant aucune notion de programmation flash puisse changer le plus facilement possible le contenu ; images, textes, références.

La seconde consistait en le fait que les produits sont de nature très différentes ; il y a un onglet “sonneries”, un onglet “jeux”, un onglet “logos évolutifs”, etc… ce qui implique que les textes les accompagnants sont soit des couples titre/artiste, des couples titres de jeux/description, ou tout simplement des blocs de textes descriptifs.

Le flash se base donc sur un fichier XML contenant le nom de la rubrique, et pour chacune le contenu des quatre items ; nom de l’image, première ligne de texte, seconde ligne de texte (laissée vide si le texte est monobloc) et référence du produit.

L’appli flash lit donc le contenu du XML, fait le tri, stocke chaque rubrique dans quatre tableaux de données. Une fois ceci fait, il construit les quatres éléments graphiques affichant les rubriques, en fait une longue bande dont il n’affiche par masque qu’une seule rubrique.

De même il construit les quatre boutons-titres des différentes rubriques. Lors d’un clic sur l’un des titres de rubrique, la bande défile jusqu’à afficher la rubrique correspondante (grâce à un mouvement fluide et progressif, merci Arnaud pour l’explication de la fonction).

Un clic sur l’un des boutons d’un produit met en mémoire la référence choisie pour qu’elle soit transmise, via le bloc de commande, au serveur qui enverra au visiteur le produit de son choix.

Pour les textes, la solution fut finalement très simple ; lorsque le flash lit le XML, s’il détecte que les deux lignes contiennent du texte, il les affichera dans deux blocs de textes doté de stylisations différentes (gras pour la ligne 1, italique pour la ligne 2). Par contre, si la ligne 2 ne contient aucun texte, le flash basculera sur un bloc texte unique qui affiche un troisième type de stylisation.

Enfin, à propos des images défilantes dans l’écran du téléphone j’ai recyclé un code, écrit par moi et Arnaud pour un autre ministe, avec la différence que le choix des images se limite à 8 (sur 16 possibles) tirées au hasard.

Bref, tout ça tourne plutôt bien, et n’a demandé que deux jours de travail. J’en suis plutôt content.

J’aimerai maintenant avoir l’occasion de passer à l’AS3, et dans la foulée (et en même temps), me former au clan HTML5-CSS3-Javascript-JQuery. Na.

Voilà. C’était vraiment très intéressant.