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

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_x_mec)