jan
02

But : comprendre comment fonctionne le préchargement ou preload :
Ce que nous voulons : un champ texte contenant le pourcentage loadé et une barre de progression qui va agrandrir sa taille initiale de 0 à 100%.

Préparation :

Créer sur la scène 3 éléments :

Pour l’affichage du pourcentage en nombre, créez un champ texte dont le type est texte dynamique avec comme nom d’occurence pourcentageCharger_txt

Pour l’affichage des octets chargés, créez un champ texte dont le type est texte dynamique avec comme nom d’occurence octetCharger_txt

Pour la barre de progression : dessinez un rectangle de 200 pixels de large sur 10 de haut par exemple, transformez le en movie clip (F8 en faisant attention à ce que le point d’alignement se situe en haut à gauche) et donnez lui comme nom d’occurence barreProgression_mc

Créez un nouveau calque sur lequel vous insérez le code ci-dessus.


stop(); // 

var poidsTotal:Number; //stockons le poids total de l'animation dans une variable dont le type est Number
var partCharger:Number; //stockons le poids effectivement chargé de l'animation dans une variable dont le type est Number
var pourcentageCharger:Number; //stockons le pourcentage de chargement dans une variable dont le type est Number
var barre:Number = barre_mc._width; //stockons la taille réelle de la barre dans une variable dont le type est Number

this.onEnterFrame = function () { //
	poidsTotal = Math.round(this.getBytesTotal()/100);	// Poids total de l'anim.
	partCharger = Math.round(this.getBytesLoaded()/100);	//  stokons le poids réellement chargé.
	pourcentageCharger = Math.round((partCharger/poidsTotal)*100);   // Calcule du pourcentage arrondi

        if(IsNaN(pourcentageCharger)) { // si la variable pourcentageCharger est bien un nombre
		pourcentageCharger_txt.text = poid_txt.text = ""; // si isNaN renvoie true on vide les champs textes
	} else { // sinon on effectue le préchargement
		pourcentage_txt.text = pourcentageCharger +" %"; //Affichage du pourcentage
		barre_mc._width = pourcentageCharger*(barre/100);	//Changement de la taille de la barre
		octetCharger_txt.text = partCharger+"Ko / "+poidsTotal+"Ko";	//Affichage du poids chargé et du poids total

		if (pourcentageCharger >= 100) { // si le chargement est fini
			delete this.onEnterFrame; // on supprime le gestionnaire onEnterFramme
			this.gotoAndPlay (2); //On joue l'animation à partir de la frame 2
		}
	 }
};


Quelques remarques:

Le gestionnaire onEnterFrame s’applique à toutes les images de l’animation dès sa première exécution. Il faut donc penser à le supprimer avec la commande delete dès que le préchargement est fini.

Math.round() permet d’arrondir un nombre à l’entier le plus proche.
ex : Math.round(5,49) nous donnera 5
ex : Math.round(5,51) nous donnera 6
Math.floor() permet d’arrondir un nombre à l’entier inférieur.
ex : Math.floor(5,2) nous donnera 5
Math.ceil() permet d’arrondir un nombre à l’entier supérieur.
ex : Math.ceil(5,2) nous donnera 6

On utilise isNaN pour savoir s’il s’agit bien d’un nombre. isNaN signifie is Not a Number. isNaN renvoie la valeur true lorsque l’expression testée n’est pas un nombre et false lorsqu’il s’agit d’un nombre. Ici, si true est renvoyé on vide les 2 champs texte dynamique.



Préchargement avec barre de progression en actionscript2 - basique
Inscrivez vous aux flux RSS pour rester informé des news du site.

Social Bookmarking
AJOUTER A: Digg AJOUTER A: Del.icio.us AJOUTER A: Technorati AJOUTER A: StumbleUpon AJOUTER A: Reddit AJOUTER A: Slashdot AJOUTER A: Netscape AJOUTER A: Furl AJOUTER A: Newsvine AJOUTER A: Yahoo AJOUTER A: Google AJOUTER A: Blinklist AJOUTER A: Spurl AJOUTER A: Diigo AJOUTER A: Ma.Gnolia





Quelque chose à dire? Dites-le ci-dessous.