begin process at 2010 09 06 05:12:18
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

ActionScripts

 > AFFICHAGE D'UN LOADING PRINCIPAL SOUR FORME DE TEXTE, AVEC BARRE DE CHARGEMENT PERSONNALISABLE ET UTILISATION DE TEXTFORMAT.

AFFICHAGE D'UN LOADING PRINCIPAL SOUR FORME DE TEXTE, AVEC BARRE DE CHARGEMENT PERSONNALISABLE ET UTILISATION DE TEXTFORMAT.


 Information sur la source

Note :
8,43 / 10 - par 7 personnes
8,43 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :ActionScripts Classé sous :loading, chargement, pourcent, textformat, barre Niveau :Initié Date de création :01/01/2007 Date de mise à jour :05/01/2007 22:09:52 Vu / téléchargé :12 186 / 3 906

Auteur : x_mec

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
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

  • /*----------------------------------------------------------\
  • | |
  • | 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();
  • }
  • };
/*----------------------------------------------------------\
|															|
|   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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

01 janvier 2007 16:24:15 :
...
05 janvier 2007 22:09:52 :
Correction d'une petite erreur de positionnement de la barre

 Sources du même auteur

Source avec Zip CHAMPS DE SAISIE AMELIORÉ
Source avec Zip Source avec une capture POLLKA - SONDAGE EN FLASH/PHP/XML
Source avec Zip CHARGER UN FICHIER DISTANT (SANS CROSSDOMAIN)
Source avec Zip CHARGER UNE PAGE HTML DANS UNE ANIMATION FLASH
Source avec Zip CONTROLE DU FLOOD VIA FLASH ET SHARE OBJECT

 Sources de la même categorie

Source avec Zip Source avec une capture COMPOSANT SWC CALENDAR DATE PICKER POUR FLASH CS5 AS3 par nicoflashkod
Source avec Zip EDITEUR DE NIVEAU par Mansuz
Source avec Zip Source avec une capture BLACK MP3 PLAYER par BBFUNK01
Source avec Zip GÉNÉRATEUR DE LUMIÈRE par sylbuggy
Source avec Zip Source avec une capture TOURNER UN OBJEC VERS LA SOURIS... par top30

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CONCEPT BROWSER : NAVIGATEUR EN MODE TEXTE par mouloudikhaled
PRELOAD D'IMAGES EXTERNES MUTIPLES par gmni
Source avec Zip Source avec une capture CLASS SCROLLBAR COMPLETEMENT PARAMETRABLE par stefbuet
Source avec Zip Source avec une capture DIAPORAMA FLASH DYNAMIQUE + XML AVEC MINIATURES(VIGNETTES) E... par baillezon
Source avec Zip Source avec une capture PRELOADER BASIQUE NON OPTIMISÉ par bou_nabil

Commentaires et avis

Commentaire de x_mec le 01/01/2007 16:07:21

Et merci à la personne courageuse qui à balancé un 1/10. Qu'il m'explique pourquoi cette source ne merite que cette note ...

C'est vrai que ça encourage à partager :$

Commentaire de kitsmania le 01/01/2007 16:07:51

Ta source est beaucoup trop longue et difficile à comprendre pour les débutants ;

Il serait mieux de mettre ton code dans une séquence à part car les débutants ne savent pas mettre une image clé devant toute les images clés de leur animation.

Ca serait pas une copie de l'idée du célèbre développeur de 3Suisses International slax ?!

Commentaire de x_mec le 01/01/2007 16:35:11

SAlut kitsmania,

C'est vrai que ma source est consequente. J'avais pensé en faire une class mais après je me suis dis  qu'étant donné que ce code est destiné qu'a apparaitre une fois, et à ètre utilisé seul ...

Pour ce qui est des images clés, c'est aussi pour celà que j'ai fourni un zip, pour qu'il comprennent mieux l'utilisation.

Et j'ai donc changé le niveau de la source en "initié", car il n'y a pas que des debutants ici. Il suffit de voir le nombres de sources lourdes et qui plus est, mal commentées :o

Donc oui ma sources est lourde pour les debutants, mais je ne pense pas qu'elle soit si mauvaise ...

Et ce n'est pas une copie de l'idée de slax, enfin sa source m'a suggeré d'en faire une complète est à jour. En AS2 avec declaration des variables, typage fort, code centralisé et destruction des objets inutiles.

;)

Commentaire de lp5 le 08/01/2007 18:01:58

Moi, je vais jusqu'à 8/10... depuis le temps que je ne trouve pas de loading tout intégré.
Une question (vu que je suis une vraie pomme en programmation): qu'elle est la dernière ligne de code à la place de :
this.nextFrame();
pour que l'animation pointe sur une scène différente et nom l'image suivante
quand je fais this.nextScene()
... c'est le trou noir!
merci, merci

Commentaire de x_mec le 08/01/2007 18:40:00

@Lp5

Merci ;)

Et pour te positionner sur une frame bien definie, remplace:

this.nextFrame();

par

gotoAndStop(2);

La ton animation se rendra sur la frame 2 et se stopera. Ou :

gotoAndPlay(5);

La ton animation se rendra sur la frame 5 et se lancera la lecture.



;)

Commentaire de cam693 le 12/01/2007 00:30:42

Merci 1000 fois x_mec, perso je ne connais pas grand chose en flash et AS, mais je perçois qqchose qui me dit que : "enfin quelqun qui sais ce qu'il fait".

J'ai mis du temps avant de trouver ta source, et j'vais dire frenchement toutes celles que j'ai vu ne m'inspirais pas confience... ^^

Commentaire de lorenzo99 le 16/01/2007 19:52:16

Bonsoir,

Merci pour cette barre de programmation.
Au niveau de l'intégrer dans une animation Flah,

Comment faut il faire pour l'intégrer quand on à plusieur dossier.
j'ai essayé de l'intégrer suivant l'explication, mais mon animation se bloque et je ne voit pas l'animation.

D'avance merci.
Lorenzo

Commentaire de x_mec le 16/01/2007 20:21:29

@cam693

Merci ;)


@lorenzo99

Plusieurs dossiers ? Je ne comprend pas exactement ce que tu entends par là ?!

Commentaire de francoisobert le 11/07/2007 20:51:13

Bonjour

Comment je fais pour utiliser ce code sur Mx ?
merci d'avance

Commentaire de francoisobert le 11/07/2007 21:09:59

Je dois insérer une video. Merci

Commentaire de ludkill le 12/07/2007 13:25:53

Salut mec, juste pour te dire que je mets 9/10, j'aime beaucoup, c'est simple d'écriture et j'admire enfin l'effort pour les commentaires qui se font rares ou ne veulent rien dire ! Continue comme ça c'est vraiment pas mal.

Commentaire de claire3 le 30/07/2007 15:59:53

Super ce code tout simple et tout compris! :)
Je voudrais également l'utiliser sur un swf que j'appel avec un loadmovie, comment doit-je l'adapter?

Commentaire de mixuko le 10/10/2007 16:33:03 8/10

hello, merci pour le code x_mec. Cependant j'ai un un petit souci: j'ai belle et bien mis l'AS sur la première image de mon anim mais malheureusement une fois que la page est chargée, la barre reste visible...impossible de la faire disparaître! Tu saurais d'où ça peux venir?

Commentaire de kaliban47 le 25/01/2008 18:05:26 9/10

ben moi j'ai le meme probleme, la barre ne veut pas disparaitre, et aucun bouton ne marche en dessous de la barre qui reste, vraiment tres byzare ...

Commentaire de x_mec le 25/01/2008 18:17:56

Bizarre !

Essayé de mettre

this.progressBar_mc._visible = false;

sur la frame suivante !

Commentaire de kaliban47 le 25/01/2008 18:24:13

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 !

Commentaire de cac188 le 12/03/2008 20:31:49 9/10

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

Commentaire de johnfromtheattic le 03/06/2008 15:41:28

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.

Commentaire de zipal le 28/07/2008 14:07:10

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

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Problème barre de chargement [ par sofie16 ] Bonjour,j'ai créé une barre de chargement basic sur la première image de mon fichier flash (cf code plus bas). Le problème est qu' Barre 'loading...' [ par Gau ] Salut,J'aimerais savoir comment on fait une barre de progression du chargement de l'anim avant qu'elle ne se lance???Enfin, le machin qu'on voit avant Loading systeme pas tres au point [ par alexgr ] Salut, j'ai fait un site avec une barre de chargement mais quand je le met en ligne et que j'attend la barre de chargement, elle s'affiche à 80%( Barre de chargement progression [ par onzeshow ] Bonjour,j'utilise Macromedia Flash MX 2004 et je voudrais savoir comment on fait pour créer une barre de chargement merci d'avance pour votre aid mon site besoin de barre de chargement as [ par wal555 ] voila mon site www.fylsproject.com j'ai mi des barre de chargement mais elle sont trop longue aurriez vous un conseil????? Barre de préchargement puis redirection [ par acex ] Bonjour à tous!Voilà j'ai fait une page d'un site internet avec une animation en flash assez lourde et je voudrai faire afficher donc une barre de cha PB sur barre de chargement... [ par kingcobra ] Salut, je voudrais savoir si il existe une solution pour afficher une barre de chargement si tous les éléments sont dans la bibli.Mon probleme est que preload intégré lent !!!! [ par portnawaaak ] BonjourJ'ai essayé de comprendre comment réaliser une barre de chargement pour faire patienter les surfeurs le temps du chargement de l'animation .... barre de chargement pour une page flash [ par kizper ] Bonsoir, voila j'ai créée mon animation flash sur ma page elle n'est pas très lourde mais je voudrais savoir comment mettre un truc simple pour montre Barre de chargement utile...Comment on fait? [ par Nisnor ] Bonjour a tous...D'après le titre vous allez me dire que je n'ai cas regarder dans la section Code et qu'il y a une foule de script permettant ça..."O


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Septembre 2010
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
27282930   

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,749 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales