Creați un player MP3 simplu și atractiv

Vom construi un simplu mp3 player pe care îl puteți încorpora în orice pagină web (de exemplu, pagina de pornire a unei trupe). Urmând acest tut, veți învăța cum să importați grafice Illustrator, cum să construiți sprite cu butoane și cu ajutorul cărora să folosiți clasele Timer și Sound. Începem…




Noțiuni de bază

Mai intai voi trece prin ceea ce avem nevoie pentru a finaliza acest tutorial:

Am folosit clasa a treia parte Caurina Tweener pentru a adăuga elemente de pe ecran. Acest lucru nu este necesar pentru că puteți folosi clasa tween propriu pentru a face același lucru. Țineți minte, dacă nu sunteți familiarizați cu Caurina vă sugerez să aruncați o privire. Tween Lite este un al treilea partener de la care ați fi auzit. Este o clasă foarte puternică de tween pe care ați putea să o utilizați și pentru acest proiect dacă doriți. Puteți găsi Caurina Tweener în codul sursă.

  • Codul sursă include un fișier mp3 de care avem nevoie: strigătul puternic al lui Tarzan :). De asemenea, puteți utiliza propriul dvs. mp3, dacă doriți.
  • De asemenea, în codul sursă veți găsi directorul "ai" care conține fișierul simplemp3player.ai. Acest fișier include toate grafica pentru player.
  • În sfârșit, am inclus fontul de care avem nevoie. Se numește 04b03 și este un font bitmap. Instalați-l și sunteți gata să mergeți.

Pasul 1: Creați un fișier nou

Mai întâi trebuie să creați un nou document Flash Actionscript 3.0. Nu este necesar să modificați proprietățile documentului.

Accesați Flash> Preferințe> Importator fisier AI pe Mac sau Editare> Preferințe> Importator de fișiere AI pe Windows. Asigurați-vă că aveți următoarele setări:

Salvați-o și dați-i numele "SimpleMP3Player.fla". Copiați, de asemenea, directorul "caurina" și "tarzan.mp3" în același loc ca și fișierul .fla.

Pasul 2: Importați fișierul Illustrator

Acum suntem gata să importem fișierul Illustrator. Accesați Fișier> Import> Importare în scenă. Localizați "simplemp3player.ai" din directorul sursă "ai", apăsați OK și veți obține ecranul după cum se arată mai jos. Setați conversia în straturi "straturi Flash" astfel încât să obțineți toate straturile conținute în fișierul ai direct în Flash. Următoarele două opțiuni, așa cum arată imaginea, plasează toate lucrările de artă la aceleași coordonate ca și în fișierul ai și redimensionați documentul dvs. Flash exact la dimensiunea de care avem nevoie.

Când faceți clic pe OK în dialogul de import, documentul dvs. ar trebui să arate ca imaginea de mai sus.

Pasul 3: Creați butonul Sprite

Probabil ați observat butoanele de redare și pauză din ultima imagine. Acestea vor fi butonul nostru sprite care controlează sunetul. Toate butoanele sunt grupate într-un singur grup.

Selectați numai grupul de butoane și apăsați F8 pentru a obține ecranul "Conversie în simbol". Dați-i numele "butoane" și asigurați-vă că ați selectat MovieClip ca tip. Setați înregistrarea în colțul din stânga sus și faceți clic pe OK. Treceți la panoul Proprietăți și dați obiectului un nume de "butoane". Imaginea de mai jos ilustrează aceste etape vizual:

Avem butoanele noastre într-o singură mișcare, dar masca nu este inclusă. Avem nevoie de încă unul pentru a le lega împreună.

Selectați butoanele movieclip și obiectul mască. Apăsați din nou tasta F8 și acum îi dați numele "buttonSprite". De asemenea, amintiți-vă să-i dați un nume de instanță. De data aceasta "bs" (știu ce gândiți, dar aceasta este o abreviere a ButtonSprite).

Pasul 4: Mascarea manuală

Acum, butonul nostru sprite este aproape gata să rock. Tot ce trebuie să facem este să-l mascheze pentru a arăta un singur buton la un moment dat.

