This movie requires Flash Player 9

Comment créer un preloader d’image avec barre de progression et pourcentage ? La réponse ici !

1 – Préparation du document

− Créer un nouveau document AS3 (Ctrl + N).

− Créer 1 calque et nommez le : Actions

2 – Création des éléments graphiques du preloader.

− Créez 2 symboles de type clip (Ctrl + F8) et nommez les : preloader et barre.

Nous avons maintenant deux clips dans la bibliothèque : preloader et barre.

− Double-clickez sur le clip barre pour accéder à son interface graphique et dessiner la barre de chargement avec l’outil rectangle.

− Double-clickez sur le clip preloader et insérer le clip barre.

Pour pouvoir contrôler dynamiquement par la suite l’échelle (largeur en pourcentage) de votre clip barre, nous devons lui donner un nom d’occurrence : barreDeChargement_mc.

− Sélectionnez le clip barre sur la scène et écrivez “barreDeChargement_mc” dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Pour afficher le taux de chargement, nous avons besoin d’un champs texte dynamique instancié.

− Sur un deuxième calque, créez un champs de texte dynamique à l’aide de l’outil Texte et et écrivez “pourcentage_txt” dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Le clip preloader est prêt à l’emploi.

3 – Exportation pour ActionScript du clip preloader.

Pour créer dynamiquement ce clip sur la scène, nous devons l’exporter pour ActionScript.

− Utilisez la boîte de dialogue Propriétés du panneau Bibliothèque.

1. Sélectionnez le clip preloader dans le panneau Bibliothèque.
2. Dans le menu contextuel du panneau Bibliothèque, choisissez Propriétés….

3. La boîte de dialogue Propriétés du symbole apparaît.

4. Dans la boîte de dialogue Liaison, activez l’option Exporter pour ActionScript.
Les champs Classe et Classe de base sont alors activés.
Par défaut, le champ Classe de base a la valeur flash.display.MovieClip

5. Cliquez sur OK.

Code AS3

− Sur le calque Actions, Frame 1, ouvrez le panneau Actions et ajoutez le code suivant :

^?View Code ACTIONSCRIPT3

	/**
	 * @subject Preloader AS3
	 * @author Muriel Charon
	 * @date Janvier 2010
	 */
 
//Variables Preloader et Loader
var preloader:Preloader;
var chargeur:Loader;
 
//Instanciation de l'objet preloader
preloader = new Preloader();
 
//Centre le preloader sur la scène
preloader.x = Math.round ( (stage.stageWidth - preloader.width) / 2);
preloader.y = Math.round ( (stage.stageHeight - preloader.height) / 2);
 
//affichage du preloader avec la méthode addChild()
addChild(preloader);
 
//Instanciation de l'objet chargeur
chargeur = new Loader();
 
//L’écoute des différents événements propres au chargement se fait auprès de l’objet LoaderInfo accessible par la propriété contentLoaderInfo de l’objet Loader
 
//ProgressEvent.PROGRESS : diffusé lorsque le chargement est en cours. Informe sur le nombre d’octets chargés et totaux. Sa fréquence de diffusion est liée à la vitesse de téléchargement de l’élément
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, chargement);
 
//Event.COMPLETE : diffusé lorsque le chargement est terminé
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargement);
 
//IOErrorEvent.IO_ERROR : diffusé lorsque le chargement échoue
chargeur.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
 
//Chargement de l'image externe avec la methode load(). L'objet URLRequest contient l'adresse de l'élément à charger
chargeur.load(new URLRequest("la_gare.jpg"));
 
function chargement(pEvt:ProgressEvent):void
{
	//bytesLoaded et bytesTotal sont des propriétés qui renvoient le nombre d'octets de contenu chargé
	var ratio:Number = pEvt.bytesLoaded / pEvt.bytesTotal;
 
	//Affichage du taux de chargement dans le champs texte dynamique
	preloader.pourcentage_txt.text = (Math.round(ratio* 100).toString())+" %";
 
	//Mise à l'echelle de la barre de progression proportionnellement au taux de chargement
	preloader.barreDeChargement_mc.scaleX = ratio;
}
 
