[AS3]Faire un preloader en flash, ActionScript 3
ybouane [AS3]Faire un preloader en flash, ActionScript 3 Note : 4/5 (0 vote) Derniéres modifications : 21/03/2010 à 06:04:47 Mots-Clés : Faire un preloader flash actionscript 3 chargement de l'animation pourcentage de chargement telechargement en actionscript 3 as3 loaderInfo.bytesTotal loaderInfo.bytesLoaded Bonjour, dans ce tutoriel, je vais vous apprendre comment faire une preloader en flash en utilisant l'ActionScript 3. Si vous désirez faire un preloader avec ActionScript 2 cliquez sur le lien suivant: Faire un preloader pour une animation flash en utilisant l'ActionScript 2 Un preloader est un message indiquant le chargement de l'animation souvent en pourcentage et parfois même par une barre pour mieux illustrer le chargement. Dans ce tutoriel, je vais vous montrer et vous expliquer comment faire un preloader pour vos animations en utilisant l'ActionScript 3. Notre preloader indiquera le chargement par un texte montrant le pourcentage de chargement mais aussi par une barre pour mieux illustrer le chargement. Le fonctionnement de ce preloader est assez simple: Premièrement, la première image de l'animation sera complètement dédiée au preloader. Dès le lancement de l'animation, on l'arrêtera pour afficher le preloader. Nous allons faire une fonction permettant d'afficher le pourcentage chargé et d'ajuster la barre correctement. Dans cette fonction, nous allons aussi vérifier si le chargement est fini. Si c'est le cas, on passe à la deuxième image de l'animation. Notre fameuse fonction sera appelée à chaque 0.1 secondes. Ça vas permettre d'actualiser le preloader. J'espère que mes explications ont étés claires. Bon maintenant, nous allons mettre en marche ce système. Pour commencer, votre scène dois contenir deux calques, le premier(à partir du haut) sera nommé loader et l'autre contenu. À vrai dire, le contenu ne commence qu'à la deuxième image puisque la première sera dédiée au preloader. Mettez une zone de texte dynamique qui aura comme nom d'occurrence "pct_charge". Ensuite, créez une barre, convertissez la comme symbole et donnez lui comme nom d'occurrence "fond_charge". Créez une autre barre avec la même hauteur que la précédente. Elle doit être bien aligné avec la précédente. Convertissez la comme symbole mais dans l'alignement, choisissez un carré à gauche. Donnez à cette dernière comme nom d'occurrence "barre_charge". Mettez ce code pour le calque loader: Code: ActionScript stop(); var total; var loaded; var pct; function preload() { total = root.loaderInfo.bytesTotal; loaded = root.loaderInfo.bytesLoaded; pct = loaded/total100; pct_charge.text = Math.round(pct)+'%'; barre_charge.width = fond_charge.width/100pct; if(loaded == total) { clearInterval(pre_check); gotoAndPlay(2); } } var pre_check = setInterval(preload,100); preload(); C'est tout, votre preloader est prêt! Voici un résultat d'exemple de ce tutoriel et sa source pour le télécharger: Tester l'animation Télécharger le preloader flash pour l'ActionScript 3 Si vous désirez utiliser ce preloader mais sous ActionScript 2, cliquez sur le lien suivant: Faire un preloader pour une animation flash en utilisant l'ActionScript 2 merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile. Scripts et tutoriaux similaires à celui ci: [AS2]Faire un preloader en flash, ActionScript 2 Changer Alpha (Opacité/Transparence) d'un symbole en flash, ActionScript 2 et 3 Effectuer translation, rotations, redimentionnements en flash, ActionScript 2 et 3 Detecter la position de la souris flash, ActionScript 2 et 3 Inclure fichier ActionScript (.as) dans une animation flash Compression Gzip en php - accélérer le téléchargement réduire taille pages Système d'onglets en Javascript, (X)html et CSS dans la même page Évaluer la vitesse de connexion en javascript Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par starmust2 le 10/10/2009 à 17:11:09 bonjour merci monsieur mais il existe un défaut que peut être vous ne saviez pas lequel ? c'est ca la question. bon la réponse : c'est qu'il y a plusieurs qui ne sont pas origine français et qu'ils ne connaisse pas bien ou parfaitement ce que vous voulez , pas moi évidemment , moi passable en français mais d'autre qui sont nuls donc par conséquence si vous voulez bien il faut être à la hauteur de votre site il est instrumental il faut mettre des dessins expliquant vos paroles comment ca exemple mettre une barre vous tracez la barre ensuite contineuz votre explication et ainsi de suite maerci bien je m'excuse fortement je veux bien des réponse sur mon de n(importe qui msn aimmust@hotmail.com ou sur mon site si vous voulez malgré qu'il est en arabe excusez moi monsieur excusez moi tous merci Envoyé par starmust2 le 10/10/2009 à 17:20:08 je m'éxcuse mon site c'est http://starmust2.ahlamontada.com merci Envoyé par ybouane le 31/10/2009 à 04:38:41 bonjour, il suffit d'utiliser le traducteur de pages Google: http://www.google.com/language_tools?hl=fr dans la partie "Traduire la page suivante" Merci :) Envoyé par zo le 01/11/2009 à 18:12:58 1000 mercis pour ce tuto, qui, malgré le manque d'illustrations, s'est trouvé très très clair et d'une grande aide pour moi ! Envoyé par cocksucker le 06/11/2009 à 03:03:38 dude!!!Yasinnne je suis fier de toi::::::)) Envoyé par Prev639367 le 24/11/2009 à 11:46:54 Bonjour et merci pour ce tuto. J'ai une question. Je voudrais que cette barre de pre-load fasse son office mais par rapport a un fichier exterieur et non au contenu di flash. Cela est t'il possible ? Et encore merci pour le tuto Envoyé par ybouane le 28/11/2009 à 23:40:37 Bonjour, @Prev639367: Si j'ai bien compris, tu veut charger des images externes(par exemple), mais qu'elles soient préloadées avec le préloader :p? Si c'est ça, eh bien la technique utilisée lors de ce tutoriel ne pourra pas fonctionner puisqu'elle charge l'animation, et que les images externes ne font pas partie de l'animation. Pour l'instant, je ne peut pas t'aider à résoudre ton problème(car je ne sais pas comment), mais quand j'aurais le temps(dans quelques semaines voir plus :(), je me documenterait sur ce sujet, et je ferais un tutoriel. Merci :) Envoyé par Prev639367 le 02/12/2009 à 17:25:30 Merci à toi Envoyé par gkalikoba le 04/10/2010 à 20:24:17 Bonjour, Quand je veux télécharger le preloader et que je désire ouvrir le .fla, j'ai ce message: "Format de fichier innatendu" Est-ce que quelqu'un pourrait me dire pourquoi ? Merci pour vos réponses gkalikoba Envoyé par Toto le flasheur amateur le 05/04/2011 à 15:37:08 Merci beacoup Envoyé par UAilOVfn le 04/06/2011 à 11:20:30 Hey, subtle must be your mdilde name. Great post! Envoyé par eric le 08/08/2011 à 05:04:48 bonjour, J'ai fait une petite animation sous flash qui fait appelle a des .gif avec this.loadMovie j'ai fait une barre de progression de chargement, mais elle progresse en fonction du chargement du .swf.... y'aurait il un moyen de la faire progresser un fonction du charegement de plusieurs fichiers ou meme du chargement d'un dossier....?? En tout cas, merci pour ce tuto qui est assez clair je trouve, malgres les 1er commentaire posté!! mercii, eric Envoyé par yqnppbrb le 24/01/2012 à 12:30:07 20

