[Astuce] Préchargement d'une animation (simple ou en pourcentage)
Écrit par Thibault Imbert | 26-08-2005
Créer une animation d'attente le temps que le contenu soit préchargé et disponible à la lecture

Humeur

Reste que la meilleure solution pour avoir des chargements transparents, avec un minimum d'attente, c'est d'avoir des petits fichiers...

Une séquence "Loading" est un MOYEN, et non pas UNE FIN en soi.
Certains sites ont des séquences de chargement spectaculaires (qui rallongent le temps du préchargement !!) et quand cette foutue séquence est terminée, on s'aperçoit que derrière, il n'y a pas grand chose.
Alors, même si la tentation est grande au début, modérez vos ardeurs dans ce domaine...

Méthode sur le nombre d'Images préchargées

Première méthode trop simple (compatible Flash 5)

Cette 1ère méthode se base sur le nombre d'Images chargées dans l'animation.

Ces propriétés seront utilisées : _framesloaded et _totalframes
(ne pas utiliser l'action If Frame Is Loaded -> dépréciée)

_framesloaded indique le numéro d'Image préchargée et _totalframes renvoie le nombre total d'Images (! du scénario courant !).

preload1.zip preload1.zip (85.28 KB)

Notez que vous pouvez créer une séquence spécifique au preload (pas forcément nécessaire mais, pour la lisibilité et la maintenance, il peut être préférable d'isoler la séquence de préchargement sur sa propre séquence).

  • Action d'Image sur l'Image 1 :

if (this._framesloaded >= this._totalframes) {
   gotoAndPlay ("debutSite");
} else {
   play();
}

  • Action d'Image sur l'Image 2 :

gotoAndPlay (1);

Un clip d'animation est placé sur la 1ère Image (le rond dans notre exemple). Il comprend l'animation d'attente. (histoire de signaler au visiteur qu'il se passe bien quelque chose :)
Il s'agit des "préchargements en cours" que l'on voit sur plusieurs sites.

  • Image 9: étiquette "debutSite" indiquant le début de l'animation.

Voilà, cela suffit pour précharger toute l'animation...

Flash fait une boucle permanente entre les 2 premières Images de la séquence 1, tant que la condition de la 1ère Image n'est pas vraie. Quand elle l'est, il saute à l'étiquette "debutSite" et joue l'animation.

L'inconvénient de cette méthode est qu'on attend le chargement de toute l'animation avant de commencer à jouer l'animation. Gros risque que les visiteurs perdent patience...
De plus c'est perdre de vue une des qualités essentielles de Flash : le streaming.

Variante optimisée de la méthode trop simple

Pour améliorer cette méthode, il est possible, au lieu de viser la toute dernière image, de choisir judicieusement une image intermédiaire dans le film après laquelle seule le streaming suffirait à lire l'anim.
Cette méthode est plus intéressante puisqu'elle permet de démarrer rapidement la lecture, sans attendre le préchargement du site, du début à la fin.

Variante Flash MX

Le clip comprenant la séquence animée d'attente est placé sur la première Image, ici nous voulons précharger les 4 premières Images du site.

  • Action d'Image sur l'Image 1 :

stop();
_root.onEnterFrame = function () {
   if (this._framesloaded >= 4) {
      gotoAndPlay("debutSite");
   }
}

Méthode sur le poids préchargé et % loader

Une autre façon répandue de signaler le chargement d'un film est d'en indiquer les % chargés. Cette option sera possible en se basant sur le poids des éléments (clips, niveaux...)

Ces propriétés seront utilisées : _getBytesLoaded() et _getBytesTotal()

_getBytesLoaded indique le nombre de Bytes préchargés et _getBytesTotal renvoie le nombre total de Bytes.

Exemple sur le calcul du nombre de Bytes :

Si _getBytesTotal est placé sur le scénario principal, il renverra le poids total de toute l'animation.
Si _getBytesTotal est placé sur un clip, il renverra le poids de ce clip et des objets y étant placés en imbrication.

Pour obtenir un valeur en KyloBytes, diviser le résultat par 1024.

Dans ce deuxième exemple :

Un clip est placé sur le scénario principal.

preload2.zip preload2.zip (85.87 KB) 

  • Sur ce clip l'action est :

onClipEvent (enterFrame) {
   _parent.taux = Math.round((_parent.getBytesLoaded()/_parent.getBytesTotal())*100);
    if (_parent.taux >= 100) {
       this.unloadMovie();
       _parent.play();
    }
}

Ici le clip est déchargé après son utilisation.

Un champ de texte dynamique avec variable 'taux' est placé sur la même Image du scénario principal, (pour récupérer le pourcentage chargé).

Si vous souhaitez isoler et ainsi maîtriser le préchargement de certains éléments ou bien si vous devez gérer le préchargement sur plusieurs niveaux (loadMovieNum),
reportez-vous au tutorial Préchargement avancé.

[maj 08/2002]

 
Dernière mise à jour : 12-09-2006