Suite à notre première approche des preloaders, qui était pour le moins basique, nous allons maintenant voir deux autres ajouts pratiques pour vos visiteurs...

Monter la barre un peu plus haut
L'un des effets les plus fréquents (et les plus demandés) d'un preloader est une simple barre dont la taille augmente en fonction du nombre d'octets chargés. C'est en effet l'un des meilleurs moyens d'indiquer au visiteur la vitesse de préchargement, ce petit graphique combinant des informations directement accessibles comme le pourcentage d'octets chargés ou encore la vitesse du chargement (et donc, le temps restant estimé)

Ajoutons à cela le fait qu'un graphique est beaucoup plus "visuel" qu'une ligne de texte, et vous comprenez le succès des "barres de chargement". Voici comment faire les vôtres.

Partez du preloader que nous avons créé précédemment. Sélectionnez toutes les premières images de vos calques et appuyez sur F5: ceci aura pour effet de placer une image vide entre les deux premières images-clés.
Créez un clip (ctrl-F8 ou pomme-F8), et placez un rectangle (peut importe sa taille ou sa couleur). Créez un second clip contenant lui aussi un rectangle de couleur différente.
Placez ces deux clips n'importe où sur la première image-clé du calque preloader, et nommez-les respectivement preload et complet. Sélectionnez complet avec la souris et placez-le en arrière-plan (avec le menu Modification/Réorganisation/Mettre à l'arrière-plan, ou ctrl/pomme-majuscule-flêche vers le bas).
Placez maintenant le code suivant sur la première image-clé sur calque actions:

(image-clé 1 du calque actions)
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;

Vous voyez qu'ici, comme pour notre horloge, nous utilisons directement ActionScript pour donner les tailles et positions des occurrences sur la scène. En effet, _x et _y nous permettent de positionner nos éléments sur la scène (nous les mettons à gauche de la scène, et à 10 twips du haut de celle-ci), tandis que _height et _width nous permettent de régler leurs tailles (2 twips de haut pour les deux, zéro twip de large pour preload, et complet est de la même largeur que la scène (en utilisant Stage.width)).
Vous pouvez maintenant comprendre pourquoi nous devons placer une image vide entre les deux premières images-clés du preloader: nous devons initialiser certaines valeurs avant de lancer la boucle entre les images 2 et 3...
De son côté, la ligne Stage.scaleMode = "exactFit"; nous permet de spécifier que la scène doit s'adapter exactement à la taille du navigateur.

Il ne nous reste plus qu'à reprendre notre script (maintenant sur l'image 3 du calque actions) en ajoutant une seule ligne (ici en gras):

(image-clé 3 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)
  + "%.";
  _root.preload._width = (_root.getBytesLoaded()/_root.getBytesTotal()) * Stage.width;
  prevFrame();
  play();
  }

Vous voyez qu'ici, en plus d'afficher plusieurs informations dans le champ affichage, nous modifions la largeur de preload en fonction du nombre d'octets chargés. Notre petite routine divise le nombre d'octets chargés par le nombre total d'octets, et multiplie le tout par la largeur de la scène. complet étant placé juste derrière preload, c'est lui qui servira de référence: une fois tous les octets chargés, preload aura la même largeur que la scène, donc la même qu'affichage...

Page 1 | 2 | 3