Fatigué de ces vieilles cartes de Noël animées avec le père Noël en train de rire, un traîneau volant dans le ciel avec un bouquet d'arbres et de lumières étincelantes?
Cette année, vous n'avez aucune excuse. Je vais vous montrer comment construire un clavier virtuel qui joue Jingle Bells. Vous pourrez même étendre le concept et ajouter plus de chansons et de notes au piano.
Pour cette tâche, j'utiliserai une combinaison de Tweenlite, du SDK Flex, de Flash IDE et de Flash Develop..
Étape 1: Nouveau fichier
Démarrez Adobe Flash et créez un fichier Flash ActionScript 3..
Étape 2: Propriétés
Ouvrez les propriétés et réglez le FPS sur 30 et la taille de la scène sur 600 x 380 pixels..
Étape 3: Couche 1
Renommez le calque 1 en "arrière-plan" et créez un rectangle blanc de 580x360. Convertissez-le en un symbole MovieClip nommé "frame_mc" et réglez sa position sur x: 10 y: 10..
Étape 4: Ombre portée
Ajoutez un filtre d'ombre portée avec les paramètres suivants:
Étape 5: Couche de clavier
Ajoutez un nouveau calque appelé "clavier", créez un rectangle primitif 60x190 avec un rayon de 5 pixels et sans trait. Faites-en un symbole de MovieClip et appelez-le "keybase_mc".
Étape 6: Couches de réflexion et de lueur
Appuyez sur F8 et créez un nouveau MovieClip appelé "key_mc". Créez deux couches supplémentaires dans key_mc (en plus de celle déjà présente dans keybase_mc). Nommez-les: "réflexion" et "lueur". Copier le cadre dans les calques nouvellement créés.
Étape 7: glow_mc
NOTE: j'ai changé les couleurs de frame_mc pendant un moment pour me permettre de voir les modifications sur les touches. Sélectionnez le MovieClip dans la couche de luminescence, nommez-le "glow_mc", ouvrez les filtres et modifiez-les en fonction de l'image ci-dessous:
Étape 8: réflexion_mc
Sélectionnez le MovieClip dans le calque de réflexion, nommez-le "reflection_mc", ouvrez les filtres et modifiez-les pour qu'ils correspondent à l'image ci-dessous:
Étape 9: base_mc
Maintenant, sélectionnez le MovieClip dans la couche de base, nommez-le "base_mc", ouvrez les filtres et modifiez-les pour qu'ils correspondent à l'image ci-dessous:
Étape 10: clé
Copiez et collez la clé jusqu'à 7 instances. Disposez-les uniformément sur la scène.
Étape 11: aligner
Ouvrez l'outil d'alignement et cliquez sur l'icône "espacement horizontal".
Étape 12: notes
Créez un nouveau calque, appelez-le "notes". Puis écris C D E F G A B sur les touches, ajoutez le texte à un nouveau MovieClip. Ouvrez les filtres movieclip et modifiez-les tels que l'image ci-dessous:
Étape 13: numéros
Créez un nouveau calque, appelez-le "numéros". Écrivez les nombres de 1 à 7, cela représentera les chiffres que vous appuierez sur votre clavier pour mettre en surbrillance la touche ecard.
Étape 14: chemin du SDK Flex
Allez dans Edition> Préférences> ActionScript> Paramètres ActionScript 3.0 et localisez votre chemin d'accès au kit SDK Flex (vous en aurez besoin pour intégrer des fichiers directement à l'aide de code)..
Étape 15: Développer en Flash
Open Flash Develop (j'utilise simplement cette option car elle me plait tellement plus que l'éditeur ActionScript habituel de l'IDE flash lors de l'écriture de packages) et crée 2 fichiers as3 vierges. Nommez-les "Main.as" et "Background.as", enregistrez-les dans le même dossier que votre .fla.
Étape 16: Classe de document
Inside Flash IDE défini Main.as comme classe de document.
Étape 17: bouton de lecture automatique
Créez un MovieClip en lecture automatique et nommez-le "autoplay_mc". Ce sera un bouton de lecture automatique.
Étape 18: Flocons de neige
Pour créer des flocons de neige qui tombent, créez un nouveau MovieClip, tracez un petit cercle blanc à l'intérieur et ajoutez un identifiant de liaison "SnowFlake"..
Étape 19: Main.as
Dans Flash Develop, ouvrez Main.as, définissez votre classe Main en étendant un MovieClip et créez une fonction appelée Main..
Commencez par importer ces classes dans votre paquet:
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.TimerEvent; import flash.display.StageScaleMode; import flash.events.KeyboardEvent; import flash.utils.Timer; importer com.greensock.TweenLite; importer com.greensock.easing. *; importation de fond; // nous allons créer une classe d'arrière-plan basée sur le bruit perlin et une matrice de transformation avec quelques formes remplies afin d'obtenir une belle transition en douceur. Importer Snow; // je viens de récupérer la neige de kirupas et de la préparer -> http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ import flash.media.Sound;
Étape 20: Variables
Dans votre classe, définissez ces variables:
// ce sera notre fond privé var _background: Background; // ce sera notre tempête de neige privé var neige: neige; // -> notes // Cette intégration nécessite FLEX SDK -> Une autre méthode consiste à ajouter ces sons à votre bibliothèque et à leur ajouter un ID de liaison. [Embed (source = "assets / A.mp3")] private var A: Class; private var a: Son = new A () en tant que son; [Embed (source = "assets / B.mp3")] private var B: Classe; private var b: Son = nouveau B () en tant que Son; [Embed (source = "assets / C.mp3")] private var C: Class; private var c: Son = nouveau C () en tant que son; [Embed (source = "assets / D.mp3")] private var D: Classe; private var d: Sound = new D () en tant que Sound; [Embed (source = "assets / E.mp3")] private var E: Class; private var e: Sound = new E () en tant que Sound; [Embed (source = "assets / F.mp3")] private var F: Classe; private var f: Son = nouveau F () en tant que Son; [Embed (source = "assets / G.mp3")] private var G: Class; private var g: Sound = new G () en tant que Sound; // Le stockage des notes dans un tableau facilitera la liaison au clavier privé var notes: Array = [c, d, e, f, g, a, b] // Séquence de notes pour la musique privée var noteSequence: Array = [f, f, f, f, f, f, f, f, a, d, e, f, g, g, g, g, g, e, e, d, b, a, f, d, c] // Note actuelle qui joue var var privé: Number = 0 // Séquence de délai que la musique doit avoir entre les notes var noteDelay: Array = [100, 100, 300, 100, 100, 300, 100, 100 , 100,100,200, 100, 100, 200, 90, 100, 90, 100, 100, 120, 120, 120, 120, 300] // Minuterie pour écouter la musique privée tunetimer var: Minuterie = nouvelle minuterie (noteDelay [0]);
Étape 21: Main ()
La fonction principale
// La fonction principale attend que la ligne de commande soit ajoutée à la fonction publique de scène Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage);
Étape 22: initialiser
Après avoir été ajouté à la scène, nous initialiserons l’arrière-plan et le clavier virtuel:
// une fois ajoutés à la scène, nous pouvons définir un mode d'échelle de scène, l'arrière-plan et le démarrage de la fonction privée de piano virtuel addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine ();
Étape 23: effets de fond
Trions le fond en mouvement et la neige:
// ajoute la fonction privée en arrière-plan addBackground (): void _background = new Background (150,150); // la raison pour laquelle la taille est plus petite est parce que c'est très gourmand en ressources _background.x = 5; // pour donner une marge blanche au cadre _background.y = 5; _background.width = 570 // redimensionnez-le à la taille correcte _background.height = 350 frame_mc.addChild (_background); // ajoute du fond au cadre snow = new Snow (570, 350) // crée une instance de tempête de neige
Étape 24: Clavier virtuel
L'initialisation du clavier virtuel
fonction privée startMachine (e: MouseEvent = null): void // associe les événements de clavier stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) // associe une méthode autoplay à autoplay button autoplay_mc .addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; // associe les notes aux touches var i: int = 0 while (i < 7) this["key"+i].note = notes[i] i++ //makes the highlight of the keys disappear lowlightKeys();
Étape 25: Mettez en surbrillance
Nous devons créer une fonction pour supprimer la surbrillance des touches:
fonction privée lowlightKeys () var i: int = 0 while (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++
Étape 26: Événements clés
Nous allons maintenant gérer les événements Key up et Key down:
fonction privée onkeyDown (e: KeyboardEvent): void var i: int = 0 commutateur (e.keyCode) cas 49: // code de touche pour 1 i = 0 break; cas 50: // code clé pour 2 i = 1 pause; cas 51: // code de touche pour 3 i = 2 break; cas 52: // code de touche pour 4 i = 3 break; case 53: // code de touche pour 5 i = 4 break; case 54: // code de touche pour 6 i = 5 break; case 55: // code de touche pour 7 i = 6 break; notes [i] .play (); TweenLite.to (this ["clé" + i] .glow_mc, 0.5, alpha: 1); // met en surbrillance la clé fonction privée onkeyUp (e: KeyboardEvent): void var i: int = 0 commutateur (e.keyCode) cas 49: i = 0 break; cas 50: i = 1 pause; cas 51: i = 2 pauses; cas 52: i = 3 pauses; cas 53: i = 4 pauses; cas 54: i = 5 pauses; cas 55: i = 6 pause; TweenLite.to (this ["clé" + i] .glow_mc, 0.5, alpha: 0); // met en valeur la clé
Étape 27: Fonctions de lecture automatique
Comment démarrer et arrêter la lecture automatique
fonction privée startAutoPlay (e: MouseEvent = null) curnote = 0; // à chaque fois que je démarre la lecture automatique, je réinitialise la note en cours de lecture tunetimer.delay = noteDelay [curnote] * 3 // ceci augmente le délai défini précédemment par tunetimer.addEventListener (TimerEvent.TIMER, autoPlayTune) // ajoute un écouteur à l'événement timer pour tunetimer.start () // démarre la minuterie fonction privée stopAutoPlay (e: MouseEvent = null) tunetimer.stop () // arrête la minuterie tunetimer.removeEventListener (TimerEvent.TIMER, autoPlayTune) // supprime le un événement
Étape 28: mise à jour
Mise à jour du clavier virtuel avec la musique
fonction privée updateMachine (): void lowlightKeys (); // réinitialise les touches surlignées var i: int = 0 while (i < 7) if (this["key" + i].note == noteSequence[curnote]) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:1 ); //if current note is the one associeated with the key then highlights it i++ curnote++ //goes to next note if (curnote > noteSequence.length) curnote = 0; // réinitialise la note courante stopAutoPlay (); // arrête la lecture automatique
Étape 29: le code complet
Voici le code complet Main.as
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.TimerEvent; import flash.display.StageScaleMode; import flash.events.KeyboardEvent; import flash.utils.Timer; importer com.greensock.TweenLite; importer com.greensock.easing. *; importation de fond; import Neige import flash.media.Sound; Classe publique Main étend MovieClip private var _background: Background; neige privée: neige; [Embed (source = "assets / A.mp3")] private var A: Class; private var a: Son = new A () en tant que son; [Embed (source = "assets / B.mp3")] private var B: Classe; private var b: Son = nouveau B () en tant que Son; [Embed (source = "assets / C.mp3")] private var C: Class; private var c: Son = nouveau C () en tant que son; [Embed (source = "assets / D.mp3")] private var D: Classe; private var d: Sound = new D () en tant que Sound; [Embed (source = "assets / E.mp3")] private var E: Class; private var e: Sound = new E () en tant que Sound; [Embed (source = "assets / F.mp3")] private var F: Classe; private var f: Son = nouveau F () en tant que Son; [Embed (source = "assets / G.mp3")] private var G: Class; private var g: Sound = new G () en tant que Sound; private var notes: Tableau = [c, d, e, f, g, a, b] privé var noteSequence: Tableau = [f, f, f, f, f, f, f, a, d, e, f, g, g, g, g, g, e, e, d, b, a, f, d, c] private var curnote: Nombre = 0 private var noteDelay: Array = [100, 100, 300, 100, 100, 300, 100, 100, 100, 100, 200, 100, 100, 200, 90, 100, 90, 100, 100, 120, 120, 120, 120, 300] private var tunetimer: Minuterie = nouvelle Minuterie (noteDelay [0]); fonction publique Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage); fonction privée addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine (); // ajoute la fonction privée en arrière-plan addBackground (): void _background = new Background (150,150); _background.x = 5; _background.y = 5; _background.width = 570 _background.height = 350 frame_mc.addChild (_background); neige = neige fraîche (570, 350); frame_mc.addChild (neige); fonction privée startMachine (e: MouseEvent = null): void stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) autoplay_mc.addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; var i: int = 0 while (i < 7) this["key"+i].note = notes[i] i++ lowlightKeys(); private function lowlightKeys() var i:int = 0 while (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++ private function onkeyDown(e:KeyboardEvent):void var i:int=0 switch(e.keyCode) case 49: i=0 break; case 50: i=1 break; case 51: i=2 break; case 52: i=3 break; case 53: i=4 break; case 54: i=5 break; case 55: i=6 break; notes[i].play(); TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:1 ); private function onkeyUp(e:KeyboardEvent):void var i:int=0 switch(e.keyCode) case 49: i=0 break; case 50: i=1 break; case 51: i=2 break; case 52: i=3 break; case 53: i=4 break; case 54: i=5 break; case 55: i=6 break; TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); //AUTO PLAY FUNCTIONS private function startAutoPlay(e:MouseEvent = null) curnote = 0; tunetimer.delay = noteDelay[curnote] * 3 tunetimer.addEventListener(TimerEvent.TIMER, autoPlayTune) tunetimer.start() private function stopAutoPlay(e:MouseEvent = null) tunetimer.stop() tunetimer.removeEventListener(TimerEvent.TIMER, autoPlayTune) private function autoPlayTune(e:TimerEvent) if(curnote noteSequence.length) curnote = 0; stopAutoPlay ();
Étape 30: Classe d'arrière-plan
Passons maintenant à la classe d'arrière-plan. Nous allons commencer par importer ces classes…
// Bruit private var dir: tableau privé var point: point private var bd: BitmapData; private var bmp: Bitmap; private var bdmultiply: BitmapData; var privé bms: Sprite; private var rect: Rectangle private var cmf: ColorMatrixFilter; private var w: Number private var h: Number // Linéaire Dégradé Remplir private var gshape: Forme private var gmetrics: Rectangle private var gmatrix: Matrix private var var var privé: Array gratios privé var: Array // Solid Fill sshape privé var: Forme
Étape 32: Fonction initiale
Voici la fonction initiale:
fonction publique Background ($ width: Number = 100, $ height: Number = 100) w = $ width h = $ height rect = new Rectangle (0, 0, w, h); point = nouveau point (0, 0); dir = [nouveau point (1, 262), nouveau point (400, 262)]; // celui-ci est juste pour donner un fond solide à la scène entière initBackgroundSolid (); // ceci contrôlera le contraste de luminosité et la saturation du bruit initColorMatrix (); // il y aura deux arrière-plans de bruit qui les initieront initBackgroundNoise (); // un dégradé est ajouté pour que nous ne soyons pas bruyants… (l'obtenir? trop de bruit vous rend bruyant? haha… hmmm) initBackgroundGradient ();
Étape 33: initColorMatrix ()
Cette fonction contrôlera le contraste et la saturation du bruit, c'est un filtre très puissant.
fonction privée initBackgroundNoise (): void // premier bruit bd = new BitmapData (w, h, false, 0); bmp = new Bitmap (bd); bmp.smoothing = true; addChild (bmp); // deuxième bruit qui chevauche le premier bruit via un mode de fusion de superposition bdmultiply = new BitmapData (w, h, false, 0); bms = new Sprite (); bms.addChild (new Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "superposition"; // rend l'arrière-plan de sorte que le bruit semble bouger addEventListener (Event.ENTER_FRAME, renderBG);
Étape 36: Masque
Voici le masque de dégradé:
fonction privée initBackgroundGradient () // il s'agit d'un dégradé de base avec alpha et pivoté de 90 ° de sorte qu'il commence en partant du haut vers le bas au lieu de gauche-droite. gshape = new Shape (); gmetrics = new Rectangle (); gmatrix = new Matrix (); gtype = GradientType.LINEAR; gspread = SpreadMethod.PAD; ginterpolation = InterpolationMethod.LINEAR_RGB; gcolours = [0x170a02, 0x170a02]; galphas = [0, 1]; gratios = [0, 255]; gmatrix.createGradientBox (w, h (Math.PI / 180) * 90); gshape.graphics.clear (); gshape.graphics.beginGradientFill (gtype, gcolours, galphas, gratios, gmatrix, gspread, ginterpolation); gshape.graphics.drawRect (0, 0, w, h); gshape.graphics.endFill (); addChild (gshape)
Étape 37: Rendu
C'est l'heure du rendu!
fonction privée renderBG (event: Event): void // met à jour la direction de bruit dir [0] .x- = 1.5 dir [0] .y- = 0 // ceux-ci sont là pour que vous puissiez jouer avec dir [1] .x - = 0 // ceux-ci sont là pour que vous puissiez jouer avec dir [1] .y - = 0 // ils sont là pour vous que vous pouvez jouer // définit le premier bitmap d'arrière-plan pour avoir un bruit perlin bd.perlinNoise (w, h, 2, 10, false, true, 7, true, dir); // temps de coloration (jouer avec ces valeurs) bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); // applique les modifications de contraste et de saturation de luminosité effectuées précédemment bd.applyFilter (bd, rect, point, cmf) // l'autre bruit perlin bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir ) // les autres colliers de bruit perlin bdmultiply.colorTransform (rect, new ColorTransform (1, 0.6, 0.4));
Étape 38: Terminer la classe d'arrière-plan
Voici toute la classe de fond:
package import flash.display.Shape; import flash.events.Event; import flash.display.Sprite; import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BlendMode; import flash.geom.ColorTransform; import flash.geom.Rectangle; import flash.geom.Point; import flash.geom.Matrix; import flash.filters.ColorMatrixFilter; import flash.display.GradientType; import flash.display.Graphics; import flash.display.InterpolationMethod; import flash.display.SpreadMethod; Classe publique Fond étend MovieClip répertoire privé var: tableau privé point var: point privé var bd: BitmapData; private var bmp: Bitmap; private var bdmultiply: BitmapData; var privé bms: Sprite; private var rect: Rectangle private var cmf: ColorMatrixFilter; private var w: Numéro private var h: Numéro private var gshape: Forme private var gmetrics: Rectangle private var gmatrix: Matrix private var gtype: Chaîne private gspread: String privé ginterpolation: String privé var gcolours: Array privé var galphas: Array private var gratios: Tableau privé var sshape: Shape fonction publique Arrière-plan ($ width: Number = 100, $ height: Number = 100) w = $ width h = $ height rect = new Rectangle (0, 0, w, h) ; point = nouveau point (0, 0); dir = [nouveau point (1, 262), nouveau point (400, 262)]; initBackgroundSolid (); initColorMatrix (); initBackgroundNoise (); initBackgroundGradient (); fonction privée initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // rouge 0, 2, 0, 0, -20, // vert 0, 0, 2, 0 , -20, // blue 0, 0, 0, 1, -20]); // alpha fonction privée initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape) fonction privée initBackgroundNoise (): void bd = new BitmapData (w, h, false, 0); bmp = new Bitmap (bd); bmp.smoothing = true; addChild (bmp); bdmultiply = new BitmapData (w, h, false, 0); bms = new Sprite (); bms.addChild (new Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "superposition"; addEventListener (Event.ENTER_FRAME, renderBG); fonction privée initBackgroundGradient () gshape = new Shape (); gmetrics = new Rectangle (); gmatrix = new Matrix (); gtype = GradientType.LINEAR; gspread = SpreadMethod.PAD; ginterpolation = InterpolationMethod.LINEAR_RGB; gcolours = [0x170a02, 0x170a02]; galphas = [0, 1]; gratios = [0, 255]; gmatrix.createGradientBox (w, h (Math.PI / 180) * 90); gshape.graphics.clear (); gshape.graphics.beginGradientFill (gtype, gcolours, galphas, gratios, gmatrix, gspread, ginterpolation); gshape.graphics.drawRect (0, 0, w, h); gshape.graphics.endFill (); addChild (gshape) fonction privée renderBG (event: event): void dir [0] .x- = 1,5 dir [0] .y- = 0 dir [1] .x- = 0 dir [1] .y - = 0 bd.perlinNoise (w, h, 2, 10, faux, vrai, 7, vrai, dir); bd.colorTransform (rect, nouveau ColorTransform (1, 0,7, 0,5)); bd.applyFilter (bd, rect, pointe, cmf) bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir) bdmultiply.colorTransform (rect, nouveau ColorTransform (1, 0.6, 0.4)) ;
Étape 39: neige
La classe neige ne m'appartient pas, elle a été écrite par Troy Gardner, je viens de l'adapter de la chronologie à un paquet, c'est pourquoi je ne commente pas le code. Créez un "Snow.as" et copiez ce code à l'intérieur.
package import flash.display.MovieClip; import flash.events.Event; import flash.utils.Dictionary; Classe publique Snow étend MovieClip var snow flakes: Array = new Array (); var snowflakeProps: Dictionary = new Dictionary (true); var max_snowsize: Number = .04; // pixels var snowflakesCnt: Number = 150; var oheight: Nombre; var owidth: Nombre; fonction publique Snow ($ width, $ height): void owidth = $ width; oheight = $ height; // quantité pour (var i: int = 0; ihauteur + 10) dO.y = -20; if (dO.x> owidth + 20) dO.x = - (owidth / 2) + Math.random () * (1.5 * owidth); dO.y = -20; else if (dO.x<-20) dO.x= -(owidth/2)+Math.random()*(1.5*owidth); dO.y = -20;
Conclusion
Mes compétences musicales ne sont pas les meilleures, la musique peut sembler un peu étrange. Eh bien, avec ce tutoriel, vous devriez maintenant être capable de créer vos propres chansons avec plus de notes et de tonalités différentes :). J'espère que vous avez aimé ce tutoriel, vous trouverez le code commenté et les versions CS4 et CS3 dans le fichier zip. Merci d'avoir lu!
Share
Accentsconagua
