Le préchargement d’un contenu (flash, vidéo, image, son…) est une fonction indispensable pour informer les visiteurs sur le temps d’attente du chargement. En effet, dès que le poids dépasse 50 ko et qu’aucun preloader n’est prévu, l’internaute attend patiemment en espérant que tout est normal.

Préparation de la scène principale

- Créer un nouveau document AS2 (Ctrl + N).

- Créer 4 calques et nommez les : Etiquettes, Actions, Visuel, Preloader

- Sur le calque Etiquette, image 2, insérez une image clé vide (F7), sélectionnez-la et placez une étiquette d’image appelée startFrame, un drapeau rouge apparaît dans l’image clé.

Utiliser des étiquettes d’image clé et non des numéros permet de pérenniser votre code. Même si le nombre d’images clés est modifié, le code reste valide.

- Sur le calque Visuel, image 2, créez une image-clé vide (F7), sélectionnez-la et insérez le contenu à charger en l’important (Ctrl + R), pour cet exemple une image.

- Sur le calque Actions, toujours image 2,  créez une image-clé vide (F7), sélectionnez-la ouvrez le panneau Actions et ajoutez le code suivant permettant d’arrêter la tête de lecture lorsqu’elle atteindra cette image :

1

stop();

- Sur le calque Preloader, image 1, nous placerons le MovieClip preloader que nous allons créer maintenant.

Création des éléments graphiques du preloader

- Créez 2 symboles de type clip (Ctrl + F8) et nommez les : preload et barre.

Nous avons maintenant deux clips dans la bibliothèques : preload et barre.

- Double-cliquez sur le clip barre pour accéder à son interface graphique et dessiner la barre de chargement avec l’outil rectangle.

- Double-cliquez sur le clip preload et insérer le clip barre.

Pour pouvoir contrôler dynamiquement par la suite l’échelle (largeur en pourcentage) de votre clip barre, nous devons lui donner un nom d’occurrence : barreDeChargement. Sélectionnez le clip barre sur la scène et écrivez « barreDeChargement » dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

- Sur un deuxième calque, créez un champs de texte dynamique à l’aide de l’outil Texte et donnez lui un nom de variable : pourcentage.

Cette variable nous indiquera le taux de chargement en cours.

Le clip preload est prêt à l’emploi !

- Revenez sur la scène principale, calque Preloader, image 1, déposez le clip preload.

Code AS1 à placer sur le clip preload

Le clip preload est sur la scène principale et sa fonction est de tester le chargement de l’animation.

- Sélectionnez le clip preload, ouvrez le panneau Actions et ajoutez le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//Gestionnaire d'évènement permettant de tester, à interval régulier, le taux de chargement
onClipEvent (enterFrame) {
 
	//Mise à l'echelle de la barre de progression proportionnellement au taux de chargement
	//Math.round = Renvoie un entier
	//_root.getBytesLoaded() = Renvoie le nombre d'octets du scénario principal déjà chargés
	//_root.getBytesTotal() = Renvoie la taille, en octets, du scénario principal
 
	barreDeChargement._xscale = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);
 
	//Affichage du taux de chargement dans le champs texte dynamique
	pourcentage = "Chargement en cours : " + barreDeChargement._xscale + " %";
 
	//Lorsque la condition est remplie, la tête de lecture se déplace à l'image clé ayant pour étiquette "startFrame".
	if (barreDeChargement._xscale == 100) {
 
		_root.gotoAndStop("startFrame");
	}
}

Télécharger les sources : as1_preloader.zip