Moe van die ouderwetse geanimeerde kerstkaarten met de kerstman die lacht, een slee die in de lucht vliegt met een tros bomen en sprankelende lichtjes?
Dit jaar heb je geen excuus. Ik ga je laten zien hoe je een virtueel toetsenbord kunt bouwen dat Jingle Bells speelt. Je kunt zelfs het concept uitbreiden en meer nummers en notities toevoegen aan de piano.
Voor deze tut zal ik een combinatie van Tweenlite, de Flex SDK, de Flash IDE en Flash Develop gebruiken.
Start Adobe Flash en maak een ActionScript 3 Flash-bestand.
Open de eigenschappen en stel de FPS in op 30 en de stage op 600 x 380 px.
Hernoem laag 1 als "achtergrond" en maak een witte rechthoek van 580x360. Converteer het naar een filmclipsymbool met de naam "frame_mc" en stel de positie in op x: 10 y: 10.
Voeg een slagschaduwfilter toe met de volgende parameters:
Voeg een nieuwe laag toe met de naam "toetsenbord", maak een primitieve rechthoek 60x190 met een straal van 5 pixelhoeken en zonder lijn. Maak er een filmclipsymbool van en noem het "keybase_mc".
Druk op F8 en maak een nieuwe filmclip met de naam "key_mc". Maak nog twee lagen binnen key_mc (naast degene die al aanwezig is met keybase_mc). Noem ze: "reflectie" en "gloed". Kopieer het frame naar de nieuw gemaakte lagen.
OPMERKING: Ik heb de frames frame-mc een tijdje gewijzigd zodat ik de wijzigingen op de toetsen kan zien. Selecteer de filmclip in de gloeielaag, noem deze "glow_mc", open de filters en bewerk ze volgens de onderstaande afbeelding:
Selecteer de filmclip in de reflectielaag, noem deze "reflection_mc", open de filters en bewerk ze om overeen te komen met de afbeelding hieronder:
selecteer nu de filmclip in de basislaag, noem deze "base_mc", open de filters en bewerk ze om overeen te komen met de afbeelding hieronder:
Kopieer en plak de sleutel tot u uiteindelijk uit 7 instanties komt. Schik ze gelijkmatig over het podium.
Open het hulpmiddel Uitlijnen en klik op het pictogram "Horizontale spatiëring".
Maak een nieuwe laag, noem die "notities". Schrijf dan op C D E F G A B op de toetsen voegt u de tekst toe aan een nieuwe filmclip. Open de filmclip-filters en bewerk ze zoals de afbeelding hieronder:
Maak een nieuwe laag, noem het "nummers". Schrijf de getallen van 1 tot 7, dit vertegenwoordigt de nummers die u op uw toetsenbord drukt om de ecard-toets te markeren.
Ga naar bewerken> voorkeuren> ActionScript> ActionScript 3.0-instellingen en zoek uw Flex SDK-pad (u hebt dit nodig om bestanden rechtstreeks in te sluiten via code).
Open Flash Develop (ik gebruik dit alleen omdat ik het zo leuk vind meer dan de gebruikelijke ActionScript-editor van de flash-IDE bij het schrijven van pakketten) en maak 2 lege as3-bestanden. Noem ze "Main.as" en "Background.as", sla ze op in dezelfde map als je .fla.
In Flash IDE is Main.as ingesteld als uw documentklasse.
Maak een autoplay-filmClip en noem deze "autoplay_mc". Dit is een knop voor automatisch afspelen.
Als je wat sneeuwvlokken wilt maken, maak je een nieuwe filmclip, teken je een kleine witte cirkel naar binnen en voeg je een koppelings-ID toe van "SnowFlake".
In Flash Develop open Main.as, definieer je hoofdklasse door een filmclip uit te breiden en een functie met de naam Main te maken.
Begin met het importeren van deze klassen in uw pakket:
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. *; achtergrond importeren; // we zullen een achtergrondklasse maken op basis van perlin-ruis en een transformatiematrix samen met een paar gevulde vormen, zodat we een mooie vloeiende overgangsimport Snow kunnen hebben; // ik heb zojuist kirupas sneeuw gepakt en verpakt -> http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as/ import flash.media.Sound;
Beschrijf binnen uw klasse deze variabelen:
// dit zal onze achtergrond zijn private var _background: Background; // dit zal onze sneeuwstorm zijn privé var sneeuw: Sneeuw; // -> opmerkingen // Insluiten op deze manier vereist FLEX SDK -> alternatieve methode is om deze geluiden toe te voegen aan uw bibliotheek en hieraan een koppelings-ID toe te voegen. [Embed (source = "assets / A.mp3")] private var A: Class; private var a: Sound = new A () als Geluid; [Embed (source = "assets / B.mp3")] private var B: Class; privévar b: Geluid = nieuw B () als geluid; [Embed (source = "assets / C.mp3")] private var C: Class; private var c: Sound = new C () als Geluid; [Embed (source = "assets / D.mp3")] private var D: Class; privévari: Geluid = nieuwe D () als Geluid; [Embed (source = "assets / E.mp3")] private var E: Class; private var e: Sound = new E () als Geluid; [Embed (source = "assets / F.mp3")] private var F: Class; private var f: Sound = new F () als geluid; [Embed (source = "assets / G.mp3")] private var G: Class; privévari: Geluid = nieuwe G () als Geluid; // Als u de notities in een array opslaat, is het eenvoudiger om een koppeling te maken met de persoonlijke notities op het toetsenbord: Array = [c, d, e, f, g, a, b] // Nootvolgorde voor de muziek private var noteSequence: Array = [f, f, f, f, f, f, f, a, d, e, f, g, g, g, g, e, e, d, b, a, f, d, c] // Huidige opmerking die privé-var curnote afspeelt: Number = 0 // Sequentie van vertraging die de muziek tussen de notities nodig heeft 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 om de muziek af te spelen private var tunetimer: Timer = new Timer (noteDelay [0]);
De hoofdfunctie
// De hoofdfunctie wacht tot de maintimeline wordt toegevoegd aan de publieke fase van de functie Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage);
Nadat we zijn toegevoegd aan het podium, initialiseren we de achtergrond en het virtuele toetsenbord:
// wanneer toegevoegd aan fase kunnen we een fase schaalmodus instellen, de achtergrond en de start van de virtuele piano private functie toegevoegdToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine ();
Laten we de bewegende achtergrond en de sneeuw opzoeken:
// voegt de achtergrond private functie toe addBackground (): void _background = new Background (150,150); // de reden waarom de grootte kleiner is, is omdat het zeer CPU-intensief is _background.x = 5; // om een witte marge te geven voor het frame _background.y = 5; _background.width = 570 // schaal het op tot de maat juiste grootte _background.height = 350 frame_mc.addChild (_background); // voegt achtergrond toe aan het frame snow = new Snow (570, 350) // maakt een sneeuwstorm-instantie
De initialisatie van het virtuele toetsenbord
private function startMachine (e: MouseEvent = null): void // associeert de toetsenbordgebeurtenissen stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeyDown) stage.addEventListener (KeyboardEvent.KEY_UP, onkeyUp) // koppelt een autoplay-methode aan de autoplay-knop autoplay_mc .addEventListener (MouseEvent.CLICK, startAutoPlay); autoplay_mc.buttonMode = true; // koppelt de notities aan de toetsen var i: int = 0 while (i < 7) this["key"+i].note = notes[i] i++ //makes the highlight of the keys disappear lowlightKeys();
We moeten een functie maken om het hoogtepunt van de toetsen te verwijderen:
private function lowlightKeys () var i: int = 0 while (i < 7) TweenLite.to(this["key" + i].glow_mc, 0.5,alpha:0 ); i++
Laten we nu de gebeurtenissen Key-up en Key-down afhandelen:
private function onkeyDown (e: KeyboardEvent): void var i: int = 0 switch (e.keyCode) case 49: // keycode voor 1 i = 0 pauze; geval 50: // keycode voor 2 i = 1 pauze; geval 51: // keycode voor 3 i = 2 pauze; geval 52: // keycode voor 4 i = 3 pauze; case 53: // keycode voor 5 i = 4 pauze; geval 54: // keycode voor 6 i = 5 pauze; geval 55: // keycode voor 7 i = 6 pauze; notities [i] .play (); TweenLite.to (deze ["sleutel" + i] .glow_mc, 0.5, alpha: 1); // markeert de sleutel private function onkeyUp (e: KeyboardEvent): void var i: int = 0 switch (e.keyCode) case 49: i = 0 break; geval 50: i = 1 pauze; geval 51: i = 2 pauze; geval 52: i = 3 pauze; geval 53: i = 4 pauze; geval 54: i = 5 pauze; geval 55: i = 6 pauze; TweenLite.to (deze ["sleutel" + i] .glow_mc, 0.5, alpha: 0); // laat de toets laag staan
Hoe de autoplay te starten en te stoppen
persoonlijke functie startAutoPlay (e: MouseEvent = null) curnote = 0; // telkens als ik met autoplay begin, reset ik de huidige speelnotitie tunetimer.delay = noteDelay [curnote] * 3 // dit verhoogt de eerder ingestelde vertraging tunetimer.addEventListener (TimerEvent.TIMER, autoPlayTune) // voegt een luisteraar toe aan de timergebeurtenis voor telkens wanneer de timer wordt geactiveerd, tunetimer.start () // start de timer persoonlijke functie stopAutoPlay (e: MouseEvent = null) tunetimer.stop () // stopt timer tunetimer.removeEventListener (TimerEvent.TIMER, autoPlayTune) // verwijdert de evenement
Het virtuele toetsenbord bijwerken samen met de muziek
persoonlijke functie updateMachine (): void lowlightKeys (); // reset de toetsen hoogtepunten 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; // reset huidige notitie stopAutoPlay (); // stopt met autoplay
Hier is de volledige Main.as-code
pakket 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. *; achtergrond importeren; import Sneeuw import flash.media.Sound; public class Main breidt MovieClip uit private var _background: Background; privé var sneeuw: sneeuw; [Embed (source = "assets / A.mp3")] private var A: Class; private var a: Sound = new A () als Geluid; [Embed (source = "assets / B.mp3")] private var B: Class; privévar b: Geluid = nieuw B () als geluid; [Embed (source = "assets / C.mp3")] private var C: Class; private var c: Sound = new C () als Geluid; [Embed (source = "assets / D.mp3")] private var D: Class; privévari: Geluid = nieuwe D () als Geluid; [Embed (source = "assets / E.mp3")] private var E: Class; private var e: Sound = new E () als Geluid; [Embed (source = "assets / F.mp3")] private var F: Class; private var f: Sound = new F () als geluid; [Embed (source = "assets / G.mp3")] private var G: Class; privévari: Geluid = nieuwe G () als Geluid; private var notes: 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, e, e, d, b, a, f, d, c] privé 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 var tunetimer: Timer = new Timer (noteDelay [0]); public function Main (): void addEventListener (Event.ADDED_TO_STAGE, addedToStage); private function addedToStage (e: Event): void stage.scaleMode = StageScaleMode.NO_SCALE; addBackground (); startMachine (); // voegt de achtergrond private functie toe addBackground (): void _background = new Background (150,150); _background.x = 5; _background.y = 5; _background.width = 570 _background.height = 350 frame_mc.addChild (_background); sneeuw = nieuwe sneeuw (570, 350); frame_mc.addChild (sneeuw); private function 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(curnotenoteSequence.length) curnote = 0; stopAutoPlay ();
Nu naar de achtergrondklasse. We beginnen met het importeren van deze klassen ...
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;
... vervolgens de variabelen definiëren:
// Ruis privé varir: Array private var point: Point private var bd: BitmapData; private var bmp: Bitmap; private var bdmultiply: BitmapData; privé var bms: Sprite; private var rect: Rectangle private var cmf: ColorMatrixFilter; private var w: Number private var h: Number // Lineaire Gradient Fill 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 // Solid Fill private var sshape: Shape
Dit is de eerste functie:
openbare functie Achtergrond ($ width: Number = 100, $ height: Number = 100) w = $ width h = $ height rect = new Rectangle (0, 0, w, h); punt = nieuw punt (0, 0); dir = [nieuw punt (1, 262), nieuw punt (400, 262)]; // dit is alleen maar om een goede achtergrond te geven aan de hele fase init Background Solid (); // dit regelt het contrast en de verzadiging van de ruis initColorMatrix (); // er zullen twee noise-achtergronden zijn die dit init initBackgroundNoise () zullen initiëren; // een verloop wordt toegevoegd, zodat we geen ruis krijgen ... (krijg je? te veel ruis krijgt je lasterlijk? haha ... hmmm) initBackgroundGradient ();
Deze functie regelt het contrast en verzadiging van de ruis, het is een zeer krachtig filter.
private function initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // red 0, 2, 0, 0, -20, // green 0, 0, 2, 0, -20, // blue 0, 0, 0, 1, -20]); // alpha
Dit is alleen maar om een goede achtergrond te geven aan het hele podium.
private function initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape)
De geluiden:
private function initBackgroundNoise (): void // first noise bd = new BitmapData (w, h, false, 0); bmp = nieuwe Bitmap (bd); bmp.smoothing = true; addChild (BMP); // tweede ruis die de eerste ruis overlapt via een overlay-overvloeimodus bdmultiply = nieuwe BitmapData (w, h, false, 0); bms = nieuwe Sprite (); bms.addChild (nieuwe Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; // rendert de achtergrond zodat de ruis lijkt te verplaatsen addEventListener (Event.ENTER_FRAME, renderBG);
Dit is het verloopmasker:
persoonlijke functie initBackgroundGradient () // dit is een basisverloopvak met alpha en 90º geroteerd zodat het begint vanaf de boven-onderkant in plaats van links-rechts gshape = new Shape (); gmetrics = new Rectangle (); gmatrix = nieuwe 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)
Het is rendertijd!
private function renderBG (event: Event): void // updates ruisrichting dir [0] .x- = 1.5 dir [0] .y- = 0 // deze zijn hier voor jou om te spelen met dir [1] .x - = 0 // deze zijn hier voor jou om te spelen met dir [1] .y - = 0 // deze zijn hier om mee te spelen // definieert de eerste bitmap op de achtergrond om een perlin-ruis te hebben bd.perlinNoise (w, h, 2, 10, false, true, 7, true, dir); // kleurtijd (speel met deze waarden) bd.colorTransform (rect, new ColorTransform (1, 0.7, 0.5)); // past het eerder gemaakte contrast- en verzadigingsmodificaties toe bd.applyFilter (bd, rect, point, cmf) // de andere perlin-ruis bdmultiply.perlinNoise (w, h, 3, 21, false, true, 7, true, dir ) // de andere perlin-ruiscollors bdmultiply.colorTransform (rect, new ColorTransform (1, 0.6, 0.4));
Dit is de hele achtergrond Klasse:
pakket 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 Achtergrond breidt MovieClip uit private var dir: Array private var point: Point private var bd: BitmapData; private var bmp: Bitmap; private var bdmultiply: BitmapData; privé var bms: Sprite; private var rect: Rectangle private var cmf: ColorMatrixFilter; private var w: 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: Shape public function Background ($ width: Number = 100, $ height: Number = 100) w = $ width h = $ height rect = new Rectangle (0, 0, w, h) ; punt = nieuw punt (0, 0); dir = [nieuw punt (1, 262), nieuw punt (400, 262)]; initBackgroundSolid (); initColorMatrix (); initBackgroundNoise (); initBackgroundGradient (); private function initColorMatrix (): void cmf = new ColorMatrixFilter ([2, 0, 0, 0, -20, // red 0, 2, 0, 0, -20, // green 0, 0, 2, 0 , -20, // blauw 0, 0, 0, 1, -20]); // alpha persoonlijke functie initBackgroundSolid (): void sshape = new Shape (); sshape.graphics.beginFill (0x170a02,1) sshape.graphics.drawRect (0, 0, w, h); sshape.graphics.endFill (); addChild (sshape) persoonlijke functie initBackgroundNoise (): void bd = nieuwe BitmapData (w, h, false, 0); bmp = nieuwe Bitmap (bd); bmp.smoothing = true; addChild (BMP); bdmultiply = nieuwe BitmapData (w, h, false, 0); bms = nieuwe Sprite (); bms.addChild (nieuwe Bitmap (bdmultiply)) addChild (bms) bms.blendMode = "overlay"; addEventListener (Event.ENTER_FRAME, renderBG); private function initBackgroundGradient () gshape = new Shape (); gmetrics = new Rectangle (); gmatrix = nieuwe 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) persoonlijke functie 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)) ;
De sneeuwklasse is niet van mij, het is geschreven door Troy Gardner, ik heb het gewoon aangepast van de tijdlijn naar een pakket, daarom reageer ik niet op de code. Maak een "Snow.as" en kopieer deze code naar binnen.
pakket import flash.display.MovieClip; import flash.events.Event; import flash.utils.Dictionary; public class Snow breidt MovieClip uit 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; openbare functie Snow ($ width, $ height): void owidth = $ width; oheight = $ height; // aantal voor (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;
Mijn muzikale vaardigheden zijn niet de beste, de muziek klinkt misschien een beetje vreemd. Nou ja, met deze tutorial zou je nu in staat moeten zijn om je eigen songs te creëren met meer noten en verschillende tonen :). Ik hoop dat je deze tutorial leuk vond, je zult de gecomprimeerde code en beide cs4- en cs3-versies vinden in het zipbestand. Bedankt voor het lezen!