Trött på dessa gammaldags animerade julkort med jultomten skrattar, en släd som flyger i skyn med en massa träd och mousserande ljus?
I år har du ingen ursäkt. Jag ska visa dig hur man bygger ett virtuellt tangentbord som spelar Jingle Bells. Du kan till och med kunna förlänga konceptet och lägga till fler låtar och anteckningar till pianot.
För denna tut använder jag en kombination av Tweenlite, Flex SDK, Flash IDE och Flash Develop.
Steg 1: Ny fil
Starta Adobe Flash och skapa en ActionScript 3 Flash-fil.
Steg 2: Egenskaper
Öppna egenskaperna och ställ in FPS till 30 och scenstorleken till 600 x 380px.
Steg 3: Lager 1
Byt namn på lager 1 som "bakgrund" och skapa en vit rektangel på 580x360. Konvertera den till en filmklippsymbol med namnet "frame_mc" och ställ in sin position till x: 10 y: 10.
Steg 4: Drop Shadow
Lägg till ett droppskuggfilter med följande parametrar:
Steg 5: Tangentbordskikt
Lägg till ett nytt lager som heter "tangentbord", skapa en primitiv rektangel 60x190 med en 5-punkts hörnradie och utan stroke. Gör det till en filmklippssymbol och kalla den "keybase_mc".
Steg 6: Reflektion och Glödlag
Hit F8 och skapa en ny filmklipp kallad "key_mc". Skapa ytterligare två lager inuti key_mc (förutom den som redan finns med keybase_mc). Namn dem: "reflektion" och "glöd". Kopiera ramen till de nyskapade lagren.
Steg 7: glow_mc
OBS! Jag har ändrat frame_mc-färgerna ett tag så att jag kan se ändringarna på tangenterna. Välj filmklippet i glödskiktet, namnge det "glow_mc", öppna filtren och redigera dem enligt bilden nedan:
Steg 8: reflection_mc
Välj filmklippet i reflektionsskiktet, namnge det "reflection_mc", öppna filtren och redigera dem så att de matchar bilden nedan:
Steg 9: base_mc
välj nu movieclip i baslagret, namnge det "base_mc", öppna filtren och redigera dem så att de matchar bilden nedan:
Steg 10: Nyckel
Kopiera och klistra in nyckeln tills du hamnar i 7 instanser. Ordna dem jämnt över scenen.
Steg 11: Justera
Öppna justeringsverktyget och klicka på ikonen "horisontal avstånd".
Steg 12: Anteckningar
Skapa ett nytt lager, kalla det "anteckningar". Skriv sedan ner C D E F G A B På nycklarna lägger du till texten till en ny filmklipp. Öppna filmklippsfiltren och redigera dem som bilden nedan:
Steg 13: Nummer
Skapa ett nytt lager, kalla det "siffror". Skriv siffrorna från 1 till 7, detta kommer att representera de siffror som du trycker på på tangentbordet för att markera e-postnyckeln.
Steg 14: Flex SDK-sökväg
Gå till redigera> inställningar> ActionScript> ActionScript 3.0-inställningar och hitta din Flex SDK-sökväg (du behöver det här för att bädda in filer direkt via kod).
Steg 15: Flash Develop
Open Flash Develop (jag använder bara den här orsaken, jag gillar det så mycket mer än den vanliga ActionScript-editoren från flash IDE när du skriver paket) och skapar 2 tomma as3-filer. Namnge dem "Main.as" och "Background.as", spara dem i samma mapp som din .fla.
Steg 16: Dokumentklass
Inside Flash IDE set Main.as som din Dokument-klass.
Steg 17: Autoplay-knapp
Skapa en autoplay movieClip och namnge den "autoplay_mc". Det här är en autoplay-knapp.
Steg 18: Snöflingor
För att skapa några snöflingor som faller skapa en ny filmklipp, rita en liten vit cirkel inuti och lägg till en länkidentifierare för "SnowFlake".
Steg 19: Main.as
I Flash Utveckla öppna Main.as, definiera din huvudklass som utökar en filmklipp och skapa en funktion som heter Main.
Börja med att importera dessa klasser i ditt paket:
importera flash.display.MovieClip; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.events.TimerEvent; importera flash.display.StageScaleMode; importera flash.events.KeyboardEvent; importera flash.utils.Timer; importera com.greensock.TweenLite; importera com.greensock.easing. *; importera bakgrund // vi kommer att skapa en bakgrundsklass baserad på perlinbrus och en transformmatris tillsammans med några fyllda former så att vi kan ha en fin jämn övergångsimport. Snö; // Jag tog bara Kirupas snö och packade den -> http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ importera flash.media.Sound;
Steg 20: Variabler
Inne i din klass definiera dessa variabler:
// det här blir vår bakgrund privat var _background: Background; // det här blir vår snöstorm privata var snö: snö; // -> anteckningar // Om du använder detta sätt krävs FLEX SDK -> alternativ metod är att lägga till dessa ljud i ditt bibliotek och lägga till ett länk-ID för dem. [Bädda in (source = "assets / A.mp3")] privat var A: Klass; privat var a: Ljud = nytt A () som Ljud; [Bädda in (source = "assets / B.mp3")] privat var B: Klass; privat var b: Ljud = ny B () som ljud; [Bädda in (source = "assets / C.mp3")] privat var C: Klass; privat var c: Ljud = ny C () som ljud; [Bädda in (source = "assets / D.mp3")] privat var D: Klass; privat var d: Ljud = ny D () som ljud; [Bädda in (source = "assets / E.mp3")] privat var E: Klass; privat var e: Ljud = ny E () som ljud; [Bädda in (source = "assets / F.mp3")] privat var F: Klass; privat var f: Ljud = nytt F () som ljud; [Bädda in (source = "assets / G.mp3")] privat var G: Klass; privat var g: Ljud = ny G () som ljud; // Lagring av anteckningarna i en array gör det lättare att länka till de privata varnoterna för tangentbordet: Array = [c, d, e, f, g, a, b] // Obsekvens för musikens privata varnotSekvens: Array = f, f, f, f, f, a, f, g, g, g, g, e, d, b, a, f, d, c] // Aktuell anteckning som spelar privat varnäring: Nummer = 0 // Sekvens för fördröjning som musiken behöver ha mellan noterna privata 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 för att spela musiken privat var tunetimer: Timer = ny Timer (noteDelay [0]);
Steg 21: Huvud ()
Huvudfunktionen
// Huvudfunktionen väntar på att maintimeline läggs till för att publicera huvudfunktionen Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage);
Steg 22: Initiera
Efter att ha lagts till scenen initierar vi bakgrunden och det virtuella tangentbordet:
// när vi lägger till scenen kan vi ställa in ett scenskalans läge, bakgrunden och starta den virtuella piano-privata funktionen addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine ();
Steg 23: Bakgrundseffekter
Låt oss sortera ut den rörliga bakgrunden och snön:
// lägger till bakgrunden privat funktion addBackground (): void _background = new Background (150,150); // orsaken till att storleken är mindre är att den är mycket CPU-intensiv _background.x = 5; // för att ge en vit marginal för ramen _background.y = 5; _background.width = 570 // skala upp till storleken rätt storlek _background.height = 350 frame_mc.addChild (_background); // lägger till bakgrunden till ramen snö = ny snö (570, 350) // skapar en snöstormsinstans
Steg 24: Virtuell tangentbord
Initialiseringen av det virtuella tangentbordet
privat funktion startMachine (e: MouseEvent = null): void // associerar tangentbordshändelsen stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) // associerar en autoplay-metod till autoplay-knappen autoplay_mc .addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; // associerar noterna till nycklarna var i: int = 0 medan (i < 7) this["key"+i].note = notes[i] i++ //makes the highlight of the keys disappear lowlightKeys();
Steg 25: Markera
Vi måste skapa en funktion för att ta bort höjdpunkten från nycklarna:
privat funktion lowlightKeys () var i: int = 0 medan (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++
Steg 26: Viktiga händelser
Låt oss nu hantera Key Up och Key down events:
privat funktion onkeyDown (e: KeyboardEvent): void var i: int = 0 switch (e.keyCode) fall 49: // nyckelkod för 1 i = 0 break; fall 50: // nyckelkod för 2 i = 1 brytning; fall 51: // nyckelkod för 3 i = 2 brytning; fall 52: // nyckelkod för 4 i = 3 rast; fall 53: // nyckelkod för 5 i = 4 rast; fall 54: // nyckelkod för 6 i = 5 paus fall 55: // nyckelkod för 7 i = 6 brytning; noterar [i] .play (); TweenLite.to (denna ["nyckel" + i] .glow_mc, 0,5, alfa: 1); // markerar tangenten privat funktion onkeyUp (e: KeyboardEvent): void var i: int = 0 switch (e.keyCode) fall 49: i = 0 break; fall 50: i = 1 brytning; fall 51: i = 2 brytning; fall 52: i = 3 brytning; fall 53: i = 4 rast; fall 54: i = 5 brytning; fall 55: i = 6 brytning; TweenLite.to (denna ["nyckel" + i] .glow_mc, 0,5, ala: 0); // lowlights nyckeln
Steg 27: Autoplay-funktioner
Så här startar du och stoppar autoplayen
privat funktion startAutoPlay (e: MouseEvent = null) curnote = 0; // varje gång jag startar autoplay jag återställer den aktuella spelotot tunetimer.delay = noteDelay [curnote] * 3 // detta ökar fördröjningen som tidigare inställts tunetimer.addEventListener (TimerEvent.TIMER, autoPlayTune) // lägger till en lyssnare i timerhändelsen för varje gång timern utlöses tunetimer.start () // startar timer privat funktion stopAutoPlay (e: MouseEvent = null) tunetimer.stop () // stoppar timer tunetimer.removeEventListener (TimerEvent.TIMER, autoPlayTune) // tar bort händelse
Steg 28: Uppdatering
Uppdatera det virtuella tangentbordet tillsammans med musiken
privatfunktionsuppdateringMachine (): void lowlightKeys (); // återställer nycklarna höjdpunkter var i: int = 0 medan (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; // återställer nuvarande notera stopAutoPlay (); // slutar autoplay
Steg 29: Den fullständiga koden
Här är den fullständiga Main.as-koden
paket import flash.display.MovieClip; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.events.TimerEvent; importera flash.display.StageScaleMode; importera flash.events.KeyboardEvent; importera flash.utils.Timer; importera com.greensock.TweenLite; importera com.greensock.easing. *; importera bakgrund importera snö import flash.media.Sound; public class Main utökar MovieClip private var _background: Background; privat var snö: snö; [Bädda in (source = "assets / A.mp3")] privat var A: Klass; privat var a: Ljud = nytt A () som Ljud; [Bädda in (source = "assets / B.mp3")] privat var B: Klass; privat var b: Ljud = ny B () som ljud; [Bädda in (source = "assets / C.mp3")] privat var C: Klass; privat var c: Ljud = ny C () som ljud; [Bädda in (source = "assets / D.mp3")] privat var D: Klass; privat var d: Ljud = ny D () som ljud; [Bädda in (source = "assets / E.mp3")] privat var E: Klass; privat var e: Ljud = ny E () som ljud; [Bädda in (source = "assets / F.mp3")] privat var F: Klass; privat var f: Ljud = nytt F () som ljud; [Bädda in (source = "assets / G.mp3")] privat var G: Klass; privat var g: Ljud = ny G () som ljud; privata var noteringar: Array = [c, d, e, f, g, a, b] privat var noteringSekvens: Array = [f, f, f, f, f, f, G, G, G, G, G, E, E, D, B, A, F, D, C] SÄRSKILDA VARNINGAR: Antal = 0 Privat Var NoteDelay: Array = [100, 100, 300, 100, 100, 300, 100, 100, 100, 200, 90, 100, 90, 100, 120, 120, 120, 120, 120, 300] privat varningstimer: Timer = ny Timer (noteDelay [0]); allmän funktion Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage); privat funktion addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine (); // lägger till bakgrunden privat funktion addBackground (): void _background = new Background (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 (snö); privat funktion 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 jag: int = 0 medan (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 ();
Steg 30: Bakgrundsklass
Nu vidare till bakgrundsklassen. Vi börjar med att importera dessa klasser ...
// Buller privat var: Array privat var poäng: Punkt privat var bd: BitmapData; privat var bmp: Bitmap; privat var bdmultiply: BitmapData; privat var bms: Sprite; privat var rekt: Rektangel privat var cmf: ColorMatrixFilter; privat var w: Nummer 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 var gpolering: String privat var gcolours: Array privata var galphas: Array privata var gratios: Array // Solid Fill privat var sshape: Shape
Steg 32: Initial funktion
Här är den inledande funktionen:
allmän funktion Bakgrund ($ bredd: Nummer = 100, $ höjd: Nummer = 100) w = $ bredd h = $ höjd rekt = Ny rektangel (0, 0, w, h); punkt = ny punkt (0, 0); dir = [ny punkt (1, 262), ny punkt (400, 262)]; // den här är bara för att ge en solid bakgrund till hela scenen initBackgroundSolid (); // detta kommer att styra motorns kontrast och mättnad av bruset initColorMatrix (); // det kommer att finnas två buller bakgrunder detta kommer att initiera dem initBackgroundNoise (); // en gradient läggs till så att vi inte får ljudsignaler ... (få det? för mycket buller får du noiseed? haha ... hmmm) initBackgroundGradient ();
Steg 33: initColorMatrix ()
Denna funktion kommer att styra ljusets kontrast och mättnad av bruset, det är ett mycket kraftfullt filter.
privat funktion initBackgroundNoise (): void // första ljudet bd = nya BitmapData (w, h, false, 0); bmp = ny bitmapp (bd); bmp.smoothing = true; addChild (BMP); // sekundärt ljud som överlappar det första bruset genom ett överlagringsläge bdmultiply = ny BitmapData (w, h, false, 0); bms = nya Sprite (); bms.addChild (ny Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; // gör bakgrunden så att ljudet verkar flytta addEventListener (Event.ENTER_FRAME, renderBG);
Steg 36: Mask
Här är gradientmasken:
privat funktion initBackgroundGradient () // Detta är en grundläggande gradientlåda med alfa och roterad 90º så att den börjar från överst i stället för vänster-höger gshape = ny Form (); gmetrics = ny rektangel (); gmatrix = ny matris (); 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)
Steg 37: Render
Det ger tid!
privat funktion renderBG (händelse: händelse): void // uppdateringar buller riktning dir [0] .x- = 1.5 dir [0] .y- = 0 // dessa är här för att du ska spela med dir [1] .x - = 0 // dessa är här för att du ska kunna spela med dir [1] .y - = 0 // Dessa är här för att du ska spela med // definierar den första bakgrundsbitkartan för att ha ett perlinbrus bd.perlinNoise (w, h, 2, 10, false, true, 7, true, dir); // färgtid (spela med dessa värden) bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); // aplies brittthetskontrast och mättnadsändringar gjorda tidigare bd.applyFilter (bd, rekt, punkt, cmf) // det andra perlinbruset bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir ) // de andra perlin bruskollorerna bdmultiply.colorTransform (rekt, ny ColorTransform (1, 0,6, 0,4));
Steg 38: Komplett bakgrundsklass
Här är hela bakgrunden Klass:
paket import flash.display.Shape; importera flash.events.Event; importera flash.display.Sprite; importera flash.display.MovieClip; importera flash.display.Bitmap; importera flash.display.BitmapData; importera flash.display.BlendMode; importera flash.geom.ColorTransform; importera flash.geom.Rectangle; importera flash.geom.Point; importera flash.geom.Matrix; importera flash.filters.ColorMatrixFilter; importera flash.display.GradientType; importera flash.display.Graphics; importera flash.display.InterpolationMethod; importera flash.display.SpreadMethod; offentlig klass Bakgrund utökar MovieClip privat var dir: Array privat var punkt: Punkt privat var bd: BitmapData; privat var bmp: Bitmap; privat var bdmultiply: BitmapData; privat var bms: Sprite; privat var rekt: Rektangel privat var cmf: ColorMatrixFilter; privat var w: Antal privat var h: Antal privat var gshape: Privatformat för privatpersoner: Rektangel privat var gmatrix: Matrix privat var gtype: String privat var gspread: String privat varinterpolation: String privat vargcolours: Array privat var galphas: Array privata var gratios: Array privat var sshape: Form public function Bakgrund ($ bredd: Nummer = 100, $ höjd: Nummer = 100) w = $ bredd h = $ höjd rekt = ny Rektangel (0, 0, w, h) ; punkt = ny punkt (0, 0); dir = [ny punkt (1, 262), ny punkt (400, 262)]; initBackgroundSolid (); initColorMatrix (); initBackgroundNoise (); initBackgroundGradient (); privat funktion initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // röd 0, 2, 0, 0, -20, // grön 0, 0, 2, 0 , -20, // blå 0, 0, 0, 1, -20]); // alpha privat funktion initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape) privat funktion initBackgroundNoise (): void bd = new BitmapData (w, h, false, 0); bmp = ny bitmapp (bd); bmp.smoothing = true; addChild (BMP); bdmultiply = ny BitmapData (w, h, false, 0); bms = nya Sprite (); bms.addChild (ny Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; addEventListener (Event.ENTER_FRAME, renderBG); privat funktion initBackgroundGradient () gshape = new Shape (); gmetrics = ny rektangel (); gmatrix = ny matris (); 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 funktion renderBG (händelse: händelse): 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, falskt, sant, 7, sant, dir) bdmultiply.colorTransform (rekt, ny ColorTransform (1, 0.6, 0.4)) ;
Steg 39: Snö
Snöklassen är inte min, den skrevs av Troy Gardner, jag anpassade just den från tidslinjen till ett paket, det är därför jag inte kommenterar koden. Skapa en "Snow.as" och kopiera den här koden inuti.
paket import flash.display.MovieClip; importera flash.events.Event; importera flash.utils.Dictionary; offentlig klass Snö utökar MovieClip var snöflingor: Array = new Array (); var snowflakeProps: Dictionary = new Dictionary (true); var max_snowsize: Number = .04; // pixlar var snöflingorCnt: Number = 150; var oheight: Number; var owidth: Number; offentlig funktion Snö ($ bredd, $ höjd): void owidth = $ width; oheight = $ height; // kvantitet för (var i: int = 0; ioheight + 10) dO.y = -20; om (dO.x> owidth + 20) dO.x = - (owidth / 2) + Math.random () * (1,5 * owidth); dO.y = -20; annars om (dO.x<-20) dO.x= -(owidth/2)+Math.random()*(1.5*owidth); dO.y = -20;
Slutsats
Mina musikkunskaper är inte störst, musiken kanske låter lite konstig. Åh ja med den här handledningen borde du nu kunna skapa egna låtar med flera anteckningar och olika toner :). Jag hoppas att du gillade den här handledningen, hittar du kommenterad kod och både cs4 och cs3 versioner upp på zip-filen. Tack för att du läser!
Share
Accentsconagua
