Først må du opprette en ny Flash Actionscript 3.0 dokument. Du trenger ikke å justere eventuelle dokumentegenskaper

Gå til Flash >.; Preferanser > AI fil importør på Mac eller Rediger > Preferanser > AI fil importør på Windows. Kontroller at du har følgende innstillinger:

lagre den og gi den navnet "SimpleMP3Player.fla". Også kopiere mappen "caurina" og "tarzan.mp3" til samme sted som din FLA fil

Trinn 2:. Import Illustrator File

Nå er vi klare til å importere Illustrator fil . Gå til Fil > Import > Import til scenen. Lokal "simplemp3player.ai" fra kilden pakken "ai" katalog, trykk OK og du får på skjermen som vist nedenfor. Sett Konverter til lag "Flash lag" slik at du får alle lagene som finnes i ai-fil direkte til Flash. De neste to alternativer, som vist på bildet, plassere alle kunstverk til samme koordinater som i ai-fil og endre størrelsen på Flash dokumentet nøyaktig størrelse som vi trenger.

Når du klikker OK i import dialogen dokumentet skal se ut som på bildet vist ovenfor

Trinn 3:. Opprett Button Sprite

Du har sannsynligvis lagt merke til play og pause knappene i det siste bildet. De kommer til å være vår knappen sprite som styrer lyden. Alle knappene er gruppert i én gruppe.

Velg bare knapper gruppen og trykke F8 for å få "Konverter til symbolet" skjerm. Gi den navnet "knapper" og sørg for at du har valgt MovieClip som type. Sett registrering i venstre hjørne, og klikk OK. Bytt til Properties panel og gi objektet en forekomst navn "knapper". Bildet nedenfor illustrerer disse trinnene visuelt:

Vi har våre knapper i én MovieClip, men masken er ikke inkludert. Vi trenger en mer MovieClip å binde dem sammen.

Velg knappene MovieClip og masken objekt. Igjen trykke F8 og nå gi den et navn med "buttonSprite". Husk også å gi den en forekomst navn. Denne gangen "bs" (jeg vet hva du tenker, men dette er en forkortelse av ButtonSprite)

Trinn 4:. Manuell Maske

Nå er vår knappen sprite er nesten klar til å rocke. Alt vi trenger å gjøre er å maskere det slik at det viser bare én knapp om gangen.

Dobbeltklikk på buttonSprite MovieClip. Lag et nytt lag over det aktive laget og gi den navnet "maske". Velg masken objektet og klippe det med "Cmd + X" på Mac eller "Ctrl + X" på Windows. Velg maske laget og lime hjelp "Cmd + V" på Mac eller "Ctrl + V" på Windows. Det spiller ingen rolle hvor masken objektet er fordi neste vi justere den til rett sted

Med masken likevel valgt å åpne opp Strek panelet (Vindu > Align)., Og pass på at "Å iscenesette" -knappen trykkes ned. Nå trykker du på "Juster øverste kanten" og "Rett venstre kant" knapper og masken objekt skal nå være i riktig posisjon, øverst i venstre hjørne av MovieClip.

Det eneste gjenværende å gjøre er å maskere knapper. Høyreklikk over maske laget og velge Mask

Du kan se effekten umiddelbart.; bare én knapp er synlig

Trinn 5:. Begynn Opprette Skjerm

La oss glemme knappene for en stund og fokusere på MP3-spilleren display. Jeg skal vise deg hvordan du bygger dette displayet element manuelt. Det kan gjøres med AS3, selvfølgelig, men la oss gjøre det manuelt denne gangen.

Velg først masken element fra maske laget. Konvertere den til en MovieClip og gi den navnet "displayMask". Bruke dette navnet som forekomstnavnet også. Masken for displayet er klart, så skjule laget. Deretter oppretter et lag mellom knappene lag og maske laget. Name it "tekst". Velg tekstverktøyet fra verktøypaletten og bruke som vises i bildet nedenfor alternativer:

Trinn 6: Legg textfields til Display

Vi må textfields å vise vår informasjon (artist, sangtittel, lasting prosent og sang lengde). Vi vil opprette textfields manuelt til scenen.

Første trekk textfieds på tekstlaget som vist på bildet nedenfor. Konvertere alle tre textfields i én enkelt MovieClip heter "playerTexts". Opprette en mer tekstfeltet, og kaller det "preloader". Du trenger ikke å konvertere dette til en MovieClip

