Préambule

La conception d'un loader flash peux paraitre compliqué mais il n'en est rien. Voyons ensemble comme y arriver.

Très bien, ouvrez donc votre logiciel préféré et créer un nouveau document an Action script 2

Sur la toute première image placez-y directement un stop();
En effet dès que l'animation flash va débuté il faut qu'elle s'arrête sur la première image et charger le reste avant de continuer. Nous stoppons donc directement l'animation sur l'image 1.

Conception du loader

Nous allons voir dans un premier temps l'affichage du chargement en pourcentage, puis une simple barre de progression. Nous verrons ensuite un autre moyen de rendre vos loader un peu plus "graphique".

C'est parti, créer un nouveau calque (Insertion > scénario > calque) et placer le en dessous du premier

Prenez l'outil "rectangle" (R) et tracer un rectangle au milieu de la scène.

Cliquez sur le rectangle pour le sélectionner et appuyer sur la touche F8 afin de transformer cette forme en "Clip"

Double cliquez maintenant sur ce clip afin d'entrer à l'intérieur.
C'est ici que tout va se jouer maintenant :)

Sélectionner à nouveau votre forme rectangulaire et faites de nouveau F8.
Transformer cette forme en clip à nouveau et donner lui un nom (dans notre exemple ce sera "barre_chargement".

Cliquez sur notre nouveau clip pour le sélectionner et donner lui un nom d'occurrence, ceci est très important pour la suite.

Pour donner un nom d'occurrence vous devez donc sélectionner le clip et entrer le nom dans le panneau des propriétés (CTRL + F3), dans notre exemple nous lui donnerons le nom d'occurrence "barre". Ce nom est important car nous l'utiliserons ensuite avec Action Script.

Récapitulons, nous avons à la racine du notre animation un clip.
Ce même clip contient un autre clip nommé "barre_chargement" et un nom d'occurrence "barre".

On continu ?

Donc après avoir donné un nom d'occurrence nous allons créer un nouveau calque qui va contenir notre texte de pourcentage.
Créer un nouveau calque (Insertion > scénario > calque).
Prenez l'outil "texte" et placer une zone de texte.

ATTENTION: ce texte doit être dynamique

Nous allons donner un nom de variable à ce texte dynamique.
Dans la fenêtre des propriétés chercher le champ "var" et donner un nom à ce texte, dans notre exemple nous lui donnerons le nom "pourcentage".

Maintenant créons un nouveau calque pour l'action script.
A ce stade la nous avons donc un clip à la racine avec un stop(); sur une image clé vide.

Dans ce clip nous avons ceci maintenant :

Un peu d'action script, juste un peu ...

Et entrez-y le code suivant :

this.onEnterFrame = function() {

  largeur = Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100);

  pourcentage = Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100)+"%";

  barre._width = largeur*2;

  if (pourcentage == "100%") {

  _root.gotoAndPlay(2);

  }

  };

Ce que nous retenons de ce code

OnEnterFrame : dès que la tête de lecture est sur cette image il effectuera les actions demandées jusqu'à ce qu'il en sorte, en l'occurrence ici tant que pourcentage n'est pas égale à 100% on exécute la fonction.

largeur : à l'aide de getBytesLoaded() et getBytesTotal() on définit facilement le pourcentage de l'animation chargée.

pourcentage : Sovuenez vous, nous avons créer un texte dynamique avec comme variable "pourcentage". Ce bout de code va donc afficher dans notre champ de texte le pourcentage de l'animation chargée.

barre._width : Nous définissons ici la longueur de la barre de chargement. Dans mon exemple la je veux que la barre à 100% fasse 200px de largeur donc on fait un simple calcul ici.
barre._width = largeur*2;
Largeur*2 car largeur retourne le pourcentage actuel chargé (exemple 60%) et ma barre total une fois 100% chargée fait 200pixel donc on multiplie le pourcentage par 2 et le tour est joué. Rêgle de trois quoi :=)

Si :
100% = 200px
60% = x
Donc :
60*200/100 = 120px

La fin du code nous dit :

Si pourcentage est égale à 100% alors on peux jouer l'animation (_root.gotoAndPlay(2);)

Et voila votre loader est paré, pour le tester, placer un gros fichier ou un mp3 sur l'image 2 à la racine de l'animation et placer tout ça sur votre serveur et tester la. Simple, rapide et fonctionnel.

Allons un peu plus loin

Deuxième méthode

onClipEvent (load) {

	total = _root.getBytesTotal();

}

onClipEvent (enterFrame) {

	loaded = _root.getBytesLoaded();

	pourcentage = int(loaded/total*100);

	this.gotoAndStop(pourcentage);

	if (loaded == total ) {

		_root.gotoAndPlay(2);

	}

}

Explication du code