Stanco di quelle cartoline di Natale animate vecchio stile con Babbo Natale che ride, una slitta che vola nel cielo con un mucchio di alberi e luci scintillanti?
Quest'anno non hai scuse. Ti mostrerò come costruire una tastiera virtuale che riproduca Jingle Bells. Sarai anche in grado di estendere il concetto e aggiungere più canzoni e note al pianoforte.
Per questo tut userò una combinazione di Tweenlite, Flex SDK, Flash IDE e Flash Develop.
Passaggio 1: nuovo file
Avvia Adobe Flash e crea un file Flash ActionScript 3.
Passaggio 2: Proprietà
Aprire le proprietà e impostare FPS su 30 e le dimensioni dello stage su 600 x 380 px.
Passaggio 3: Livello 1
Rinominare il livello 1 come "sfondo" e creare un rettangolo bianco di 580x360. Convertilo in un simbolo di Movie Clip chiamato "frame_mc" e imposta la sua posizione su x: 10 y: 10.
Step 4: Drop Shadow
Aggiungi un filtro ombra esterna con i seguenti parametri:
Passaggio 5: Livello tastiera
Aggiungi un nuovo livello chiamato "keyboard", crea un rettangolo primitivo 60x190 con un raggio di 5 pixel e senza tratti. Fallo diventare un simbolo di Movie Clip e chiamalo "keybase_mc".
Passaggio 6: livelli di riflessione e bagliore
Premi F8 e crea un nuovo Movie Clip chiamato "key_mc". Crea altri due livelli in key_mc (oltre a quello già presente con keybase_mc). Chiamali: "reflection" e "glow". Copia la cornice sui nuovi livelli creati.
Passaggio 7: glow_mc
NOTA: ho modificato i colori frame_mc per un po 'per permettermi di vedere le modifiche sui tasti. Seleziona il Movie Clip nel livello glow, chiamalo "glow_mc", apri i filtri e modificali secondo l'immagine qui sotto:
Passaggio 8: reflection_mc
Seleziona il Movie Clip nel livello di riflessione, chiamalo "reflection_mc", apri i filtri e modificali in modo che corrispondano all'immagine seguente:
Passaggio 9: base_mc
ora seleziona il Movie Clip nel livello base, chiamalo "base_mc", apri i filtri e modificali per abbinarli all'immagine seguente:
Passaggio 10: chiave
Copia e incolla la chiave fino alla fine con 7 istanze. Organizzali uniformemente sul palco.
Step 11: allinea
Apri lo strumento allinea e fai clic sull'icona "spaziatura orizzontale".
Passaggio 12: note
Crea un nuovo livello, chiamalo "note". Quindi scrivi C D E F G A B sulle chiavi aggiungi il testo a un nuovo Movie Clip. Apri i filtri Movie Clip e modificali come nell'immagine qui sotto:
Step 13: Numeri
Crea un nuovo livello, chiamalo "numeri". Scrivi i numeri da 1 a 7, questo rappresenterà i numeri che verranno premuti sulla tastiera per evidenziare il tasto ecard.
Passaggio 14: percorso Flex SDK
Vai a modifica> preferenze> ActionScript> impostazioni di ActionScript 3.0 e individua il tuo percorso Flex SDK (ti servirà per incorporare i file direttamente attraverso il codice).
Passaggio 15: Sviluppo Flash
Apri Flash Develop (sto solo usando questa causa mi piace molto più del solito editor ActionScript dall'IDE flash quando si scrivono pacchetti) e creo 2 file as3 vuoti. Chiamali "Main.as" e "Background.as", salvali nella stessa cartella di .fla.
Passaggio 16: Classe documento
Dentro Flash IDE imposta Main.as come classe del documento.
Passaggio 17: pulsante di riproduzione automatica
Crea un filmato autoplay clip e chiamalo "autoplay_mc". Questo sarà un pulsante autoplay.
Passaggio 18: fiocchi di neve
Per creare alcuni fiocchi di neve che cadono crea un nuovo Movie Clip, disegna un piccolo cerchio bianco all'interno e aggiungi un identificatore di leveraggio di "SnowFlake".
Passaggio 19: Main.as
In Flash Develop apri Main.as, definisci la tua classe Main estendendo un Movie Clip e crea una funzione chiamata Main.
Inizia importando queste classi all'interno del tuo pacchetto:
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; import com.greensock.TweenLite; import com.greensock.easing. *; importare sfondo; // creeremo una classe di background basata su rumore perlin e una matrice di trasformazione insieme ad alcune forme riempite in modo da poter avere una transizione graduale e piacevole con l'importazione di Snow; // ho appena afferrato la neve kirupas e l'ho confezionata -> http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ import flash.media.Sound;
Passaggio 20: variabili
All'interno della tua classe definisci queste variabili:
// questo sarà il nostro background private var _background: Background; // questa sarà la nostra tempesta di neve private var snow: Snow; // -> note // L'incorporamento in questo modo richiede FLEX SDK -> metodo alternativo è quello di aggiungere questi suoni alla tua libreria e aggiungere un ID di collegamento a loro. [Incorpora (source = "assets / A.mp3")] private var A: Class; private var a: Sound = new A () come Sound; [Incorpora (source = "assets / B.mp3")] private var B: Class; private var b: Sound = new B () come Sound; [Incorpora (source = "assets / C.mp3")] private var C: Class; private var c: Sound = new C () come Sound; [Incorpora (source = "assets / D.mp3")] private var D: Class; private var d: Sound = new D () come Sound; [Incorpora (source = "assets / E.mp3")] private var E: Class; private var e: Sound = new E () come Sound; [Incorpora (source = "assets / F.mp3")] private var F: Class; private var f: Sound = new F () come Sound; [Incorpora (source = "assets / G.mp3")] private var G: Class; private var g: Sound = new G () come Sound; // Se si memorizzano le note in un array, sarà più facile collegare alla tastiera le note private var: Array = [c, d, e, f, g, a, b] // Sequenza di note per la musica privata var noteSequenza: Array = [f, f, f, f, f, f, f, a, d, e, f, g, g, g, g, g, e, e, d, b, a, f, d, c] // Nota corrente che sta suonando private var curnote: Number = 0 // Sequenza di ritardo che la musica deve avere tra le note 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] // Timer per riprodurre il sintetizzatore musicale privato var: Timer = new Timer (noteDelay [0]);
Passaggio 21: Principale ()
La funzione principale
// La funzione principale attende che il maintimeline venga aggiunto alla funzione pubblica stage Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage);
Passaggio 22: Inizializza
Dopo essere stati aggiunti allo stage inizializzeremo lo sfondo e la tastiera virtuale:
// quando aggiunto allo stage possiamo impostare una modalità di scala dello stage, lo sfondo e l'avvio della funzione privata del pianoforte virtuale addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine ();
Passo 23: Effetti di sfondo
Cerchiamo di risolvere lo sfondo in movimento e la neve:
// aggiunge la funzione privata di background addBackground (): void _background = new Background (150,150); // il motivo per cui la dimensione è minore è perché è molto intenso per la CPU _background.x = 5; // per dare un margine bianco per il frame _background.y = 5; _background.width = 570 // ridimensiona alla dimensione giusta dimensione _background.height = 350 frame_mc.addChild (_background); // aggiunge lo sfondo al fotogramma neve = new Snow (570, 350) // crea un'istanza di tempesta di neve
Passaggio 24: tastiera virtuale
L'inizializzazione della tastiera virtuale
funzione privata startMachine (e: MouseEvent = null): void // associa gli eventi della tastiera stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) // associa un metodo autoplay al pulsante autoplay autoplay_mc .addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; // associa le note alle chiavi var i: int = 0 while (i < 7) this["key"+i].note = notes[i] i++ //makes the highlight of the keys disappear lowlightKeys();
Passaggio 25: evidenzia
Abbiamo bisogno di creare una funzione per rimuovere l'evidenziazione dai tasti:
funzione privata lowlightKeys () var i: int = 0 while (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++
Passaggio 26: Eventi chiave
Ora gestiamo gli eventi Key up e Key down:
funzione privata onkeyDown (e: KeyboardEvent): void var i: int = 0 switch (e.keyCode) caso 49: // keycode per 1 i = 0 break; caso 50: // keycode per 2 i = 1 interruzione; caso 51: // keycode per 3 i = 2 interruzione; caso 52: // keycode per 4 i = 3 interruzione; caso 53: // keycode per 5 i = 4 interruzione; caso 54: // keycode per 6 i = 5 interruzione; caso 55: // keycode per 7 i = 6 interruzione; note [i] .play (); TweenLite.to (questo ["tasto" + i] .glow_mc, 0,5, alpha: 1); // evidenzia la chiave funzione privata onkeyUp (e: KeyboardEvent): void var i: int = 0 switch (e.keyCode) case 49: i = 0 break; caso 50: i = 1 interruzione; caso 51: i = 2 interruzione; caso 52: i = 3 interruzione; caso 53: i = 4 interruzione; caso 54: i = 5 interruzione; caso 55: i = 6 pausa; TweenLite.to (questo ["tasto" + i] .glow_mc, 0.5, alpha: 0); // mette in evidenza la chiave
Passaggio 27: funzioni di riproduzione automatica
Come avviare e interrompere la riproduzione automatica
funzione privata startAutoPlay (e: MouseEvent = null) curnote = 0; // ogni volta che inizio la riproduzione automatica reimpostare la nota di riproduzione corrente tunetimer.delay = noteDelay [curnote] * 3 // aumenta il ritardo impostato in precedenza tunetimer.addEventListener (TimerEvent.TIMER, autoPlayTune) // aggiunge un listener all'evento timer per ogni volta che viene attivato il timer tunetimer.start () // avvia il timer funzione privata stopAutoPlay (e: MouseEvent = null) tunetimer.stop () // interrompe il timer tunetimer.removeEventListener (TimerEvent.TIMER, autoPlayTune) // rimuove il timer evento
Passaggio 28: aggiornamento
Aggiornamento della tastiera virtuale insieme alla musica
funzione privata updateMachine (): void lowlightKeys (); // ripristina le chiavi evidenzia 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; // ripristina la nota corrente stopAutoPlay (); // interrompe la riproduzione automatica
Passaggio 29: Il codice completo
Ecco il codice Main.as completo
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; import com.greensock.TweenLite; import com.greensock.easing. *; importare sfondo; import Snow import flash.media.Sound; public class Main estende MovieClip private var _background: Background; neve privata var: neve; [Incorpora (source = "assets / A.mp3")] private var A: Class; private var a: Sound = new A () come Sound; [Incorpora (source = "assets / B.mp3")] private var B: Class; private var b: Sound = new B () come Sound; [Incorpora (source = "assets / C.mp3")] private var C: Class; private var c: Sound = new C () come Sound; [Incorpora (source = "assets / D.mp3")] private var D: Class; private var d: Sound = new D () come Sound; [Incorpora (source = "assets / E.mp3")] private var E: Class; private var e: Sound = new E () come Sound; [Incorpora (source = "assets / F.mp3")] private var F: Class; private var f: Sound = new F () come Sound; [Incorpora (source = "assets / G.mp3")] private var G: Class; private var g: Sound = new G () come Sound; note private var: Array = [c, d, e, f, g, a, b] private var noteSequence: Array = [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: Number = 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 tun tunimimer: Timer = new Timer (noteDelay [0]); funzione pubblica Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage); Funzione privata addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine (); // aggiunge la funzione privata di background addBackground (): void _background = new Background (150,150); _background.x = 5; _background.y = 5; _background.width = 570 _background.height = 350 frame_mc.addChild (_background); neve = nuova neve (570, 350); frame_mc.addChild (neve); funzione privata 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 ();
Passaggio 30: Classe di sfondo
Ora sulla classe di sfondo. Inizieremo importando queste classi ...
// Rumore private var dir: Array private var point: Point private var bd: BitmapData; private var bmp: Bitmap; private var bdmultiply: BitmapData; private var bms: Sprite; private var rect: Rectangle private var cmf: ColorMatrixFilter; private var w: Number private var h: Number // Linear Gradient Fill private var gshape: Shape private var gmetrics: Rectangle private var gmatrix: private var gtype: String private var gspread: String private var ginterpolation: String private var gcolours: Array private var galphas: Array private var gratios: Array // Solid Fill private var sshape: Shape
Passaggio 32: Funzione iniziale
Ecco la funzione iniziale:
funzione pubblica Background ($ width: Number = 100, $ height: Number = 100) w = $ width h = $ height rect = new Rectangle (0, 0, w, h); point = new Point (0, 0); dir = [nuovo punto (1, 262), nuovo punto (400, 262)]; // questo è solo per dare un solido background all'intero stage initBackgroundSolid (); // questo controllerà il contrasto e la saturazione del rumore initColorMatrix (); // ci saranno due sfondi di rumore che li avvieranno initBackgroundNoise (); // viene aggiunto un gradiente, quindi non ci sentiamo rumorosi ... (ottieni? troppo rumore ti fa rumore? haha ... hmmm) initBackgroundGradient ();
Passaggio 33: initColorMatrix ()
Questa funzione controllerà il contrasto e la saturazione del rumore, è un filtro molto potente.
funzione privata initBackgroundNoise (): void // first noise bd = new BitmapData (w, h, false, 0); bmp = new Bitmap (bd); bmp.smoothing = true; addChild (BMP); // secondo rumore che si sovrappone al primo rumore attraverso una modalità di fusione sovrapposta bdmultiply = new BitmapData (w, h, false, 0); bms = new Sprite (); bms.addChild (new Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; // rende lo sfondo in modo che il rumore sembra muoversi addEventListener (Event.ENTER_FRAME, renderBG);
Passaggio 36: Maschera
Ecco la maschera gradiente:
funzione privata initBackgroundGradient () // questa è una casella sfumatura di base con alfa e ruotata di 90 ° in modo che inizi dall'alto in basso anziché da sinistra a destra 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)
Passaggio 37: Rendering
È tempo di rendering!
private function renderBG (event: Event): void // aggiorna noise direction dir [0] .x- = 1.5 dir [0] .y- = 0 // questi sono qui per giocare con dir [1] .x - = 0 // questi sono qui per voi per giocare con dir [1] .y - = 0 // questi sono qui per voi per giocare con // definisce la prima bitmap di sfondo per avere un rumore perlin bd.perlinNoise (w, h, 2, 10, false, true, 7, true, dir); // tempo di colorazione (gioca con questi valori) bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); // applica le modifiche al contrasto e alla saturazione fatte in precedenza bd.applyFilter (bd, rect, point, cmf) // l'altro perlin noise bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir // l'altro perlin noise collors bdmultiply.colorTransform (rect, new ColorTransform (1, 0.6, 0.4));
Passaggio 38: completa la classe in background
Ecco l'intero background Class:
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; public class Background estende MovieClip private var dir: Array private var point: Point private var bd: BitmapData; private var bmp: Bitmap; private var bdmultiply: BitmapData; private var bms: Sprite; private var rect: Rectangle private var cmf: ColorMatrixFilter; private var: Number private var h: Number private var gshape: Shape private var gmetrics: Rectangle private var gmatrix: Matrix private var gtype: String private var gspread: String private var ginterpolation: String private var gcolours: Array private var galphas: Array private var gratios: Array private var sshape: forma public function Background ($ width: Number = 100, $ height: Number = 100) w = $ width h = $ height rect = new Rectangle (0, 0, w, h) ; point = new Point (0, 0); dir = [nuovo punto (1, 262), nuovo punto (400, 262)]; initBackgroundSolid (); initColorMatrix (); initBackgroundNoise (); initBackgroundGradient (); funzione privata initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // rosso 0, 2, 0, 0, -20, // verde 0, 0, 2, 0 , -20, // blue 0, 0, 0, 1, -20]); // alpha funzione privata initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape) funzione privata 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 = "overlay"; addEventListener (Event.ENTER_FRAME, renderBG); funzione privata 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) private function 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, false, true, 7, true, dir); bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); bd.applyFilter (bd, rect, point, cmf) bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir) bdmultiply.colorTransform (rect, new ColorTransform (1, 0,6, 0,4)) ;
Passo 39: neve
La lezione sulla neve non è mia, è stata scritta da Troy Gardner, l'ho appena adattata dalla timeline ad un pacchetto, ecco perché non sto commentando il codice. Crea un "Snow.as" e copia questo codice all'interno.
package import flash.display.MovieClip; import flash.events.Event; import flash.utils.Dictionary; public class Snow estende MovieClip var snowflakes: Array = new Array (); var snowflakeProps: Dictionary = new Dictionary (true); var max_snowsize: Number = .04; // pixels var snowflakesCnt: Number = 150; var oheight: Number; var owidth: Number; funzione pubblica Snow ($ width, $ height): void owidth = $ width; oheight = $ height; // quantity for (var i: int = 0; ioheight + 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;
Conclusione
Le mie capacità musicali non sono le migliori, la musica può sembrare un po 'strana. Oh bene, con questo tutorial ora dovresti essere in grado di creare le tue canzoni con più note e toni diversi :). Spero che questo tutorial ti sia piaciuto, troverai il codice commentato e entrambe le versioni cs4 e cs3 sul file zip. Grazie per aver letto!
Share
Accentsconagua