Trinn 7:. Fullfør Skjerm

Alt vi trenger å gjøre er å inkludere våre nye Henger tekstfeltet og playerTexts-MovieClip i ett MovieClip så vi kan kontrollere tekster som, og når vi vil.

Velg Henger tekstfeltet og playerTexts-MovieClip og trykk på F8. Gi den et navn og en forekomst navnet "display". Nå har vi avsluttet vår skjerm hierarki, skal det se slik ut:

For å skrive en data eksempel å songInfo-tekstfeltet vi har til å skrive følgende kodelinje:
display.playerTexts.songInfo.text = 'Det er her vi legger kunstneren og sangnavn';

Så nå har vi hvert grafisk element klar som vi trenger for MP3-spiller. Neste vi vil hoppe dypt inn i koden, så dykke med meg

Trinn 8: Opprett Document Class File

For å få koden til å fungere må vi opprette dokumentet klassen. Dokumentet klassen koden kjøres først når SWF-filer spille. Du trenger ikke å skrive koden til tidslinjen lenger, og klassen er lettere å importere til en annen FLA fil i fremtiden hvis det er nødvendig

Gå til Fil >.; Ny. Velg "Actionscript-fil" fra vinduet som åpnes, og klikk OK. Lagre filen i samme mappe som din FLA fil og gi den navnet "SimpleMP3Player.as".

Nå tildele nye .as fil som dokument klasse. Klikk på scenen og gå til Properties panelet. Der vil du finne "Class" felt der du må skrive inn klassenavnet du har opprettet. Enter "SimpleMP3Player" og klikk den lille blyanten knappen. Hvis du har stavet klassen navnet korrekt "SimpleMP3Player.as" filen skal bli aktive. Ellers vil Flash kaste en feil

Trinn 9:. Koden