Faceți dublu clic pe butonul "Deplasați" movieclip. Creați un strat nou deasupra stratului activ și denumiți-l "mască". Selectați obiectul mască și o decupați folosind "Cmd + X" pe Mac sau "Ctrl + X" pe Windows. Selectați stratul de mască și inserați utilizând "Cmd + V" pe Mac sau "Ctrl + V" pe Windows. Nu contează unde este obiectul mască, deoarece îl aliniem apoi la locul potrivit.

Cu masca selectată încă, deschideți panoul Aliniere (Fereastră> Aliniere) și asigurați-vă că butonul "La scenă" este apăsat. Acum, apăsați butoanele "Aliniați marginea superioară" și "Aliniați marginea stângă", iar obiectul masca ar trebui să fie acum în poziția corectă, colțul din stânga sus al filmului dvs. movieclip.

Singurul lucru pe care trebuie să-l faci este să maschezi butoanele. Faceți clic dreapta pe deasupra stratului de mască și alegeți Mască.

Puteți vedea efectul instantaneu; doar un singur buton este vizibil.

Pasul 5: Începeți să creați afișajul

Să uităm butoanele pentru o vreme și să ne concentrăm pe afișajul playerului MP3. Vă voi arăta cum să construiți acest element de afișare manual. S-ar putea face cu AS3, desigur, dar să o facem manual de data asta.

Mai întâi selectați elementul mască din stratul de mască. Transformați-l într-un videoclip și dați-i numele "displayMask". Utilizați acest nume și ca nume de instanță. Masca pentru afișare este gata, ascundeți stratul. Apoi, creați un strat între stratul de butoane și stratul de mască. Denumiți-l "text". Selectați instrumentul Text din paleta de instrumente și utilizați opțiunile afișate în imaginea de mai jos:

Pasul 6: Adăugați câmpurile text pentru afișare

Avem nevoie de câmpuri text pentru a afișa informațiile noastre (artist, nume cântec, procentaj de încărcare și lungime cântec). Vom crea manual câmpuri text pe scenă.

Mai întâi trageți texturi pe stratul de text așa cum se arată în imaginea de mai jos. Convertiți toate cele trei câmpuri de text într-un singur filigran numit "playerTexts". Creați încă un câmp de text și numiți-l "preloader". Nu aveți nevoie să convertiți acest lucru într-un filigran.

Pasul 7: Finalizați afișajul

Tot ce trebuie să facem este să includem noul nostru câmp de încărcare-text și playerTexts-movieclip într-un filigran pentru a putea controla textele ca și când ne place.

Selectați câmpul de text pentru încărcător și playerTexts-movieclip și apăsați F8. Dați-i un nume și un nume de instanță pentru "afișare". Acum am finalizat ierarhia noastră de afișare, ar trebui să arate astfel:

Pentru a scrie un exemplu de date pentru songInfo-textfield trebuie să scrieți următoarea linie de cod:

 display.playerTexts.songInfo.text = 'Aici plasăm numele artistului și melodiei';

Deci, acum avem fiecare element grafic gata de care avem nevoie pentru MP3 Player. Înainte vom sari adânc în cod, așa că se aruncă cu mine!

Pasul 8: Creați fișier de clasă de document

Pentru a obține codul de lucru trebuie să creați clasa de documente. Codul clasei de cod este executat mai întâi când se redă fișierele .swf. Nu mai trebuie să vă scrieți codul pe cronologie și clasa dvs. este mai ușor de importat într-un alt fișier .fla în viitor dacă este necesar.

Accesați Fișier> Nou. Selectați "File Actionscript" din fereastra care se deschide și faceți clic pe OK. Salvați fișierul în același folder ca fișierul .fla și denumiți-l "SimpleMP3Player.as".

Acum atribuiți noul fișier .as ca clasă de documente. Faceți clic pe etapă și mergeți la panoul Proprietăți. Acolo veți găsi câmpul "Clasă" unde trebuie să introduceți numele de clasă pe care l-ați creat. Introduceți "SimpleMP3Player" și faceți clic pe butonul mic creion. Dacă ați scris corect numele de clasă, fișierul "SimpleMP3Player.as" ar trebui să devină activ. Altfel, Flash va arunca o eroare.

Pasul 9: Codul

Codul aduce totul la viață. Iată acțiunea finalizată ActionScript, o voi explica blocând blocul. Verificați și codul sursă din pachetul sursă, l-am comentat de la început până la sfârșit.

 pachet import flash.display.MovieClip; importul flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; importul 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; clasa publica SimpleMP3Player extinde MovieClip // Creeaza cateva variabile de care avem nevoie privat var mp3File: Sound; privat var mp3FilePosition: SoundChannel; privat var id3Data: ID3Info; privat var id3InfoAvailable = false; private var updateTime: Timer; privat var jocSound: Boolean = false; private var soundPosition: Număr; canal privat varReachedEnd: Boolean = false; butonul privat varPos: Array = Array nou ('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252'); funcția publică SimpleMP3Player () display.playerTexts.x = -73; display.mask = displayMask; bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = butonPos [3]; loadMP3 ();  funcția privată loadMP3 (): void mp3File = new Sound (); mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Eveniment.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data); mp3File.load (noua adresă URLRequest ('tarzan.mp3')); Tweener.addTween (display.preloader, x: 96, timpul: 1);  funcția privată mp3FileLoading (e: ProgressEvent): void var currentPercent: Număr = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + actualPercent + '%'; dacă currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, timp: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading);  funcția privată mp3FileLoaded (e: Eveniment): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, timp: 1);  funcția privată errorLoadingSound (e: IOErrorEvent): void trace ('Eroare la încărcarea sunetului:' + e);  funcția privată getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3;  funcția privată playMP3 (useSp: Boolean, sp: Număr): void if (useSp) mp3FilePosition = mp3File.play (sp); altceva mp3FilePosition = mp3File.play (); playSound = adevărat; mp3FilePosition.addEventListener (eveniment.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField); bs.buttons.buttonMode = bs.buttons.enabled = adevărat; bs.buttons.y = butonPos [0]; bs.buttons.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBs); bs.buttons.addEventListener (MouseEvent.MOUSE_OUT, mouseOutBs); bs.buttons.addEventListener (MouseEvent.CLICK, mouseClickBs); updateTime = nou Cronometru (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start (); var și: 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, timpul: 1);  funcția privată updateBufferField (e: ProgressEvent): void var actualPercent: Număr = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = actualPercent + '%';  funcția privată getMP3Time (e: TimerEvent): void var totalMinutes = Math.floor (mp3File.length / 1000/60); var totalSeconds = Math.floor (mp3File.length / 1000)% 60; Var curentMinute = Math.floor (mp3FilePosition.position / 1000/60); var currentSeconds = Math.floor (mp3FilePoziție.position / 1000)% 60; dacă (totalSeconds < 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);    

Pasul 10: Codul pachetului de bază

 pachet // Locul unde toate clasele de importuri se transformă într-o clasă publică SimpleMP3Player extinde MovieClip funcția publică SimpleMP3Player () 

Punctul nostru de pornire arată ca exemplul de mai sus. Amintiți-vă că numele clasei ar trebui să fie același cu numele fișierului de clasă al documentului. Totul în interiorul funcției publice SimpleMP3Player se execută imediat după ce Flash a încărcat clasa noastră.

Pasul 11: Importați clasele necesare

Să importăm toate clasele pe care playerul nostru MP3 trebuie să funcționeze corect.

 pachet import flash.display.MovieClip; importul flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; importul 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;

Totul ar trebui să fie destul de drept. În ultimul rând, importăm Caurina Tweener. Asigurați-vă că aveți directorul caurina în aceeași locație ca și fișierul .fla.

Pasul 12: Declarați variabilele

Toate variabilele sunt private. Doar clasa SimpleMP3Player le poate folosi.

 private var mp3File: sunet; privat var mp3FilePosition: SoundChannel;

Obiectul de sunet mp3File stochează sunetul nostru Tarzan.mp3. mp3FilePosition este un obiect SoundChannel. Avem nevoie de aceasta pentru a ne spune pozitia actuala mp3File in milisecunde. Cu acest obiect putem opri, de asemenea, fișierul mp3.

 privat var id3Data: ID3Info; privat var id3InfoAvailable = false;

Obiectul id3Data stochează informații despre melodiile mp3 id3. De exemplu, numele melodiei și numele artistului. id3InfoAvailable spune preloader-ului nostru că id3 info este disponibil, astfel încât codul poate începe să redea mp3File.

 private var updateTime: Timer;

updateTime este obiectul nostru de temporizare care actualizează câmpul de timp de afișare a textului. Puteți găsi mai multe informații despre clasa Timer aici. Voi trece mai târziu.

 privat var jocSound: Boolean = false; private var soundPosition: Număr; canal privat varReachedEnd: Boolean = false;

playSound este pur și simplu o variabilă booleană care ne spune dacă mp3File rulează în prezent. soundPosition stochează o valoare numerică când utilizatorii apasă butonul Pauză pentru a putea continua să redați muzică din poziția întreruptă atunci când utilizatorul face clic pe butonul Redare. songReachedEnd indică faptul că piesa a terminat de redat.

 / * * butonulPos [0] = butonul playUp * butonulPos [1] = butonul playOver * butonulPos [2] = butonul playDown * butonulPos [3] = playDis * butonulPos [4] = pauseUp * buttonPos [5] = pauseOver * buttonPos [6] = pauzaDown * butonulPos [7] = pauseDis * / butonul privat varPos: Array = Array nou ('0', '-36', '-72' ,'108 ',' 216 ',' -252 ');

Finalyl, nu în ultimul rând, variabila noastră de matrice care deține butoanele movieclip y. De exemplu:

 bs.buttons.y = butoanePos [4];

Pe ecran apare apoi butonul de pauză. Dacă utilizați 0 în interiorul [paranteză], veți vedea butonul Redare.

Pasul 13: Mascare cu cod

Este timpul să vedem ce face codul nostru când este încărcat. Să rezolvăm prima funcție din codul nostru; funcția SimpleMP3Player.

 funcția publică SimpleMP3Player () display.mask = displayMask; display.playerTexts.x = -73;

funcția SimpleMP3Player este o funcție a constructorului, astfel încât trebuie să fie publică. Redenindu-l la privat provoacă o eroare. Funcționarea stării implicite este publică, astfel încât nu trebuie neapărat să scrieți "public" înaintea funcției.

Mascarea cu cod este foarte simplă și directă. Pe linia 3 veți vedea codul pentru mascare. Tocmai atribuim movieclip "displayMask" la proprietatea mascului "display" al mascului. Asta e.

Al doilea element display.playerTexts.x muta miscarea "playerTexts" de-a lungul axei orizontale. Pur și simplu o scoatem din vedere pentru a ne coordona - 73. Masca ascunde "playerTexts" movieclip.

Pasul 14: Metode, Moduri de butoane și BS

 bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = butonPos [3];

"butoanele" este un movieclip și, în mod implicit, când mouse-ul se deplasează peste acesta, cursorul rămâne ca o săgeată de bază. Setarea proprietății "buttonMode" la adevărat transformă cursorul într-o mână atunci când mouse-ul se deplasează. La inceput, dorim ca cursorul ca o sageata, astfel butonul ModeMode sa fie setat la false. În aceeași linie, am setat proprietatea "activat" la "false". Asta inseamna ca butoanele "butoane" nu pot face clic. În linia 2 am setat poziția "butoane" în poziția movieclip pe butonul dezactivat.

Prima linie poate fi confuză, dar dacă o scriu așa ...

 bs.buttons.buttonMode = false; bs.buttons.enabled = false;

... probabil o puteți vedea mai clar. Economisesc spațiu scriind-o într-o singură linie.

Tot ce facem acum este numirea metodei noastre "loadMP3".

 loadMP3 ();

Pasul 15: metoda loadMP3

Această metodă este metoda noastră principală. Ceea ce face este încărcarea fișierului mp3, declararea EventListenerilor necesare și glisarea preloader-ului pentru afișare.

 mp3File = nou Sunet ();

Această linie creează un nou obiect de sunet. Putem accesa toate metodele de clasă de sunet și proprietăți prin mp3File.

 mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Eveniment.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data);

Prima linie declară evenimentul PROGRESS și de fiecare dată când evenimentul este invocat, el apelează metoda mp3FileLoading. Acest ascultător are câteva proprietăți de care avem nevoie. Primul este bytesTotal care deține întreaga dimensiune a fișierului mp3 în octeți. Al doilea este bytesLoaded care deține octeții încărcați în prezent. Cu aceste două proprietăți putem număra procentajul pe care fișierul la încărcat și îl afișa pentru utilizator.

A doua linie se invocă atunci când întregul fișier mp3 a fost încărcat. Se numește metoda mp3FileLoaded.

A treia linie este pentru tratarea erorilor. De exemplu, dacă și fișierul mp3 nu este găsit, acest eveniment invocă. Se numește metoda errorLoadingSound.

În linia 5, evenimentul este invocat atunci când datele id3 sunt disponibile. Se numește metoda getID3Data.

 mp3File.load (noua adresă URLRequest ('tarzan.mp3'));

metoda "încărcare" încarcă fișierul mp3-ului Tarzan. În paranteze declarăm un nou URLReaquest și în interiorul acestuia este calea către fișierul nostru mp3. Calea noastră este relativă și tarzan.mp3 trebuie să fie în aceeași locație cu fișierele .fla și .as. Această linie este identică cu cea de mai jos. Utilizați oricare preferați.

 var req: URLRequest = URLRequest nou ('tarzan.mp3'); mp3File.load (req);

Aceasta este prima dată când folosim Caurina, așa că voi demonstra rapid cum funcționează.

 Tweener.addTween (țintă, proprietăți);

Acesta este codul de bază. Ținta este locul în care scrieți numele obiectului vizat pe care doriți să îl adăugați. În proprietăți definiți ce doriți să faceți cu obiectivul. Puteți modifica, de exemplu, coordonatele x și y, transparența, scala sau rotația.

 Tweener.addTween (display.preloader, x: 96, timpul: 1);

Ținta noastră este câmpul de text "preloader" din interiorul "display" -ului movieclip. Proprietatea "x" îl mută, iar proprietatea "timp" indică timpul în care se efectuează adăugarea. Timpul este măsurat în secunde. Dacă doriți milisecunde utilizați notația ".5".

Pasul 16: Metoda evenimentului mp3FileLoading

 funcția privată mp3FileLoading (e: ProgressEvent): void var actualPercent: Număr = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + actualPercent + '%'; dacă currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, timp: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading); 

După cum am menționat mai devreme, metoda "mp3FileLoading" arată o valoare procentuală a cât de mult a fost încărcat fișierul mp3. De asemenea, începe melodia atunci când procentajul urcă mai mult de 50%.

currentPercent este pentru numărarea valorii procentuale. Încheiem cu metoda "Math.round". Linia 4 scrie valoarea procentuală în câmpul nostru de text, astfel încât utilizatorul să poată vedea ce se întâmplă cu încărcarea.

În cadrul instrucțiunii "if" verificăm dacă procentajul este mai mare de 50 și variabila "id3InfoAvailable" este adevărată. Dacă ambele returnează adevărul, instrucțiunea "if" execută totul în interiorul parantezelor.

Atunci când instrucțiunea if este adevărată, vom trece de câmpul de tip "preloader". Când tween-ul este complet, Caurina numește metoda "playMP3" și transmite două proprietăți. Vedem metoda "playMP3" în pasul următor.

Evenimentul PROGRESS nu mai este necesar, așa că îl eliminăm pe linia 9.

Pasul 17: Metoda evenimentului mp3FileLoaded

 funcția privată mp3FileLoaded (e: Eveniment): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, timp: 1); 

Această metodă este invocată când întregul cântec este încărcat. Mai întâi eliminăm EventListeners inutile. În linia 5 am adăugat câmpul de text "tampon" spre dreapta.

Pasul 18: Metoda EventLoadingSound Event

 funcția privată errorLoadingSound (e: IOErrorEvent): void trace ('Eroare la încărcarea sunetului:' + e); 

