Bonjour,
1) Créer un fichier flash AS3
2) Dessiner sur la scène un cercle de la couleur de votre choix.
3) Convertissez le en Movieclip avec comme nom : PreloaderCircle et une dimention de 10 sur 10.
4) Faite F12 afin de visualiser la bibliothèque, et faite un clic droit sur le Movieclip et choissiez liaison et cocher exporter pour action script et donner comme nom : PreloaderCircle.
5) Effacer le Rond de la scène.
6) Faite F9 et copier/coller le code ci-dessous :
//Import de TweenMax
//http://blog.greensock.com/
import gs.*;
//Nous allons ajouter les cercles du preloader dans un holder
var holder:MovieClip = new MovieClip();
//Ce tableau va contenir tout les cercles
var circles:Array = new Array();
//La fonction qui va crée et positionner les cercles
for (var i:uint=0; i < 5; i++) {
//On crée un nouveau cercle
var circle:PreloaderCircle = new PreloaderCircle();
//On place notre cercle en x
circle.x = i * 20;
//On met la propriété de tween à false
circle.tweened = false;
//Ajout du cercle au tableau
circles.push(circle);
//ajout du cercle au holder
holder.addChild(circle);
}
//On place le holder sur la scène
addChild(holder);
//On positionne le holder au centre de la scène
var holderWidth:Number = holder.width;
var holderHeight:Number = holder.height;
holder.x = stage.stageWidth / 2 - holderWidth / 2;
holder.y = stage.stageHeight / 2 - holderHeight / 2;
//On crée un loader qui va charger l'image
var loader = new Loader();
//On charge l'image
loader.load(new URLRequest("image.jpg"));
//On écoute l'avancement du chargement
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
//Cette fonction est appellée pendant le chargement
function progressHandler(e:ProgressEvent):void {
//On regarde combien de bytes on été chargés
var loadedPercentage:Number = (e.bytesLoaded / e.bytesTotal) * 100;
//Si plus que 20%
if (loadedPercentage > 20 & ! circles[0].tweened) {
// on ajoute des paramètres au cercle pour le rendre plus joli
TweenMax.to(circles[0], 1, {tint:0x0066FF, glowFilter:{color:0xFFFFFF, alpha:1, blurX:10, blurY:10}});
}
// si plus de 40% ajout d'un dexuième carré
if (loadedPercentage > 40 & ! circles[1].tweened) {
TweenMax.to(circles[1], 1, {tint:0x0066FF, glowFilter:{color:0xFFFFFF, alpha:1, blurX:10, blurY:10}});
}
if (loadedPercentage > 60 & ! circles[2].tweened) {
TweenMax.to(circles[2], 1, {tint:0x0066FF, glowFilter:{color:0xFFFFFF, alpha:1, blurX:10, blurY:10}});
}
if (loadedPercentage > 80 & ! circles[3].tweened) {
TweenMax.to(circles[3], 1, {tint:0x0066FF, glowFilter:{color:0xFFFFFF, alpha:1, blurX:10, blurY:10}});
}
//Si 100% chargé,
if (loadedPercentage == 100 & ! circles[4].tweened) {
TweenMax.to(circles[4], 1, {tint:0x0066FF, glowFilter:{color:0xFFFFFF, alpha:1, blurX:15, blurY:15}, onComplete: cerclesTweened});
}
}
//Cette fonction est appellée lorsque les cercles on été tweener
function cerclesTweened():void {
//Loop des cercles
for (var i = 0; i < circles.length; i++) {
//On dégage les cercles vers la gauche de la scène
//On appelle la fonction circleleft lorsque c'est terminé
TweenMax.to(circles[i], 0.5, {delay: i * 0.1, x: -200, alpha: 0, onComplete: cerclegauche, onCompleteParams: [circles[i]]});
}
}
//cette fonction est appellée lorsque un cercle est animé vers la gauche
function cerclegauche(circle:PreloaderCircle):void {
//Suppression du cercle
holder.removeChild(circle);
//Vérifie si cest le dernier cercle le plus à droite
if (circle == circles[4]) {
//Suppression du holder
removeChild(holder);
//récupération de l'image du loader
var bm:Bitmap = (Bitmap)(loader.content);
//Ajout de l'image dans un movieclip imageholder
var imageHolder:MovieClip = new MovieClip();
imageHolder.addChild(bm);
//Ajout de l'image ur la scène
addChild(imageHolder);
//Animation du conteneur de l'image
//Animate the bitmap holder
TweenMax.from(imageHolder, 1, {alpha: 0});
}
} 7) Extraire au même endroit le répertoire gs que votre fla.
Démo : ICI
Source : ICI
TweenMax : ICI
Bàv,
Burnside.