Le préchargement d'une animation Flash permet de respecter ses visiteurs en cas de lourd(s) fichier(s) à charger, en leur demandant de patienter et, accessoirement, en les distrayant par quelques informations ou animations. En cela, le terme "préchargement" n'est pas vraiment approprié, il s'agit plutôt d'une "animation d'attente avant l'animation principale", ou d'une "pré-animation".
De fait, il est quasiment toujours préférable de mettre un "preloader" dans chacune de ses animations, par simple respect pour le possible faible débit de la connexion de l'internaute. Pour donner une règle plus générale, il vaut mieux systématiquement mettre un preloader dès que le poids de l'ensemble des fichiers nécessaire à l'application/animation Flash dépasse les 50 Ko.

Il y a plusieurs méthodes pour aborder le préchargement:
- il est construit sur une poignée de premières images-clés au début de l'animation.
- il est placé dans une première scène à part des autres. A la fin du préchargement, le code renvoi vers une scène donnée.
- une "coquille vide" principale qui s'occupe de charger les autres fichiers de l'application.

Nous aborderons ici la première méthode, sous plusieurs angles (de très simple à élaboré).

Preloader basique
La base du preloader est de demander à l'utilisateur de patienter pendant que le programme charge. Nous n'avons donc besoin que d'afficher un message "Veuillez patienter pendant le chargement", et à lancer l'animation une fois le chargement terminé.

Partons du principe que vous avez déjà une animation terminée, et qu'il ne vous manque que le preloader. Créez un calque preloader. Déplacez toutes vos images-clés de deux images vers la droite. Pour ce faire, sélectionnez les premières images de tous les calques, et appuyez deux fois sur F5 (ou faites Insertion/Image). Déplacez enfin les quelques images-clés qui se trouvaient sur l'image 1 des calques d'un cran vers la droite avec la souris.
Votre calque preloader doit comporter maintenant deux images: une première image-clé vide, et une image vide. Placez sur l'image-clé un champ texte à l'aide de l'outil Texte. Mettez-le en "Texte statique", et écrivez par exemple "Veuillez patienter pendant le chargement".

Créez maintenant une image-clé vide sur la deuxième image de votre calque actions (créez-le le cas échéant), et le panneaux Actions. Entrez le code suivant:

(image-clé 2 du calque Actions)
if (_root.getBytesLoaded() < _root.getBytesTotal())
  {
  gotoAndPlay(1);
  }

...ou bien...

(image-clé 2 du calque Actions)
if (_root.getBytesLoaded() < _root.getBytesTotal())
  {
  prevFrame();
  play();
  }

Nous abordons ici deux fonctions cruciales pour tout preload: getBytesLoaded() et getBytesTotal(). Comme les anglophones l'auront compris, elle renvoient un entier indiquant le nombre d'octets chargés (pour getBytesLoaded()) ou la taille en octet de l'objet spécifié (ici, _root, donc l'animation principale) pour la seconde fonction.
La fonction gotoAndPlay(), pour sa part, indique à la tête de lecture de se placer sur une image donnée et de reprendre la lecture de l'animation. Etant donné que nous lui indiquons l'image précédente, nous pouvons tout aussi bien utiliser les deux fonctions prevFrame() (renvoi à l'image précédente) suivie de play() (joue l'animation). C'est un choix...
Notre expression if se lit donc comme suit: "si le nombre d'octets chargés est inférieur au nombre total d'octets, va à l'image précédente et joue l'animation". En clair, cela nous créé une boucle: la tête de lecture fera sans cesse l'aller-retour entre les images 1 et 2 sans jamais lancer l'animation (qui commence à l'image 3), et ce tant que la condition entre parenthèses est vraie. Une fois que l'animation a fini de se charger (c'est-à-dire, quand le nombre d'octets chargés et égal au nombre total d'octets), la tête de lecture n'a plus de raison de revenir en arrière, et elle continue donc sur sa lancée: l'image 3, où débute l'animation...

Pour une poignée d'informations
Il reste que notre preloader n'est guère passionnant pour le visiteur impatient: on ne sait pas par exemple quelle est la taille du fichier à charger...
Effacez le texte qui se trouve dans le champ texte, et mettez ce champ en "Texte dynamique". Nommez l'occurrence du champ "affichage".
Il ne vous reste qu'à remplacer le code ActionScript par le suivant:

(image-clé 2 du calque Actions)
if (_root.getBytesLoaded() < _root.getBytesTotal())
  {
  _root.affichage.text = "Chargement en cours: "
  + Math.floor(_root.getBytesLoaded())
  + " octets chargés sur "
  + Math.floor(_root.getBytesTotal())
  + " au total, soit "
  + Math.floor(_root.getBytesLoaded() / _root.getBytesTotal() * 100)
  + "%";
  gotoAndPlay(1);
  }

Notre preloader affiche maintenant des informations aux visiteurs, à savoir: le nombre d'octets chargés (via getBytesLoaded()), le nombre total d'octets (via getBytesTotal()), et le pourcentage d'octets chargés. Cette dernière information est calculée très simplement: on divise le nombre d'octets chargés par le nombre total d'octets, on multiplie le résultat par 100, et on tronque la résultat à l'aide de la méthode floor de l'objet Math.
Désormais, si on teste l'animation en affichant le train de lecture (ctrl-Envoi ou pomme-Envoi), on verra les différentes valeurs s'incrémenter, puis l'animation se lancer...

Page 1 | 2 | 3