Această gestionare a erorilor este într-adevăr de bază. Rezultă doar erorile dacă apar erori.

Pasul 19: Metoda evenimentului getID3Data

 funcția privată getID3Data (e: Eveniment): void id3InfoAvailable = true; id3Data = mp3File.id3; 

Am setat "id3InfoAvailable" la true în rândul 3. Metoda "mp3FileLoading" verifică această variabilă de fiecare dată și pornește sunetul numai dacă este adevărat. În acest fel, asigurăm faptul că informațiile id3 sunt disponibile, astfel încât utilizatorul vede informații reale pe ecran.

În linia 4 atribuim metadatele mp3File id3 la obiectul ID3Info numit id3Data pe care l-am creat la Pasul 12.

Pasul 20: Metoda playMP3

Această metodă este metoda cea mai vitală în jucătorul nostru. Să ne uităm la primul bloc.

 funcția privată playMP3 (useSp: Boolean, sp: Număr): void if (useSp) mp3FilePosition = mp3File.play (sp); altceva mp3FilePosition = mp3File.play ();

Metoda "playMP3" necesită două proprietăți. "useSp" indică "folosiți poziția sunetului" și "sp" este "poziția sunetului".

În linia 3 testăm dacă "useSp" este adevărat. Dacă da, codul reda piesa noastră pornind de la punctul dorit. Acest punct este trecut în proprietatea "sp". Dacă este fals, începem să cântăm piesa de la început. Toate acestea sunt legate de butonul de redare-pauză.

 playSound = adevărat; mp3FilePosition.addEventListener (eveniment.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);

Linia 1 stabilește funcția de redare la True. Acum putem verifica dacă sunetul se joacă și face ceea ce este vreodată necesar.

Noul EventListener din linia 2 se declanșează de fiecare dată când melodia termină redarea. Metoda "songFinished" este executată. Observați că adăugăm EventListener la obiectul mp3FilePosition.

În al doilea rând, noul EventListener din rândul 3 adaugă același eveniment "PROGRESS" la mp3File ca la începutul codului. Acest ascultător doar declanșează o altă metodă. Metoda "updateBuffer" este pentru actualizarea câmpului text "buffer".

 bs.buttons.buttonMode = bs.buttons.enabled = adevărat; bs.buttons.y = butonPos [0];

Prima linie pe care o veți găsi deja cunoscută. Fișierul nostru mp3 se joacă pentru a putea actualiza butoanele pentru a afișa starea corespunzătoare, pentru a activa proprietățile "buttonMode" și "enabled".

Folosim "Timer" pentru a afișa poziția curentă a sunetului în câteva secunde. Cu "Timer" puteți executa metode în secvențe de timp.

 updateTime = nou Cronometru (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();

Aici, prima linie creează un nou obiect "Timer" cu interval de 100 milisecunde. S-ar putea să vă întrebați de ce vrem să actualizăm ora curentă la fiecare 100 de milisecunde ... 1 secundă este prea lentă pentru jucător și chiar 0,5 secunde este prea lentă. Vreau să actualizeze timpul într-adevăr fără probleme. Mai multe despre clasa Timer.

De asemenea, avem nevoie de un EventListener pentru a face ceva la fiecare 100 de milisecunde. Evenimentul "TIMER" execută metoda "getMP3Time" pe care o voi trece în pasul următor.

Linia 4 începe "Timerul".

 var și: 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, timpul: 1);

În ultimul bloc se afișează metadatele id3 pentru utilizator. Numele artistului și numele melodiei sunt împinse la o nouă variabilă în prima linie. Acest lucru se datorează faptului că vreau să capitalizez întregul șir în linia următoare. Folosim fontul bitmap, așa că cred că arată mai bine cu majuscule.

În linia 3 se asigură că câmpul text "songInfo" este suficient de lung pentru a afișa șirul "si". Linia 4 este pentru a evita înfășurarea cuvântului în câmpul de text și în rândul 5 atribuim pur și simplu șirul "si" câmpului text "songInfo".

Ultima linie alunecă movieclip "playerTexts" la "display".

Pasul 21: metoda updateBufferField

