Share
Dans ce didacticiel, nous allons créer un effet de pluie dynamique à l'aide d'ActionScript 3.0. L'effet peut être personnalisé de nombreuses façons en modifiant simplement quelques lignes de code. Commençons!
Jetons un coup d'œil à l'effet final sur lequel nous allons travailler:
Nous allons dessiner une simple goutte de pluie, puis utiliser nos compétences ActionScript pour dupliquer, déplacer et positionner le MovieClip afin d'obtenir un bel effet de pluie..
Créez un nouveau document ActionScript 3 (Fichier> Nouveau…). Réglez la taille de la scène à vos dimensions souhaitées, j'ai utilisé 600 x 300 px.
Ajouter ou dessiner une image à utiliser comme arrière-plan, j'ai utilisé une image modifiée par JinThai, sous licence Creative Commons.
Renommez le premier calque en "Arrière-plan" puis créez-en un autre et nommez-le "Code" (nous utiliserons celui-ci pour placer notre code ActionScript). Vous pouvez verrouiller la couche "Code" pour éviter de placer des dessins non désirés dans cette couche..
Créez un graphique à utiliser comme goutte de pluie. Définissez sa couleur en blanc et utilisez un dégradé linéaire pour l'alpha; le mien est compris entre 40 et 15. Convertissez-le en MovieClip et nommez-le "Déposer", n'oubliez pas de cocher la case "Exporter pour ActionScript"..
Commençons par du code dans un fichier ActionScript séparé:
package Classes / * Importer les classes requises * / import flash.display.MovieClip; import flash.events.Event;
Ici, nous importons les classes que nous allons utiliser. Rappelez-vous que le mot à côté de "package" est le nom du dossier où se trouve notre classe..
// Nous devons étendre la classe pour pouvoir utiliser la méthode addChild (). Classe publique Rain s'étend MovieClip
L'extension de la classe MovieClip permettra à notre classe d'hériter de toutes les méthodes, propriétés et fonctions du MovieClip. Dans ce cas, nous l'utilisons pour accéder à la méthode addChild ().
Nous utiliserons ici un "vecteur" exclusif de Flash Player 10 Class. En termes simples, la classe de vecteur fonctionne comme un tableau, mais est considérablement plus rapide.
Variable privée offset: int = 50; // C'est la zone de décalage en pixels que l'effet va prendre. Sans cela, les coins de la zone d'effet seront des variables privées sans pluie var dropsNumber: int; // Le nombre de gouttes de pluie; sa valeur est définie dans les paramètres private var dropsVector: Vector.= nouveau vecteur. (); // Le vecteur qui stockera chaque goutte de pluie
fonction publique init (drops: int, fallSpeed: int, windSpeed: int, hArea: int, vArea: int, dir: String): void dropsNumber = drops;
La fonction principale, avec certains paramètres, facilite l’adaptation de l’effet à vos besoins. Vous pouvez modifier le nombre de gouttes, la vitesse à laquelle les gouttes tombent, la vitesse à laquelle les gouttes se déplacent horizontalement, la taille de la zone d'effet et la direction de la pluie (gauche ou droite)..
Nous définissons la valeur dropsNumber ici.
Par défaut, l'offset var est configuré pour fonctionner avec le côté gauche. Nous devons donc vérifier où la pluie va tomber et modifier l'offset si la direction est correcte..
if (dir == "right") offset * = -1;
Afin de montrer différentes occurrences du Drop MovieClip, nous devons créer un nouvel objet Drop dans une instruction "For":
pour (var i: int = 0; i < drops; i++) var drop:Drop = new Drop(); drop.fallSpeed=fallSpeed; drop.windSpeed=windSpeed; drop.dir=dir; drop.hArea=hArea; drop.vArea=vArea;
Nous utilisons la variable "drops" pour obtenir le nombre de gouttes défini par l'utilisateur et définir les variables à l'intérieur du MovieClip pour une utilisation ultérieure..
Définir une position aléatoire initiale pour les gouttes.
drop.x = Math.random () * (hArea + offset); drop.y = Math.random () * vArea;
drop.scaleX = Math.round (((Math.random () * 0.8) + 0.3) * 10) / 10; drop.scaleY = drop.scaleX;
Cela définit l’échelle des gouttes entre 0,3 et la taille originale.
dropsVector.push (drop); addChild (déposer); // Fin de For inTheDirection (); // Fin de la fonction init
Ce code ajoute Drop MovieClip au vecteur puis à la scène. Il appelle aussi la fonction "direction".
Accentsconagua
fonction privée inTheDirection (): void for (var i: int = 0; i < dropsNumber; i++) switch (dropsVector[i].dir) case "left" : dropsVector[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; case "right" : dropsVector[i].scaleX*=-1; //Our Drop was created going to the left, so we flip it to make it look like it's going to the right dropsVector[i].addEventListener(Event.ENTER_FRAME, moveRight); break; default : trace("Error"); Dans cette fonction, nous utilisons un autre "Pour" pour accéder aux MovieClips à l'intérieur du vecteur. Ensuite, nous vérifions le paramètre de direction et ajoutons un écouteur à la fonction correspondante. Tout cela va prendre en charge le mouvement et la position.
fonction privée moveLeft (e: Event): void e.target.x- = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; if (e.target.y> e.target.vArea + e.target.height) e.target.x = Math.random () * (e.target.hArea + (offset * 2)); e.target.y = - e.target.height; fonction privée moveRight (e: Event): void e.target.x + = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; if (e.target.y> e.target.vArea + e.target.height) e.target.x = Math.random () * (e.target.hArea - offset * 2) + offset * 2; e.target.y = - e.target.height;
Cela déplace les gouttes en fonction des paramètres de la fonction principale. Il réinitialise ensuite la position lorsque les gouttes se déplacent en dehors de la zone d'effet..
C'est la classe terminée, pour l'utiliser, revenons à l'IDE Flash, ouvrons le panneau Actions et écrivons:
Import Classes.Rain; pluie var: pluie = nouvelle pluie (); rain.init (200, 50, 5, 600, 300, "à gauche"); addChild (pluie);
Cela va créer un nouvel objet de pluie, puis appeler la fonction principale pour lancer l’effet. Enfin, nous ajoutons l'effet à la scène.
N'oubliez pas que vous pouvez jouer avec les paramètres pour obtenir divers effets et que vous pouvez également modifier les largages en dessinant ce que vous voulez. Continuez d’essayer différentes combinaisons pour obtenir l’effet exact souhaité.
J'espère que vous avez aimé lire le tut autant que je l'ai écrit. Merci d'avoir lu!
