Dans ce tuto Flash de plus d'1H30 nous verrons comment créer un graphique de données dynamiques il en utilisant la bibliothèque swfObject afin de créer un échange entre une page HTML et une application SWF Flash.

Testez l'application finale

Cette application Flash, sera capable de récupérer des données d'une page HTML pour mettre en place l'intégralité des éléments du graphique (nombre de barres, couleurs, chiffres, etc).

L'intérêt ici, est de vous proposer un graphique esthétique et surtout dynamique avec paramétrable des données sans avoir à retourner sur Flash.

Fonctionnalités de notre graphique :

• Nombre d'éléments paramétrable
• Choix des couleurs pour chaque élément
• Possibilité de réduire ou d'agrandir l'écart entre les éléments du graphique
• Paramétrage depuis la page HTML (flashvar)
• Un design soigné
• Une fluidité dans la mise en place des éléments graphiques et des textes
• Affichage des valeurs de chaque élément et calcul de leurs pourcentages (animés)
• Affichage des totaux (pourcentage et valeur globale)
• Possibilité de choisir les noms des paramètres à utiliser dans la page HTML

I°) Mise en place du design :

• Création du background (dégradé radial, filtre, etc)
• Mise en place des éléments décoratifs (texte avec filtre)
• Création du module d'affichage des valeurs du graphique
• Création de la barre utilisée pour le graphique

II°)Mise en place de la classe Graphique

• Mise en place des éléments de base(package,classe,constructeur)
• Mise en place de l'ensemble des imports (+ classes custom)
• Mise en place des variables du projet (explication de leurs utilités)
• Mise en place des paramètres lié à la mise en place du graphique
• Récupération et liaison des paramètres avec les variables du projet
• Récupération de nos premières flashvars
• Création du textField lié à l'affichage des infos
• Bouclage lié à la récupération des valeurs et des couleurs du graphique
• Affichage des données dans l'interface
• Calcule des pourcentages unitaires et totaux
• Récupération des couleurs dans un colortransform
• Création des barres du graphique
• Initialisation et paramétrage de l'ensemble des éléments du projet
• Calcule de la hauteur des barre en fonction de leurs valeur et de la taille de la scène

Mise en place des animations du projet via la classe TweenMax.

Pour ce projet, je propose deux classes de mon framework :  SommeArray et FormateNB, toutes deux serons utilisées dans notre projet et serons passées en revue lors de leur utilisation. Si vous le souhaitez, sachez que vous pourrez les utiliser dans vos futurs projets si vous le souhaitez.

• Reprise du fichier source et explication des éléments principaux
• Comment modifier un/des élément(s)
• Comment ajouter un/des élément(s)
• Régler : la distance entre les éléments, la couleur, les valeurs

Les fichiers sources :

• Fichiers swf pour Flash cs4 et cs5
• Fichier fla pour flash CS4 et CS5
• Le fichier swfObject (v2.2)
• La classe Graphique
• La classe SommeArray
• La classe FormateNB
• La page HTML formatée avec import du swfobject et paramètrage d'un graphique (7 unités)