Obosit de acele cărți de Craciun animate de modă veche, cu râsul lui Moș Crăciun, o sanie care zboară în cer cu o grămadă de copaci și lumini strălucitoare?
În acest an nu aveți nici o scuză. Îți voi arăta cum să construiești o tastatură virtuală care să joace Jingle Bells. Veți putea chiar să extindeți conceptul și să adăugați mai multe melodii și note la pian.
Pentru acest tut va fi o combinație de Tweenlite, Flex SDK, Flash IDE și Flash Develop.
Pasul 1: Fișier nou
Porniți Adobe Flash și creați un fișier Flash ActionScript 3.
Pasul 2: Proprietăți
Deschideți proprietățile și setați FPS la 30 și dimensiunea scenei la 600 x 380px.
Pasul 3: Stratul 1
Redenumiți stratul 1 ca "fundal" și creați un dreptunghi alb de 580x360. Conversați-l într-un simbol movieclip numit "frame_mc" și setați poziția lui la x: 10 y: 10.
Pasul 4: Drop Shadow
Adăugați un filtru de umbră cu următorii parametri:
Pasul 5: Stratul tastaturii
Adăugați un nou strat numit "tastatură", creați un dreptunghi primitiv 60x190 cu o rază de colț de 5 pixeli și fără un accident vascular cerebral. Faceți-l un simbol movieclip și numiți-l "keybase_mc".
Pasul 6: Straturi de reflecție și strălucire
Apăsați F8 și creați un nou movieclip numit "key_mc". Creați încă două straturi în interiorul key_mc (pe lângă cel deja prezent cu keybase_mc). Denumiți-le: "reflecție" și "strălucire". Copiați cadrul în straturile nou create.
Pasul 7: glow_mc
NOTĂ: Am schimbat culorile frame_mc pentru o vreme, pentru a permite modificarea cheilor. Selectați movieclip în stratul strălucitor, denumiți-l "glow_mc", deschideți filtrele și editați-le în funcție de imaginea de mai jos:
Pasul 8: reflection_mc
Selectați movieclip din stratul de reflecție, denumiți-l "reflection_mc", deschideți filtrele și editați-le pentru a se potrivi imaginii de mai jos:
Pasul 9: base_mc
acum selectați movieclip din stratul de bază, denumiți-l "base_mc", deschideți filtrele și editați-le pentru a se potrivi imaginii de mai jos:
Pasul 10: Cheia
Copiați și inserați cheia până când ajungeți la 7 instanțe. Aranjați-le uniform pe scena.
Pasul 11: Aliniați
Deschideți instrumentul de aliniere și faceți clic pe pictograma "spațiu orizontal".
Pasul 12: Note
Creați un strat nou, numiți-l "note". Apoi scrieți C D E F G A B pe taste adăugați textul la un nou videoclip. Deschideți filtrele cu filme și editați-le, cum ar fi imaginea de mai jos:
Pasul 13: Numerele
Creați un strat nou, numiți "numere". Scrieți numerele de la 1 la 7, acestea reprezentând numerele pe care le veți apăsa pe tastatură pentru a evidenția cheia de felicitare.
Pasul 14: Calea Flex SDK
Accesați setările de editare> preferințe> ActionScript> ActionScript 3.0 și găsiți calea SDK Flex (veți avea nevoie de aceasta pentru a încorpora direct fișierele prin cod).
Pasul 15: Dezvoltarea Flash-ului
Deschideți Flash Develop (folosesc doar această cauză că îmi place mult mai mult decât editorul obișnuit ActionScript din IDE-ul flash atunci când scriu pachete) și creează 2 fișiere blank as3. Denumiți-le "Main.as" și "Background.as", salvați-le în același director ca fișierul .fla.
Pasul 16: Clasa de documente
Inside Flash IDE setați Main.as ca clasă Document.
Pasul 17: Buton Autoplay
Creați un film de redare automatăClip și denumiți-l "autoplay_mc". Acesta va fi un buton de redare automată.
Pasul 18: fulgi de zăpadă
Pentru a crea niște fulgi de zăpadă care se încadrează, creați un nou movieclip, trageți un mic cerc alb în interiorul acestuia și adăugați un identificator de legătură al "SnowFlake".
Pasul 19: Main.as
În Flash Develop open Main.as, definiți clasa principală care extinde un movieclip și creează o funcție numită Main.
Începeți prin a importa aceste clase în interiorul pachetului:
import flash.display.MovieClip; importul flash.events.Event; importul 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. *; fond de import; // vom crea o clasă de fundal bazată pe zgomot perlină și o matrice de transformare, împreună cu câteva forme umplute, astfel încât să putem avea o importanță plăcută de tranziție la zăpadă; // Tocmai am apucat zăpada kirupas și l-am împachetat -> http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ import flash.media.Sound;
Pasul 20: Variabile
În interiorul clasei dvs. definiți aceste variabile:
// aceasta va fi fundalul privat var _background: Background; // aceasta va fi furtuna noastră de zăpadă private var snow: Snow; // -> note // Introducerea acestui mod necesită metoda FLEX SDK -> alternativă este să adăugați aceste sunete în bibliotecă și să le adăugați un ID de legare. [Embed (sursă = "active / A.mp3")] privat var A: Clasă; private var a: Sunet = nou A () ca sunet; [Embed (sursă = "assets / B.mp3")] privat var B: Clasă; privat var b: sunet = nou B () ca sunet; [Embed (sursă = "assets / C.mp3")] privat var C: Clasă; privat var c: Sunet = nou C () ca sunet; [Embed (sursă = "active / D.mp3")] privat var D: Clasă; privat var d: sunet = nou D () ca sunet; [Embed (sursă = "active / E.mp3")] privat var E: Clasă; privat var: Sunet = nou E () ca sunet; [Embed (sursă = "active / F.mp3")] privat var F: Class; privat var f: Sunet = nou F () ca sunet; [Embed (sursă = "active / G.mp3")] privat var G: Class; privat var g: Sunet = nou G () ca sunet; // Stocarea notelor într-un tablou va face mai ușor să se facă legătura cu notele cla var privat: Array = [c, d, e, f, g, a, b] // Secvență notă pentru nota privată de muzică var noteSequence: Array = f, f, f, f, f, f, a, d, e, f, g, g, g, // Notă curentă în care se joacă privat var curnote: Number = 0 // Secvența întârzierii pe care muzica trebuie să o aibă între notele private var noteDelay: Array = [100, 100, 300, 100, 100, 300, 100, 100 , 100, 100, 200, 90, 100, 90, 100, 100, 120, 120, 120, 120, 300].
Pasul 21: Principalul ()
Funcția principală
// Funcția principală așteaptă ca principala linie să fie adăugată la funcția publică de etapă Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage);
Pasul 22: Inițializați
După ce am fost adăugați la scenă, vom inițializa fundalul și tastatura virtuală:
// când se adaugă la scenă se poate seta un mod de scară în scenă, fundalul și pornirea funcției private virtuale piano addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine ();
Pasul 23: Efecte de fundal
Să rezolvăm fundalul în mișcare și zăpada:
// adaugă funcția privată de fundal addBackground (): void _background = new Background (150,150); // motivul pentru care dimensiunea este mai mică este că este foarte intensă pe CPU _background.x = 5; // pentru a da o margine alba pentru frame _background.y = 5; _background.width = 570 // măriți-l până la mărimea potrivită a dimensiunii _background.height = 350 frame_mc.addChild (_background); // adaugă fundalul cadrului zăpadă = noul zăpadă (570, 350) // creează o furtună de zăpadă
Pasul 24: Tastatura virtuală
Initializarea tastaturii virtuale
funcția privată startMachine (e: MouseEvent = null): void // asociază evenimentele tastaturii stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) // asociază o metodă de redare automată la butonul de redare automată autoplay_mc .addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; // asociază notele cu tastele var i: int = 0 în timp ce (i < 7) this["key"+i].note = notes[i] i++ //makes the highlight of the keys disappear lowlightKeys();
Pasul 25: Evidențiați
Trebuie să creați o funcție pentru a elimina evidențiarea de la tastele:
funcția privată lowlightKeys () var i: int = 0 în timp ce (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++
Pasul 26: Evenimente cheie
Să gestionăm acum evenimentele Key up și Key down:
funcția privată onkeyDown (e: KeyboardEvent): void var i: int = 0 comutator (e.keyCode) caz 49: // cheie pentru 1 i = 0 break; cazul 50: // codul cheie pentru 2 i = 1 pauză; cazul 51: // codul cheie pentru 3 i = 2 break; cazul 52: // codul cheie pentru 4 i = 3 pauză; cazul 53: // codul cheie pentru 5 i = 4 pauză; cazul 54: // codul cheie pentru 6 i = 5 pauză; cazul 55: // codul cheie pentru 7 i = 6 pauză; note [i] .play (); TweenLite.to (această ["cheie" + i] .glow_mc, 0.5, alpha: 1); // evidențiază funcția privată onkeyUp (e: KeyboardEvent): void var i: int = 0 comutator (e.keyCode) caz 49: i = 0 break; cazul 50: i = 1 pauză; cazul 51: pauză i = 2; cazul 52: i = 3 spargere; cazul 53: pauză i = 4; cazul 54: i = 5 spargere; cazul 55: i = 6 spargere; TweenLite.to (această ["cheie" + i] .glow_mc, 0.5, alpha: 0); // scade cheia
Pasul 27: Funcționări automate
Cum se pornește și se oprește redarea automată
funcția privată startAutoPlay (e: MouseEvent = null) curnote = 0; // de fiecare dată când încep autoplay, resetați actuala notă de joc tunetimer.delay = noteDelay [curnote] * 3 // crește întârzierea setată anterior tunetimer.addEventListener (TimerEvent.TIMER, autoPlayTune) // adaugă un ascultător la evenimentul temporizatorului pentru de fiecare dată cronometrul este declanșat tunetimer.start () // pornește temporizatorul funcția privată stopAutoPlay (e: MouseEvent = null) tunetimer.stop () // oprește temporizatorul tunetimer.removeEventListener (TimerEvent.TIMER, autoPlayTune) // elimină eveniment
Pasul 28: Actualizare
Actualizarea tastaturii virtuale împreună cu muzica
funcția privată updateMachine (): void lowlightKeys (); // reinițializează butoanele evidențiază var i: int = 0 în timp ce (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; // resetează nota curentă stopAutoPlay (); // oprește redarea automată
Pasul 29: Codul complet
Iată codul principal Main.as
pachet import flash.display.MovieClip; importul flash.events.Event; importul 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. *; fond de import; importați Snow import flash.media.Sound; public class Main Extinde MovieClip private var _background: Background; private var snow: Zăpadă; [Embed (sursă = "active / A.mp3")] privat var A: Clasă; private var a: Sunet = nou A () ca sunet; [Embed (sursă = "assets / B.mp3")] privat var B: Clasă; privat var b: sunet = nou B () ca sunet; [Embed (sursă = "assets / C.mp3")] privat var C: Clasă; privat var c: Sunet = nou C () ca sunet; [Embed (sursă = "active / D.mp3")] privat var D: Clasă; privat var d: sunet = nou D () ca sunet; [Embed (sursă = "active / E.mp3")] privat var E: Clasă; privat var: Sunet = nou E () ca sunet; [Embed (sursă = "active / F.mp3")] privat var F: Class; privat var f: Sunet = nou F () ca sunet; [Embed (sursă = "active / G.mp3")] privat var G: Class; privat var g: Sunet = nou G () ca sunet; notele private var: Array = [c, d, e, f, g, a, b] privat var noteSequence: Array = [f, f, g, g, g, g, e, e, d, b, a, f, d, c] private var curnote: Number = 0 private var noteDelay: Array = [100, 300, 100, 100, 200, 90, 100, 90, 100, 100, 120, 120, 120, 120, 300] tunetimer privat: Timer = nou Cronometru (noteDelay [0]); funcția publică (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage); funcția privată addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine (); // adaugă funcția privată de fundal addBackground (): void _background = new Background (150,150); _background.x = 5; _background.y = 5; _background.width = 570 _background.height = 350 cadru_mc.addChild (_background); zăpadă = zăpadă nouă (570, 350); frame_mc.addChild (zăpadă); funcția privată 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 în timp ce (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 ();
Pasul 30: Clasa de fundal
Acum, la clasa de fundal. Vom începe prin importarea acestor clase ...
// Noise private var dir: Array privat var punct: Punct privat var bd: BitmapData; privat var bmp: Bitmap; privat var bdmultiply: BitmapData; privat var bms: Sprite; privat var rect: dreptunghi privat var cmf: ColorMatrixFilter; privat var w: Număr privat var h: Număr // Gradient liniar Umplere privată var gshape: Formă privată var gmetrics: Rectangle privat var gmatrix: Matrix private var gtype: String privat var gspread: String private var ginterpolation: String privat var gcolours: Array privat var galphas: Array privat var gratios: Array // Solid Fill privat var sshape: Formă
Pasul 32: Funcția inițială
Iată funcția inițială:
funcția publică Fundal ($ lățime: număr = 100, $ înălțime: număr = 100) w = $ lățime h = $ înălțime rect = new Rectangle (0, 0, w, h); punct = punct nou (0, 0); dir = [nou punct (1, 262), nou punct (400, 262)]; // aceasta este doar pentru a da un fundal solid întregii scene initBackgroundSolid (); // acesta va controla contrastul și saturația zgomotului initColorMatrix (); // vor exista două fundaluri de zgomot care le vor iniția initBackgroundNoise (); / / un gradient este adăugat astfel încât să nu dăm noisiated ... (obțineți-l? prea mult zgomot vă devine noisiated? haha ... hmmm) initBackgroundGradient ();
Pasul 33: initColorMatrix ()
Această funcție va controla contrastul și saturația zgomotului, este un filtru foarte puternic.
funcția privată initBackgroundNoise (): void // primul zgomot bd = nou BitmapData (w, h, false, 0); bmp = bitmap nou (bd); bmp.smoothing = true; addChild (bmp); // al doilea zgomot care suprapune primul zgomot printr-un mod de amestecare suprapus bdmultiply = BitmapData nou (w, h, false, 0); bms = Sprite nou (); bms.addChild (nou Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "suprapunere"; // face fundalul astfel încât zgomotul pare să se deplaseze addEventListener (Event.ENTER_FRAME, renderBG);
Pasul 36: Mască
Iată masca de gradient:
funcția privată initBackgroundGradient () // aceasta este o cutie de gradienți de bază cu alfa și rotită de 90º, astfel încât să pornească de sus în jos în loc de gshape stânga-dreapta = noua formă (); gmetrics = nou dreptunghi (); gmatrix = matrice nouă (); gtype = GradientType.LINEAR; gspread = SpreadMethod.PAD; ginterpolation = InterpolareMethod.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, ginterpolare); gshape.graphics.drawRect (0, 0, w, h); gshape.graphics.endFill (); addChild (gshape)
Pasul 37: Render
Timpul de redare!
Funcția privată renderBG (eveniment: Event): void // actualizează direcția zgomotului dir [0] .x- = 1.5 dir [0] .y- = 0 // acestea sunt aici pentru a juca cu dir [1] .x - = 0 / / acestea sunt aici pentru a vă juca cu dir [1] .y - = 0 // acestea sunt aici pentru a vă juca cu // definește prima bitmap de fundal pentru a avea un zgomot perlinic bd.perlinNoise (w, h, 2, 10, fals, adevărat, 7, adevărat, dir); // timpul de colorare (jucați cu aceste valori) bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); // aplies modificările de contrast și saturație făcute mai devreme bd.applyFilter (bd, rect, point, cmf) // celalalt zgomot perlin bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir ) // celălalt zgomot perlinic bdmultiply.colorTransform (rect, new ColorTransform (1, 0.6, 0.4));
Pasul 38: Clasă de fundal completă
Iată întreaga clasă de fundal:
pachet import flash.display.Shape; importul 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; clasa publica Fundalul extinde MovieClip private var dir: Array privat var punct: Punctul privat var bd: BitmapData; privat var bmp: Bitmap; privat var bdmultiply: BitmapData; privat var bms: Sprite; privat var rect: dreptunghi privat var cmf: ColorMatrixFilter; privat var var: Numărul privat var: Numărul privat var gshape: Formă privată var gmetrică: Parametru privat var gmatrix: Matrică privată var gmat: String private var gspread: String privat var ginterpolation: String privat var gcolours: Array privat var galphas: Array ($ width: Number = 100, $ height: Number = 100) w = $ lățime h = $ înălțime rect = new Rectangle (0, 0, w, h) ; punct = punct nou (0, 0); dir = [nou punct (1, 262), nou punct (400, 262)]; initBackgroundSolid (); initColorMatrix (); initBackgroundNoise (); initBackgroundGradient (); funcția privată initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // roșu 0, 2, 0, 0, , -20, // albastru 0, 0, 0, 1, -20]); // alpha funcția privată initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape) funcția privată initBackgroundNoise (): void bd = BitmapData nouă (w, h, false, 0); bmp = bitmap nou (bd); bmp.smoothing = true; addChild (bmp); bdmultiply = BitmapData nou (w, h, false, 0); bms = Sprite nou (); bms.addChild (nou Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "suprapunere"; addEventListener (Event.ENTER_FRAME, renderBG); funcția privată initBackgroundGradient () gshape = new Shape (); gmetrics = nou dreptunghi (); gmatrix = matrice nouă (); gtype = GradientType.LINEAR; gspread = SpreadMethod.PAD; ginterpolation = InterpolareMethod.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, ginterpolare); gshape.graphics.drawRect (0, 0, w, h); gshape.graphics.endFill (); addChild (gshape) funcția privată renderBG (eveniment: Eveniment): void dir [0] .x- = 1,5 dir [0] .y- = 0 dir [1] .x- = = 0 bd.perlinNoise (w, h, 2, 10, fals, adevărat, 7, adevărat, dir); bd.colorTransform (rect, noul ColorTransform (1, 0.7, 0.5)); bd.applyFilter (bd, rect, punct, cmf) bdmultiply.perlinNoise (w, h, 3, 21, fals, adevărat, 7, adevărat, dir) bdmultiply.colorTransform (rect, new ColorTransform (1, 0.6, 0.4)) ;
Pasul 39: Zăpada
Clasa de zăpadă nu este a mea, a fost scrisă de Troy Gardner, tocmai l-am adaptat de la cronologie la un pachet, de aceea nu coment pe cod. Creați un "Snow.as" și copiați acest cod înăuntru.
pachet import flash.display.MovieClip; importul flash.events.Event; import flash.utils.Dictionary; clasa publică de zăpadă se extinde la filmul MovieClip var snowflakes: Array = array nou (); var snowflakeProps: Dicționar = nou Dicționar (adevărat); var max_snowsize: Număr = .04; // pixeli var fulgi de zăpadăCnt: număr = 150; var oheight: Număr; var owidth: Număr; funcția publică Zăpadă ($ lățime, $ înălțime): void owidth = $ width; oheight = $ height; // cantitatea pentru (var i: int = 0; ioheight + 10) dO.y = -20; dacă (dO.x> owidth + 20) dO.x = - (owidth / 2) + Math.random () * (1,5 * owidth); dO.y = -20; altfel dacă (dO.x<-20) dO.x= -(owidth/2)+Math.random()*(1.5*owidth); dO.y = -20;
Concluzie
Abilitățile mele de muzică nu sunt cele mai mari, muzica poate părea un pic ciudat. Ei bine, cu acest tutorial ar trebui acum să puteți crea propriile dvs. cântece cu mai multe note și tonuri diferite :). Sper că ți-a plăcut acest tutorial, veți găsi codul comentat și ambele versiuni cs4 și cs3 în fișierul zip. Vă mulțumim pentru lectură!
Share
Accentsconagua
