Lorsque vous accédez à une application Flex avec votre navigateur préféré, un écran de chargement basique apparaît. Ce preloader est commun à toutes les applications Flex. Nous allons voir dans de ce tutoriel comment le personnaliser en créant une animation Flash.
Fonctionnement du preloader
Pourquoi y a-t-il un temps de chargement des applications Flash ?
L'un des avantages mais aussi inconvénient des applications utilisant le Flash Player est qu'elles sont chargées entièrement en mémoire avant de pouvoir être lues (exception à la règle: la musique et vidéo en streaming). Cependant, une fois chargée, vous pouvez naviguer dans l'application sans recharger les différentes pages contrairement au HTML ou PHP.
Comprendre le fonctionnement des RSLs
Depuis Flex 3, les applications peuvent utiliser les RSLs (Runtime Shared Libraries) ce qui signifie bibliothèques partagées à l'exécution. Depuis Flex 4, cette option est activée par défaut mais vous pouvez la désactiver en allant dans les propriétés du projet puis dans la section « Flex Build Path ». De ce fait, les RSLs seront inclues dans l’application directement.
Pour faire simple, à chaque fois que vous accéder à une application utilisant le SDK Flex, tout le framework se télécharge. Ainsi, si vous lancez plusieurs applications, il ne sert à rien de retélécharger tous les composants. Les RSLs vont même plus loin que ça : en effet, elles ne sont pas stockées dans le cache du navigateur mais sur votre disque dur directement. Ainsi même après avoir vidé le cache du navigateur, le framework persiste sur votre disque dur et nul besoin de le retélécharger ! Ceci réduit considérablement la taille des applications.
De plus, le téléchargement des RSLs s’effectue en parallèle de l’application principale ce qui raccourcit d’autant plus le chargement au final. Le Player Flash commence par charger l'application principale contenue dans le fichier main.swf puis les bibliothèques partagées (OSMF, TLF, Text Layout Framework, framework, spark, rpc data services et sparkskins).
Les applications Flex supportent différents types de RSLs :
- Standard RSLs – Bibliothèques de vos propres classes que vous pouvez utiliser dans différentes applications mais sur le même nom de domaine. Ces RSLs sont stockées dans le cache du navigateur car elles ne sont pas signées contrairement à celles du framework.
- Cross-domain RSLs – Idem à la différence près qu'elles peuvent être utilisées par d’autres domaines.
- Framework RSLs – Bibliothèques pré-compilées des composants Flex et du framework.
Vous pouvez également créer vos propres RSLs en utilisant la ligne de commande de compilation.
Voici un schéma pour mieux comprendre le fonctionnement et l’intérêt des RSLs :
Dans le premier cas, sans les RSLs, chaque application embarque le framework complet. Dans le second cas, en utilisant la puissance des RSLs, on peut voir que le résultat final produit un fichier .swf 30% plus léger ! Il faut savoir qu’une application de taille moyenne pour une entreprise pèse quelques MégaOctets ! Le gain est donc considérable.
Un fichier RSL porte l’extention .swz
Création du preloader avec Flash CS5
Pourquoi utiliser Flash?
Nous allons dans ce tutoriel utiliser Flash pour réaliser l'animation. Nous nous en tiendrons au strict minimum et verrons uniquement la communication entre Flex et Flash. Nous allons simplement afficher une image en background et y ajouter un champ texte qui affichera l'avancement du chargement de l'application. Vous pouvez également créer un preloader personnalisé uniquement en Flex cependant les possibilités offertes par Flash en terme d'animations sont plus grandes.
Le but ici n'est pas de vous faire un tutoriel Flash sur la création d'une animation mais bien de pouvoir en intégrer une dans n'importe quelle application Flex. Mettez donc à contribution votre créativité pour réaliser de véritables animations !
Ce tutoriel a été réalisé avec Flash Builder 4.5, Flex SDK 4.5 et Flash CS5. Si vous utilisez une version différente, il est possible qu'il y ait quelques différences.
Création d'un nouveau projet
Créez un projet "Action Script 3".
Insérez l'image de background et renommez le calque comme il se doit.
Ensuite, allez dans le menu "Modification/ Document" et cochez l'option "Identique à : Contenu" afin de recadrer la zone de travail sur ce background.
Ajoutez un nouveau calque et créez une zone de texte. Attention, veillez à bien choisir une zone de texte de type "Texte Classique" et non "Text TLF" comme vous pouvez le voir dans le screenshot suivant. De plus, nommez ce composant (ici "text_progress").
Créez un nouveau calque que vous pouvez nommer "action". Ce calque contiendra uniquement un bout de code Action Script permettant de faire la communication avec votre application Flex.
Sélectionnez le calque puis appuyez sur F9 afin d'ouvrir l'éditeur de code et insérez le code suivant:
// Initialisation du preloader setProgressBar(0); text_progress.text = ""; // Fonction mettant à jour la zone de texte pour le chargement function setProgressBar(percent:Number):void { text_progress.text = "Chargement " + percent + "%"; } |
Vous êtes maintenant prêt à exporter cette animation mais avant cela, cliquez sur le menu "Fichier / Paramètres de publication..." et cochez l'option "Exporter SWC". Cela générera un fichier .swc qu'il faudra importer dans l'application Flex ensuite.
Enregistrez votre projet Flash puis exportez votre animation en cliquant sur le menu "Fichier / Publier".
Intégration de l'animation dans un projet Flex / Air
Import du SWC généré
Faites un clic droit sur votre projet Flex, puis sélectionnez "Properties". Ensuite, allez dans l'onglet "Flex Build Path" et importez le fichier .SWC généré précédemment avec Flash.
Créez une classe Action Script qui hérite de la classe SparkDownloadProgressBar.
Dans la balise Application, renseignez l'attribut preloader par le chemin de votre classe comme dans le screenshot suivant.
Vous pouvez apercevoir dans le screenshot ci-dessus un composant chargeant un fichier .mp3. Cela permet d'alourdir intentionnellement l'application Flex afin de voir l'animation fonctionner. Cependant, vous ne verrez pas le résultat si vous êtes en local.
Votre classe Preloader doit contenir au minimum le code suivant:
package mti { import flashPreloader_fla.MainTimeline; import mx.preloaders.SparkDownloadProgressBar; public class Preloader extends SparkDownloadProgressBar { private var flashPreloader:flashPreloader_fla.MainTimeline; public function Preloader() { super(); } override protected function createChildren():void { if (!flashPreloader) { flashPreloader = new MainTimeline(); addChild(flashPreloader); } } override protected function setDownloadProgress(completed:Number, total:Number):void { if (flashPreloader) { // Fait appel à la méthode setProgressBar de l'animation Flash flashPreloader.setProgressBar(completed / total); } } } } |
Vous pouvez afficher durant le chargement de l'application des informations plus précises en surchargeant d'autres méthodes de la classe mère comme par exemple la méthode rslProgressHandler([...]) ou bien setInitProgress([...]).
Vous savez désormais créer une animation Flash servant de preloader personnalisé à votre application Flex. Ceci est très pratique pour les applications professionnelles !