function finChargement(pEvt:Event):void
{
	//suppression de l'objet preloader
	removeChild(preloader);
 
	//suppression des références vers l'objet preloader pour qu'il puisse être supprimé de la mémoire
	preloader.pourcentage_txt = null;
	preloader.barreDeChargement_mc = null;
 
	//affichage du chargeur avec la méthode addChild()
	addChild(chargeur);
}
 
function onIOError(pEvt:IOErrorEvent):void
{
	//indique la nature de l'erreur
	trace(pEvt);
}
 
//**FIN DU SCRIPT

Et voilà, votre preloader est prêt à l’emploi !

Télécharger les sources : preloader_AS3_src.zip

anne

Bonjour,

tout d’abord un grand merci pour ce tuto qui m’est d’une grande utilité!
Mais (et oui désolé) j’ai un pb, j’espère que vous pourrez m’aider…

Je charge plrs swf via cette méthode, le 1er swf affiche le preloader correctement mais si je le rappel ou appel un autre swf le preloader ne fonctionne plus et cause même un bug du système : TypeError: Error #1009: Il est impossible d’accéder à la propriété ou à la méthode d’une référence d’objet nul.
at siteidc_fla::MainTimeline/chargement()[siteidc_fla.MainTimeline::frame1:159]

ligne 159 = preloader.pourcentage_txt.text = (Math.round(ratio* 100).toString())+ » % »;

donc là, pour moi aussi gros bug! je suis bloquée et j’ai aucune piste….

04 avr 2010 @ 2:14

maru

Supprime ces 2 lignes (57 et 58) :
//suppression des références vers l’objet preloader pour qu’il puisse être supprimé de la mémoire
preloader.pourcentage_txt = null;
preloader.barreDeChargement_mc = null;

Et ça devrait être bon !

04 avr 2010 @ 9:49

c’est parfait ça marche!! autre question si possible….
j’aimerai adapter la taille du swf appelé à la fenêtre comment puis-je faire?? (à quand des formations dans le sud??!!)
encore merci ça m’enlève une belle épine du pied!

06 avr 2010 @ 13:47

chat rond

Dans fichier -> paramètre de publication

dimension = pourcentage
echelle = par defaut (afficher tous)

ton swf se redimensionne en fonction de la taille de ta fenêtre

06 avr 2010 @ 17:16

désolée ça se fait automatiquement!!

06 avr 2010 @ 20:48

sam

bonjour,

et merci pour ces infos ….mais moi il me marque

Sequence 1, calque ‘action », image 1, ligne 8

1046: Ce type est introuvable ou n’est pas une constante de compilation : Preloader.

Sequence 1, calque ‘action », image 1, ligne 12

1180: Appel à une méthode qui ne semble pas définie, Preloader.

20 avr 2010 @ 17:02

Salut sam

suis bien toutes les étapes du tuto et normalement ça devrait rouler… Il faut penser à créer une liaison pour le clip preloader et mettre Preloader (avec un P majuscule) dans le champ Classe.

Bon courage !

20 avr 2010 @ 18:19

ok c’est sans doute ça l’erreur …je te remercie

20 avr 2010 @ 18:38

Loris

Bonjour,
je ne m’y connais pas vraiment en as3 et malheureusement je dois travailler en as3 pour ce projet.
Du coup je voudrais savoir s’il était possible de modifier cette ligne (ou un autre):

ligne 32: chargeur.load(new URLRequest(« la_gare.jpg »));

Afin qu’il envoie l’animation à la frame 2. Ainsi le preloadeur ne charge plus une image mais toute mon animation.

Merci de votre aide,
Loris.

22 juin 2010 @ 14:24

Arthur

TypeError: Error #1010: A term is undefined and has no properties.
at Sansnom_fla::MainTimeline/chargement()

Comment résoudre le problème ? svp

22 juil 2010 @ 18:50

gkalikoba

Tout d’abord merci pour ce tuto que je n’arrive malheureureusement pas à mettre en place. L’image s’affiche mais j’ai l’impression que le preloader ne fonctionne pas.

J’ai moi aussi ce type de message.

