ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Barre de chargement
Nous allons voir ici deux types de barre de chargement :
- Pour pré-charger l'animation principale :

Nous allons utiliser ici les séquences. Ouvrez votre fichier.fla, et ajoutez une nouvelle séquence (Fenêtre > Autres panneaux > Séquence // ou MAJ+F12).



Nommez là (ex: preload), et placez là en première position.



Allez dans la séquence de pré-chargement :



Pour l'affichage de l'avancement, nous y avons mit sur un claque :


Mettez ensuite le code suivant sur un nouveau calque (image clé vide) :



//Imports Flash
import flash.events.Event;
import flash.events.ProgressEvent;

stop(); //Bloque l'animation sur la séquence du pré-chargement

function progressLoad(e:ProgressEvent):void //Pendant le pré-chargement
{
//Récupère le nombre de données déjà téléchargées :
var charger:Number = e.bytesLoaded / e.bytesTotal;

//Calcul le pourcentage d'avancement du pré-chargement :
var pourcent:int = charger * 100;

//Affiche l'avancement du pré-chargement (texte + barre de chargement)
loadingText.text = "Chargement: " + pourcent + "%";
loadingBar.gotoAndStop(pourcent);
}

function completeLoad(e:Event):void //Une fois le pré-chargement terminée
{
//Suppression des évènements pour le pré-chargement
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressLoad);
loaderInfo.removeEventListener(Event.COMPLETE, completeLoad);

play(); //Lancement de l'animation (passe à la séquence suivante).
//Pensez à mettre également un stop(); sur la séquence de votre animation pour ne pas relire en boucle
//la séquence du pré-chargement.
}

//Création de deux évènements sur le chargeur :
// - une pour pendant le pré-chargement
// - une pour quand le pré-chargement est terminée à 100%
loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressLoad);
loaderInfo.addEventListener(Event.COMPLETE, completeLoad);

Il arrive parfois que l'animation reste bloquée à 100% sans passer à la séquence suivante. Pour corriger se problème, rajouter ceci juste en dessous du code ci-dessus. Si le problème persiste, copiez également ce code dans la fonction progressLoad :

if(loaderInfo.bytesLoaded == loaderInfo.bytesTotal)
{
play();
}


- Pour pré-charger un fichier externe :

Voyons maintenant comment ajouter une barre de chargement lors du chargement d'un fichier externe, comme vu précédemment dans la partie 'Charger un SWF externe'.

Voici le code permettant de charger un SWF externe :

//Imports Flash
import flash.net.URLRequest;
import flash.display.Loader;

//URL du fichier SWF externe à charger
var lienFichierSWF:URLRequest = new URLRequest("animation.swf");

//Création d'un chargeur, pour télécharger le fichier SWF externe
var conteneur:Loader = new Loader(); //Création du chargeur
conteneur.load(lienFichierSWF); //Lancement du chargement

addChild(conteneur); //Ajout de l'animation sur la scène

Voici ce même code, avec une barre de chargement :

//Imports Flash
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;

//URL du fichier SWF externe à charger
var lienFichierSWF:URLRequest = new URLRequest("animation.swf");

//Création d'un chargeur, pour télécharger le fichier SWF externe
var conteneur:Loader = new Loader(); //Création du chargeur
//Création de deux évènements sur le chargeur :
// - une pour pendant le pré-chargement
// - une pour quand le pré-chargement est terminée à 100%
conteneur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressLoad);
conteneur.contentLoaderInfo.addEventListener(Event.COMPLETE, completeLoad);
conteneur.load(lienFichierSWF); //Lancement du chargement

//La zone de texte et la barre de chargement sont masquées initialement
infos.visible = false;

function progressLoad(e:ProgressEvent):void //Pendant le chargement
{
//Affiche la zone de texte et la barre de chargement
infos.visible = true;

//Récupère le nombre de données déjà téléchargées :
var charger:Number = e.bytesLoaded / e.bytesTotal;

//Calcul le pourcentage d'avancement du chargement :
var pourcent:int = charger * 100;

//Affiche l'avancement du chargement (texte + barre de chargement)
infos.loadingText.text = "Chargement: " + pourcent + "%";
infos.loadingBar.gotoAndStop(pourcent);
}

function completeLoad(e:Event):void //Une fois le chargement terminée
{
//Suppression des évènements pour le chargement
conteneur.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressLoad);
conteneur.contentLoaderInfo.removeEventListener(Event.COMPLETE, completeLoad);

//Efface la zone de texte et la barre de chargement
infos.visible = false;

addChild(conteneur); //Ajout de l'animation sur la scène
}

Ici, par rapport au pré-chargement, on doit faire apparaître, puis disparaître les informations sur l'avancement du chargement. Pour faciliter cela, j'ai mis ma zone de texte dynamique et ma barre de chargement dans un clip ayant pour nom d'occurrence infos.
Commentaire(s)
Aucun.