Create en Nyttig Audio Recorder App i Actionscript 3
7
Del
12
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil vi lære å utvikle en nyttig og attraktiv Audio Recorder program som bruker Thibault Imbert s MicRecorder klasse. Les videre for å finne ut mer
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vil vi jobbe mot!
Trinn 1: Kort oversikt
Vi vil gjøre bruk av Flash tegneverktøy for å lage et brukervennlig grensesnitt og kraften i Actionscript 3 for å gjøre det rekord. SWF vil da lagre lyden som en WAV på harddisken. Tredjeparts klasser (men ingen programmer) skal brukes til å ta opp og kode dataene
Trinn 2:. Dokumentinnstillinger
Launch Flash og opprette et nytt dokument. Satt scenen størrelse til 400x290px og bildefrekvens på 24 fps
Trinn 3:. Interface
Dette er grensesnittet vi vil bruke for dette programmet; en svart gradient bakgrunn, en sentral hovedknappen brukes til å starte og stoppe opptak, en innspilling bar indikator og en mikrofon aktivitet indikator.
La oss dykke i og få bygge den.
Trinn 4: Bakgrunn & Tittel
Velg rektangelverktøyet (R) og lage en 400x290 px rektangel og fylle det med denne lineær gradient:. # 282C2D, # 0C0E0E
Igjen, bruker rektangelverktøyet for å lage en # 111111, 400x1 px linje, kopiere den (Cmd + D) og flytte den 1PX ned, fyll den med # 353535.
Bruk tekstverktøyet (T) og skrive en tittel for din app, jeg brukte dette formatet .: Helvetica Neue Regular /Fet, 13pt, # E6E6E6
Trinn 5:. Rec Button
La oss nå trekke den store knappen i midten
Velg Oval Tool (O) og lage en 146x146 px sirkel, fyll den med denne lineær gradient: #EEEEEE, # 9A9A9A, bruker gradient Transform Tool (F) for å rotere graderingsfyllet
Duplicate form og gjøre. det 76x76 px, center det og endre gradient fyll til # C11402, # B11201.
Konverter knappen for å MovieClip og gi den navnet recButton. Dobbeltklikk på ny MovieClip å angi redigeringsmodus og opprette en ny keyframe (Sett > Tidslinje > keyframe), bruker rektangel verktøyet for å lage to 18x80 px barer og fylle dem med den siste gradient mikrofon~~POS=TRUNC kan ta litt tid; det er en tidslinje basert indikator slik at du er nødt til å endre innholdet hver ramme. Med rektangel Primitive Tool (R) lage en 3x15 px avrundet rektangel med et hjørne radius på 3px og fylle det med # 252525. Duplicate form og gjøre en 5px mellomrom mellom hver form, gjenta denne prosessen til du kommer til 50 figurer. Konverter figurene til MovieClip og gi den navnet aktivitet Start å endre fargen på hver figur i nøkkelbildene til du kommer til 100-ramme, det vil ramme 100. alle fasonger sort, ramme 98 : en form rød, ramme 96: 2 figurer rød, etc. Velg rektangelverktøyet og skape en 400x40 px rektangel, fyll den med rød # BB1301. Duplicate formen og endre størrelse på høyden til halvparten, og endrer farge til hvit og la bare 20% av alfa. Bruk tekstverktøyet (T) for å legge til en innspilling melding og skape et dynamisk felt, navn det mot Konverter form og tekster til MovieClip og gi den navnet RecBar for å kunne registrere og kode data innhentet av mikrofonen, må vi bruke MicRecorder klassen. Last den ned og flytte den til prosjektmappe Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Hoved .as pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts, det anbefales å navngi dem starter med en liten bokstav og bruke intercaps for etterfølgende ord, for eksempel: myClasses I dette eksempelet bruker vi en enkelt klasse, så det er ikke egentlig en. trenger for å lage et kurs mappe Dette er de klassene vi trenger å importere for klassen vår skal fungere, import Her er vi erklære klassen med klasse strekker Dette er variabler vi kommer til å bruke, sjekk ut kommentarene i koden for å finne ut nøyaktig hva som skjer Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse, er den første som skal utføres når denne koden . du gjør en forekomst av et objekt eller kjører ved hjelp av Document Class Denne funksjonen inneholder de nødvendige lytterne til å starte programmet den neste funksjonen kalles når brukeren slipper Rec-knappen, starter det ved å sjekke tilgjengeligheten av mikrofonen og bruker deretter MicRecorder klassen for å fange opp data generert av mikrofonen. Rec-knappen vil nå bli brukt til å stoppe innspillingen Den legger også Recording baren til scenen for å bruke som en visuell varsling og tidstelleren Rec-knappen vil endre sin funksjonalitet ved opptak, vil det nå stoppe opptaket når slippes Følgende kode vil bli henrettet når (stopp) knapp Rec aktiveres Denne funksjonen oppdaterer Mikrofon aktivitet indikator. Den bruker activityLevel den neste funksjonen setter medgått tid i opptaks bar Når brukeren stopper opptaket, vil en komplett hendelse sendes, og vi vil bruke en FileReference MicRecorder klasse er et flott tillegg til Actionscript 3, sørg for å bokmerke denne klassen å bruke den i fremtidige prosjekter. Takk for at du leser denne opplæringen, jeg håper du har funnet det nyttig!
Trinn 6: Mic aktivitet. indikator
, angi redigeringsmodus (dobbeltklikk ) og opprette 100 rammer, en keyframe og en ekstra ramme per form
Trinn 7: opptaksindikator
, dette vil vise medgått tid siden innspillingen startet.
merker du Eksporter for Action
boksen og slett klippet fra scenen
Trinn 8:. MicRecorder Class
Trinn 9:. Ny Action Class
i klassen din mappe
Trinn 10:. Package
. Det er også vanlig å nevne dem ved hjelp av selskapets hjemmeside: com.mycompany.classesType.myClass
pakke {
Trinn 11:. import direktiv
direktiv gjør eksternt definerte klasser og pakker tilgjengelig i koden
import flash.display.Sprite,. import flash.media.Microphone, import flash.system.Security, import org.bytearray.micrecorder. *; import org .bytearray.micrecorder.events.RecordingEvent, import org.bytearray.micrecorder.encoder.WaveEncoder, import flash.events.MouseEvent, import flash.events.Event, import flash.events.ActivityEvent, import fl.transitions.Tween, import fl .transitions.easing.Strong, import flash.net.FileReference;
Trinn 12: erklærer og Forleng Class
definisjon søkeord etterfulgt av navnet som vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i vår klasse
public class Hoved strekker Sprite {
Trinn 13:. Variabler
privat Var mic. mikrofonen; //En mikrofon instanceprivate Var waveEncoder: WaveEncoder = new WaveEncoder (); //Vil kode dataene fanges opp av mikrofonen, en del av MicRecorderprivate Var opptaker: MicRecorder = new MicRecorder (waveEncoder); //Oppretter en MicRecorder eksempel og bruker WaveEncoder klassen encodeprivate Var recBar: RecBar = new RecBar (); //Opptaksindikatoren opprettet beforeprivate Var tween: Tween; //En tween eksempel brukes til animationsprivate Var fileReference: FileReference = new FileReference (); //Brukes til å lagre kodet fil på disk
Trinn 14: Constructor
offentlig funksjon main (): void {//Stopper rec-knappen og mic indikator recButton.stop (); activity.stop (); //Starter mikrofonen og viser dialogboksen Innstillinger for å aktivere den mic = Microphone.getMicrophone (); mic.setSilenceLevel (0); mic.gain = 100; mic.setLoopBack (true); mic.setUseEchoSuppression (true); Security.showSettings ( "2"); addListeners ();}
Trinn 15:. Initial Lyttere
private funksjons addListeners (): void {//Starter opptaket når rec-knappen er aktivert recButton.addEventListener (MouseEvent.MOUSE_UP, startRecording); recorder.addEventListener (RecordingEvent.RECORDING, opptak); recorder.addEventListener (Event.COMPLETE, recordComplete); //Opptakeren lytter etter en komplett hendelse activity.addEventListener (Event.ENTER_FRAME, updateMeter); //Oppdaterer mic aktivitetsmåler}
Trinn 16: Start opptak
privat funksjon startRecording (e: Mouseevent):.. Void { if (! mic = null) {recorder.record (); e.target.gotoAndStop (2); recButton.removeEventListener (MouseEvent.MOUSE_UP, startRecording); recButton.addEventListener (MouseEvent.MOUSE_UP, stoprecording); addChild (recBar); tween = new Tween (recBar, "y", Strong.easeOut, - recBar.height, 0,1, true); }}
Trinn 17:. Stoppe opptaket
privat funksjon stoprecording (e: Mouseevent):. void {recorder.stop (); //Stopp innspilling mic.setLoopBack (false); e.target.gotoAndStop (1); //knappen Endre ikon //Endre lytterne til å returnere knappene opprinnelige funksjon recButton.removeEventListener (MouseEvent.MOUSE_UP, stoprecording); recButton.addEventListener (MouseEvent.MOUSE_UP, startRecording); tween = new Tween (recBar, "y", Strong.easeOut, 0, - recBar.height, 1, true); //Skjuler innspillingen bar}
Trinn 18: Oppdatering Activity Indicator
eiendommen for å få et tall fra 0 til 100, og deretter bruker den i aktivitet
MovieClip
privat funksjon updateMeter (e: Hendelses). Void {aktivitet. gotoAndPlay (100 - mic.activityLevel);}
Trinn 19: Record
privat funksjon opptak (e: RecordingEvent). void {var currentTime: int = Math.floor (e.time /1000); //Gets medgått tid siden innspillingen hendelsen ble kalt recBar.counter.text = String (currentTime); //Stiller inn tiden til Textfield //Formaterer tekst som brukes i den tiden (2 siffer tall bare i dette eksempelet) if (String (currentTime) .length == 1) {recBar.counter.text = "00: 0" + currentTime; } Else if (String (currentTime) .length == 2) {recBar.counter.text = "00:" + currentTime; }}
Trinn 20: Record Komplett
eksempel lagre det innspilte filen til disk
privat funksjon recordComplete (e: Hendelses). void {fileReference.save (recorder.output, "recording.wav");}
Konklusjon