Lei av de gammeldags animerte julekortene med julemannen, ler, en sleigh som flyr i himmelen med en haug med trær og glitrende lys?
I år har du ingen unnskyldning. Jeg skal vise deg hvordan du bygger et virtuelt tastatur som spiller Jingle Bells. Du kan til og med kunne forlenge konseptet og legge til flere sanger og notater til pianoet.
For denne tuten bruker jeg en kombinasjon av Tweenlite, Flex SDK, Flash IDE og Flash Develop.
Trinn 1: Ny fil
Start Adobe Flash og opprett en ActionScript 3 Flash-fil.
Trinn 2: Egenskaper
Åpne egenskapene og sett FPS til 30 og scenestørrelsen til 600 x 380px.
Trinn 3: Lag 1
Gi nytt navn til lag 1 som "bakgrunn" og opprett et hvitt rektangel på 580x360. Konverter den til et filmklippsymbol kalt "frame_mc" og sett posisjonen til x: 10 y: 10.
Trinn 4: Drop Shadow
Legg til et dråpeskyggefilter med følgende parametere:
Trinn 5: Tastaturlag
Legg til et nytt lag kalt "tastatur", opprett et primitivt rektangel 60x190 med en radius på 5 piksler og uten strekk. Gjør det til et movieclip-symbol og kaller det "keybase_mc".
Trinn 6: Refleksjon og glødlag
Hit F8 og opprett en ny filmklip kalt "key_mc". Lag to flere lag inni key_mc (foruten den som allerede er presentert med keybase_mc). Gi dem navn: "refleksjon" og "glød". Kopier rammen til de nyopprettede lagene.
Trinn 7: glow_mc
MERK: Jeg har endret frame_mc-fargene en stund, slik at jeg kan se endringene på tastene. Velg filmklippet i glødelaget, navnet "glow_mc", åpne filtrene og rediger dem i henhold til bildet nedenfor:
Trinn 8: refleksjon_mc
Velg filmklippet i refleksjonslaget, navnet "reflection_mc", åpne filtrene og rediger dem for å matche bildet nedenfor:
Trinn 9: base_mc
velg nå filmklippet i grunnlaget, betegner det "base_mc", åpne filtrene og rediger dem for å matche bildet nedenfor:
Trinn 10: Nøkkel
Kopier og lim inn nøkkelen til du ender opp med 7 tilfeller. Ordne dem jevnt over scenen.
Trinn 11: Juster
Åpne justeringsverktøyet og klikk på ikonet "horisontal mellomrom".
Trinn 12: Notater
Lag et nytt lag, ring det "notater". Skriv deretter ned C D E F G A B På tasten legges teksten til en ny filmklipp. Åpne filmklippsfiltre og rediger dem som bildet nedenfor:
Trinn 13: Tall
Lag et nytt lag, kaller det "tall". Skriv tallene fra 1 til 7, dette vil representere tallene du vil trykke på tastaturet for å gjøre e-kortnøkkelen høydepunkt.
Trinn 14: Flex SDK-sti
Gå til rediger> innstillinger> ActionScript> ActionScript 3.0-innstillinger og finn Flex SDK-banen din (du trenger dette for å legge inn filer direkte gjennom koden).
Trinn 15: Flash Utvikle
Open Flash Develop (jeg bruker bare denne årsaken, jeg liker det så mye mer enn den vanlige ActionScript-editoren fra flash IDE når du skriver pakker) og lager 2 tomme as3-filer. Gi dem navnet "Main.as" og "Background.as", lagre dem i samme mappe som .fla.
Trinn 16: Dokumentklasse
Innvendig Flash IDE sett Main.as som dokumentklassen.
Trinn 17: Autoplay-knapp
Lag en autoplay movieClip og navnet den "autoplay_mc". Dette vil være en autoplay-knapp.
Trinn 18: Snøflak
For å lage noen snøflak faller, opprett en ny filmklipp, tegne en liten hvit sirkel inni og legg til en koblingsidentifikator for "SnowFlake".
Trinn 19: Main.as
I Flash Utvikle åpne Main.as, definer hovedklassen din og utvide en movieclip og opprett en funksjon som heter Main.
Begynn med å importere disse klassene i pakken din:
importer flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.events.TimerEvent; importer flash.display.StageScaleMode; importer flash.events.KeyboardEvent; importere flash.utils.Timer; importer com.greensock.TweenLite; importer com.greensock.easing. *; importere bakgrunn // vi vil lage en bakgrunnsklasse basert på perlin støy og en transformasjonsmatrise sammen med noen fylte former slik at vi kan få en fin jevn overgang import Snø; // Jeg tok bare kirupas snø og pakket det -> http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ import flash.media.Sound;
Trinn 20: Variabler
Inne i klassen din definerer disse variablene:
// dette vil være vår bakgrunn private var _background: Bakgrunn; // dette blir vår snøstorm private var snø: snø; // -> notater // Ved å bruke denne måten krever FLEX SDK -> alternativ metode er å legge disse lydene til biblioteket ditt og legge til en koblings-ID for dem. [Embed (source = "assets / A.mp3")] private var A: Klasse; privat var a: Lyd = nytt A () som lyd; [Embed (source = "assets / B.mp3")] privat var B: Klasse; privat var b: lyd = ny B () som lyd; [Embed (source = "assets / C.mp3")] privat var C: Klasse; privat var c: Lyd = nytt C () som lyd; [Embed (source = "assets / D.mp3")] privat var D: klasse; privat var d: lyd = ny D () som lyd; [Embed (source = "assets / E.mp3")] privat var E: Klasse; privat var e: lyd = ny e () som lyd; [Embed (source = "assets / F.mp3")] private var F: Klasse; privat var f: lyd = ny F () som lyd; [Embed (source = "assets / G.mp3")] privat var G: Klasse; privat var g: Lyd = nytt G () som lyd; // Lagring av notatene i en matrise gjør det enklere å koble til tastaturet private var notater: Array = [c, d, e, f, g, a, b] // Merkesekvens for musikken privat var notatSekvens: Array = f, f, f, f, f, a, d, e, f, g, g, g, e, d, b, a, d, c] // Nåværende notat som spiller privat var curnote: Nummer = 0 // Sekvens av forsinkelse som musikken må ha mellom notatene 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 for å spille av musikk privat var tunetimer: Timer = ny Timer (noteDelay [0]);
Trinn 21: Main ()
Hovedfunksjonen
// Hovedfunksjonen venter på at maintimeline skal legges til scenen offentlig funksjon Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage);
Trinn 22: Initialiser
Etter å ha blitt lagt til scenen, vil vi initialisere bakgrunnen og det virtuelle tastaturet:
// når vi legges til scenen kan vi sette en scenemodus, bakgrunnen og starte den virtuelle piano-private funksjonen addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine ();
Trinn 23: Bakgrunnseffekter
La oss sortere ut den bevegelige bakgrunnen og snøen:
// legger til bakgrunnen privat funksjon addBackground (): void _background = ny bakgrunn (150,150); // grunnen til at størrelsen er mindre er fordi den er veldig CPU-intensiv _background.x = 5; // for å gi en hvit margin for rammen _background.y = 5; _background.width = 570 // skala det opp til størrelsen riktig størrelse _background.height = 350 frame_mc.addChild (_background); // legger til bakgrunnen til rammen snø = ny snø (570, 350) // skaper en snø storm forekomst
Trinn 24: Virtuelt tastatur
Initialiseringen av det virtuelle tastaturet
privat funksjon startMachine (e: MouseEvent = null): void // forbinder tastatur hendelser stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) // knytter en autoplay-metode til autoplay-knappen autoplay_mc .addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; // forbinder notatene til tastene var jeg: int = 0 mens (i < 7) this["key"+i].note = notes[i] i++ //makes the highlight of the keys disappear lowlightKeys();
Trinn 25: Marker
Vi må opprette en funksjon for å fjerne høydepunktet fra tastene:
privat funksjon lowlightKeys () var i: int = 0 mens (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++
Trinn 26: Nøkkelhendelser
La oss nå håndtere Nøkkel opp og Nøkkelhendelser:
privat funksjon onkeyDown (e: KeyboardEvent): void var i: int = 0 bryter (e.keyCode) tilfelle 49: // nøkkelkode for 1 i = 0 break; tilfelle 50: // nøkkelkode for 2 i = 1 pause; sak 51: // nøkkelkode for 3 i = 2 pause; tilfelle 52: // nøkkelkode for 4 i = 3 pause; sak 53: // nøkkelkode for 5 i = 4 pause; sak 54: // nøkkelkode for 6 i = 5 pause; sak 55: // nøkkelkode for 7 i = 6 pause; notater [i] .play (); TweenLite.to (denne ["nøkkelen" + i] .glow_mc, 0,5, ala: 1); // fremhever nøkkelen privat funksjon onkeyUp (e: KeyboardEvent): void var i: int = 0 bryter (e.keyCode) tilfelle 49: i = 0 break; tilfelle 50: i = 1 pause; sak 51: i = 2 pause; sak 52: i = 3 pause; sak 53: i = 4 pause; sak 54: i = 5 pause; sak 55: i = 6 pause; TweenLite.to (denne ["tasten" + i] .glow_mc, 0,5, ala: 0); // lowlights nøkkelen
Trinn 27: Autoplay-funksjoner
Hvordan starte og stoppe autoplay
privat funksjon startAutoPlay (e: MouseEvent = null) curnote = 0; // hver gang jeg starter autoplay, tilbakestiller jeg den nåværende spille notatet tunetimer.delay = notatDelay [curnote] * 3 // dette øker forsinkelsen sett tidligere tunetimer.addEventListener (TimerEvent.TIMER, autoPlayTune) // legger til en lytter til timeren hendelsen for hver gang timeren blir utløst tunetimer.start () // starter timeren privat funksjon stopAutoPlay (e: MouseEvent = null) tunetimer.stop () // stopper timeren tunetimer.removeEventListener (TimerEvent.TIMER, autoPlayTune) // fjerner begivenhet
Trinn 28: Oppdatering
Oppdaterer det virtuelle tastaturet sammen med musikken
privat funksjon oppdateringMachine (): void lowlightKeys (); // tilbakestiller nøklene høydepunktene var jeg: int = 0 mens (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; // tilbakestiller nåværende notat stopAutoPlay (); // stopper autoplay
Trinn 29: Den fullstendige koden
Her er den fulle Main.as-koden
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.events.TimerEvent; importer flash.display.StageScaleMode; importer flash.events.KeyboardEvent; importere flash.utils.Timer; importer com.greensock.TweenLite; importer com.greensock.easing. *; importere bakgrunn Import Snø import flash.media.Sound; offentlig klasse Main utvider MovieClip private var _background: Background; privat var snø: snø; [Embed (source = "assets / A.mp3")] private var A: Klasse; privat var a: Lyd = nytt A () som lyd; [Embed (source = "assets / B.mp3")] privat var B: Klasse; privat var b: lyd = ny B () som lyd; [Embed (source = "assets / C.mp3")] privat var C: Klasse; privat var c: Lyd = nytt C () som lyd; [Embed (source = "assets / D.mp3")] privat var D: klasse; privat var d: lyd = ny D () som lyd; [Embed (source = "assets / E.mp3")] privat var E: Klasse; privat var e: lyd = ny e () som lyd; [Embed (source = "assets / F.mp3")] private var F: Klasse; privat var f: lyd = ny F () som lyd; [Embed (source = "assets / G.mp3")] privat var G: Klasse; privat var g: Lyd = nytt G () som lyd; private var notater: Array = [c, d, e, f, g, a, b] privat var notatSekvens: Array = F, F, F, F, F, F, A, D, E, F, g, g, g, g, g, e, e, d, b, a, f, d, c] privat varenummer: Nummer = 0 privat var noteDelay: Array = [100, 100, 300, 100, 100, 300, 100, 100, 100, 100, 200, 90, 100, 90, 100, 120, 120, 120, 120, 120, 300] privatvaretimer: Timer = ny Timer (noteDelay [0]); offentlig funksjon Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage); privat funksjon addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine (); // legger til bakgrunnen privat funksjon addBackground (): void _background = ny bakgrunn (150,150); _background.x = 5; _background.y = 5; _background.width = 570 _background.height = 350 frame_mc.addChild (_background); snø = ny snø (570, 350); frame_mc.addChild (sne); Private funksjon 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 jeg: int = 0 mens (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 ();
Trinn 30: Bakgrunnsklasse
Nå videre til bakgrunnsklassen. Vi begynner med å importere disse klassene ...
// Noise privat var dir: Array privat var poeng: Punkt privat var bd: BitmapData; privat var bmp: Bitmap; privat var bdmultiply: BitmapData; private var bms: Sprite; privat var rekt: Rektangel privat var cmf: ColorMatrixFilter; privat var w: Antall privat var h: Nummer // Linjær gradient Fyll privat var gshape: Form privat var gmetrics: Rektangel privat var gmatrix: Matrix privat var gtype: String privat var gspread: String privat varegruppering: String private varegrupper: Array private varegrupper: Array private var gratios: Array // Solid Fill private var sshape: Shape
Trinn 32: Innledende funksjon
Her er den første funksjonen:
offentlig funksjon Bakgrunn ($ bredde: tall = 100, $ høyde: tall = 100) w = $ bredde h = $ høyde rekt = nytt rektangel (0, 0, w, h); punkt = nytt punkt (0, 0); dir = [nytt punkt (1, 262), nytt punkt (400, 262)]; // denne er bare for å gi en solid bakgrunn til hele scenen initBackgroundSolid (); // dette vil kontrollere bightness kontrast og metning av støy initColorMatrix (); // det kommer to støy bakgrunner dette vil initiere dem initBackgroundNoise (); // en gradient er lagt til, slik at vi ikke får noisiated ... (få det? for mye støy blir du noisiated? haha ... hmmm) initBackgroundGradient ();
Trinn 33: initColorMatrix ()
Denne funksjonen styrer kontrasten og motstanden til støynivået, det er et veldig kraftig filter.
privat funksjon initBackgroundNoise (): void // første støy bd = ny BitmapData (w, h, false, 0); bmp = ny Bitmap (bd); bmp.smoothing = true; addChild (BMP); // andre støy som overlapper den første støyen via en overlay-blendmodus bdmultiply = ny BitmapData (w, h, false, 0); bms = ny Sprite (); bms.addChild (ny Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; // gjør bakgrunnen slik at støyen ser ut til å flytte addEventListener (Event.ENTER_FRAME, renderBG);
Trinn 36: Mask
Her er gradientmasken:
privat funksjon initBackgroundGradient () // dette er en grunnleggende gradient boks med alfa og rotert 90º slik at den starter fra toppbunn i stedet for venstre-høyre gshape = ny form (); gmetrics = ny rektangel (); gmatrix = ny matrise (); 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)
Trinn 37: Render
Det gir tid!
private funksjon renderBG (event: Event): void // oppdateringer støy retning dir [0] .x- = 1.5 dir [0] .y- = 0 // disse er her for deg å spille med dir [1] .x - = 0 // disse er her for deg å leke med dir [1] .y - = 0 // disse er her for deg å spille med // definerer den første bakgrunnsbitekartet for å ha en perlin støy bd.perlinNoise (w, h, 2, 10, false, true, 7, true, dir); // fargetid (spill med disse verdiene) bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); // aplies bretthetskontrast og metningsmodifikasjoner gjort tidligere bd.applyFilter (bd, rekt, punkt, cmf) // den andre perlin-støyen bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir ) // de andre perlin støykollorene bdmultiply.colorTransform (rect, new ColorTransform (1, 0,6, 0.4));
Trinn 38: Komplett bakgrunnsklasse
Her er hele bakgrunnen Klasse:
pakke import flash.display.Shape; importere flash.events.Event; importer flash.display.Sprite; importer flash.display.MovieClip; importer flash.display.Bitmap; importer flash.display.BitmapData; importer flash.display.BlendMode; importer flash.geom.ColorTransform; importer flash.geom.Rectangle; importer flash.geom.Point; importer flash.geom.Matrix; importer flash.filters.ColorMatrixFilter; importer flash.display.GradientType; importer flash.display.Graphics; importer flash.display.InterpolationMethod; importer flash.display.SpreadMethod; offentlig klasse Bakgrunnen utvider MovieClip privat var dir: Array privat var poeng: Punkt privat var bd: BitmapData; privat var bmp: Bitmap; privat var bdmultiply: BitmapData; private var bms: Sprite; privat var rekt: Rektangel privat var cmf: ColorMatrixFilter; Privat var w: Antall privat var h: Antall privat varegruppe: Form private varegrupper: Rektangel privat varegruppe: Matrise privat varegype: String privat varegruppe: String privat varegruppering: String privat varegrupper: Array privat varegruppe: Array private varegratier: Array private var sshape: Form offentlig funksjon Bakgrunn ($ bredde: Nummer = 100, $ høyde: Nummer = 100) w = $ bredde h = $ høyde rekt = nytt Rektangel (0, 0, w, h) ; punkt = nytt punkt (0, 0); dir = [nytt punkt (1, 262), nytt punkt (400, 262)]; initBackgroundSolid (); initColorMatrix (); initBackgroundNoise (); initBackgroundGradient (); privat funksjon initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // rød 0, 2, 0, 0, -20, // grønn 0, 0, 2, 0 , -20, // blå 0, 0, 0, 1, -20]); // alpha privat funksjon initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape) privat funksjon initBackgroundNoise (): void bd = ny BitmapData (w, h, false, 0); bmp = ny Bitmap (bd); bmp.smoothing = true; addChild (BMP); bdmultiply = ny BitmapData (w, h, false, 0); bms = ny Sprite (); bms.addChild (ny Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; addEventListener (Event.ENTER_FRAME, renderBG); privat funksjon initBackgroundGradient () gshape = new Shape (); gmetrics = ny rektangel (); gmatrix = ny matrise (); 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) privat funksjon renderBG (hendelse: hendelse): 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 (rekt, ny ColorTransform (1, 0.7, 0.5)); bd.applyFilter (bd, rekt, punkt, cmf) bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir) bdmultiply.colorTransform (rett, ny ColorTransform (1, 0.6, 0.4)) ;
Trinn 39: Snø
Snøklassen er ikke min, den ble skrevet av Troy Gardner, jeg justerte den fra tidslinjen til en pakke, derfor er jeg ikke kommenterer koden. Lag en "Snow.as" og kopier denne koden innvendig.
pakke import flash.display.MovieClip; importere flash.events.Event; importere flash.utils.Dictionary; offentlig klasse Snø utvider MovieClip var snowflakes: Array = new Array (); var snowflakeProps: Dictionary = new Dictionary (true); var max_snowsize: Nummer = .04; // piksler var snøfingerCnt: tall = 150; var oheight: Number; var owidth: tall; offentlig funksjon Snø ($ bredde, $ høyde): void owidth = $ width; oheight = $ høyde; // kvantitet for (var i: int = 0; ioheight + 10) dO.y = -20; hvis (dO.x> owidth + 20) dO.x = - (owidth / 2) + Math.random () * (1,5 * owidth); dO.y = -20; ellers hvis (dO.x<-20) dO.x= -(owidth/2)+Math.random()*(1.5*owidth); dO.y = -20;
Konklusjon
Musikkfagene mine er ikke de største, musikken kan høres litt rart ut. Nå, med denne opplæringen bør du nå kunne lage dine egne sanger med flere notater og forskjellige toner :). Jeg håper du likte denne opplæringen, finner du kommentert kode og både cs4 og cs3 versjoner opp på zip-filen. Takk for at du leste!
Share
Accentsconagua
