Avec le temps, va...
Dernier petit ajout qui peut être fort utile pour les visiteurs: un indicateur de temps écoulé et restant ainsi que la vitesse de chargement, particulièrement utiles pour les applications très lourdes...
Nous placerons ces informations supplémentaires dans notre champ texte affichage; libre à vous de leur créer un champ à part...

(image-clé 1 du calque preload)
// variables générales
Stage.scaleMode = "exactFit";
_root.preload._x = 0;
_root.complet._x = 0;
_root.preload._y = 10;
_root.complet._y = 10;
_root.preload._height = 2;
_root.complet._height = 2;
_root.preload._width = 0;
_root.complet._width = Stage.width;

// variables temporelles
temps = new Date();
secondes = temps.getSeconds();
minutes = temps.getMinutes();
heures = temps.getHours();
jours = temps.getDay();

Nous introduisons quelques lignes dans notre second script:

(image-clé 3 du calque preload)
if (_root.getBytesLoaded() < _root.getBytesTotal())
  {
  temps2 = new Date();
  secondes2 = temps2.getSeconds() - secondes;
  minutes2 = temps2.getMinutes() - minutes;
  heures2 = temps2.getHours() - heures;
  jours2 = temps2.getDay() - jours;
  tempsecoule = (jours2 * 24 * 60 * 60) + (heures2 * 60 * 60) + (minutes2 * 60) + secondes2;
  vitesse = Math.round(_root.getBytesLoaded()
/ tempsecoule / 1024);
  tempsrestant = Math.round((_root.getBytesTotal()
- _root.getBytesLoaded()) / (vitesse*1024));
  _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)
  + "%. "
  + "Temps écoulé: " + tempsecoule
  + " secondes. Temps restant estimé: " + tempsrestant
  + " secondes. Vitesse de chargement: " + vitesse + " Ko/s.";
  _root.preload._width = (_root.getBytesLoaded()
  / _root.getBytesTotal()) * Stage.width;
  prevFrame();
  play();
  }

Beaucoup de calculs pour, en définitive, mettre les informations suivantes dans affichage: "Chargement en cours: 105657 octets chargés sur 743509 au total, soit 14%. Temps écoulé: 22 secondes. Temps restant estimé: 133 secondes. Vitesse de chargement: 4.7 Ko/s".

Pour ce faire, nous retrouvons ici la classe Date(), déjà abordée dans un précédent article. Ainsi, nous déclarons dans la première image-clé une occurrence de Date() appelée temps: elle nous permet de dater précisément le lancement de l'animation à l'aide des méthodes getSeconds(), getMinutes() et getHours(), dont nous récupérons les valeurs dans les variables idoines. Nous n'avons besoin de cette date qu'une seule fois, c'est pourquoi nous définissons ces valeurs dans la première image-clé, dont le script ne sera lancé qu'une seule fois.

En revanche, tout ce qui concerne le temps passé nécessite des valeurs constamment mises à jour, et c'est pourquoi nous les avons placées dans la seconde image-clé de preload (nous aurions aussi bien pu créer une nouvelle image-clé sur l'image 2 de ce calque): une nouvelle occurrence de Date(), appelée temps2, nous permet d'obtenir les valeurs du temps à l'instant du passage de la tête de lecture, et donc (par soustraction avec les valeurs tirées de temps) d'être toujours au fait du temps écoulé: secondes2 contient ainsi le nombre de secondes écoulées...
Le temps total écoulé est ensuite calculé en passant toutes les valeurs de jours, d'heures et de minutes écoulés en secondes, et en additionnant toutes ces valeurs avec les secondes écoulées.
La vitesse (en kilo-octets/seconde) est calculées en divisant le nombre d'octets chargés par le nombre de secondes écoulées. On divise ensuite les octets/s obtenus par 1024 pour obtenir des ko/s. L'utilisation de Math.round nous permet de ne pas avoir de chiffres après la virgule.
C'est grâce à la vitesse de chargement que l'on peut calculer une estimation du temps restant à charger. On soustrait d'abord le nombre d'octets chargés au nombre total d'octets pour obtenir le nombre d'octets restants à charger. On divise ensuite cette valeur par la vitesse multipliée par 1024 (étant donné que getBytesLoaded et getBytesTotal sont en octets, nous devont repasser la vitesse en octets pour obtenir les bonnes valeurs), un petit Math.round et le tour est joué.

Vous pouvez voir la version finale de notre preloader ici, et télécharger notre code source ici. Comme d'habitude, il est volontairement dépouillé d'effet esthétique.

Il y a bien entendu de nombreuses autres manières de construire un preloader: à vous de faire celui qui vous convient le mieux. Nous espérons vous avoir mis sur la bonne voie pour cela.

Page 1 | 2 | 3