TypeError: Error #1010: Un terme n’est pas défini et n’a pas de propriété.
at chargeurAS3_fla::MainTimeline/chargement()

De plus j’ai téléchargé le zip et quand j’essaie d’ouvrir le source j’ai le message suivant: « format de fichier innatendu ».

Est-ce que quelqu’un aurait des réponses à ces questions. Merci d’avance

Cordialement
gkalikoba

05 oct 2010 @ 10:36

« format de fichier innatendu »
Cela ressemble à un problème de version, utilises tu CS4?

« TypeError: Error #1010: Un terme n’est pas défini et n’a pas de propriété at chargeurAS3_fla::MainTimeline/chargement() »

[Cette erreur se produit si vous tentez d'accéder à une propriété d'un objet qui n'existe pas OU en cas d'erreur de syntaxe.]
Cela se situe dans ton cas dans la fonction chargement()

[Il faut penser à créer une liaison pour le clip preloader et mettre Preloader (avec un P majuscule) dans le champ Classe.]
Voir dans la boîte de dialogue Propriétés du symbole (cf visuel plus haut)

27 oct 2010 @ 15:51

flo

Merci pour ce tuto…
Je suis débutante en Flash et je m’autoforme avec les tutoriels à dispo sur le net…

J’ai donc une question bête :
Où dois-je placer ce preloader afin qu’il enchaine sur une de mes animations déjà existante ?
Pour l’instant il aboutit sur le fichier gare.jpg….

Merci encore pour votre aide ))

15 déc 2010 @ 13:00

misscatastrophe

Bonjour,
je debut mais j’ai un petit souci de rien du tous,

j’utilise la methode étiquette pour accéder au pages, mais page d’acceuille se passe nikel, mais les autre bouton je peut rien en tirer.

voila ce qu’il me note :

TypeError: Error #1009: Il est impossible d’accéder à la propriété ou à la méthode d’une référence d’objet nul.
at lmcom_fla::MainTimeline/lmcom_fla::frame1()

sa serai super si quelqu’un peut m’aider!

22 déc 2010 @ 19:26

et sa c mon code :

stop();

function fgroslogo(evt : MouseEvent)
{gotoAndPlay(« societe »);}
BTN1.addEventListener(MouseEvent.CLICK,fgroslogo);

function fbienvenu(evt : MouseEvent)
{gotoAndPlay(« societe »);}
BTN2.addEventListener(MouseEvent.CLICK,fbienvenu);

Juske la sa va, si je rajoute la suite sa va pu….
function fpub(evt : MouseEvent)
{gotoAndPlay(« print »);}
BTN4.addEventListener(MouseEvent.CLICK,fpub);

22 déc 2010 @ 19:47

Ce préloader charge aussi bien les .jpg que les .swf, il suffit d’indiquer la bonne adresse (URL) de fichier.

L’adresse relative suivante:

chargeur.load(new URLRequest(« animeSWF.swf »));

indique que Le fichier « as3_preloader.swf » se trouve dans le même répertoire que le fichier chargé « animeSWF.swf ».

et Bonne fêtes de fin d’années !

26 déc 2010 @ 17:37

Guillaume

le pourcentage ,e s’affiche pas, et je ne comprend pas pourquoi

(J’ai télécharger directement le fla.

Sans suivre le tuto.)

merci de m’aider

cordialement

03 jan 2012 @ 20:06

Ressources pour la création et les technologies du web

Preloader d’images en AS3

1 – Préparation du document

2 – Création des éléments graphiques du preloader.

3 – Exportation pour ActionScript du clip preloader.

Code AS3

Sur le même sujet

En direct du forum

17 réponses Souscrire aux commentaires

Répondre

Forum

Liens

Catégories

Mots-clefs

Ressources pour la création et les technologies du web

Preloader d’images en AS3

1 – Préparation du document

2 – Création des éléments graphiques du preloader.

3 – Exportation pour ActionScript du clip preloader.

﻿Code AS3

Sur le même sujet

En direct du forum

17 réponses Souscrire aux commentaires

Répondre

Forum

Liens

Catégories

Mots-clefs

Code AS3