Este politicos să arătați utilizatorului cât de mult sunt încărcate datele fișierului mp3. Avem preloaderul nostru, dar m-am gândit că vom avea nevoie și de un câmp tampon pentru că melodia noastră începe să se joace după încărcarea a 50%. Această metodă continuă în cazul în care metoda "mp3FileLoading" a rămas.

 funcția privată updateBufferField (e: ProgressEvent): void var actualPercent: Număr = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = actualPercent + '%'; 

Nu este nimic special aici, doar o funcție privată cu două linii de acțiune. Numărătoarea procentuală de bază și alocarea acesteia câmpului text "tampon".

Pasul 22: Metoda evenimentului getMP3Time

Am arătat această metodă simultan, pentru că aceasta este doar o chestiune de matematică și codificare de bază. Să mergem oricum.

 funcția privată getMP3Time (e: TimerEvent): void var totalMinutes = Math.floor (mp3File.length / 1000/60); var totalSeconds = Math.floor (mp3File.length / 1000)% 60; Var curentMinute = Math.floor (mp3FilePosition.position / 1000/60); var currentSeconds = Math.floor (mp3FilePoziție.position / 1000)% 60; dacă (totalSeconds < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds; 

În primele 4 linii numărăm de câte ori avem nevoie. Acest lucru este un pic dificil, deoarece toate valorile returnate sunt în milisecunde. De asemenea, rundă minute și secunde în jos.

Liniile 8 și 9 sunt pentru adăugarea unui zero în plus înaintea secundelor dacă aceste valori sunt sub 10 (acest lucru este doar modificat și nu este necesar). Pentru mine, câmpul de text "timp" pare puțin mai curat.

Ultimul rând afișează tot timpul utilizatorului.

Pasul 23: Metoda evenimentului finalizat

Să continuăm cu codul de bază.

 Funcția privată songFinished (e: Event): void mp3FilePosition.removeEventListener (Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener (TimerEvent.TIMER, getMP3Time); bs.buttons.y = butonPos [3]; mp3FilePosition.stop (); playSound = false; songReachedEnd = adevărat; soundPosition = 0; display.playerTexts.times.text = 'PLAY AGAIN?'; 

Metoda evenimentului "songFinished" este lansată de fiecare dată când melodia termină redarea.

În primele două rânduri, eliminăm EventListeners inutile. În continuare, afișăm butonul dezactivat pentru utilizator și oprim fișierul mp3. Oprirea nu este necesară, dar o facem doar în caz.

"playSound" este setat la "false" și "songReachedEnd" la true. În pasul ext văd de ce avem nevoie de variabila "songReachedEnd".

"soundPosition" este accesibil de oriunde în clasa noastră, deci trebuie să fie setat la 0 în acest moment. Acum ne asigurăm că, dacă utilizatorul dorește să redea piesa din nou, începe de la început.

Ultima linie stabilește câmpul de text "ori" pentru a afișa "PLAY AGAIN?" text. Utilizatorii noștri sunt regi, de aceea trebuie să le oferim toate informațiile posibile.

Pasul 24: Metodele de șablon ale mouseOverBs și mouseOutBs

 funcția privată mouseOverBs (e: MouseEvent): void if (playSound) bs.buttons.y = butonPos [5]; altceva bs.buttons.y = butonPos [1]; dacă (songReachedEnd &&! jocSound) bs.buttons.y = butonPos [1]; 

Aici metoda "mouseOverBs" este trasă de fiecare dată când mouse-ul merge peste "bs" movieclip.

În primul rând, aceste metode de eveniment verifică dacă "playSound" este adevărat și dacă butoanele "movieclip" se află în starea "pauză peste". În caz contrar, se afișează starea "redare". Ultima noastră linie verifică dacă sunetul a terminat de redat și așteaptă dacă utilizatorul dorește să redea piesa din nou.

 funcția privată mouseOutBs (e: MouseEvent): void if (playSound) bs.buttons.y = butonPos [0]; altceva bs.buttons.y = butonPos [4]; dacă (songReachedEnd &&! jocSound) bs.buttons.y = butonPos [3]; 

Această altă metodă este pentru atunci când mouse-u

Cod