Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en mai 2009..
À l'aide d'ActionScript 3.0, nous créerons un arrière-plan animé intéressant que nous pourrons utiliser dans les écrans de menu ou dans Music Visualizer..
Voyons ce sur quoi nous allons travailler:
Nous allons créer une classe qui prendra en charge l'ensemble de l'effet. Lorsque vous appelez la classe, vous pouvez modifier le nombre de lumières, la couleur, le nombre de pixels, la taille, la direction, la vitesse et la qualité du filtre Flou. De cette façon, il est possible d'obtenir de nombreux résultats différents lors de son utilisation. En outre, vous pouvez utiliser n'importe quel fond.
Créez un nouveau document ActionScript 3.0 (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é un simple dégradé bleu (# 02C7FB, # 1F63B4).
Renommez le premier calque en "Arrière-plan" puis créez-en un autre et nommez-le "Code". Vous pouvez verrouiller la couche "Code" pour éviter de placer des dessins non désirés dans cette couche..
Enregistrez votre travail et entrons dans le code!
Je suppose que vous avez déjà une connaissance de base d'ActionScript 3.0. Si vous avez des doutes sur un mot clé, consultez l'aide de Flash (F1)..
Créer un nouveau fichier ActionScript (Fichier> Nouveau…).
package Classes / * Importer les classes requises * / import flash.display.MovieClip; import flash.filters.BitmapFilter; import flash.filters.BlurFilter; 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 Lights é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 ()..
Bien qu'ils aient des noms assez explicites, je vais ajouter de brefs commentaires sur chaque variable pour être sûr que ce soit clair. Ils obtiennent leurs valeurs des paramètres de la fonction Main.
private var lightsNumber: int; // Le nombre de lumières sur la scène privé var xSpeed: int; // La vitesse horizontale que les lumières ont privé var ySpeed: int; // vitesse verticale private var lightsDir: String; // Direction des lumières, cela peut être Haut, Bas, Gauche ou Droite private var areaW: int; // La largeur de la zone où l'effet aura lieu private var areaH: int; // hauteur var var privé: Array = new Array (); // Ce tableau stockera tous les MovieClips Lights afin que nous puissions les utiliser en dehors du Pour où nous allons les créer.
/ * Fonction principale * / public function init (areaWidth: int, areaHeight: int, numberOfLights: int, lightSize: int, lightCouleur: uint, minimumScale: Number, hSpeed: int, vSpeed: int, dir: String, quality: int) : void areaW = areaWidth; aireH = aireHauteur; lightsNumber = numberOfLights; lightsDir = dir;
C'est la fonction dont nous avons besoin pour commencer l'effet, nous définissons également les valeurs de variable dans ce code.
pour (var i: int = 0; i < numberOfLights; i++) /* Create the specified number of lights */ var light:MovieClip = new MovieClip(); /* Set random speed to x and y based on the params */ xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed); ySpeed = Math.round((Math.random() * vSpeed) + 0.5); light.xSpeed = xSpeed; light.ySpeed = ySpeed; /* Create lights */ light.graphics.beginFill(lightColor); light.graphics.drawCircle(0, 0, lightSize / 2); light.graphics.endFill();
Dans ce code, nous utilisons une instruction "Pour" pour créer le nombre de lumières que l'utilisateur définit dans le paramètre et calculer une vitesse semi-aléatoire pour chaque lumière..
Ceci définit une position de départ aléatoire pour les lumières en fonction des paramètres de zone..
light.x = Math.floor (Math.random () * areaWidth); light.y = Math.floor (Math.random () * areaHeight);
var b: int = Math.floor (Math.random () * 10) + 5; // Calcule un flou aléatoire entre 0 et 9 et ajoute 5 au résultat. var blur: BitmapFilter = new BlurFilter (b, b, qualité); // L'objet BlurFilter. var filterArray: Array = new Array (flou); // Pour appliquer le filtre, nous avons besoin d'un tableau de filtres. light.filters = filterArray; // Définit le tableau de filtres sur la lumière
Le code ci-dessus applique le flou. Rappelez-vous que ce code fait toujours partie du Pour, donc les Lumières deviennent différentes Flous.
light.alpha = Math.random () * 0,6 + 0,1;
Un facile; cela définit la propriété alpha entre 0.1 et 0.6.
light.scaleX = Math.round (((Math.random () * (1-minimumScale))) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
Ceci définit l'échelle des lumières entre la taille d'origine et le paramètre d'échelle minimale. Nous utilisons une méthode ronde pour économiser le processeur.
addChild (lumière); / * Stocke les lumières dans un tableau pour l’utiliser plus tard * / lights.push (light); / * Vérifier la direction des lumières * / checkDirection ();
Cela ajoute les lumières à la scène, puis nous les sauvegardons dans un tableau pour les utiliser plus tard. C'est aussi la fonction checkDirection pour voir dans quelle direction iront les lumières.
Accentsconagua
fonction privée checkDirection (): void for (var i: int = 0; i < lights.length; i++) switch ( lightsDir ) case "up" : lights[i].addEventListener(Event.ENTER_FRAME, moveUp); break; case "down" : lights[i].addEventListener(Event.ENTER_FRAME, moveDown); break; case "right" : lights[i].addEventListener(Event.ENTER_FRAME, moveRight); break; case "left" : lights[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; default : trace("Invalid Direction!"); Ici nous utilisons un pour pour accéder à toutes les lumières du tableau, vérifiez ensuite la variable de direction pour déterminer où déplacer les lumières. En fonction de la direction, nous ajoutons l'auditeur à la fonction correspondante.
Cette section suivante peut sembler un peu compliquée, mais c'est plus facile que vous ne le pensez. Fondamentalement, il déplace la lumière en fonction de la vitesse calculée dans la fonction principale, puis vérifie si la lumière a "quitté" la zone de l'effet. Si tel est le cas, il définit une position aléatoire contraire à la direction prise par la Lumière..
fonction privée moveUp (e: Event): void e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; / * Réinitialiser la position de la lumière, Y d'abord, puis X * / if (e.target.y + (e.target.height / 2) < 0) e.target.y = areaH + (e.target.height / 2); e.target.x=Math.floor(Math.random()*areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Fonction Move Down * / fonction private moveDown (e: Event): void e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; / * Réinitialiser la position de la lumière, d'abord Y, puis X * / if (e.target.y - (e.target.height / 2)> areaH) e.target.y = 0 - (e.target.height / 2 ) e.target.x = Math.floor (Math.random () * areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Fonction Move Right * / fonction private moveRight (e: Event): void e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; / * Réinitialiser la position de la lumière, d'abord Y, puis X * / if (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor(Math.random()*areaH); if ((e.target.x - e.target.width / 2) > areaW) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor (Math.random () * areaW); / * Fonction Move Left * / fonction privée moveLeft (e: Event): void e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; / * Réinitialiser la position de la lumière, d'abord Y, puis X * / if (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaH); if ((e.target.x + e.target.width / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaW);
Sauvegardez votre classe (rappelez-vous que le fichier doit avoir le même nom que la classe) et revenons au Fla. Ouvrez le panneau Actions et écrivez:
importer Classes.Lights; var light: Lights = new Lights (); light.init (600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2); addChild (lumière);
C'est tout! Testez votre film pour voir votre joli fond animé!
En jouant avec les paramètres de la classe, vous obtiendrez de nombreux effets différents, essayez de changer l’arrière-plan, définissez une vitesse plus lente ou plus rapide, utilisez plus de lumières, moins de flou, etc.!
J'espère que vous avez appris quelque chose que vous pouvez utiliser, merci d'avoir lu!