[AS3]Faire un preloader en flash, ActionScript 3

ybouane

[AS3]Faire un preloader en flash, ActionScript 3
Note : 4/5 (0 vote)
Derniéres modifications : 21/03/2010 à 06:04:47
Mots-Clés : Faire un preloader flash actionscript 3 chargement de l'animation pourcentage de chargement telechargement en actionscript 3 as3 loaderInfo.bytesTotal loaderInfo.bytesLoaded

Bonjour,
dans ce tutoriel, je vais vous apprendre comment faire une preloader en flash en utilisant l'ActionScript 3.

Si vous désirez faire un preloader avec ActionScript 2 cliquez sur le lien suivant:

Faire un preloader pour une animation flash en utilisant l'ActionScript 2

Un preloader est un message indiquant le chargement de l'animation souvent en pourcentage et parfois même par une barre pour mieux illustrer le chargement.

Dans ce tutoriel, je vais vous montrer et vous expliquer comment faire un preloader pour vos animations en utilisant l'ActionScript 3.
Notre preloader indiquera le chargement par un texte montrant le pourcentage de chargement mais aussi par une barre pour mieux illustrer le chargement.

Le fonctionnement de ce preloader est assez simple:
Premièrement, la première image de l'animation sera complètement dédiée au preloader.
Dès le lancement de l'animation, on l'arrêtera pour afficher le preloader.
Nous allons faire une fonction permettant d'afficher le pourcentage chargé et d'ajuster la barre correctement.
Dans cette fonction, nous allons aussi vérifier si le chargement est fini. Si c'est le cas, on passe à la deuxième image de l'animation.
Notre fameuse fonction sera appelée à chaque 0.1 secondes. Ça vas permettre d'actualiser le preloader.

J'espère que mes explications ont étés claires.

Bon maintenant, nous allons mettre en marche ce système.
Pour commencer, votre scène dois contenir deux calques, le premier(à partir du haut) sera nommé loader et l'autre contenu.
À vrai dire, le contenu ne commence qu'à la deuxième image puisque la première sera dédiée au preloader.
Mettez une zone de texte dynamique qui aura comme nom d'occurrence "pct_charge".
Ensuite, créez une barre, convertissez la comme symbole et donnez lui comme nom d'occurrence "fond_charge".
Créez une autre barre avec la même hauteur que la précédente. Elle doit être bien aligné avec la précédente. Convertissez la comme symbole mais dans l'alignement, choisissez un carré à gauche. Donnez à cette dernière comme nom d'occurrence "barre_charge".
Mettez ce code pour le calque loader:

