La création d’un pré-chargement dans un fichier flash est indispensable pour les animations qui chargent des fichiers lourds. D’une manière générale, c’est une bonne idée de prendre l’habitude d’insérer un pré-chargement dans celles-ci, et ce quelle qu’en soit la taille.
Nous allons voir ici une méthode simple et efficace qui permet à l’internaute de patienter le temps que l’animation se charge. Une barre va symboliser la progression du chargement, et un pourcentage va s’afficher au-dessus de cette barre.
1.Préparation de la scène
On crée un nouveau calque qui contiendra le code de la scène, que l’on nomme « actions ».
Sur le premier calque, que l’on renomme « éléments », on place deux éléments :
-
un champs texte dynamique, qui nous permettra d’afficher le pourcentage de chargement
-
une barre de chargement, qui se remplira avec le chargement
On utilise l’outil “Texte” pour créer un champ texte au centre de la scène, et on lui donne pour nom d’occurence « pourcentage »
On crée ensuite la barre de chargement, en traçant une barre avec l’outil “rectangle“. On convertit cette forme en symbole via le menu “Modification > Convertir en symbole…“, ou en appuyant sur la touche “F8“.
On lui donne comme nom d’occurrence « barre_prechargement », en sélectionnant la forme créée sur la scène. On place ce symbole en dessous du champ “texte“, et on aligne ces deux éléments au centre de la scène.
2.Code ActionScript
Dans la première image du calque actions, on tape le code suivant :
Tout d’abord, on cible le domaine, pour pouvoir intégrer le pré-chargement dans des animations chargées depuis d’autres fichiers “swf” :
var racine:MovieClip=this; //On réduit la barre de chargement à 0% : barre_prechargement._xscale = 0; //On crée la fonction qui permet de chiffrer le ratio entre le nombre final de bytes du fichier et le nombre de bytes chargés : var prechargement:Function = function(Void):Void { var total:Number = racine.getBytesTotal(); //bytes total var loaded:Number = racine.getBytesLoaded(); //bytes chargés var ratio:Number = loaded/total*100; //calcul du pourcentage barre_prechargement._xscale=ratio; //on augmente d’autant la taille de la barre de pré-chargement var ratio_arrondi:Number = Math.round(ratio); pourcentage.text = ratio_arrondi + ” %”;//on affiche ce pourcentage, après l’avoir arrondi //lorsque le chargement est terminé : if (ratio==100) { clearInterval(appel_prechargement); racine.play();//on lit l’animation à partir de la frame 2 } } //on appelle la fonction à intervalles réguliers, toutes les 50 ms. var appel_prechargement:Number = setInterval(prechargement,50); //on stoppe la lecture sur la frame 1. stop();Pour tester cette barre de pré-chargement, il nous faut un fichier lourd. On importe sur la scène, à la frame 2 et sur le calque éléments, une image de grande taille, qui fait un poids supérieur à un mégaoctet.
Sur le calque action, on ajoute un “stop();”
Il ne reste plus qu’à tester l’animation, en appuyant deux fois de suite sur “Ctrl + Entrée“, afin de simuler un téléchargement.
Télécharger les sources de ce tutoriel : cliquez ici
