Préchargement avec barre de progression en actionscript2 – basique
2 janvier 2008 par Niums dans Action script
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.
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 = <em>barreProgression_mc</em>._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
<em>barreProgression_mc</em>._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.
Continuez votre lecture avec
- Article suivant : Les tableaux en actionscript 2
- Article précédent : Dj Krush en concert à Paris le 04/02/08 et dans le reste de la France
Articles similaires
Commentaires (5)
Laisser un commentaire
Salut, peut-être que tu as écris cet article il y a longtemps. Mais si cela peut-être utile à d’autres personnes, je tiens à signaler que IsNaN ne fonctionne pas… Il faut donc écrire « isNaN » sans la majuscule au début ! Cela pourra peut-être aider quelques uns.
Sinon, merci beaucoup pour ton code
aie aie aie, merci Renaud. Je corrige ca.
Salut,
Tout d’abord merci pour ton blog il me rend bien service.
Ensuite j’aimerai te signaler une erreur « var barre:Number = barre_mc._width; » alors que le movieclip que tu nous demande de faire est d’occurrence « barreProgression_mc ».
Voilà et encore merci pour ton blog.
2 erreurs sur si peu de code ca le fait pas la, lol.
Merci Antoine
mercii