En effet nous allons créer un préloader 100% dynamique comportant divers mouvements à base de Tween, ce préloader sera entièrement géré par une classe externe qui chargera une image avec un effet plutôt sympa.
Je rappelle quand même que pour comprendre ce tutoriel, vous devez déjà avoir quelques bases en as3. Sachez aussi que vous devrez avoir importé la bibliothèque greensock comportant la fameuse classe TweenMax. Pour ceux qui ne l'auraient pas encore fait, voici une de mes formation qui vous aidera pendant toutes les étape de l'installation de cette librairie: http://www.weecast.fr/flash/installation-tweenmax-et-tweenlite-v2-flash,6486.html
Voici à quoi ressemblera votre préloader à la fin de cette formation:
Bon comme daylimotion met un peu de temps à valider les vidéo qui dépassent une heure, j'ai décidé de vous le faire par écrit/
Donc voici le tutoriel:
Avant toute chose sachez que ce tutoriel demande déjà de bonnes connaissances en as3, donc si vous pensez que votre niveau n'est pas à la hauteur, rabattez vous sur un tuto moins complexe. Pour ceux qui se sentent à la hauteur, c'est parti !!!
Commencez par créer un nouveau fichier "fla as3", voici les réglages que vous devrez appliquer à votre document:
Enregistrez le sous le nom de "preloader".
Maintenant, il nous faut créer un nouveau clip qui contiendra le carre utilisé pour le prèloader. Faites:
Insertion>>Nouveau symbole ou "ctrl+F8"
Choisissez un symbole de type clip et choisissez "carre" pour le nom, cochez ensuite "Exporter pour actionscript" et choisissez "Carre"pour le nom de la classe.
Maintenant choisissez l'outil "rectangle" (touche "r"), puis tracez un carre de 10X10 avec ce code couleur #262626. N'oubliez pas de le centrer correctement, vous pouvez utiliser le raccourcie "ctrl+k". Centrez le horizontalement et verticalement.
Voilà, nous avons maintenant terminé la partie liée au fichier "preloader.fla"
Une fois que ceci a été fait, nous pouvons maintenant passer à la création de la classe qui nous permettra de gérer l'ensemble du préloader.
Créez donc un nouveau fichier action script (fichier>>nouveau>>fichier actionscript).
Nous allons maintenant attaquer la partie principale c'est-à-dire le codage de notre application. Avant toute chose, il va falloir enregistrer notre fichier. Faites donc: fichier>>enregistrer sous. Avant de l'enregistrez, il vous faudra créer les dossiers qui contiendront notre classe (les packages), personnellement j'utilise une hiérarchie bien spécifique que l'on l'utilisera pour ce tutoriel. Créer un donc premier dossier "com" puis entrez à l'intérieur pour en créer un second "chargement", vous pouvez maintenant enregistrer votre fichier actionscript à l'intérieur du dernier dossier créé sous le nom de "Precharg".
Pour que tous soit bien claire, voici la structure de votre projet:
Racine du projet (preloader.fla)>>com>>chargement>>Precharge(classe)
Nous pouvons maintenant commencer à construire notre classe. La première chose à faire, c'est de préciser nos packages:
- Code:
package com.chargement
{
}
- Code:
//Import
import com.greensock.TweenMax;
import com.greensock.easing.*;
import flash.events.ProgressEvent;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.net.URLRequest;
import flash.text.TextField;
- Code:
public class Precharg extends MovieClip
{
}
A ce stade, vous devez avoir les deux accolades du package et de la classe situé en bas de votre script et ceci jusqu'à la fin du tutoriel.
Nous devons maintenant instancier les variables qui seront utilisés dans notre projet, placez vous donc entre les deux accolades de la classe (Precharg) et collez ceci:
- Code:
private var textCharg:TextField = new TextField();
private var conteneur:MovieClip = new MovieClip();
private var contText:MovieClip = new MovieClip();
private var carres:Array = new Array();
private var loader = new Loader();
private var contWidth:int;
private var contHeight:int;
private var MillieuContX:int;
private var MillieuContY:int;
private var carreMax:int = 10;
private var pourcentageCharge:Number;
private var i:uint=0;
Passons en revu les variables les plus importantes:
conteneur: contiendra l'ensemble des carrés.
conText: contiendra le TextField du préchargement en pourcentage
carre: sera le tableau qui contiendra l'ensemble des occurrences de carre
loader : servira à charger l'image
carreMax : le nombre maximum de carrés
pourcentageCharge: sera utilisé pour récupérer le pourcentage chargé.
Voilà, maintenant nous pouvons mettre en place le constructeur de notre classe. Celui-ci devra comme la classe, être public et porter le même nom que notre fichier actionscript. Toujours à la suite de nos variables, collez ceci:
- Code:
public function Precharg ()
{
while ( i < carreMax )
{
var carre:Carre = new Carre();
carre.name = 'carre'+i;
carres.push( carre );
this.conteneur.addChild( carre );
this.addChild(conteneur);
carre.tweened = false;
carre.alpha = 0;
TweenMax.to (conteneur.getChildByName('carre'+i), 1, {alpha:(1.5/carreMax)* i, delay:i* .2, x:((carre.width+20)* carreMax)/2 + i* 20, ease: Back.easeOut, onComplete:lancementProgression, onCompleteParams:[carres[i]]});
i++
}
contWidth = stage.stageWidth;
contHeight = conteneur.height;
MillieuContX = (stage.stageWidth - contWidth )/ 2;
MillieuContY = (stage.stageHeight - contHeight) / 2;
conteneur.x = MillieuContX
conteneur.y = MillieuContY
this.addChild (contText);
textCharg.textColor = 0x73d511;
contText.addChild (textCharg);
contText.width = 50;
contText.alpha =0;
contText.x = (stage.stageWidth/2) - (contText.width/2);
contText.y = conteneur.y+20;
contText.scaleX = contText.scaleY = 5;
}
Regardons de plus près notre constructeur:
La première chose que l'on peut constater, c'est l'utilisation de la boucle "while", celle-ci nous permet de dupliquer notre clip "carre" en fonction de la variable "carreMax". On peut aussi se rendre compte que nous mettons en place une Tween qui placera nos carrés avec différents effets (arrivé avec décalage, alpha progressif en fonction du niveau de progression, etc), cet effet est engendré depuis un calcule qui modifiera le delai, l'alpha et la postion sur l'axe x en fonction la valeur de la variable i.
Chaque carré et par la même occasion ajoutés dans le tableau "carres" et ceci grâce à l'utilisation de la méthode "push". Nous pouvons nous apercevoir que les carres sont contenus dans le MovieClip "conteneur", celui-ci est aussi ajouté à la liste d'affichage. Après la boucle, nous ajoutons le conteneur du texte et le plaçons au bon endroit tout en le rendant transparent et en augmentant ses dimensions via les paramètres scaleX et scaleY. Le texte du chargement est ensuite placé à l'intérieur de ce conteneur. Enfin, nous plaçons le conteneur (des carrés) au milieu de la scène et ceci grâce à la Tween. Une fois la tween terminée, la fonction "lancementProgression " est jouée et chaque carré est envoyé en tant que paramètre de cette fonction. A ce stade, le paramètre tweened des carrés est positionné sur false:
- Code:
carre.tweened = false;
- Code:
private function lancementProgression($carre:Carre):void
{
if($carre === carres[carreMax-1]){activProgress();}
}
Dans cette fonction, nous vérifions si le dernier carré est mis en place complétement, pour cela, il nous suffit d'attendre que le paramètre envoyé est égale au carre10, si ceci est la cas, alors la fonction activProgress est joué.
Passons à la suite de notre tutoriel, comme nous l'avons vu plus haut, la fonction "activProgress" est appelée dès que l'ensemble des carrés aient pris leurs positions définitive, voyons donc sa structure (n'oubliez pas de la coller à la suite du constructeur et avant les deux dernières accolades):
- Code:
private function activProgress():void
{
loader.load(new URLRequest("image.jpg"));
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progression);
}
Nous allons donc créer cette fameuse fonction. Sachez qu'elle reste la fonction la plus importante de notre projet, en effet n'oublions pas que ce tutoriel nous permet avant toute chose de gérer la progression de notre image.
Collez à nouveau cette nouvelle fonction à la suite de la précédente:
- Code:
private function progression(e:ProgressEvent):void
{
TweenMax.to(contText, 1, {scaleX:1.2,scaleY:1.2,alpha:1,glowFilter:{color:0x73d511, alpha:1, blurX:15, blurY:15, quality:3, strength:2}});
pourcentageCharge = (e.bytesLoaded / e.bytesTotal) * 100;
textCharg.htmlText = Math.round(pourcentageCharge) + " /" + "100";
i=1;
while ( i < carreMax){if (pourcentageCharge > 100 / carreMax * i && ! carres[i].tweened){TweenMax.to (carres[i-1], 1, {tint:0x73d511, glowFilter:{color:0x73d511, alpha:1, blurX:10, blurY:10, onComplete:carres[i].tweened=true}});};i++}
if (pourcentageCharge === 100)
{
TweenMax.to (conteneur.getChildByName('carre9' ), 1, {tint:0x73d511, glowFilter:{color:0x73d511, alpha:1, blurX:30, blurY:30}, onComplete:tweencarres});
TweenMax.to(conteneur, 1, {glowFilter:{color:0x73d511, alpha:1, blurX:15, blurY:15}});
TweenMax.to(contText, 1, {glowFilter:{color:0x73d511, blurX:20, blurY:20, quality:3, strength:3}});
TweenMax.to(contText, 1, {delay: 2, scaleX:0.2, scaleY:0.2, x:-100, autoAlpha:0, glowFilter:{color:0x73d511, alpha:1, blurX:100, blurY:100, quality:3, strength:5}, ease:Back.easeIn,onComplete:suppText});
}
}
En premier lieu, nous calculons le pourcentage chargé de notre image, puis nous définition le contenu de la variable "textCharg" grâce à ce calcule. Ensuite, nous mettons en place toute une palette de paramètres sur nos carrés et ceci grâce à l'utilisation de notre fameuse Tween, ici nous mettons en place une vérifications de la valeur pourcentageCharge de 10 en 10 ce qui a pour effet de colorer les carrés en fonction du chargement: 10% chargés>> 1 carré coloré, 20% chargés>> 2 carrés colorés, seul le dernier carré n'est pas géré, il le sera une fois que le chargement arrivera à 100%, c'est d'ailleurs à ce moment que nous initialisons certains éléments:
1°)Colorisation du dernier carré
2°)Mise en place de la lueur sur le conteneur des carrés
3°)Le texte de chargement est animé
4°) Une fois les Tween en fin de cycle les fonctions "tweenCarres" et "suppText" sont jouées.
Pour une raison de sécurité le paramètre carre.tweened ne sera passé à true qu'une fois chaque carré tweené, c'est donc pour cette raison que nous faisons cette vérification: if (pourcentageCharge > 100 / carreMax * i && ! carres[i].tweened) la tween ne pouvant être appliqué que sur les éléments ayant leur paramètre tweened sur false (ce qui est le cas avant que la première tween des carrés est été déclenché) les carrés ne peuvent donc être tweenés qu'une seule fois.
Passons à la suite de notre tuto, collez donc la fonction "tweenCarre" à la suite de la précédente fonction:
- Code:
private function tweencarres():void
{
i=0;
while ( i < carres.length) {TweenMax.to(carres[i], .5, {delay: i * 0.1, x: -200, alpha: 0, ease: Back.easeIn, onComplete:carreGauche, onCompleteParams:[carres[i]]}); i++}
}
Grâce à la variable "i" qui comprend une valeur entre 0 et 9, nous pouvons cibler la totalité des carrés pour que la tween puisse positionner les carrés un par un à -200 pixels sur la gauche (hors de la scène). Pour que les carrés soient placés au fur et à mesure, nous utilisons la propriété "delay", plutôt utile pour positionner les carré situés droite en premier.
Passons à la seconde fonction appelé: "suppText".
Collez aussi cette fonction après "twennCarre":
- Code:
private function suppText():void
{
if(contText)
{
contText.text="";
contText.removeChild (textCharg);
textCharg = null;
this.removeChild(contText);
contText = null;
}
}
Cette fonction nous permet de gérer la suppression du texte est de son conteneur, ceci nous permet de relâcher les ressources utiliser par ces deux éléments.
Voilà, nous arrivons maintenant à la dernière partie de notre tutoriel, il nous reste maintenant à gérer la suppression de tous les éléments liés aux objets graphiques de notre projet (hors image). Nous allons donc créer une fonction qui nous permettra de supprimer tous les éléments, collez donc ceci (toujours à la suite de la précédente fonction):
- Code:
private function carreGauche($carre:Carre):void
{
conteneur.removeChild( $carre );
if ($carre === carres[9]){
this.removeChild(conteneur);
drawImage(loader.content);
}
}
Étudions pour la dernière fois, ce que nous venons de coller:
La première chose à savoir, c'est que nous avons cibler le carré actif comme étant le paramètre lié à la fonction. Désormais chaque appel de la fonction nous permettra de cible chaque carré et ceci en les propageant de cette manière carre0, carré1, carre2, etc. Cette ordre est lié à la fin de la tween des carrés, le carré le plus à gauche ( carre0 ) étant celui qui devra être supprimé le premier.
Nous pouvons voir qu'une condition fut mise en place, elle nous permet tout simplement de vérifier si le dernier carré a été passé dans le paramètre de la fonction (si ceci est le cas, la fin de l'animation est désormais déclenché).
Une fois le dernier carre passé en revu, nous appelons la fonction "drawImage" qui nous permettra de mettre en place notre image en lui attribuant une transition d'affichage, en paramètre de cette fonction, nous passons le contenu de notre loader (soit l'image chargée). Voici d'ailleurs cette dernière fonction liée à notre application:
- Code:
private function drawImage($img:Bitmap)
{
var bitmap:Bitmap = (Bitmap)($img);
var contBitmap:MovieClip = new MovieClip();
contBitmap.addChild(bitmap);
this.addChild(contBitmap);
TweenMax.from(contBitmap, 1, {alpha: 0});
}
Nous pouvons donc laisser apparaitre progressivement l'image grâce à l'utilisation de notre classe TweenMax sur le MovieClip précédemment créé et justement prévu à cet effet.
Voilà, notre tutoriel est donc terminé et vous avez désormais la possibilité de charger dynamiquement vos images avec un effet plutôt sympa.
Pour ceux qui le souhaiteraient, voici le code complet de notre preloader:
- Code:
package com.chargement
{
//Import
import gs.TweenMax;
import gs.easing.*;
import flash.events.ProgressEvent;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.utils.setTimeout;
public class Precharg extends MovieClip
{
private var textCharg:TextField = new TextField();
private var conteneur:MovieClip = new MovieClip();
private var contText:MovieClip = new MovieClip();
private var carres:Array = new Array();
private var loader = new Loader();
private var contWidth:int;
private var contHeight:int;
private var MillieuContX:int;
private var MillieuContY:int;
private var carreMax:int = 10;
private var pourcentageCharge:Number;
private var i:uint=0;
public function Precharg ()
{
while ( i < carreMax )
{
var carre:Carre = new Carre();
carre.name = 'carre'+i;
carre.x = i * 20;
carres.push( carre );
this.conteneur.addChild( carre );
this.addChild(conteneur);
carre.tweened = false;
i++
}
contWidth = conteneur.width;
contHeight = conteneur.height;
MillieuContX = (stage.stageWidth - contWidth )/ 2;
MillieuContY = (stage.stageHeight - contHeight) / 2;
conteneur.x =-200;
conteneur.y = MillieuContY
conteneur.alpha = 0;
this.addChild (contText);
textCharg.textColor = 0x73d511;
contText.addChild (textCharg);
contText.alpha = 0;
contText.width =50;
contText.x = (stage.stageWidth/2) - (contText.width/2);
contText.y = conteneur.y+20;
contText.scaleX = contText.scaleY = 4;
contText.alpha =0;
TweenMax.to(conteneur, .8, { x: MillieuContX, alpha: 1, ease: Back.easeOut, onComplete: activProgress});
}
private function activProgress():void
{
loader.load(new URLRequest("image.jpg"));
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progression);
}
private function progression(e:ProgressEvent):void
{
TweenMax.to(contText, 1, {scaleX:1.2,scaleY:1.2,alpha:1,glowFilter:{color:0x73d511, alpha:1, blurX:15, blurY:15, quality:3, strength:2}});
pourcentageCharge = (e.bytesLoaded / e.bytesTotal) * 100;
textCharg.htmlText = Math.round(pourcentageCharge) + " /" + "100";
i=1;
while ( i < carreMax){if (pourcentageCharge > 100 / carreMax * i && ! carres[i].tweened){TweenMax.to (carres[i-1], 1, {tint:0x73d511, glowFilter:{color:0x73d511, alpha:1, blurX:10, blurY:10, onComplete:carres[i].tweened=true}});};i++}
if (pourcentageCharge === 100)
{
TweenMax.to (conteneur.getChildByName('carre9' ), 1, {tint:0x73d511, glowFilter:{color:0x73d511, alpha:1, blurX:30, blurY:30}, onComplete:tweencarres});
TweenMax.to(conteneur, 1, {glowFilter:{color:0x73d511, alpha:1, blurX:15, blurY:15}});
TweenMax.to(contText, 1, {glowFilter:{color:0x73d511, blurX:20, blurY:20, quality:3, strength:3}});
TweenMax.to(contText, 1, {delay: 2, scaleX:0.2, scaleY:0.2, x:-100, autoAlpha:0, glowFilter:{color:0x73d511, alpha:1, blurX:100, blurY:100, quality:3, strength:5}, ease:Back.easeIn,onComplete:suppText});
}
}
private function tweencarres():void
{
i=0;
while ( i < carres.length) {TweenMax.to(carres[i], .5, {delay: i * 0.1, x: -200, alpha: 0, ease: Back.easeIn, onComplete:carreGauche, onCompleteParams:[carres[i]]}); i++}
}
private function suppText():void
{
if(contText)
{
contText.text="";
contText.removeChild (textCharg);
textCharg = null;
this.removeChild(contText);
contText = null;
}
}
private function carreGauche($carre:Carre):void
{
var img:Bitmap = loader.content;
conteneur.removeChild( $carre );
if ($carre === carres[9]){
this.removeChild(conteneur);
drawImage(img);
}
}
private function drawImage($img:Bitmap)
{
var bitmap:Bitmap = (Bitmap)($img);
var contBitmap:MovieClip = new MovieClip();
contBitmap.addChild(bitmap);
this.addChild(contBitmap);
TweenMax.from(contBitmap, 1, {alpha: 0});
}
}
}
En tout cas, si vous lisez ceci, c'est que vous avez dû réussir ce tuto, donc bravo !!!
Pour les autres, n'hésitez pas à poser vos questions ou vos petits problèmes à la suite de ce tutoriel.
Allez, salut les loulous !!!
Dernière édition par artkabis le Jeu 11 Mar - 3:14, édité 7 fois