Kommunauty
Connexion
Inscription

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

  
12 commentaires

Han ! Merci beaucoup ! Ca fait longtemps que je cherche un tutoriel du genre mais tous ceux que j'ai suivi ne marchaient pas. J'espère que ça va marcher là. Je vais tester

le 16 juin 2009

Dis donc Dawlin c'est normal qu'a 71% mon ordi me dise en gros:

"Fais gaffe Abode Player est trop utilisé par un script sur cette page, voulez vous l'arreter? Si non, votre ordi risque de grave planter et de plus repondre"

Et du coup ca plante a 71%

le 16 juin 2009

Ca marche chez moi. C'est qu'il a mis exprès un gros fichier bien lourd pour que ça charge longtemps. Et c'est que ton PC doit pas être assez puissant et ça bug.

le 16 juin 2009

ha bah si en fait finalement ca charge tout, tout est ok...

Mon ordi s'il te plait c'est un Dell de 4 000 euros alors avant qu'il rame il y a du temps xD

le 16 juin 2009

j'ai bien aimé votre tuto mais est ce que pourriez vous me dire l'outil que vous avez utilisé?

le 12 novembre 2012

Salut ! Il s'agit du logiciel Adobe Flash (payant, cher)

le 12 novembre 2012

Bonjour a vous !

Ce script fonctionne t-il en AS3 ? (s'en est peut-être déjà un mais bon...)

le 7 janvier 2013

Hmmm... non je ne pense pas, AS2 et AS3 n'ont pas vraiment les mêmes grammaires.

Par contre il doit être facilement traduisible de AS2 vers AS3

le 9 janvier 2013

Une question : Combien coûte le logiciel ?

le 27 avril 2013

bonjour ;

Lebfdu16 ,si sa peut te renseigné

http://www.adobe.com/fr/products/flash.edu.html

le 28 avril 2013

Salut,

à la fin du chargement, le texte 100% reste visible sur l'anim swf chargée. il y a moyen d'arranger ça ? Merci

le 24 octobre 2013

Je n'y connais rien en Flash mais je suppose qu'en regardant le :

barrel._visible = false;

Pour faire disparaitre la barre, tu as des indices...

le 24 octobre 2013



Ajoute un commentaire !

Ajouter une image... Trouvée sur internet » De mon PC »
Adresse URL :
Adresse de la page de la vidéo :
Taille du texte :
Couleur du texte :

Article lu 16835 fois.