Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Preloader ultra et ses carrés lumineux

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Preloader ultra et ses carrés lumineux

    Message par artkabis le Jeu 12 Mar - 13:52

    Salut les loulous, voici un tutoriel sur la création d'un préloader as3. Vous avez sans doute dû vous rendre compte que ce n'est pas le premier tutoriel à ce sujet, mais croyez-moi, celui-ci est belle et bien différent de ce que j'ai pu vous proposer.

    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
    {
    }
    Gardez en tête que la dernière accolade du package devra toujours être à la fin de votre code, ce qui sera aussi le cas pour la classe que nous allons d'ailleurs créer. Avant ça ,vous devez créer vos imports et ceci entre les accolades du package :
    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;
    A la suite de nos imports, nous pouvons instancier notre classe, celle-ci devra porter le même nom que notre fichier as et être public, comme nous allons utiliser le movieClip (carre), nous devrons étendre la classe native "MovieClip":
    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);
          }
    Dans cette fonction, nous indiquons l'adresse de l'image au loader. Un écouteur est créé pour gérer la progression, celui-ci nous renvoie ensuite sur la fonction "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});
             }
          }
    Regardons de plus prêt ce que nous avons là:
    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++}
          }
    En regardant de plus près cette fonction, on peut se rendre compte qu'une boucle est créée pour que la récupération de chaque carré soit possible.
    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});
          }
    Dans cette fonction, nous commençons par créer un MovieClip qui sera utilisé comme conteneur de la copie de notre image, il est utile dans le cas ou nous voudrions lui appliquer des effets.
    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

    desperadisse
    Ceinture jaune
    Ceinture jaune

    Messages : : 218
    Age : : 35
    Logiciels : Logiciels : : Photoshop CS3, Flash CS3, Dreamweaver CS3, NotePad ++, Wampserver, Flash CS4, Photoshop CS4, Camtasia 6, Adobe Captivate 3.
    Date d'inscription : 07/03/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par desperadisse le Ven 13 Mar - 14:02

    Ah ouai, c'est vrai qu'il est pas comme les autres ^^

    buben
    Nouveau membre
    Nouveau membre

    Messages : : 4
    Age : : 30
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 13/03/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par buben le Ven 13 Mar - 14:23

    genial ce preloader ^^

    desperadisse
    Ceinture jaune
    Ceinture jaune

    Messages : : 218
    Age : : 35
    Logiciels : Logiciels : : Photoshop CS3, Flash CS3, Dreamweaver CS3, NotePad ++, Wampserver, Flash CS4, Photoshop CS4, Camtasia 6, Adobe Captivate 3.
    Date d'inscription : 07/03/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par desperadisse le Ven 13 Mar - 14:25

    Le tuto sera pret quand lol ?
    Je suis impatient ^^

    Woxe
    Nouveau membre
    Nouveau membre

    Messages : : 22
    Age : : 27
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 11/12/2008

    Re: Preloader ultra et ses carrés lumineux

    Message par Woxe le Ven 13 Mar - 22:23

    Trés sympa artka je vois que ca avance vraiment bien CEST COOL

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par artkabis le Ven 13 Mar - 22:48

    Merci woxe, vennant de toi ça fait encore plus plaisir !!!!


    _________________
    J'me fais de la pub et na tongue

    Valbuena72
    Ceinture blanche
    Ceinture blanche

    Messages : : 180
    Age : : 24
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 13/03/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par Valbuena72 le Sam 4 Avr - 18:41

    Merci art et franchement il bien plus avancé de l'autre


    (qui sait cleui la je vais peut etre le reussir ^^)

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par artkabis le Mar 14 Avr - 11:00

    Merci !!!


    PS: Bien sûr que tu vas le réussir !!!!


    _________________
    J'me fais de la pub et na tongue

    toutclic
    Ceinture blanche
    Ceinture blanche

    Messages : : 168
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 30/05/2009

    Re: Preloader ultra et ses carrés lumineux

    Message par toutclic le Jeu 15 Oct - 13:54

    J'aime bien ce preloader
    Merci pour ce tuto

    biloute
    Ceinture jaune
    Ceinture jaune

    Messages : : 457
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    j'utilise la suite adobe cs4 , sceenfow, maxon C4D
    Date d'inscription : 19/07/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par biloute le Jeu 15 Oct - 16:21

    effectivement il est super
    v my attaque

    invalide
    Ceinture blanche
    Ceinture blanche

    Messages : : 127
    Age : : 64
    Logiciels : Logiciels : : PSP, La suite adobe
    Date d'inscription : 26/05/2009

    Re: Preloader ultra et ses carrés lumineux

    Message par invalide le Mer 13 Jan - 22:08

    merci pour le tuto

    krysh nar
    Flasheur

    Messages : : 595
    Age : : 32
    Logiciels : Logiciels : : PHPStorm, CS5, CS4, Flash (niveau expert), notepad++, Visual Studio, 3DSMAX (la base), Solid Works, Lotus Notes, ...
    Date d'inscription : 14/05/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par krysh nar le Mar 19 Jan - 10:29

    salut et merci pour le tuto.

    juste quelque détail :

    dans le fichier .fla tu ne dit pas qu'il faut déclarer la classe dans Classe ( 'Precharg').

    ensuite a quoi te sert la variable tweened qui n'est utilisé (modifier) que lors de sa déclaration. elle est, le long du programme egal a false.

    edit :

    j'ai aussi optimiser une partie de ton code :

    Code:
     for (var i:int=1; i < carreMax; i++)
                {
                    if (pourcentageCharge > 100 / carreMax * i)
                    {
                        TweenMax.to (carres[i-1], 1, {tint:0x73d511, glowFilter:{color:0x73d511, alpha:1, blurX:10, blurY:10}});
                    }
                }

    if (pourcentageCharge == 100)
                {
                    TweenMax.to (carres[carreMax-1], 1, ...

    a la place des if ()...

    comme ca on peut avoir plus de carre que 10 (avec quelque modif par ci par la.

    ex : (avec quelque modif)...



    Vouli voulou

    claxie2001
    Nouveau membre
    Nouveau membre

    Messages : : 26
    Age : : 34
    Logiciels : Logiciels : : J'utilise essentiellement les logiciels : photoshop, illustrator, indesign, flash, dreamweaver.
    Cependant, par le passé j'ai pas mal touché à la vidéo : première, combustion, elastic reality, cooledit (depuis racheté par adobe).
    Et ai vécu une grande immersion dans second life (de près d'un an), où j'ai eu l'occasion de builder et d'apprendre (modestement) le script lsl.
    Je souhaite me spécialiser en développement flash, après une pratique de l'as2, je cherche à apprendre l'as3, et l'approche de la POO.
    Date d'inscription : 23/02/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par claxie2001 le Ven 26 Fév - 9:49

    Bonjour,

    Merci pour ce tuto, en revanche, je suis confrontée à un problème que je ne comprends pas, en essayant de le faire.

    Je colle une copie écran, ce sera plus parlant :


    D'où cela peut-il venir d'après vous ???
    A +,
    Claxie

    claxie2001
    Nouveau membre
    Nouveau membre

    Messages : : 26
    Age : : 34
    Logiciels : Logiciels : : J'utilise essentiellement les logiciels : photoshop, illustrator, indesign, flash, dreamweaver.
    Cependant, par le passé j'ai pas mal touché à la vidéo : première, combustion, elastic reality, cooledit (depuis racheté par adobe).
    Et ai vécu une grande immersion dans second life (de près d'un an), où j'ai eu l'occasion de builder et d'apprendre (modestement) le script lsl.
    Je souhaite me spécialiser en développement flash, après une pratique de l'as2, je cherche à apprendre l'as3, et l'approche de la POO.
    Date d'inscription : 23/02/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par claxie2001 le Ven 26 Fév - 10:28

    Autant pour moi, j'ai trouvé mon erreur !
    Mais plutôt que de supprimer mon précédent message, je préfère l'expliquer ...

    J'avais interverti des accolades de fermeture, incluant de fait toutes mes fonctions private dans "public function Precharg ()".
    Or elles doivent se trouver au même niveau que cette fonction et non à l'intérieur !!

    Donc tout va bien !
    Merci beaucoup pour ce tutoriel !!

    Claxie


    Dernière édition par claxie2001 le Ven 26 Fév - 10:40, édité 1 fois

    claxie2001
    Nouveau membre
    Nouveau membre

    Messages : : 26
    Age : : 34
    Logiciels : Logiciels : : J'utilise essentiellement les logiciels : photoshop, illustrator, indesign, flash, dreamweaver.
    Cependant, par le passé j'ai pas mal touché à la vidéo : première, combustion, elastic reality, cooledit (depuis racheté par adobe).
    Et ai vécu une grande immersion dans second life (de près d'un an), où j'ai eu l'occasion de builder et d'apprendre (modestement) le script lsl.
    Je souhaite me spécialiser en développement flash, après une pratique de l'as2, je cherche à apprendre l'as3, et l'approche de la POO.
    Date d'inscription : 23/02/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par claxie2001 le Ven 26 Fév - 10:40

    Encore moi...

    Une petite question : Que faut-il changer pour que le loader marche avec autre chose qu'une image, un swf par exemple ?

    Merci d'avance..

    MaSenCo
    Nouveau membre
    Nouveau membre

    Messages : : 13
    Age : : 29
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Adobe suite CS4.
    Date d'inscription : 28/02/2010

    Re: Preloader ultra et ses carrés lumineux

    Message par MaSenCo le Mer 10 Mar - 22:52

    @Claxie2001

    tu as la function :

    Code:

    private function activProgress():void
          {
                loader.load(new URLRequest("image.png"));
                loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progression);
          }

    puis dedans " URLRequest("Image.swf") ... Par exemple ,)

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par artkabis le Jeu 11 Mar - 0:07

    Attention pour les membres qui souhaiteraient utiliser la portion de code de krish nar, sachez qu'utilisé telle-quelle, celle-ci peu poser problème.

    Par contre, l'optimisation est plus que judicieuse, puisqu'elle offre une diminution des conditions superflus.

    Alors en reprenant cette partie:
    Code:
    if (pourcentageCharge > 100 / carreMax * i
    J'ai choisis moi aussi d'optimiser le code de notre préloader, j'ai décidé de mettre en place une nouvelle transition de départ qui joue sur les niveaux de progressions (plus la progression est élevé, plus l'alpha des carrés l'est aussi), pas mal d'éléments ont étés améliorés et vous pouvez les retrouver à l'endroit même du premier tutoriel, en effet celui-ci a été remanié en fonction de ces nouvelles améliorations, voilà alors si vous souhaitez tout de même récupérer le code sans avoir les explications qui l'accompagne, voici la totalité du script amélioré:
    Code:

    package com.chargement
    {
       //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;
       import flash.utils.setTimeout;
       public class Precharg2 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 Precharg2 ()
          {
              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;
          }
          private function lancementProgression($carre:Carre):void
          {
             if($carre === carres[carreMax-1]){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});
          }
        }
    }

    Sachez que cette formation a été mise à jour avec ces nouvelles corrections.

    claxie2001
    Nouveau membre
    Nouveau membre

    Messages : : 26
    Age : : 34
    Logiciels : Logiciels : : J'utilise essentiellement les logiciels : photoshop, illustrator, indesign, flash, dreamweaver.
    Cependant, par le passé j'ai pas mal touché à la vidéo : première, combustion, elastic reality, cooledit (depuis racheté par adobe).
    Et ai vécu une grande immersion dans second life (de près d'un an), où j'ai eu l'occasion de builder et d'apprendre (modestement) le script lsl.
    Je souhaite me spécialiser en développement flash, après une pratique de l'as2, je cherche à apprendre l'as3, et l'approche de la POO.
    Date d'inscription : 23/02/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par claxie2001 le Jeu 11 Mar - 7:53

    Merci Smile

    seaman130092
    Ceinture blanche
    Ceinture blanche

    Messages : : 56
    Age : : 33
    Logiciels : Logiciels : : J'utilise FLASH CS 4 en AS 2 et PHOTOSHOP CS4
    Date d'inscription : 24/02/2010

    Re: Preloader ultra et ses carrés lumineux

    Message par seaman130092 le Jeu 11 Mar - 10:19

    salut tout le monde, voila j'ai suivi le tuto a la lettre seulement quand je fais un test avec mon .fla j'ai un fond noir et vide... aucuns chargement car pas d'image...

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par Tekken le Jeu 11 Mar - 15:35

    merci pour ce tuto artkabis, ce preloader est vraiment trop joli Wink


    seaman130092 a écrit:salut tout le monde, voila j'ai suivi le tuto a la lettre seulement quand je fais un test avec mon .fla j'ai un fond noir et vide... aucuns chargement car pas d'image...


    dans la partie de code ci-dessous, remplace "image.png" par un lien et tu verras que ça fonctionne Wink

    Code:

    private function activProgress():void
          {
    loader.load(new URLRequest("image.png"));
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progression);
          }


    _________________

    Mon Site Creation



    seaman130092
    Ceinture blanche
    Ceinture blanche

    Messages : : 56
    Age : : 33
    Logiciels : Logiciels : : J'utilise FLASH CS 4 en AS 2 et PHOTOSHOP CS4
    Date d'inscription : 24/02/2010

    Re: Preloader ultra et ses carrés lumineux

    Message par seaman130092 le Jeu 11 Mar - 16:23

    Tekken a écrit:merci pour ce tuto artkabis, ce preloader est vraiment trop joli Wink


    seaman130092 a écrit:salut tout le monde, voila j'ai suivi le tuto a la lettre seulement quand je fais un test avec mon .fla j'ai un fond noir et vide... aucuns chargement car pas d'image...


    dans la partie de code ci-dessous, remplace "image.png" par un lien et tu verras que ça fonctionne Wink

    Code:

    private function activProgress():void
          {
    loader.load(new URLRequest("image.png"));
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progression);
          }

    toujours rien Sad JE VEUX COMPRENDRE !! lol
    dans le fichier .fla je dois mettre un code ou pas ??

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par Tekken le Jeu 11 Mar - 17:26

    non aucun code sur le fla
    as tu essayer de simuler le téléchargement car si ça se trouve cela vient du chargement trop rapide qui t'empêche de voir le preloader

    de plus étant donné que le .fla est vide, moi j'ai rajouté le chemin de la classe dans publier car comme toi je me retrouvé avec rien, et grace à ce chemin ça fonctionne Wink


    _________________

    Mon Site Creation



    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par Tekken le Lun 21 Juin - 19:09

    que faut il modifier dans la classe (a part l'url) afin de pouvoir charger un swf, car lorsque je compile je me retrouve avec des messages d'erreurs au chargement du swf

    Code:
    TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
        at sitefullflash_fla::MainTimeline/frame1()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1034: Echec de la contrainte de type : conversion de sitefullflash_fla::MainTimeline@10ebf6a9 en flash.display.Bitmap impossible.
        at com.chargement::Precharg/carreGauche()
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at com.greensock.core::TweenCore/complete()
        at com.greensock::TweenMax/complete()
        at com.greensock::TweenMax/renderTime()
        at com.greensock.core::SimpleTimeline/renderTime()
        at com.greensock::TweenLite$/updateAll()


    _________________

    Mon Site Creation



    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Preloader ultra et ses carrés lumineux

    Message par artkabis le Mar 22 Juin - 22:02

    Salut alors dans ce projet, la base chargé est une image et pour l'affichage de celle-ci j'utilise un BitmapData pour l'affichage progressif, forcément lors du chargement d'un fichier swf, cette étape de doit pas avoir lieu, il faut donc supprimer toute étape faisant référence à cette fameuse classe BitmapData et ajouter à la liste d'affichage le loader directement après la fin du chargement.

    Alors je n'ai pas testé, mais ceci devrait fonctionner:
    Code:

    package com.chargement
    {
      //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;
      import flash.utils.setTimeout;
      public class Precharg2 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 Precharg2 ()
          {
              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;
          }
          private function lancementProgression($carre:Carre):void
          {
            if($carre === carres[carreMax-1]){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);
                this.addChild(loader);
            }
          }
        }
    }


    _________________
    J'me fais de la pub et na tongue

    IceSliver
    Nouveau membre
    Nouveau membre

    Messages : : 6
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 09/02/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Preloader ultra et ses carrés lumineux

    Message par IceSliver le Sam 26 Juin - 11:36

    Super ce tuto, merci beaucoup

    Contenu sponsorisé

    Re: Preloader ultra et ses carrés lumineux

    Message par Contenu sponsorisé Aujourd'hui à 19:53


      La date/heure actuelle est Mar 6 Déc - 19:53