Share
Vi skal bygge en enkel mp3-spiller som du kan legge inn på en hvilken som helst nettside (et bånds hjemmeside for eksempel). Ved å følge denne tuten lærer du hvordan du importerer Illustrator-grafikk, hvordan du bygger knappen sprites med movieclips og hvordan du bruker Timer og Sound-klassene. Her går vi ...
Først vil jeg bare gå gjennom det vi trenger for å fullføre denne opplæringen:
Jeg har brukt den tredje partsklassen Caurina Tweener til å tween elementer på skjermen. Dette er ikke nødvendig fordi du kan bruke Flashs egen tween-klasse for å gjøre den samme jobben. Husk at hvis du ikke er kjent med Caurina, foreslår jeg at du tar en titt. Tween Lite er en annen tredjeparts tweener du kanskje har hørt om. Det er en veldig kraftig tween klasse som du også kan bruke til dette prosjektet hvis du vil. Du finner Caurina Tweener i kildekoden.
Først må du opprette et nytt Flash ActionScript 3.0-dokument. Du trenger ikke å justere noen dokumentegenskaper.
Gå til Flash> Innstillinger> AI-filimportør på Mac eller Rediger> Innstillinger> AI-filimportør på Windows. Pass på at du har følgende innstillinger:
Lagre det og gi det navnet "SimpleMP3Player.fla". Kopier også katalogen "caurina" og "tarzan.mp3" til samme sted som din .fla-fil.
Nå er vi klare til å importere Illustrator-filen. Gå til Arkiv> Import> Importer til trinn. Finn "simplemp3player.ai" fra kilden pakke "ai" katalogen, trykk OK og du får skjermen som vist nedenfor. Sett Konverter til lag "Flash lag" slik at du får alle lagene som finnes i ai-filen direkte til Flash. De neste to alternativene, som vist i bildet, plasserer alt kunstverket til samme koordinater som i ai-filen og endrer størrelsen på Flash-dokumentet nøyaktig til den størrelsen vi trenger.
Når du klikker OK i importdialogen, skal dokumentet se ut som bildet vist ovenfor.
Du har sikkert lagt merke til å spille og pause knapper i det siste bildet. De skal være vår knappsprite som styrer lyden. Alle knappene er gruppert i en gruppe.
Velg bare knappene gruppen og trykk F8 for å få "Konverter til symbol" -skjermen. Gi det navnet "knapper" og kontroller at du har valgt MovieClip som typen. Angi registreringen øverst til venstre og klikk OK. Bytt til Egenskaper panelet og gi objektet et forekomstnavn "knapper". Bildet nedenfor illustrerer disse trinnene visuelt:
Vi har knappene våre i en filmklipp, men masken er ikke inkludert. Vi trenger en mer filmklipp for å binde dem alle sammen.
Velg knappene filmklipp og maskeobjektet. Trykk igjen på F8 og gi det nå navnet "buttonSprite". Husk også å gi det et forekomstnavn. Denne gangen "bs" (jeg vet hva du tenker, men dette er en forkortelse av ButtonSprite).
Nå er vår knappesprite nesten klar til å rocke. Alt vi trenger å gjøre er å maske det slik at det bare viser en knapp om gangen.
Dobbeltklikk på knappenSprites filmklipp. Opprett et nytt lag over det aktive laget, og merk det "maske". Velg maskeobjektet og klipp det med "Cmd + X" på Mac eller "Ctrl + X" på Windows. Velg maskeringslaget og lim inn med "Cmd + V" på Mac eller "Ctrl + V" på Windows. Det spiller ingen rolle hvor maskeobjektet ditt er fordi neste vi justerer det til riktig sted.
Når masken er valgt, åpner du Juster-panelet (Vindu> Juster) og kontrollerer at "Til scenen" -knappen er trykket ned. Trykk nå på "Juster toppkanten" og "Juster venstre kant" -knappene, og maskeobjektet skal nå være i riktig posisjon, øverst til venstre i filmklippet.
Det eneste som gjenstår å gjøre er å maskere knappene. Høyreklikk over maskelaget og velg Mask.
Du kan se effekten øyeblikkelig; bare en knapp er synlig.
La oss glemme knappene en stund og fokusere på MP3-spillerens skjerm. Jeg skal vise deg hvordan du bygger dette skjermelementet manuelt. Det kan selvfølgelig gjøres med AS3, men la oss gjøre det manuelt denne gangen.
Velg først maskeelementet fra maskelaget. Konverter den til en filmklipp og gi den navnet "displayMask". Bruk dette navnet som forekomstnavn også. Masken for visning er klar, så skjul laget. Deretter lager du et lag mellom knappelaget og maskelaget. Gi det navnet "tekst". Velg tekstverktøyet fra paletten Verktøy og bruk alternativene som vises i bildet nedenfor:
Vi trenger tekstfelter for å vise vår informasjon (artist, sangnavn, lastingsprosent og sanglengde). Vi lager tekstfelt manuelt til scenen.
Først tegner du tekstfiler på tekstlaget som vist på bildet nedenfor. Konverter alle tre tekstfeltene til en enkelt filmklip kalt "playerTexts". Opprett en ny tekstfelt og kaller den "preloader". Du trenger ikke å konvertere dette til en filmklipp.
Alt vi trenger å gjøre er å inkludere vår nye loader-tekstfelt og playerTexts-movieclip i en filmklipp slik at vi kan kontrollere tekstene når og når vi liker.
Velg Loader-tekstfeltet og playerTexts-movieclip og trykk F8. Gi det et navn og et forekomstnavn på "display". Nå har vi fullført vårt skjermhierarki, det skal se slik ut:
For å skrive et datauteksempel til songInfo-tekstfelt må vi skrive følgende linje av kode:
display.playerTexts.songInfo.text = 'Det er her vi setter artisten og sangnavnet';
Så nå har vi alle grafiske elementer klar til at vi trenger MP3-spilleren. Deretter hopper vi dypt inn i koden, så dykk med meg!
For å få koden til å fungere må vi lage dokumentklassen. Dokumentklassekode utføres først når .swf-filer spilles. Du trenger ikke å skrive koden til tidslinjen lenger, og klassen din er lettere å importere til en annen .fla-fil i fremtiden hvis det trengs.
Gå til Arkiv> 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å tilordne den nye .as-filen som dokumentklasse. Klikk på scenen og gå til Egenskaper-panelet. Der finner du feltet "Klasse" der du må skrive inn klassenavnet du har opprettet. Skriv inn "SimpleMP3Player" og klikk på den lille blyantknappen. Hvis du stavet klassenavnet riktig, må filen "SimpleMP3Player.as" bli aktiv. Ellers vil Flash kaste en feil.
Kode bringer alt til liv. Her er det fullførte ActionScript, jeg skal forklare det blokkert for blokk. Sjekk også kildekoden fra kildepakken, jeg har kommentert det fra begynnelse til slutt.
Accentsconagua
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.EventDispatcher; importer flash.events.IOErrorEvent; importer flash.events.MouseEvent; importer flash.events.ProgressEvent; importer flash.events.TimerEvent; importere flash.media.Sound; importere flash.media.SoundChannel; importer flash.media.ID3Info; importere flash.net.URLRequest; importere flash.utils.Timer; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; importere caurina.transitions.Tweener; offentlig klasse SimpleMP3Player utvider MovieClip // Lag noen variabler som vi trenger private var mp3File: Sound; private var mp3FilePosition: SoundChannel; privat var id3Data: ID3Info; privat var id3InfoAvailable = false; privat var oppdateringstid: Timer; privat var playingSound: Boolean = false; privat var soundPosition: Number; private var songReachedEnd: Boolean = false; private var-knappepos: Array = nytt 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 (); privat 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); privat funksjon mp3FileLoading (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + currentPercent + '%'; hvis (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: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, tid: 1); privatfunksjon errorLoadingSound (e: IOErrorEvent): void trace ('Feil ved lasting av lyd:' + e); privat funksjon getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3; privat funksjon playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); ellers 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 = ny 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); privat funksjon updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; 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; hvis (totalSekunder < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds; private function songFinished(e:Event):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 = 'PLAY AGAIN?'; /* * allButtons.bs event methods begin */ private function mouseOverBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[5]; else bs.buttons.y = buttonPos[1]; if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[1]; private function mouseOutBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[0]; else bs.buttons.y = buttonPos[4]; if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[3]; private function 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(true, soundPosition); playingSound = true; else if (songReachedEnd) songReachedEnd = false; playMP3(false, 0); pakke // Plasser hvor hele klassen importen går offentlig klasse SimpleMP3Player utvider MovieClip offentlig funksjon SimpleMP3Player ()
Vårt startpunkt ser ut som eksempelet ovenfor. Husk at klassenavnet skal være det samme som dokumentets klassenavn. Alt inne i den offentlige funksjonen SimpleMP3Player kjøres rett etter at Flash har lastet inn klassen vår.
La oss importere alle klassene at vår MP3-spiller trenger å fungere skikkelig.
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.EventDispatcher; importer flash.events.IOErrorEvent; importer flash.events.MouseEvent; importer flash.events.ProgressEvent; importer flash.events.TimerEvent; importere flash.media.Sound; importere flash.media.SoundChannel; importer flash.media.ID3Info; importere flash.net.URLRequest; importere flash.utils.Timer; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; importere caurina.transitions.Tweener;
Alt skal være ganske rett frem. I den siste linjen importerer vi Caurina Tweener. Sørg for at du har katalogen caurina på samme sted som din .fla-fil.
Alle variabler er private. Bare klassen SimpleMP3Player kan bruke dem.
privat var mp3File: lyd; private var mp3FilePosition: SoundChannel;
MP3File lydobjektet lagrer vår Tarzan.mp3 lyd. mp3FilePosition er et SoundChannel objekt. Vi trenger det for å fortelle oss nåværende mp3File posisjon i millisekunder. Med dette objektet kan vi også stoppe mp3-filen.
privat var id3Data: ID3Info; privat var id3InfoAvailable = false;
Den id3Data objektet lagrer mp3 lyder id3 informasjon. For eksempel sangnavn og navn på kunstneren. id3InfoAvailable forteller vår preloader at ID3 info er tilgjengelig, slik at kode kan begynne å spille mp3File.
privat var oppdateringstid: Timer;
updateTime er vårt tidsobjekt som oppdaterer visningstider-tekstfeltet. Du finner mer informasjon om timerklassen her. Jeg går gjennom dette senere.
privat var playingSound: Boolean = false; privat var soundPosition: Number; private var songReachedEnd: Boolean = false;
playingSound er bare en boolsk variabel som forteller oss om mp3File spiller for øyeblikket. soundPosition lagrer en numerisk verdi når brukerne trykker på pause-knappen, slik at vi kan fortsette å spille musikk fra pauset posisjon når brukeren klikker Play-knappen. songReachedEnd indikerer at sangen er ferdig med å spille.
/ * * 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-knappenPos: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '- 216 ',' -252 '); Finalyl, sist men ikke minst, vår array variabel som holder knappene movieclip y koordinater. For eksempel:
bs.buttons.y = buttonsPos [4];
Pauseknappen vises da på skjermen. Hvis du bruker 0 inne i [parentes], vil du se Play-knappen.
Det er på tide å se hva vår kode gjør først når den er lastet. La oss håndtere den første funksjonen i vår kode; funksjonen SimpleMP3Player.
offentlig funksjon SimpleMP3Player () display.mask = displayMask; display.playerTexts.x = -73;
Funksjonen SimpleMP3Player er en konstruktørfunksjon, slik at den må være offentlig. Omdøper den til privat forårsaker en feil. Funksjonsstandard er offentlig, slik at du ikke nødvendigvis må skrive "offentlig" før funksjonen.
Masking med kode er veldig enkelt og rett frem. På linje 3 ser du kode for maskeringen. Vi tildeler bare "displayMask" filmklipp til "skjerm" filmklippets maskeegenskap. Det er det.
Andre egenskap display.playerTexts.x flytter "playerTexts" movieclip langs den horisontale aksen. Vi beveger oss rett og slett uten syn å koordinere -73. Mask gjemmer "playerTexts" movieclip.
bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3];
"knapper" er en filmklipp og som standard når musen svinger over den, forblir markøren som en grunnpil. Innstilling av "buttonMode" -egenskapen til ekte snu markøren i en hånd når musen svinger over. I begynnelsen ønsker vi at markøren som en pil, så knappenMode er satt til false. På samme linje setter vi den "aktiverte" eiendommen til feil. Det betyr at "knappene" movieclip ikke er klikkbar. I linje 2 setter vi "Knapper" filmklippsposisjon til deaktivert avspillingsknapp.
Den første linjen kan være forvirrende, men hvis jeg skriver den som dette ...
bs.buttons.buttonMode = false; bs.buttons.enabled = false;
... du kan sikkert se det tydeligere. Jeg sparer plass ved å skrive den i en linje.
Alt vi gjør nå er å ringe vår "loadMP3" -metode.
loadMP3 ();
Denne metoden er vår viktigste metode. Hva det gjør er å laste mp3-filen, erklære nødvendige EventListeners og skyv forprogrammeren som skal vises.
mp3File = nytt lyd ();
Denne linjen oppretter et nytt lydobjekt. Vi kan få tilgang til alle lydklassemetoder 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-hendelsen, og hver gang hendelsen blir påkalt, kaller den mp3FileLoading-metoden. Denne lytteren har noen egenskaper som vi trenger. Først er bytesTotal som holder hele størrelsen på mp3-filen i byte. For det andre er bytesLadet som inneholder de for øyeblikket lastede byte. Med disse to egenskapene kan vi telle prosentandelen som filen har lastet inn og vise den til brukeren.
Den andre linjen påberoper seg når hele mp3-filen har lastet inn. Det kaller mp3FileLoaded-metoden.
Den tredje linjen er for feilhåndtering. For eksempel, hvis og mp3-fil ikke er funnet, hevder denne hendelsen. Det kaller errorLoadingSound-metoden.
I linje 5 blir hendelsen påkalt når id3-data er tilgjengelig. Det kaller getID3Data-metoden.
mp3File.load (ny URLRequest ('tarzan.mp3')); "load" -metoden laster vår Tarzan mp3-fil. Innvendige parenteser erklærer vi en ny URLReaquest, og inne er det banen til vår mp3-fil. Vår bane er relativ og tarzan.mp3 må ligge på samme sted som .fla og .as-filene. Denne linjen er den samme som nedenfor. Bruk hvilken som helst du foretrekker.
var req: URLRequest = ny URLRequest ('tarzan.mp3'); mp3File.load (req); Dette er første gang vi bruker Caurina, så jeg vil raskt vise hvordan det fungerer.
Tweener.addTween (target, properties);
Dette er basekoden. Mål er hvor du skriver navnet på målobjektet du vil tween. I egenskaper definerer du hva du vil gjøre med målet. Du kan for eksempel endre x- og y-koordinatene, gjennomsiktigheten, skalaen eller rotasjonen.
Tweener.addTween (display.preloader, x: 96, tid: 1);
Målet vårt er "preloader" -feltet i "skjermbildet". Eiendom "x" flytter det og "tid" -egenskapen indikerer tiden som tweenen tar. Tiden måles i sekunder. Hvis du vil ha millisekunder, bruk ".5" notasjon.
privat funksjon mp3FileLoading (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + currentPercent + '%'; hvis (currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, tid: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading);
Som nevnt tidligere viser "mp3FileLoading" -metoden en prosentverdi av hvor mye mp3-filen er lastet inn. Det starter også sangen når prosentandelen stiger høyere enn 50%.
currentPercent er for å telle prosentverdien. Vi runder det opp med "Math.round" metoden. Linje 4 skriver prosentandelen til tekstfeltet slik at brukeren kan se hva som skjer med lasting.
Innenfor "if" -oppgaven sjekker vi om prosentandelen er over 50 og variabelen "id3InfoAvailable" er sann. Hvis begge returnerer sant, utfører "if"-setningen alt inne i parentesene.
Når if-setningen er sant, tverr vi mellom "forhåndslaster" tekstfelt bort. Når turen er fullført, kaller Caurina "playMP3" -metoden og sender to egenskaper til den. Vi ser "playMP3" -metoden i neste trinn.
PROGRESS-hendelsen er ikke lenger nødvendig, så vi fjerner den på linje 9.
privat funksjon mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, tid: 1);
Denne metoden er påkalt når hele sangen er lastet. Først fjerner vi unødvendige EventListeners. I linje 5 er vi mellom tekstfeltet "buffer" til høyre.
privatfunksjon errorLoadingSound (e: IOErrorEvent): void trace ('Feil ved lasting av lyd:' + e); Denne feilhåndteringen er veldig grunnleggende. Det sporer bare feil hvis feil oppstår.
privat funksjon getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3;
Vi stiller "id3InfoAvailable" til sant i linje 3. "mp3FileLoading" -metoden sjekker denne variabelen hver gang og starter lyden bare hvis den er sant. På denne måten sikrer vi at ID3-info er tilgjengelig, slik at brukeren ser ekte info på skjermen.
I linje 4 tilordner vi mp3File id3 metadata til ID3Info objekt kalt id3Data som vi opprettet i Trinn 12.
Denne metoden er den mer vitale metoden i spilleren vår. La oss se på den første blokken.
privat funksjon playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); ellers mp3FilePosition = mp3File.play ();
"PlayMP3" -metoden krever to egenskaper. "useSp" indikerer "bruk lydposisjon" og "sp" er "lydposisjon".
I linje 3 tester vi om "useSp" er sant. I så fall spiller koden vår sang fra startpunktet. Dette punktet er bestått i "sp" -egenskapen. Hvis det er feil, begynner vi å spille sangen fra begynnelsen. Alt dette er relatert til spillpause-knappen.
playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);
Linje 1 setter playSound til ekte. Nå kan vi sjekke om lyden spiller og gjør det som er nødvendig.
Ny EventListener i linje 2 brenner opp hver gang sangen avsluttes. "SongFinished" -metoden utføres. Legg merke til at vi legger EventListener til mp3FilePosition-objektet.
Andre nye EventListener i linje 3 legger til samme "PROGRESS" -hendelse til mp3File som i starten av koden. Denne lytteren brenner bare opp en annen metode. "UpdateBuffer" -metoden er for å oppdatere tekstfeltet "buffer".
bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0];
Den første linjen finner du allerede kjent. Vår mp3-fil spiller, slik at vi kan oppdatere knapper for å vise den aktuelle tilstanden, aktivere "buttonMode" og "enabled" egenskaper.
Vi bruker "Timer" for å vise gjeldende lydposisjon i sekunder. Med "Timer" kan du utføre metoder i tidssekvenser.
updateTime = ny timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();
Her oppretter den første linjen et nytt "Timer" -objekt med 100 millisekunder mellomrom. Du lurer kanskje på hvorfor vi vil oppdatere den nåværende tiden hver 100 millisekser ... 1 sekund er for sakte for spilleren vår og selv 0,5 sekunder er for sakte. Jeg vil at den skal oppdatere tiden veldig jevnt. Mer om Timer-klasse.
Vi trenger også en EventListener å faktisk gjøre noe hver 100 millisekunder. "TIMER" -hendelse utfører "getMP3Time" -metoden 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 til brukeren. Artistnavn og sangnavn blir presset til en ny variabel i første linje. Dette er fordi jeg vil kapitalisere hele strengen i neste linje. Vi bruker bitmap-fonten, så jeg tror det bare ser bedre ut i store versjoner.
I linje 3 sikrer vi at tekstfeltet "songInfo" er langt nok til å vise "si" -strengen. Linje 4 er å unngå ordet innpakning i tekstfeltet og i linje 5 tildeler vi bare "si" -strengen til deg "songInfo" tekstfelt.
Den siste linjen skyver "playerTexts" movieclip til "vise".
Det er høflig å vise brukeren hvor mye mp3-fildataene er lastet inn. Vi har vår preloader, men jeg trodde vi ville også trenge et bufferfelt fordi vår sang begynner å spille etter at 50% er lastet. Denne metoden fortsetter der hvor "mp3FileLoading" -metoden slått av.
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 handlingslinjer. Grunnprosent teller og tilordne den til "buffer" tekstfeltet.
Jeg viser denne metoden alt på en gang fordi dette er bare matte og virkelig grunnleggende koding. La oss gå gjennom det 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; hvis (totalSekunder < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;
I de første 4 linjene teller vi tider som vi trenger. Dette er litt vanskelig fordi alle returverdier er i millisekunder. Vi runder også 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 justering og ikke nødvendig). For meg ser tekstfeltet så litt renere ut.
Den siste linjen viser hele tiden til brukeren.
La oss fortsette med den helt grunnleggende koden.
privat funksjon songFinished (e: Event): 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 = 'PLAY AGAIN?';
Event-metoden "songFinished" lanseres hver gang sangen avsluttes.
I de to første linjene fjerner vi unødvendige EventListeners. Deretter viser vi den deaktiverte avspillingsknappen til brukeren og stopper mp3-filen. Stopp er ikke nødvendig, men vi gjør det bare i tilfelle.
"playingSound" er satt til false og "songReachedEnd" til true. I det ytterste trinnet ser du hvorfor vi trenger varianten "songReachedEnd".
"soundPosition" er tilgjengelig fra hvor som helst i vår klasse, så det må settes til 0 på dette punktet. Nå sikrer vi at hvis brukeren ønsker å spille deg sang igjen, starter den fra begynnelsen.
Den siste linjen angir "ganger" -feltet for å vise "PLAY AGAIN?" tekst. Våre brukere er kongene, derfor må vi gi all mulig informasjon til dem.
privat funksjon mouseOverBs (e: MouseEvent): void if (playingSound) bs.buttons.y = buttonPos [5]; ellers bs.buttons.y = buttonPos [1]; hvis (songReachedEnd &&! playingSound) bs.buttons.y = buttonPos [1];
Her blir "mouseOverBs" -metoden skutt hver gang musen går over "bs" filmklippet.
Først vurderer disse hendelsesmetodene om "playSound" er sant, og hvis "knappene" filmklippet er i "pause over" -tilstanden. Ellers viser den "spill over" -tilstanden. Vår siste linje kontrollerer om lyden er ferdig med å spille, og den venter hvis brukeren vil spille av sangen igjen.
privat funksjon mouseOutBs (e: MouseEvent): void if (playingSound) bs.buttons.y = buttonPos [0]; ellers bs.buttons.y = buttonPos [4]; hvis (songReachedEnd &&! playingSound) bs.buttons.y = buttonPos [3];
Denne andre metoden er for når musen går over "bs" movieclip.
Dette ligner på metoden før.
Denne hendelsesmetoden er hjertet av vår "bs" filmklipps klikkfunksjon.
hvis (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, kontrollerer den først om lyden spiller. Hvis det er tilfelle, flyttes det til "knappene" filmklipp, lagrer gjeldende lydposisjon (hvor vi kan fortsette å spille fra hvis vi vil), stopper vår "Timer", stopper sangen vår, setter "playSound" til falsk og oppdatert "ganger" tekstfelt Tekst til "PAUSE". Denne koden er vår pause-knapp.
ellers hvis (! playingSound) bs.buttons.y = buttonPos [2]; playMP3 (sant, lydposisjon); playingSound = true;
Denne kodeblokken starter vår sang fra pause-staten. Det kontrollerer at sangen vår ikke spiller og starter sangen fra lagret "soundPosition".
ellers hvis (songReachedEnd) songReachedEnd = false; playMP3 (false, 0);
Den siste blokken kontrollerer at hvis sangen er ferdig med å spille og brukeren vil spille av sang igjen, starter den sangen fra begynnelsen.
SimpleMP3Player er nå fullført ... (så vidt jeg er opptatt av). Nå er det din tur å legge til noen funksjoner til den. Kanskje du vil legge til en stoppeknapp eller kanskje gi den spillelistefunksjoner med XML. Lag "songInfo" -feltet rullbar, slik at lengre data blir vist helt. Mulighetene er endeløse!
Ikke glem å sjekke kildekoden i kildepakken. Jeg har kommentert koden fra begynnelse til slutt slik at du kan lære denne tuten på den måten også. Takk for at du leste!