Code: ActionScript

stop();

var total;

var loaded;

var pct;

function preload()

{

        total = root.loaderInfo.bytesTotal;

        loaded = root.loaderInfo.bytesLoaded;

        pct = loaded/total*100;

        pct_charge.text = Math.round(pct)+'%';

        barre_charge.width = fond_charge.width/100*pct;

        if(loaded == total)

        {

                clearInterval(pre_check);

                gotoAndPlay(2);

        }

}

var pre_check = setInterval(preload,100);

preload();

C'est tout, votre preloader est prêt!
Voici un résultat d'exemple de ce tutoriel et sa source pour le télécharger:

Tester l'animation

Télécharger le preloader flash pour l'ActionScript 3

Si vous désirez utiliser ce preloader mais sous ActionScript 2, cliquez sur le lien suivant:

Faire un preloader pour une animation flash en utilisant l'ActionScript 2

merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile.

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par starmust2 le 10/10/2009 à 17:11:09

bonjour
merci monsieur mais il existe un défaut que peut être vous ne saviez pas
lequel ? c'est ca la question.
bon la réponse : c'est qu'il y a plusieurs qui ne sont pas origine français et qu'ils ne connaisse pas bien ou parfaitement ce que vous voulez , pas moi évidemment , moi passable en français mais d'autre qui sont nuls
donc par conséquence si vous voulez bien
il faut être à la hauteur de votre site il est instrumental
il faut mettre des dessins expliquant vos paroles
comment ca exemple mettre une barre vous tracez la barre ensuite contineuz votre explication et ainsi de suite
maerci bien je m'excuse fortement
je veux bien des réponse sur mon de n(importe qui
msn aimmust@hotmail.com
ou sur mon site si vous voulez malgré qu'il est en arabe
excusez moi monsieur excusez moi tous merci

Envoyé par starmust2 le 10/10/2009 à 17:20:08

je m'éxcuse mon site c'est
http://starmust2.ahlamontada.com
merci

Envoyé par ybouane le 31/10/2009 à 04:38:41

bonjour,
il suffit d'utiliser le traducteur de pages Google:
http://www.google.com/language_tools?hl=fr

dans la partie "Traduire la page suivante"

Merci :)

Envoyé par zo le 01/11/2009 à 18:12:58

1000 mercis pour ce tuto, qui, malgré le manque d'illustrations, s'est trouvé très très clair et d'une grande aide pour moi !

Envoyé par cocksucker le 06/11/2009 à 03:03:38

dude!!!Yasinnne je suis fier de toi::::::))

Envoyé par Prev639367 le 24/11/2009 à 11:46:54

Bonjour et merci pour ce tuto. J'ai une question. Je voudrais que cette barre de pre-load fasse son office mais par rapport a un fichier exterieur et non au contenu di flash. Cela est t'il possible ?

Et encore merci pour le tuto

Envoyé par ybouane le 28/11/2009 à 23:40:37

Bonjour,
@Prev639367: Si j'ai bien compris, tu veut charger des images externes(par exemple), mais qu'elles soient préloadées avec le préloader :p?
Si c'est ça, eh bien la technique utilisée lors de ce tutoriel ne pourra pas fonctionner puisqu'elle charge l'animation, et que les images externes ne font pas partie de l'animation.

Pour l'instant, je ne peut pas t'aider à résoudre ton problème(car je ne sais pas comment), mais quand j'aurais le temps(dans quelques semaines voir plus :(), je me documenterait sur ce sujet, et je ferais un tutoriel.

Merci :)

Envoyé par Prev639367 le 02/12/2009 à 17:25:30

Merci à toi

Envoyé par gkalikoba le 04/10/2010 à 20:24:17

Bonjour,

Quand je veux télécharger le preloader et que je désire ouvrir le .fla, j'ai ce message:

"Format de fichier innatendu"
Est-ce que quelqu'un pourrait me dire pourquoi ?

Merci pour vos réponses
gkalikoba

Envoyé par Toto le flasheur amateur le 05/04/2011 à 15:37:08

Merci beacoup

Envoyé par UAilOVfn le 04/06/2011 à 11:20:30

Hey, subtle must be your mdilde name. Great post!

Envoyé par eric le 08/08/2011 à 05:04:48

bonjour,
J'ai fait une petite animation sous flash qui fait appelle a des .gif avec this.loadMovie
j'ai fait une barre de progression de chargement, mais elle progresse en fonction du chargement du .swf....
y'aurait il un moyen de la faire progresser un fonction du charegement de plusieurs fichiers ou meme du chargement d'un dossier....??

En tout cas, merci pour ce tuto qui est assez clair je trouve, malgres les 1er commentaire posté!!

mercii, eric

Envoyé par yqnppbrb le 24/01/2012 à 12:30:07