AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Faire une chute de neige avec dispartion

    Partagez
    avatar
    GoldenSun2
    MasculinAge : 23Messages : 427

    le Ven 11 Déc 2009 - 13:12



    Ami du Jour, Bonjour. Ami du Soir, Bonsoir !

    Noël approche et je me demandais ce que je pouvais bien faire en ce mois de décembre, alors j'ai ouvert flash et je me suis dit "Je pourrais faire une chute de neige, mais pleins de tutos existe déjà sur ça =/", mais après, je me suis dit "Mais aucun tutoriel expliquant comment faire tomber de la neige avec transparence et disparition à la fin =)" alors je me suis lancé dans un codage long long long, de 46 lignes ! *Ok c'est pas long*. Maintenant, lisez la suite et vous saurez comment faire !


    1. Créer le flocon :
    Pour commencer, ouvrez flash, nouveau document en AS 2.0 de taille au choix. Changer le fond de la scène en noir (Propriétés > Scène) et importé votre flocon dans la bibliothèque ou tout simplement, faite un simple rond blanc et placer celui-ci en dehors de la scène.

    Maintenant, nous allons transformé ce simple dessin en clip. Pour cela, 3 manières se propose à vous. Sélectionnez votre flocon, puis Clic Droit > Convertir en symbole, là vous donnez comme nom "flocon" et comme type "Clip" OU Sélectionnez votre flocon, Menu > Modifier > Convertir en symbole, vous donnez le nom "flocon" et comme type "Clip" OU Sélectionnez votre flocon, F8 et là vous donnez le nom "flocon" et comme type "Clip". Voilà les 3 manières possibles.

    Votre flocon est converti ? Très bien, maintenant, sélectionnez votre clip, allé dans Propriétés et donné lui comme nom d'occurrence "flocon". Passons maintenant à la duplication du clip =P.


    2. La duplication :
    Ici on va procéder par plusieurs étapes. Nous allons tout d'abords déclarer nos variables importantes, puis dupliquez le flocon x fois, ensuite déclarer les variables de déplacement et en fin déplacer les flocons.
    Code:
    //Variables//
    var nomClip = "flocon";
    var nombreClip = 200;
    var sizeClip = 12;
    var largeurScene = 550;
    var hauteurScene = 400;
    Je vais vous donnez une brève explication sur les variables. \"nomClip\" est, comme vous l'avez compris, le nom d'occurrence du clip et non le nom qu'il porte dans la bibliothèque, nombreClip est le nombre de fois que l'on dupliquera le flocon, sizeClip est la taille maximum que peut atteindre le flocon en px, ici, ça taille maximum est de 12px (NB : Le flocon sera toujours carré), largeurScene et hauteurScene sont évidement, comme vous l'avez compris, la largeur et la hauteur de la scène ^^\"

    Maintenant, passons à la duplication du clip.
    Code:
    //Dupliquer le clip//
    for (var i = 0; i < nombreClip; i++)
    {
       this[nomClip].duplicateMovieClip(nomClip+i, i);
       this[nomClip+i]._x = random(largeurScene);
       this[nomClip+i]._y = random(hauteurScene);
       this[nomClip+i]._width = random(sizeClip);
       if (this[nomClip+i]._width < 5) { this[nomClip+i]._width = 5; }
       this[nomClip+i]._height = this[nomClip+i]._width;
       this[nomClip+i]._alpha = random(101);
       if (this[nomClip+i]._alpha < 20) { this[nomClip+i]._alpha = 20; }
    }
    La duplication du clip n'est pas compliqué à comprendre du tout (enfin pour moi, je ne sais pas si pour vous ^^\"). Enfin, ici nous allons dupliquer le clip \"flocon\" 200 fois et les flocon dupliqué porterons le nom \"flocon0\", \"flocon1\", . . . Le flocon sera placé 'importe ou sur la scène mais ne sera jamais en dehors. La taille sera aléatoire MAIS si elle est inférieur à 5, le flocon sera directement redimensionné à 5px. Et voilà une nouvelle ligne qui n'apparait pas dans les autres codes.
    Code:
    this[nomClip+i]._alpha = random(101);
    Ce bout de code va juste définir la transparence du flocon. L'effet visuel est juste meilleur ^^ La transparence sera aléatoire MAIS si elle est inférieur à 20 on défini la transparence à 20%. Ben c'est vrai, il faut quand même le voir le flocon =D

    Voilà que la duplication du calque est terminé, vous pouvez lancé votre rendu en route, vous verrez tous les petits flocon sur votre scène mais il reste encore le déplacement à faire.


    3. Le déplacement
    Le déplacement ne se fera que d'un sens, soit vers la droite, soit vers la gauche. Il sera généré par la \"force du vent\", on peut dire ça comme ça, qui variera (augmentera et diminuera). Mais tout d'abords, nous allons déclarer les variables de mouvement.
    Code:
    //Variables déplacement//
    var forceVent = random(20)
    if (forceVent < 2) { forceVent = 2; };
    var sens = -1;
    var ajout = -1;
    Bon je vais faire une explication vite fait, bien fait. La force du vent est aléatoire MAIS si elle est inférieur à 2 alors elle sera déclaré à 2 sinon les flocons restes calés dans les coins. Le sens ne fais que changer la direction des flocons par une simple multiplication qui sera présente plus tard. Si le sens vaut 1 alors les flocons iront à droite, si il vaut -1, les flocons iront à gauche. L'ajout ici est simplement fait pour ralentir la vitesse du vent pour qu'elle ne soit pas régulière. Mettez -1 pour que la vitesse varie et 0 pour qu'elle soit régulière. Bien ? Alors passons au déplacement =).

    Ce bout de code déplacera juste les flocons par rapport à la force du vent et le sens qu'on lui a donné par rapport au poids du flocon. Comment j'ai calculé le poids du flocon ici ? Ben on va juste dire que si il est plus gros, alors il est plus lourd ^^
    Code:
    //Déplacer le clip//
    onEnterFrame = function ()
    {
       forceVent += ajout;
       
       if (forceVent >= 20) {ajout = -1; }
       if (forceVent <= 5) {ajout = 1; }
       
       for (i = 0; i <= nombreClip; i++)
       {
          this[nomClip+i]._x += this[nomClip+i]._height/forceVent*sens;
          this[nomClip+i]._y += this[nomClip+i]._height/5;
          if (this[nomClip+i]._y >= hauteurScene-50) { this[nomClip+i]._alpha += -2; }
          if (this[nomClip+i]._y >= hauteurScene+10) { this[nomClip+i]._y = -20; this[nomClip+i]._alpha = random(101); }
          if (this[nomClip+i]._x > largeurScene+15) { this[nomClip+i]._x = -10; }
          if (this[nomClip+i]._x < -15) { this[nomClip+i]._x = largeurScene+10; }
       }
    }
    Alors alors, ici on a déjà une ligne de code qui est un peu plus complexe, mais certes, basique. Je vais pas commencé a expliqué la fonction onEnterFrame en détail, je vais juste vous dire que c'est une fonction que ne s'arrête jamais. Tout d'abords, on ajoute la variable ajout à la force du vent qui, selon votre réglage, diminuera la force ou ne fera rien du tout. Ensuite, on regarde si la force du vent n'est pas trop faible. Si elle l'est, alors on change la variable ajout en mettant 1 à la place de moins 1, ce qui augmentera la force du vent. Si elle arrive à 20, alors la on diminue la force du vent en changeant la valeur de \"ajout\" en -1 (NB : Si vous avez réglé l'ajout sur 0, ces conditions de seront pas appliquées mais le code fonctionnera quand même).

    Après avoir défini la force du vent, il faut déplacer les flocons par rapport à cette force et on sens qu'on leur à donné. On fait un simple calcul, on regarde la taille du flocon, on le divise par la force du vent et on multiplie le tout par le sens juste pour définir s'il faut allé en arrière sur l'axe x ou en avant (principe du x fois -1 = -x). Même principe pour la descente sur l'axe y, sauf que l'on ne fais que diviser le poids par 5 juste pour ne pas que ça descente trop vite.

    Maintenant, juste pour vos yeux (c'est le cas de le dire vu que se sera un effet visuel ^^) nous allons augmenter la transparence quand il sera arrive à un certain niveau. Ici, si le flocon arrive à la hauteur de la scène - 50, alors le flocon commence à disparaitre. C'est tout pour cette explication ^^

    Et pour finir, si le flocon disparait de la scène par la droite, il réapparait à gauche, s'il disparait à gauche, il réapparait à droite. Mais bien évidement, il faut bien que la tombé de neige soit continue, alors s'il arrive dans le fond de la scène, on la replace au dessus en remettant la transparence du flocon aléatoire pour ne pas faire croire que c'est le même *Mais chuuuuut, c'est tout à fait le même*. Et puis, si on ne faisait pas ça, au bout d'un moment le flocon disparaitrait totalement =(


    4. Code final :
    En gros, le code final nous donne cela
    Spoiler:
    Code:
    //Variables//
    var nomClip = "flocon";
    var nombreClip = 200;
    var sizeClip = 12;
    var largeurScene = 550;
    var hauteurScene = 400;

    //Dupliquer le clip//
    for (var i = 0; i < nombreClip; i++)
    {
       this[nomClip].duplicateMovieClip(nomClip+i, i);
       this[nomClip+i]._x = random(largeurScene);
       this[nomClip+i]._y = random(hauteurScene);
       this[nomClip+i]._width = random(sizeClip);
       if (this[nomClip+i]._width < 5) { this[nomClip+i]._width = 5; }
       this[nomClip+i]._height = this[nomClip+i]._width;
       this[nomClip+i]._alpha = random(101);
       if (this[nomClip+i]._alpha < 20) { this[nomClip+i]._alpha = 20; }
    }

    //Variables déplacement//
    var forceVent = random(20)
    if (forceVent < 2) { forceVent = 2; };
    var sens = -1;
    var ajout = -1;

    //Déplacer le clip//
    onEnterFrame = function ()
    {
       forceVent += ajout;
       
       if (forceVent >= 20) {ajout = -1; }
       if (forceVent <= 5) {ajout = 1; }
       
       for (i = 0; i <= nombreClip; i++)
       {
          this[nomClip+i]._x += this[nomClip+i]._height/forceVent*sens;
          this[nomClip+i]._y += this[nomClip+i]._height/5;
          if (this[nomClip+i]._y >= hauteurScene-50) { this[nomClip+i]._alpha += -2; }
          if (this[nomClip+i]._y >= hauteurScene+10) { this[nomClip+i]._y = -20; this[nomClip+i]._alpha = random(101); }
          if (this[nomClip+i]._x > largeurScene+15) { this[nomClip+i]._x = -10; }
          if (this[nomClip+i]._x < -15) { this[nomClip+i]._x = largeurScene+10; }
       }
    }


    En passant, j'aimerai remercier Fura qui m'a donné envie de travailler un peut plus mon flash ce qui a pu faire naître ce tutoriel ^^



    Dernière édition par NyoTheNeko le Ven 5 Juin 2015 - 11:04, édité 6 fois (Raison : Mises à jour d'un rendu)




    avatar
    Mayu
    FémininAge : 27Messages : 202

    le Ven 11 Déc 2009 - 17:03

    Cool,j'me met au flash sa va m'aider
    avatar
    Flox - ™
    MasculinAge : 22Messages : 180

    le Ven 11 Déc 2009 - 23:13

    Fort, je vais m'y mettre aussi.

    Je posterais peut-être mon rendu si j'y arrive.

    EDIT : J'abandonne, Flash c'est trop compliqué pour moi, je ne vois d'ailleurs même pas mon flocon quand je l'importe.



    " L'erreur est Humaine, Sinon pourquoi y aurait-il des gommes au bout des Crayons? "


    avatar
    roukin
    MasculinAge : 48Messages : 20

    le Sam 12 Déc 2009 - 0:29

    Flox-795™ a écrit:Fort, je vais m'y mettre aussi.

    Je posterais peut-être mon rendu si j'y arrive.

    EDIT : J'abandonne, Flash c'est trop compliqué pour moi, je ne vois d'ailleurs même pas mon flocon quand je l'importe.
    ba commence par les bases avant de jeter l'éponge !
    flash est super logiciel qui mérite que l'on y passe un peu d temps Wink



    avatar
    Flox - ™
    MasculinAge : 22Messages : 180

    le Sam 12 Déc 2009 - 2:01

    Ouais.. J'verrais.



    " L'erreur est Humaine, Sinon pourquoi y aurait-il des gommes au bout des Crayons? "


    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 12 Déc 2009 - 13:12

    Classe avec la disparition^^ Merci du tuto !



    avatar
    GoldenSun2
    MasculinAge : 23Messages : 427

    le Sam 12 Déc 2009 - 15:49

    Bon c'est vrai que tout les flocon vont en même temps dans la même direction, mais c'est un début ^^




    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 13:04