Affichage d'un loading principal sour forme de texte, avec barre de chargement personnalisable et utilisation de textformat.

Soyez le premier à donner votre avis sur cette source.

Vue 14 266 fois - Téléchargée 4 081 fois

Description

Donc c'est un code qui sert à faire apparaitre un texte de chargement pour votre animation pricipale (_root). Avec en plus l'utilisation de la classe textformat pour definir très simplement le style du texte.

Il intègre aussi une bare de progression. Elle est personnalisable facilement

Tout celà de manière dynamique, sans aucun elements disgracieux sur la scène principale.

Ps: oui je sais qu'il y a pas mal de codes traitant de ça sur ce site, mais pas mal sont obsolète, ou ne sont pas vraiment propre.

Source / Exemple :


/*----------------------------------------------------------\
|															|
|   Auteur: k-ny											|
|	Blog: http://blog.ka-studio.net/						|
|	Contact: http://blog.ka-studio.net/index.php?contact	|
|  															|
\----------------------------------------------------------*/
/***********************************************************

                    Initialisation

                                                                                                                        • /
//on s'arrète sur la 1ère frame de l'animation stop(); /*********************************************************** Definition du style pour le texte du loading
                                                                                                                        • /
//on declare un nouveau style var format_1:TextFormat = new TextFormat(); //ici on definit la couleur du loading format_1.color = 0x000000; //on centre le texte format_1.align = "center"; //on defini la font sur "verdana" format_1.font = "Verdana"; //à la taille 10 format_1.size = 10; //si gras, mettre "true" format_1.bold = false; //si italic, mettre "true" format_1.italic = false; /*********************************************************** Definition du style pour la barre de loading
                                                                                                                        • /
//utilisation d'une bordure ? var bar_bordure:Boolean = true; //couleur de la bordure var bar_bordure_color:String = "0x000000"; //couleur de la bar var bar_color:String = "0xFF0000"; //largeur de la barre var bar_largeur:Number = 125; //hauteur de la barre var bar_hauteur:Number = 5; /*********************************************************** Creation de la zone de texte de loading
                                                                                                                        • /
//on crée un nouveau champs de texte vide var txt_chargement:TextField = this.createTextField("txt_chargement", this.getNextHighestDepth(), 0, Stage.height/2, Stage.width, Stage.height); /*********************************************************** Creation de la barre de loading
                                                                                                                        • /
// Crée des clips pour recevoir votre contenu this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth()); this.progressBar_mc.createEmptyMovieClip("bar_mc", 1); this.progressBar_mc.createEmptyMovieClip("stroke_mc", 2); //Utilise des méthodes de dessin pour créer une barre de progression. if (this.bar_bordure) { with (this.progressBar_mc.stroke_mc) { lineStyle(0, this.bar_bordure_color); moveTo(0, 0); lineTo(this.bar_largeur, 0); lineTo(this.bar_largeur, this.bar_hauteur); lineTo(0, this.bar_hauteur); lineTo(0, 0); } } with (this.progressBar_mc.bar_mc) { beginFill(this.bar_color, this.bar_largeur); moveTo(0, 0); lineTo(this.bar_largeur, 0); lineTo(this.bar_largeur, this.bar_hauteur); lineTo(0, this.bar_hauteur); lineTo(0, 0); endFill(); _xscale = 0; } //Centrage de la barre this.progressBar_mc._x = (Stage.width-this.bar_largeur)/2; this.progressBar_mc._y = this.txt_chargement._y-this.bar_hauteur; /*********************************************************** Progression du loading
                                                                                                                        • /
//actions executées ) la cadence de l'animation this.onEnterFrame = function() { //variable contenant le pourcentage var complet:Number = Math.floor((_root.getBytesLoaded()/_root.getBytesTotal())*100); //on fait apparaitre le texte dès que le chargment commence (à 1% en fait) if (complet>=1) { //Texte qui sera affiché dans notre champs pendant le chargement this.txt_chargement.text = "Module chargé à "+complet+" %"; //on applique les style que l'on a definit au debut this.txt_chargement.setTextFormat(format_1); //on agrandit la barre de chargement this.progressBar_mc.bar_mc._xscale = complet; } //actions effectuées une fois le chargement fini if (complet>=100) { //On detruit la barre de loading this.progressBar_mc.removeMovieClip(); //On detruit notre champs de texte this.txt_chargement.removeTextField(); //on detruit l'enterframe (conso de cpu) delete this.onEnterFrame; //On detruit les variables delete this.complet; delete this.bar_bordure; delete this.bar_bordure_color; delete this.bar_color; delete this.bar_largeur; delete this.bar_hauteur; //on poursuit la lecture de l'anim this.nextFrame(); } };

Conclusion :


Voilà, il vous suffit de collez ce code sur la 1ère frame de votre animation. Une fois le chargement terminé il ira à la frame suivante ...

Vous pouves changez le style du texte dans la section "Definition du style pour le texte du loading"

Le style de la barre de chargement se fait dans la section "Definition du style pour la barre de loading" ;)

Je joins un zip pour l'exemple, mais il n'est pas obligatoire.

Enjoy

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
lundi 23 juin 2008
Statut
Membre
Dernière intervention
28 juillet 2008

merci pour ton code il est super
mais j'aimerai faire une animation avec mon image de fond, en même temps que le chargement s'effectue.
je n'y arrive pas peut tu m'aider
Messages postés
2
Date d'inscription
lundi 7 avril 2008
Statut
Membre
Dernière intervention
3 juin 2008

Salut,
Super code, mais tout les loadings que j'essaye ne fonctionne que si je supprime mes fichier MP3 (j'ai un lecteur audio)dans mon .fla
Je pense qu'il faut une commande spéciale mais je connais vraiment pas grand chose en programmation.
Si qqlqn à 5 min pour m'expliquer,
Merci.
Messages postés
23
Date d'inscription
mardi 25 décembre 2007
Statut
Membre
Dernière intervention
13 juin 2012

Super mais j'ai quelques questions:
1-Je me suis amusé à changer quelques trucs sur le script (la taille du texte à 15), donc même si le texte et centré il touche la barre de chargement, alors je voudrais savoir comment le centrer verticalement et le placer à 317 pour l'horizontale.
2-Si vous pouvez me reprendre le code et me le modifiera ma demande, mais autrement je le ferrais moi même.

Merci de me repondre.
Cac188
Messages postés
2
Date d'inscription
jeudi 2 août 2007
Statut
Membre
Dernière intervention
25 janvier 2008

merci pour la rapidité de ta réponse!!
avec cette ligne, le texte reste et pas moyen d'utilisé las bouttons apres, (seulement quand on utilise les composants intégrés du type TextArea par exemple). Il faut donc aussi rajouter cette ligne pour ceux qui auront le meme probleme :

this.txt_chargement._visible = false;

et merci pour ce code !
Messages postés
63
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
19 février 2008

Bizarre !

Essayé de mettre

this.progressBar_mc._visible = false;

sur la frame suivante !
Afficher les 19 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.