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

Voir l'article original
Share

Écrire commentaire

Commentaires : 0