Kode bringer alt til liv. Her er det ferdige Actionscript, vil jeg forklare det blokkere ved blokken. Sjekk også kildekoden fra kilden pakken, jeg har kommentert det fra begynnelse til slutt
pakke {import flash.display.MovieClip.; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.ID3Info; import flash.net.URLRequest; import flash.utils.Timer; import flash.text.TextField; import flash.text.TextFieldAutoSize; import caurina.transitions.Tweener; public class SimpleMP3Player strekker MovieClip {//Lag noen variabler som vi trenger private Var mp3File: Sound; private Var mp3FilePosition: SoundChannel; private Var id3Data: ID3Info; private Var id3InfoAvailable = false; private Var updateTime: Timer; private Var playingSound: Boolean = false; private Var soundPosition: Number; private Var songReachedEnd: Boolean = false; private Var buttonPos: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252'); offentlig funksjon SimpleMP3Player () {display.playerTexts.x = -73; display.mask = displayMask; bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3]; loadMP3 (); } Private funksjon loadMP3 (): void {mp3File = new Sound (); mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data); mp3File.load (ny URLRequest ('tarzan.mp3')); Tweener.addTween (display.preloader, {x: 96, tid: 1}); } Private funksjon mp3FileLoading (e: ProgressEvent): void {var currentPercent: Number = Math.round (e.bytesLoaded /e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + currentPercent + '%'; if (currentPercent > 50 & & id3InfoAvailable) {Tweener.addTween (display.preloader, {x: 200, tid: 1, onComplete: playMP3, onCompleteParams: [false, 0]}); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading); }} Privat funksjon mp3FileLoaded (e: Hendelses): void {mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, {x: 200, tid: 1}); } Private funksjon errorLoadingSound (e: IOErrorEvent): void {trace ("Feil ved lasting av lyd:" + e); } Private funksjon getID3Data (e: Hendelses): void {id3InfoAvailable = true; id3Data = mp3File.id3; } Private funksjon playMP3 (useSp: Boolean, sp: Number): void {if (useSp) mp3FilePosition = mp3File.play (sp); annet mp3FilePosition = mp3File.play (); playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField); bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0]; bs.buttons.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBs); bs.buttons.addEventListener (MouseEvent.MOUSE_OUT, mouseOutBs); bs.buttons.addEventListener (MouseEvent.CLICK, mouseClickBs); updateTime = new Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start (); Var si: String = id3Data.artist + '-' + id3Data.songName; si = si.toUpperCase (); display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT; display.playerTexts.songInfo.wordWrap = false; display.playerTexts.songInfo.text = si; Tweener.addTween (display.playerTexts, {x: 60, tid: 1}); } Private funksjon updateBufferField (e: ProgressEvent): void {var currentPercent: Number = Math.round (e.bytesLoaded /e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; } Private funksjon getMP3Time (e: Timerevent): void {var totalMinutes = Math.floor (mp3File.length /1000/60); Var totalSeconds = Math.floor (mp3File.length /1000)% 60; Var currentMinutes = Math.floor (mp3FilePosition.position /1000/60); Var currentSeconds = Math.floor (mp3FilePosition.position /1000)% 60; if (totalSeconds < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds; } Private funksjon songFinished (e: Hendelses): void {mp3FilePosition.removeEventListener (Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener (TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos [3]; mp3FilePosition.stop (); playingSound = false; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'SPILL IGJEN?'; } /* * AllButtons.bs hendelses metoder begynne * /private funksjons mouseOverBs (e: MouseEvent): void {if (playingSound) bs.buttons.y = buttonPos [5]; annet bs.buttons.y = buttonPos [1]; if (songReachedEnd & &! playingSound) bs.buttons.y = buttonPos [1]; } Private funksjon mouseOutBs (e: MouseEvent): void {if (playingSound) bs.buttons.y = buttonPos [0]; annet bs.buttons.y = buttonPos [4]; if (songReachedEnd & &! playingSound) bs.buttons.y = buttonPos [3]; } Private funksjon mouseClickBs (e: MouseEvent): void {if (playingSound) {bs.buttons.y = buttonPos [4]; soundPosition = mp3FilePosition.position; updateTime.stop (); mp3FilePosition.stop (); playingSound = false; display.playerTexts.times.text = 'PAUSE'; } Else if (playingSound!) {Bs.buttons.y = buttonPos [2]; playMP3 (sant, soundPosition); playingSound = true; } Else if (songReachedEnd) {songReachedEnd = false; playMP3 (false, 0); }}}}
Trinn 10: Basispakke Kode
pakken {//Place hvor alle klasse importen går public class SimpleMP3Player strekker MovieClip {offentlig funksjon SimpleMP3Player () {}}}

Vår startpunktet ser ut eksemplet ovenfor. Husk at klassenavnet skal være det samme som dokumentet klasse filnavnet. Alt inne i offentlig funksjon SimpleMP3Player utfører rett etter Flash har lastet klassen vår

Trinn 11:.. Import Obligatoriske Classes

La oss importere alle klasser som vår MP3-spiller trenger for å fungere ordentlig Anmeldelser pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.ID3Info; import flash.net.URLRequest; import flash.utils.Timer; import flash.text.TextField; import flash.text.TextFieldAutoSize; import caurina.transitions.Tweener;

Alt skal være ganske rett frem. I den siste linjen importerer vi Caurina Tweener. Kontroller at du har den caurina katalogen på samme sted som din FLA fil

Trinn 12:. Erklærer Variabler

Alle variabler er privat. Bare den SimpleMP3Player klassen kan bruke dem
private Var mp3File. Sound; private Var mp3FilePosition: SoundChannel;

mp3File lydobjekt butikkene våre Tarzan.mp3 lyd. mp3FilePosition er en SoundChannel objekt. Vi trenger det for å fortelle oss gjeldende mp3File posisjon i millisekunder. Med dette objektet kan vi også stoppe mp3-fil
privat Var id3Data: ID3Info;. private Var id3InfoAvailable = false;

id3Data objekt butikker mp3 høres id3 informasjon. For eksempel, navnet på sangen og navnet på artisten. id3InfoAvailable forteller vår preloader at ID3 info er tilgjengelig slik at koden kan begynne å spille mp3File
privat Var updateTime. Timer;

updateTime er vår timer objekt som oppdaterer skjermen ganger-tekstfeltet. Du kan finne mer info om Timer klasse her. Jeg vil gå gjennom dette senere
private Var playingSound. Boolean = false; private Var soundPosition: Number; private Var songReachedEnd: Boolean = false;

playingSound er rett og slett en boolsk variabel som forteller oss om mp3File spilles i øyeblikket. soundPosition lagrer en numerisk verdi når brukere trykker på Pause-knappen, slik at vi kan fortsette å spille musikk fra pausestilling når brukeren klikker på avspillingsknappen. songReachedEnd indikerer at låten er ferdig.
/* * buttonPos [0] = playUp * buttonPos [1] = playOver * buttonPos [2] = playDown * buttonPos [3] = playDis * buttonPos [4] = pauseUp * buttonPos [5] = pauseOver * buttonPos [6] = pauseDown * buttonPos [7] = pauseDis * /private Var buttonPos: Array = new Array ('0', '-36', '-72', '-108', ' -144 ',' -180 ',' -216 ',' -252 ');

Finalyl, sist men ikke minst, vår rekke variable som holder knappene MovieClip y koordinater. For eksempel:
bs.buttons.y = buttonsPos [4];

pauseknappen da viste på skjermen. Hvis du bruker 0 inne [parentes] ser du på Start-knappen

Trinn 13:. Maskering med kode

Det er på tide å se hva våre koden gjør først når den er lastet. La oss håndtere den første funksjonen i vår kode; den SimpleMP3Player funksjon
offentlig funksjon SimpleMP3Player () {display.mask = displayMask.; display.playerTexts.x = -73;

den SimpleMP3Player funksjonen er en konstruktør funksjon slik det må være offentlig. Døpe det til private årsaker en feil. Funksjonene 'standard tilstand er offentlig, slik at du ikke nødvendigvis trenger å skrive "offentlig" før funksjonen.

Maskering med kode er svært enkel og rett frem. På linje 3 ser du koden for maskering. Vi bare tildele "displayMask" MovieClip til "display" MovieClip maske eiendom. Det er det.

Second eiendom display.playerTexts.x flytter den "playerTexts" MovieClip langs den horisontale aksen. Vi bare flytte den ut av syne for å koordinere -73. Maske skjuler "playerTexts" MovieClip

Trinn 14:. Metoder, Button Modes og BS
bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3];

"knapper" er en MovieClip og som standard når musen svever over det, holder markøren som en grunnleggende pil. Stille "buttonMode" eiendom til sann blir markøren til en hånd når musen svever over. I begynnelsen vil vi at markøren som en pil så buttonMode er satt til false. På den samme linjen setter vi "aktivert" eiendom til false. Det betyr at "knapper" MovieClip er ikke klikkbare. I linje 2 setter vi på "knappene" MovieClip stilling til funksjonshemmede avspillingsknappen

Den første linjen kan være forvirrende, men hvis jeg skriver det slik ...
bs.buttons.buttonMode = false.; bs.buttons.enabled = false;

... du kan sikkert se det mer tydelig. Jeg sparer plass ved å skrive det på en linje

Alt vi gjør nå er å ringe vår "loadMP3" metoden
loadMP3 ();
Trinn 15:.. LoadMP3 Metode

Dette Metoden er vårt viktigste metoden. Hva den gjør er å laste den mp3-fil, erklærer nødvendige EventListeners og skyv preloader å vise
mp3File = new Sound ();.

Denne linjen oppretter en ny Sound objekt. Vi har tilgang til alle lydklasse metoder og egenskaper gjennom mp3File
mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading.); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data);

Den første linjen erklærer PROGRESS hendelse og hver gang hendelsen startes det kaller mp3FileLoading metoden. Dette lytteren har noen egenskaper som vi trenger. Først er bytesTotal som holder hele størrelsen på mp3-fil i byte. Andre er bytesLoaded som holder for tiden lastet bytes. Med disse to egenskapene kan vi telle hvor mange prosent som filen er lastet og vise det for brukeren.

Den andre linjen påkaller når hele mp3-filen er lastet. Det kaller mp3FileLoaded metoden.

Den tredje linjen er for feilbehandling. For eksempel, hvis og mp3-filen ikke blir funnet, påkaller denne hendelsen. Det kaller errorLoadingSound metoden.

I tråd fem tilfelle startes når id3-data er tilgjengelig. Det kaller getID3Data metode
mp3File.load (ny URLRequest ('tarzan.mp3'));.

"load" metoden laster vår Tarzan mp3-fil. Inne brak vi erklære en ny URLReaquest og inni den er banen til våre mp3-fil. Vår bane er relativ og tarzan.mp3 må være i samme sted som FLA og .as filer. Denne linjen er den samme som under. Bruk hvilken du foretrekker
Var req. URLRequest = new URLRequest ('tarzan.mp3'); mp3File.load (req);

Dette er første gang vi bruker Caurina, så jeg vil raskt vise hvordan det fungerer
Tweener.addTween (mål, {egenskaper});.

Dette er basen kode. Målet er der du skriver inn navnet på målet objektet som du vil mellom. I egenskapene du definere hva du vil gjøre med målet. Du kan endre, for eksempel x og y koordinater, åpenhet, skala eller rotasjon
Tweener.addTween (display.preloader, {x: 96, tid: 1});.

Vårt mål er "preloader "tekstfeltet inne i" display "MovieClip. Eiendommen "x" beveger den og "tid" eiendom indikerer tiden at tween tar. Tiden er målt i sekunder. Hvis du ønsker millisekunder bruke "0,5" notasjon

Trinn 16:. Mp3FileLoading Hendelses Metode
privat funksjon mp3FileLoading (e: ProgressEvent): void {var currentPercent: Number = Math.round (e.bytesLoaded /e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + currentPercent + '%'; if (currentPercent > 50 & & id3InfoAvailable) {Tweener.addTween (display.preloader, {x: 200, tid: 1, onComplete: playMP3, onCompleteParams: [false, 0]}); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading); }}

Som jeg nevnte tidligere, viser "mp3FileLoading" metoden en prosentverdi for hvor mye mp3-filen er lastet. Det begynner også sangen whenthe prosent klatrer høyere enn 50%.

currentPercent er for telling prosentverdien. Vi avrunder det opp med "Math.round" metoden. Linje 4 skriver prosentverdien til vår tekstfeltet slik at brukeren kan se hva som skjer med lasting.

Inne i "hvis" statement vi sjekke om andelen er over 50 og "id3InfoAvailable" variable er sant. Hvis både returnere sann, utføres "hvis" statement alt inne i parentes.

Når hvis utsagnet er sant, vi lom "preloader" tekstfeltet unna. Når tween er fullført, kaller Caurina den "playMP3" metoden og passerer to egenskapene til det. Vi ser "playMP3" metoden i neste trinn

PROGRESS arrangementet er ikke lenger nødvendig, så fjerner vi det på linje 9.

Trinn 17:. Mp3FileLoaded Hendelses Metode
privat funksjon mp3FileLoaded (e: Hendelses): void {mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, {x: 200, tid: 1}); }

Denne metoden startes når hele sangen er lastet. Først fjerner vi unødvendige EventListeners. I linje 5 tween vi "buffer" tekstfeltet til høyre

Trinn 18:. ErrorLoadingSound Hendelses Metode
privat funksjon errorLoadingSound (e: IOErrorEvent): void {trace ("Feil ved lasting av lyd:" + e ); }

Denne feilhåndtering er veldig grunnleggende. Det spor bare feil hvis det oppstår feil

Trinn 19: getID3Data Hendelses Metode
privat funksjon getID3Data (e: Hendelses):. Void {id3InfoAvailable = true; id3Data = mp3File.id3; }

Vi setter "id3InfoAvailable" for å true på linje 3. "mp3FileLoading" metoden sjekker denne variabelen hver gang og starter lyden bare hvis det er sant. På denne måten sikrer vi at id3 info er tilgjengelig slik at brukeren ser ekte info på displayet.

I linje 4 tildele vi mp3File id3 metadata til ID3Info objekt som heter id3Data som vi opprettet i trinn 12.

Trinn 20: playMP3 Metode

Denne metoden er mer vital metode i vår spiller. . La oss se på den første blokken
privat funksjon playMP3 (useSp: Boolean, sp: Number): void {if (useSp) mp3FilePosition = mp3File.play (sp); annet mp3FilePosition = mp3File.play ();

"playMP3" metoden krever to eiendommer. "useSp" indikerer "bruke sunn posisjon" og "sp" er "lyd posisjon".

I linje 3 tester vi om "useSp" er sant. Hvis ja, spiller koden vår sang fra det ønskede punkt. Dette punkt er passert i "sp" egenskap. Hvis falsk, begynner vi å spille sangen fra begynnelsen. Alt dette er relatert til play-pause-knappen
playingSound = sant.; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);

Linje 1 setter playingSound til sann. Nå kan vi sjekke om lyden spilles og gjøre hva som er nødvendig.

Ny EventListener på linje 2 branner opp hver gang sangen er ferdig avspilt. Den "songFinished" metoden utføres. Legg merke til at vi legger EventListener å mp3FilePosition objekt.

Second ny EventListener i linje 3 legger den samme "PROGRESS" event til mp3File som i starten av koden. Dette lytteren bare fyrer opp en annen metode. Den "updateBuffer" metoden er for oppdatering av "buffer" tekstfeltet
bs.buttons.buttonMode = bs.buttons.enabled = sant.; bs.buttons.y = buttonPos [0];

Den første linjen du allerede finne kjent. Vår mp3-fil er å spille så vi kan oppdatere knappene for å vise den aktuelle staten, aktivere "buttonMode" og "aktivert" egenskaper.

Vi bruker "Timer" for å vise gjeldende solid posisjon i løpet av sekunder. Med "Timer" kan du utføre metoder i tidssekvenser
updateTime = new Timer (100).; updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();

Her skaper den første linjen en ny "Timer" objekt med 100 millisekunder intervall. Du lurer kanskje på hvorfor vi ønsker å oppdatere gjeldende klokkeslett hver 100 millisecs .. 1 sekund er for treg for vår spiller og til og med 0,5 sekunder er for treg. Jeg vil at det skal oppdatere tid virkelig glatt. Mer på Timer-klassen

Vi trenger. Også en EventListener å faktisk gjøre noe hver 100 millisekunder. "TIMER" event utfører "getMP3Time" metode som jeg vil gå gjennom i neste trinn

Linje 4 starter vår "Timer"
Var si:.. String = id3Data.artist + '-' + id3Data.songName; si = si.toUpperCase (); display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT; display.playerTexts.songInfo.wordWrap = false; display.playerTexts.songInfo.text = si; Tweener.addTween (display.playerTexts, {x: 60, tid: 1});

I den siste blokken viser vi id3 metadata for brukeren. Artistnavn og sangnavn blir presset til en ny variabel i første linje. Dette er fordi jeg ønsker å kapitalisere hele strengen i neste linje. Vi bruker bitmap font, så jeg tror det bare ser bedre ut med store bokstaver.

I linje 3 sørger vi for at de "songInfo" tekstfeltet er lang nok til å vise den "si" streng. Linje 4 er å unngå ordet innpakning i tekstfeltet og i linje 5 vi bare tildele "si" strengen til deg "songInfo" tekstfeltet.

Den siste linjen glir "playerTexts" MovieClip til "display".

Trinn 21: updateBufferField Metode

Det er høflig å vise brukeren hvor mye mp3-filen data er lastet. Vi har vår preloader, men jeg trodde vi skulle trenger også en buffer feltet fordi vår sang begynner å spille etter 50% er lastet. Denne metoden fortsetter der "mp3FileLoading" metoden slapp
privat funksjon updateBufferField (e: ProgressEvent): void {var currentPercent. Number = Math.round (e.bytesLoaded /e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; }

Det er ikke noe spesielt her, bare en privat funksjon med to linjer med handling. Grunnleggende prosent telling og tilordne den til "buffer" tekstfeltet

Trinn 22:. GetMP3Time Hendelses Metode

jeg vise denne metoden på en gang, fordi dette er bare matematikk og virkelig grunnleggende coding.Let oss gå det gjennom uansett
privat funksjon getMP3Time (e: Timerevent):. void {var totalMinutes = Math.floor (mp3File.length /1000/60); Var totalSeconds = Math.floor (mp3File.length /1000)% 60; Var currentMinutes = Math.floor (mp3FilePosition.position /1000/60); Var currentSeconds = Math.floor (mp3FilePosition.position /1000)% 60; if (totalSeconds < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds; }

I de første 4 linjer teller vi tider som vi trenger. Dette er litt vanskelig fordi alle returnerende verdier er i millisekunder. Vi har også runde minutter og sekunder ned.

linje 8 og 9 er for å legge til en ekstra null før sekunder hvis disse verdiene er under 10 (dette er bare tweaking og ikke nødvendig). For meg er "tid" tekstfeltet da ser litt renere

Den siste linjen viser hele tiden til bruker

Trinn 23:.. SongFinished Hendelses Metode

La oss fortsette med helt grunnleggende koden
privat funksjon songFinished (e: Hendelses): void {mp3FilePosition.removeEventListener (Event.SOUND_COMPLETE, songFinished);. updateTime.removeEventListener (TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos [3]; mp3FilePosition.stop (); playingSound = false; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'SPILL IGJEN?'; }

"songFinished" event metoden er lansert hver gang sangen er ferdig spilt.

I de to første linjene fjerner vi unødvendige EventListeners. Neste vi vise funksjonshemmede play-knappen for brukeren og stoppe mp3-fil. Stoppe er ikke nødvendig, men vi gjør det bare i tilfelle.

"playingSound" er satt til false og "songReachedEnd" til sann. I nSSL ext skritt du se hvorfor vi trenger "songReachedEnd" variable.

"soundPosition" er tilgjengelig fra hvor som helst i klassen vår, så det må settes til 0 på dette punktet. Nå sikrer vi at hvis brukeren ønsker å spille dig sang igjen den starter fra begynnelsen.

Den siste linjen setter "tider" tekstfeltet for å vise "PLAY AGAIN?" tekst. Våre brukere er kongene, det er derfor vi må gi all mulig informasjon til dem

Trinn 24:. MouseOverBs og mouseOutBs tilstelninger Metoder
private funksjons mouseOverBs (e: MouseEvent): void {if (playingSound) bs.buttons.y = buttonPos [5]; annet bs.buttons.y = buttonPos [1]; if (songReachedEnd & &! playingSound) bs.buttons.y = buttonPos [1]; }

Her er "mouseOverBs" metoden er avfyrt hver gang musen går over "bs" MovieClip.

Først disse hendelses metoder sjekke om "playingSound" er sant, og hvis "knapper" MovieClip er i "pause over" tilstand. Ellers viser det "spille over" tilstand. Våre siste linje kontrollerer om lyden er ferdig og det er ventet hvis brukeren ønsker å spille sangen igjen
private funksjons mouseOutBs (e: MouseEvent):. Void {if (playingSound) bs.buttons.y = buttonPos [0 ]; annet bs.buttons.y = buttonPos [4]; if (songReachedEnd & &! playingSound) bs.buttons.y = buttonPos [3]; }

Denne andre metoden er for når musen går over "bs" MovieClip

Dette er lik den metoden før

Trinn 25:.. mouseClickBs Hendelses Metode
< p> Denne hendelsen metoden er hjertet av vår "bs" MovieClip klikkfunksjon
if (playingSound) {bs.buttons.y = buttonPos [4].; soundPosition = mp3FilePosition.position; updateTime.stop (); mp3FilePosition.stop (); playingSound = false; display.playerTexts.times.text = 'PAUSE';

Når du klikker på knappen for den først sjekker om lyden spilles. I så fall flytter det for "knapper" MovieClip, butikker nåværende solid posisjon (der vi kan fortsette å spille fra hvis vi vil), stopper vår "Timer", stopper vår sang, setter "playingSound" til false og oppdateringer "tider" tekstfeltet tekst til "PAUSE". Denne blokken med kode er vår pause-knappen
else if (playingSound!) {Bs.buttons.y = buttonPos [2].; playMP3 (sant, soundPosition); playingSound = true; }

Denne koden blokken starter vår sang fra pause-staten. Den sjekker at vår sang ikke spiller og starter sangen fra lagret "soundPosition"
else if (songReachedEnd) {songReachedEnd = false.; playMP3 (false, 0); }

De siste blokk sjekker at hvis sangen er ferdigspilt, og brukeren ønsker å spille sangen på nytt, starter den sangen fra begynnelsen.

Konklusjon

SimpleMP3Player er nå fullført. .. (så langt som jeg er bekymret). Nå er det din tur til å legge noen funksjoner til det. Kanskje du ønsker å legge til et stopp-knapp eller kanskje gi den spillelisten funksjoner med XML. Gjør "songInfo" tekstfeltet rullbar så lenger dataene viste helt. Mulighetene er uendelige!

Ikke glem å sjekke kildekoden i kilden pakken. Jeg har kommentert koden fra begynnelse til slutt, slik at du kan lære dette tut på den måten også. Takk for lesing!