X-PRIME v5 ou la naissance d’un framework AS3

Il y a des tournants dans la vie d’un développeur qu’il ne faut pas rater, le passage AS2 / AS3 en fait partie.

Laissez moi maintenant vous raconter l’histoire du flash chez X-PRIME.

Tout a commencé avec la nouvelle fonction de chargement et de traitement des fichiers XML par flash. Nous nous sommes alors lancés dans la construction d’une navigation déroulante sur 3 niveaux administrable via un XML. Autant vous dire que l’on en a bavé…
Mais nous avons acquis la compétence comme on dit dans le milieu.

Nous avons ensuite été amenés à travailler sur un projet de CD-Rom en flash administrable via du XML que le client devait contribuer lui même pour faire les mises à jours (c’était il y a 5 où 6 ans et le CD-Rom est toujours utilisé). Tout le principe du CD-Rom repose sur la possibilité pour le client de rajouter des pages en choisissant un template de rendu visuel et en “construisant” ses contenus sous la forme de blocs.

De ce projet est né le principe des blocs en flash pour gérer le contenu.
Je m’explique : le but est de déterminer tous les types de rendus de texte possibles au sein de flash : titre, sous titre, image, image + texte etc… que l’on agence dans un XML avec les bonnes balises.
A chaque bloc correspond un clip de rendu visuel et un prototype en code (et oui l’AS et ses prototypes, tout une histoire).
Il ne reste plus qu’à lire le XML avec flash et empiler les blocs selon les templates graphiques et les règles de mise en page du site.
Nous avons peaufiné ce système au fils des ans pour différents projets en liant le tout à des RTE de contribution dans nos back office par exemple.

Mais il manquait toujours le nerf de la guerre : un moteur de site pérenne et réutilisable.
Ce CD-Rom a posé les bases de tout cela : obtenir un jeu de classes gérant le changement de rubrique, la construction et la dé-construction d’une rubrique.

Nous nous sommes penchés sur différents frameworks AS2 déjà existant mais sans trop de succès, tous étaient beaucoup trop complexes ou contraignants pour nos besoins de déploiements rapides et efficaces. Nous avons tout de même pioché une partie du framework Pixlib fait par Francis Bourre. PureMVC est d’une puissance redoutable mais nécessite une prise en main des plus douloureuse pour un développeur AS 2 habitué au désordre de flash… Nous avons donc laissé celui-là de côté. Le seul que nous ayons utilisé pour réaliser un projet de A à Z fût ASAP framework.
Mais nous n’étions toujours pas satisfaits car ces outils ne couvraient pas tous nos besoins ou pas comme nous l’entendions.

C’est à ce moment là qu’est arrivé le dieu AS3!

Après une lecture assidue de la bible : Pratique d’ActionScript 3 par Monsieur Tibault Imbert, nous nous sommes lancés dans des tests à petite échelle : un module par ci, un module par là.
Jusqu’au moment fatidique du projet full flash en AS3 : X-PRIME V5.
Plus question de tergiverser, nous allions nous lancer dans la conception de notre framework dédié à nous même : )
Une bonne partie du boulot a consisté à chercher à droite et à gauche les meilleurs concepts de prog que nous voulions du type :

• gestion des langues,
• gestion des url d’accès direct,
• gestion des données à charger pour chaque rubrique,
• gestion des polices,
• possibilité de brancher le tout sur n’importe quelle source de données (XML, WebServices…)

Nous en sommes arrivés à une architecture assez simple et assez banale au final (surprenant non?).
Notre framework est réparti sous la forme suivante :

• un package de gestion de la configuration du site : variables d’initialisation, fichiers de langues à charger, dictionnaire des variables accessible par tous les packages de classes
• un package de moteur qui centralise les fonctions d’initialisation
• un package de loading qui gère tous les éléments à charger de type BulkLoader
• un package comprenant les “modules” du site : homepage, navigation, rubriques, player vidéo, formulaire…

C’est ce dernier package qui est le plus intéressant, toutes les classes de ce dernier héritent de fonctions de construction / déconstruction, d’initialisation, d’affichage… etc.
Tous ces “modules” ont accès aux mêmes données via le package de gestion de configuration et tous peuvent charger leur données spécifiques de façon transparente via le package de loading.
Nous avons ajouté à cela un package d’utilitaire de type : connexion AMFphp, scrollbar, formulaire, Papervision,.. etc

Un framework est né!

Le site d’X-PRIME nous a servi de terrain d’expérimentation sur l’AS 3 et sur notre architecture. Depuis, nous avons amélioré le tout et nous continuerons de le faire. Le but est maintenant d’en faire une version light pour les “petits dév” comme les jeux ou les modules de bannières enfin tout ce qui doit sortir vite et bien du premier coup !

Papervision 3D

L’autre gros défi de ce site fut la conception et la réalisation d’une interface en 3D.
Sur cette partie, la prise en main de Papervision3D 2.0 (GreatWhite) s’est avérée plus difficile que prévue.
En effet par rapport à la version 1.7 du moteur 3D, utilisée lors d’un projet précédent, beaucoup de “petites” choses ont changé, parmi les plus importantes :
Apparition de la classe Viewport servant de base à toute construction de scene3D, apparition de nouveaux matériaux pouvant prendre en compte une source de lumière pour la plupart, sans compter les et ajouts/suppressions de propriétés de fonctions qui sont le lot de chaque nouvelle version.

Quand au développement à proprement parler, la difficulté majeure fut la réalisation d’une transition fluide entre l’interface 3D et la page d’un projet.
C’est la vignette du projet qui sert de “pont visuel” entre les 2 rubriques. Pour parvenir à cela, impossible d’utiliser l’objet BitmapFileMaterial sur les planes, on pré-charge donc pendant le loading principal toutes les images afin de les stocker dans un Dictionary (objet apparu en as3).
Ensuite lors de la création des Planes 3D, on créé autant de MovieClip vides auxquels on ajoute les images du Dictionary pour finalement appliquer un MovieMaterial aux planes.

Pour la transition, il ne reste plus qu’à faire une capture (BitmapData) de l’image du Dictionary et de l’afficher à l’écran entre la disparition de l’objet 3D et l’apparition de la « vraie » image de la page projet sélectionnée.

Et bientôt la vidéo du projet dans un futur billet…