Dans ce tutoriel je vais vous montrer comment faire une barre de chargement en AS3 pour vos animations, qui se supprimera
automatiquement une fois le fichier chargé, à l'aide d'un effet de fondu grâce à l'utilisation de la classe TweenMax.


Si cette classe n'est pas installée sur votre ordinateur, vous pouvez la télécharger directement sur le site de greensock en cliquant ici.
Vous trouverez également une vidéo sur la façon de se servir de cette classe en cliquant ici.


Commençons donc notre tutoriel, tout d'abord ouvrir un nouveau document en cliquant sur fichier puis nouveau ou alors directement sur le raccourcis en cliquant sur les touches ctrl + N.



Nous allons ensuite créer le clip qui contiendra l'animation de votre barre de chargement et qui sera chargé dynamiquement depuis la bibliothèque.

Pour cela, cliquer sur insertion puis nouveau symbole ou alors directement sur le raccourcis en cliquant
sur les touches ctrl + F8.



Une nouvelle fenetre va s'ouvrir, nommer ce clip "barre de chargement" et sélectionner de type clip.



à l'intérieur de ce clip nous allons tout d'abord créer un champ texte qui servira à afficher le pourcentage de chargement de votre animation.

Double cliquer sur votre calque pour le renommer et donner lui le nom "texte de chargement".

Sélectionner ensuite l'outil texte dans la barre d'outils, vous verrez alors votre curseur se transformer en +  avec un T en dessous, puis tracer une zone de texte vide sur votre scène.



Ouvrez ensuite la fenêtre des propriétés et entrer le nom d'occurrence charg.



Ajoutez ensuite un nouveau calque en cliquant sur , nommer le "texte", et ajouter une nouvelle zone de texte sur votre scène, en dessous de la précédente et taper le texte "chargement en cours" sur celle-ci.

Ajoutez un 3ème calque, que vous nommerez "barre de chargement" et créer une petite animation dans un nouveau clip, ou alors insérer l'un des 51 gifs compris à l'intérieur du pack que je vous propose de télécharger ci-dessous.



Si vous le souhaitez, vous pouvez également créer des gifs vous même grâce à un générateur de preloader en cliquant  ici.

Revenez ensuite sur la scène principale.

Nous allons maintenant configurer notre clip "barre de chargement" afin de pouvoir l'importer dynamiquement sur notre scène, pour cela faites un clic droit sur ce clip et sélectionner le choix "propriétés".



Une nouvelle fenêtre va alors s'ouvrir, cocher la case Exporter pour ActionScript, le nom de la classe s'ajoute alors automatiquement en dessous, il vous faut juste mettre une majuscule (synonyme de classe) sur la première lettre de votre
nom "BarreChargement", puis cliquer sur ok.

Faites attention à bien nommer cette classe exactement comme moi car sinon le code ActionScript ne fonctionnera pas.


Positionnez vous enfin sur la 1ère image clé de votre animation, nommée la "AS" et taper sur celle-ci
le code qui se trouve ci-dessous :

Code: Tout sélectionner

//Stopper l'animation//
stop();

//Import de la classe TweenMax//
import com.greensock.TweenMax;

//Ajout des écouteurs//
loaderInfo.addEventListener(ProgressEvent.PROGRESS, progres); loaderInfo.addEventListener(Event.COMPLETE, complet);

//Création de la variable de la barre de chargement//
var barreChargement = new BarreChargement();

//Positionnement de la barre de chargement au milieu de votre animation//
barreChargement.x = stage.stageWidth/2;
barreChargement.y = stage.stageHeight/2;

//Afficher la barre de chargement//
this.addChild(barreChargement); 

//Création de la fonction "progress" qui permettra d'afficher la progression à l'aide du texte et de la barre de chargement.//
function progres(pEvt:ProgressEvent):void {   
var charge:Number = pEvt.bytesLoaded / pEvt.bytesTotal;
var pct:int = charge * 100;
barreChargement.charg.textCharg.text = pct   "%";
}

//Création de la fonction "lancement", qui permettra de supprimer les écouteurs, et de créer la fonction "lancement".
function complet(pEvt:Event):void {
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progres);
loaderInfo.removeEventListener(Event.COMPLETE, complet);
TweenMax.to(barreChargement,2 ,{alpha:0,onComplete:lancement});
}

//Création de la fonction "lancement", qui permettra de passer à l'image clé suivante et d'effacer la barre de chargement à
l'aide de l'effet de la classe TweenMax. //
function lancement():void{
removeChild(barreChargement);
gotoAndPlay(2);
}


Votre barre de chargement est maintenant terminée, il ne vous reste plus qu'à insérer une image ou une animation en image clé 2 et tester sur les touches CTRL  + entrée de votre clavier.



Télécharger la source




Télécharger le tutoriel au format pdf

voir tous mes autres tutoriels flash