Flash : Créer un loader

le 16 juin 2009 • Flash • par Dawlin

Bonjour, aujourd'hui on va apprendre à faire un loader en flash. Un loader, c'est une barre de chargement de l'animation. En gros si votre animation mets 3 minutes à charger parce que vous ne savez pas bien optimiser, c'est pas votre faute, mais vu que c'est pas non-plus celle de l'utilisateur, on va lui faire de quoi patienter (de quoi savoir si il a le temps d'aller fumer une clope )

Un loader, ça ressemble à ça :

Tout d'abord, créez, avec l'outil rectangle et l'outil transformation de dégradé une barre comme vous voulez, ou comme ceci :

Et convertissez-la en symbole appelé "barre1" par exemple.

Ensuite dupliquez-là sur un autre calque, au-dessus, et raccourcissez-la.

Maintenant sur le premier calque, avec la liste de défilement "couleur", appliquez une opacité qui montrera bien qu'il s'agit de la barre max et pas de la barre de chargement :

Ensuite, nommez la barre qui va bouger, celle qui est au dessus, donnez-lui un nom d'occurrence "barrel" (comme barre loader). L'autre on l'appelle "barret" (comme barre total) et on va se baser sur elle pour faire notre règle de 3

Ensuite, dans nos actions, on va charger un clip externe qui met bien du temps à charger. Voilà le code expliqué :


//Code expliqué

//tout d'abord une fonction qui arrondira le pourcentage à la fin :

//arrondir(le nombre, nombre après la virgule);
arrondir = function(vnombre,vvirgule){
	nombre = vnombre;
	//10 puissance vvirgule, vvirgule étant le nombre qu'on veut de chiffres après la virgule
	virgule = Math.pow(10,vvirgule);
	arrondi=(Math.round(nombre*virgule))/virgule;
	return(arrondi);
}




//Création d'un symbole de type clip, vide, avec comme occurrence "cont" (comme contenant)
this.createEmptyMovieClip("cont",5);
//il se place par défaut à x=0 y=0;

//création d'un "chargeur de movieclip"
var nload:MovieClipLoader = new MovieClipLoader();
//création d'un "listener" qui capte chaque action de flash (d'où son nom)
var mouchard:Object = new Object();

//on l'attribue au chargeur
nload.addListener(mouchard);

//pendant le chargement, quand on l'aura lancé (onLoadProgress) ...
mouchard.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {

//variable de la taille du fichier
taille = bytesTotal;
//variable des bytes chargés
actuel = bytesLoaded;
//Le pourcentage c'est actuel/taille * 100 n'est-ce pas ??
pourcentage = actuel*100/taille;

//on écrit ça dans un champ de texte appellé "pourcent", comme ça on a une barre ET un texte
//note : c'est là qu'on retrouve notre fonction arrondir();
pourcent.text=arrondir(pourcentage,0)+" %";

//la propriété ._width c'est la largeur d'un clip
//ici on fait pareil qu'avec le pourcentage mais en prenant en compte la longueur max de notre barre
barrel._width = (pourcentage*barret._width)/100;

//si le chargement est fini, on rend invisible les barres (le clip chargé s'affiche tout seul)
if(pourcentage >= 100){
barrel._visible = false;
barret._visible = false;
}
	}
//une fois que flash sait ce qu'il fera, on charge dans notre clip "cont" : (je vous ai mis une de mes //animations bien grosses et lentes)
nload.loadClip("http://leonard.allainlaunay.free.fr/flash/aquarium.swf",cont);

Voilà, je ne peux en dire plus, je vous passe la source :

Préchargement en flash .fla

Voilà, merci d'avoir suivi ce tutoriel,

Dawlin

Flash : Créer un loader

Lisez aussi...

Flash : Le principe d'une Map

Flash : Charger et exploiter un fichier XML externe