Préparation de la scène principale

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

- Créer 3 calques et nommez les : Actions, Etiquette, Visuel

- Sur le calque Etiquette, Frame 2, insérez une image clé vide (F7) 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 permets de pérenniser votre code. Même si le nombre d’images clés est modifié, le code reste valide.

- Sur le calque Visuel, Frame 2, insérez le contenu à charger (Ctrl + R), pour cet exemple une image.

Création des éléments graphiques du préloader

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

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

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

- Double-clickez sur le clip preloader 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_mc.

- Sélectionnez le clip barre sur la scène et écrivez « barreDeChargement_mc » dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Pour afficher le taux de chargement, nous avons besoin d’un champs texte dynamique instancié.

- Sur un deuxième calque, créez un champs de texte dynamique à l’aide de l’outil Texte et et écrivez « pourcentage_txt » dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Le clip preloader est prêt à l’emploi, nous devons seulement lui affecter un identifiant de liaison unique afin de l’utiliser avec la méthode attachMovie().

La méthode attachMovie() associe à la scène une occurrence de symbole de clip présente dans votre bibliothèque.

Pour associer le symbole de clip preloader, vous devez l’exporter pour ActionScript et lui affecter un identifiant de liaison unique. Pour ce faire, utilisez la boîte de dialogue Propriétés du panneau Bibliothèque.

1. Sélectionnez le clip preloader dans le panneau Bibliothèque.
2. Dans le menu contextuel du panneau Bibliothèque, choisissez Propriétés….
   La boîte de dialogue Propriétés du symbole apparaît.
3. Pour Liaison, activez l’option Exporter pour ActionScript.
4. Pour Identifiant, entrez l’identifiant du clip preloader.
   Par défaut, l’identifiant est identique au nom du symbole.
5. Cliquez sur OK.

Une fois que vous avez affecté un identifiant de liaison à un clip, vous pouvez associer une occurrence du symbole à la scène lors de l’exécution à l’aide de la méthode attachMovie().

Code AS2

Sur le calque Actions, Frame 1, 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

//La variable globale "scene" fait référence au _root
_global.scene=this;
 
scene.stop();
 
//DEBUT PRELOADER
//Création d'une variable de scénario "refPreload"
//Permet de cibler facilement le préloader céer dynamiquement avec la méthode attachMovie()
var refPreload:MovieClip = scene.attachMovie("preloader", "preloader_mc", 1);
 
//Positionnement du préloader au centre de la scène
refPreload._x = (Stage.width-refPreload._width)/2;
refPreload._y = (Stage.height-refPreload._height)/2;
 
//initialisation de la barre de chargement (largeur à 0)
refPreload.barreDeChargement_mc._xscale = 0;
 
//Gestionnaire d'évènement permettant de tester, à interval régulier, le taux de chargement
refPreload.onEnterFrame = function() {
 
		//getBytesLoaded() = Renvoie le nombre d'octets du scénario principal déjà chargés
		//getBytesTotal() = Renvoie la taille totale, en octets, du scénario principal
		//Math.floor = Renvoie l’entier le plus proche inférieur ou égal au nombre ou à l’expression spécifié(e).
 		var bLoaded:Number = scene.getBytesLoaded();
		var bTotal:Number = scene.getBytesTotal();
		var ratio:Number = Math.floor((bLoaded/bTotal)*100);
 
		//test si la variable ratio est évaluée correctement en tant que nombre
		if (isNaN(ratio)) {
			//la condition est vérifiée, ratio "is Not a Number"
			//initialisation de la variable et suppression du gestionnaire d'évènement
			ratio = 0;
			delete this.onEnterFrame;
		}
 
		//Mise à l'echelle de la barre de progression proportionnellement au taux de chargement avec effet de ralenti
		this.barreDeChargement_mc._xscale -= (this.barreDeChargement_mc._xscale-ratio)*.1;
 
		//Math.round = Renvoie un entier
		//Affichage du taux de chargement dans le champs texte dynamique
		this.pourcentage_txt.text=Math.round(ratio)+" %";
 
		//Math.abs = Calcule et renvoie une valeur absolue
		//Si la valeur renvoyée est inférieure à 1, tout est chargé
		if (Math.abs(this.barreDeChargement_mc._xscale-100) < 1) {
			//suppression du gestionnaire d'évènement et du préloader
			delete this.onEnterFrame;
			//la tête de lecture se déplace à l'image clé ayant pour étiquette "startFrame".
			this.removeMovieClip();
			scene.gotoAndStop("startFrame");
		}
};
//FIN PRELOADER

Télécharger les sources : as2_preloader.zip