Preloader AS3 avec Tweemax

Voici comment réaliser un preloader en as3, avec la class Tweenmax.
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.

Les dernieres videos de buzz

Voir les dernieres videos