Barre de Progression
Exemple avec des images téléchargées à partir d'un fichier XML.
Structure du fichier xml :
<album>
<photo miniatureimage="miniatures/im1.jpg" />
<photo miniatureimage="miniatures/im2.jpg" />
<photo miniatureimage="miniatures/im3.jpg" />
etc...
</album>
***************
Sur l'image 1 du Calque 1 :
var WidthPage = Stage.width;
var HeightPage = Stage.height;
var encours = 0;
var ListImages = new Array();
var PercentLoaded = 0;
/* On charge les images */
photos_xml = new XML();
photos_xml.ignoreWhite = true;
photos_xml.onLoad = function(ok) {
if (ok) {
ListImages = this.firstChild.childNodes;
nbrPhotos = ListImages.length;
gotoAndPlay(_currentframe+1);
}
};
photos_xml.load("album.xml");
this.createEmptyMovieClip("strip_layer", 10);
this.strip_layer._visible = false;
stop();
***************
Sur l'image 2 du Calque 1 :
/* variables à adapter */
var typeR = "linear";
var couleurs = [0x6D4F1D, 0x993000];
var alphas = [60, 100];
var ratios = [0, 255];
var mx = 50;
var my = 50;
var mw = 255;
var mh = 255;
var px = 150;
var py = 220;
/* Crée la zone de texte pour le preload */
MovieClip.prototype.create_preload_progress_text = function() {
var preload_txt = this.createTextField("preload_text", 4, 0, 0, 0, 0);
preload_txt.autoSize = true;
preload_txt.html = true;
preload_txt.htmlText = "<b>Chargement en cours : 0 %</b>";
text_format = new TextFormat("Verdana", 8);
text_format.color = 0xcc3300;
preload_txt.setTextFormat(text_format);
preload_txt._x = (WidthPage-preload_txt._width)/2;
preload_txt._y = py-preload_txt._height;
};
/* Crée la barre de progression associée au preload */
MovieClip.prototype.create_preload_progress_bar = function() {
var box_contour = this.createEmptyMovieClip("preload_box_contour", 3);
var height_box = 6;
var width_box = px;
var start_box = (WidthPage-width_box)/2;
var mid_box = start_box+(width_box/4)
with (box_contour) {
lineStyle(1, 0xcccccc, 60);
moveTo(start_box, py);
lineTo(start_box+width_box, py);
lineTo(start_box+width_box, py+height_box);
lineTo(start_box, py+height_box);
lineTo(start_box, py);
}
this.createEmptyMovieClip("preload_progress_bar", 2);
};
/* Redessine la barre de progression et change le pourcentage */
function SetPercent(percent) {
this.preload_text.htmlText = "<b>Chargement en cours : "+Math.floor(percent)+" %</b>";
this.preload_text.setTextFormat(text_format);
this.preload_text._x = (WidthPage-preload_text._width)/2;
this.preload_text._y = py-preload_text._height;
var height_box = 6;
var width_box = px * percent / 100;
var start_box = (WidthPage-px)/2;
with (this.preload_progress_bar) {
beginFill(0x993000, 100);
moveTo(start_box, py);
lineTo(start_box+width_box, py);
lineTo(start_box+width_box, py+height_box);
lineTo(start_box, py+height_box);
lineTo(start_box, py);
endFill();
}
}
/* Création des zones de preload si elles n'existent pas */
if (!preload_txt) {
this.create_preload_progress_text();
}
if (!this.preload_progress_bar) {
this.create_preload_progress_bar();
}
/* Modification du pourcentage */
SetPercent(encours*100/nbrPhotos);
play();
***************
Sur l'image 3 du Calque 1 :
/* Charge les images les unes après les autres. Lorsqu'une image est chargée
on retourne sur la frame précédente pour mettre à jour les informations de preload.*/
var mini = this.strip_layer.createEmptyMovieClip("mini"+encours, 10+encours);
mini.loadMovie(ListImages[encours].attributes.miniatureimage);
encours++;
gotoAndPlay(_currentframe-1);
} else {
gotoAndPlay(_currentframe+1);
}
stop();
***************
Sur l'image 4 du Calque 1 :
/* Décharge la barre de progression */
preload_progress_bar.removeMovieClip();
preload_box_contour.removeMovieClip();
preload_text.removeTextField();
/* Affiche les images chargées dans un nouveau clip*/
OffsetY = 0;for (i=0; i<nbrPhotos; i++) {
var mini = this.createEmptyMovieClip("mini"+i+"_bis", 10+i+nbrPhotos);
mini.loadMovie(ListImages[i].attributes.miniatureimage);
mini._x = 100;
mini._y = OffsetY;
OffsetY += this.strip_layer["mini"+i]._height+5;
}
stop();