Share
Costruiremo un semplice lettore mp3 che puoi incorporare in qualsiasi pagina web (la homepage di una band per esempio). Seguendo questo tutorial imparerai come importare la grafica di Illustrator, come creare sprite dei pulsanti con i clip mobili e come usare le classi Timer e Suono. Eccoci qui…
Per prima cosa, passerò attraverso ciò di cui abbiamo bisogno per completare questo tutorial:
Ho usato la classe di terze parti Caurina Tweener per interpolare gli elementi sullo schermo. Questo non è richiesto perché è possibile utilizzare la classe tween della stessa Flash per fare lo stesso lavoro. Intendiamoci, se non hai familiarità con Caurina ti suggerisco di dare un'occhiata. Tween Lite è un altro tweener di terze parti di cui potresti aver sentito parlare. È una classe tween molto potente che potresti utilizzare anche per questo progetto, se lo desideri. Puoi trovare Caurina Tweener nel codice sorgente.
Per prima cosa è necessario creare un nuovo documento Flash Actionscript 3.0. Non è necessario regolare le proprietà del documento.
Vai a Flash> Preferenze> Importatore file AI su Mac o Modifica> Preferenze> Importatore file AI su Windows. Assicurati di avere le seguenti impostazioni:
Salvalo e dagli il nome "SimpleMP3Player.fla". Copia anche la directory "caurina" e "tarzan.mp3" nella stessa posizione del tuo file .fla.
Ora siamo pronti per importare il file di Illustrator. Vai a File> Importa> Importa nello stage. Individua "simplemp3player.ai" dalla cartella "ai" del pacchetto sorgente, premi OK e otterrai lo schermo come mostrato di seguito. Imposta Converti in livelli "Flash layer" in modo da ottenere direttamente su Flash tutti i livelli contenuti nel file ai. Le prossime due opzioni, come mostrato nell'immagine, posizionano tutte le immagini con le stesse coordinate del file ai e ridimensionano il tuo documento Flash esattamente in base alle dimensioni di cui abbiamo bisogno.
Quando fai clic su OK nella finestra di importazione, il tuo documento dovrebbe apparire come l'immagine mostrata sopra.
Probabilmente hai notato pulsanti di riproduzione e pausa nell'ultima immagine. Questi saranno i nostri pulsanti sprite che controllano il suono. Tutti i pulsanti sono raggruppati in un unico gruppo.
Selezionare solo il gruppo di pulsanti e premere F8 per visualizzare la schermata "Converti in simbolo". Dagli il nome di "pulsanti" e assicurati di aver selezionato MovieClip come tipo. Imposta la registrazione nell'angolo in alto a sinistra e fai clic su OK. Passare al pannello Proprietà e assegnare all'oggetto un nome di istanza "pulsanti". L'immagine seguente illustra visivamente questi passaggi:
Abbiamo i nostri pulsanti in un Movie Clip, ma la maschera non è inclusa. Abbiamo bisogno di un altro Movie Clip per legarli tutti insieme.
Seleziona i pulsanti Movie Clip e l'oggetto maschera. Ancora una volta premere F8 e ora dargli un nome di "buttonSprite". Ricorda anche di dargli un nome di istanza. Questa volta "bs" (so cosa stai pensando, ma questa è un'abbreviazione di ButtonSprite).
Ora il nostro pulsante sprite è quasi pronto per il rock. Tutto quello che dobbiamo fare è mascherarlo in modo che mostri solo un pulsante alla volta.
Fai doppio clic sul tuo filmato. Crea un nuovo livello sopra il livello attivo e chiamalo "maschera". Seleziona l'oggetto maschera e tagliala usando "Cmd + X" su Mac o "Ctrl + X" su Windows. Seleziona il livello maschera e incolla usando "Cmd + V" su Mac o "Ctrl + V" su Windows. Non importa dove sia il tuo oggetto maschera perché dopo lo allineiamo al posto giusto.
Con la maschera ancora selezionata, apri il pannello Allinea (Finestra> Allinea) e assicurati che il pulsante "In scena" sia premuto. Ora premi i pulsanti "Allinea bordo superiore" e "Allinea bordo sinistro" e l'oggetto maschera dovrebbe ora trovarsi nella posizione corretta, l'angolo in alto a sinistra del Movie Clip.
L'unica cosa che rimane da fare è mascherare i pulsanti. Fai clic con il tasto destro sopra il livello maschera e seleziona Maschera.
Puoi vedere l'effetto istantaneamente; solo un pulsante è visibile.
Dimentichiamo i pulsanti per un po 'e concentriamoci sul display del lettore MP3. Ti mostrerò come costruire questo elemento di visualizzazione manualmente. Potrebbe essere fatto con AS3, ovviamente, ma facciamolo manualmente questa volta.
Prima seleziona l'elemento maschera dal livello maschera. Convertilo in un Movie Clip e assegnagli il nome "displayMask". Usa questo nome come anche il nome dell'istanza. La maschera per la visualizzazione è pronta, quindi nascondi il livello. Quindi, crea un livello tra il livello dei pulsanti e il livello maschera. Chiamalo "testo". Seleziona lo strumento Testo dalla palette Strumenti e usa le opzioni mostrate nell'immagine qui sotto:
Abbiamo bisogno di campi di testo per mostrare le nostre informazioni (artista, nome del brano, percentuale di caricamento e lunghezza del brano). Creeremo manualmente campi di testo sul palco.
Per prima cosa disegna gli oggetti di testo sul livello testo come mostrato nell'immagine qui sotto. Converti tutti e tre i campi di testo in un unico Movie Clip chiamato "playerTexts". Crea un altro campo di testo e chiamalo "preloader". Non è necessario convertirlo in un Movie Clip.
Tutto ciò che dobbiamo fare è includere il nostro nuovo caricatore-campo di testo e playerTexts-Movie Clip in un Movie Clip in modo da poter controllare i testi come e quando ci piacciono.
Seleziona il caricatore-campo di testo e playerTexts-MovieClip e premi F8. Dagli un nome e un nome di istanza di "display". Ora abbiamo completato la nostra gerarchia di visualizzazione, dovrebbe assomigliare a questa:
Per scrivere un esempio di dati su songInfo-textfield dobbiamo scrivere la seguente riga di codice:
display.playerTexts.songInfo.text = 'Questo è il punto in cui inseriamo il nome dell'artista e del brano';
Quindi ora abbiamo tutti gli elementi grafici pronti per il lettore MP3. Ora faremo un salto nel codice, quindi immergiti con me!
Per far funzionare il codice abbiamo bisogno di creare la classe del documento. Il codice di classe del documento viene eseguito per primo quando vengono riprodotti i file .swf. Non è più necessario scrivere il codice nella timeline e la tua classe è più facile da importare in un altro file .fla in futuro, se è necessario.
Vai a File> Nuovo. Seleziona "File Actionscript" dalla finestra che si apre e fai clic su OK. Salvare il file nella stessa cartella del file .fla e denominarlo "SimpleMP3Player.as".
Ora assegna il tuo nuovo file .as come classe del documento. Fai clic sul palco e vai al pannello Proprietà. Lì troverai il campo "Classe" in cui devi inserire il nome della classe che hai creato. Inserisci "SimpleMP3Player" e fai clic sul piccolo pulsante a forma di matita. Se hai digitato correttamente il nome della classe, il file "SimpleMP3Player.as" dovrebbe diventare attivo. Altrimenti Flash genererà un errore.
Il codice dà vita a tutto. Ecco il codice ActionScript completo, lo spiegherò blocco per blocco. Controlla anche il codice sorgente dal pacchetto sorgente, l'ho commentato dall'inizio alla fine.
Accentsconagua
package 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 estende MovieClip // Crea alcune variabili di cui abbiamo bisogno 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'); funzione pubblica SimpleMP3Player () display.playerTexts.x = -73; display.mask = displayMask; bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3]; loadMP3 (); private function 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 (new URLRequest ('tarzan.mp3')); Tweener.addTween (display.preloader, x: 96, time: 1); private function 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, time: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading); funzione privata mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1); private function errorLoadingSound (e: IOErrorEvent): void trace ('Errore nel caricamento del suono:' + e); funzione privata getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3; private function playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); else 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, time: 1); private function updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; funzione privata 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; se (totaleSecondo < 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); pacchetto // Luogo in cui tutte le importazioni di classe diventano public class SimpleMP3Player estende MovieClip public function SimpleMP3Player ()
Il nostro punto di partenza sembra l'esempio sopra. Ricordare che il nome della classe deve essere uguale al nome del file della classe del documento. Tutto all'interno della funzione pubblica SimpleMP3Player viene eseguito subito dopo che Flash ha caricato la nostra classe.
Importa tutte le classi che il nostro lettore MP3 deve funzionare correttamente.
package 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;
Tutto dovrebbe essere abbastanza semplice. Nell'ultima riga importiamo Caurina Tweener. Assicurati di avere la directory caurina nella stessa posizione del tuo file .fla.
Tutte le variabili sono private. Solo la classe SimpleMP3Player può usarli.
private var mp3File: Sound; private var mp3FilePosition: SoundChannel;
L'oggetto audio mp3File memorizza il nostro suono Tarzan.mp3. mp3FilePosition è un oggetto SoundChannel. Ne abbiamo bisogno per dirci la posizione attuale di mp3File in millisecondi. Con questo oggetto possiamo anche fermare il file mp3.
private var id3Data: ID3Info; private var id3InfoAvailable = false;
L'oggetto id3Data memorizza i suoni mp3 informazioni id3. Ad esempio, il nome del brano e il nome dell'artista. id3InfoAvailable dice al nostro preloader che le informazioni id3 sono disponibili in modo che il codice possa iniziare a riprodurre file mp3.
private var updateTime: Timer;
updateTime è il nostro oggetto timer che aggiorna il display time-textfield. Puoi trovare maggiori informazioni sulla classe Timer qui. Ne parlerò più tardi.
private var playingSound: Boolean = false; private var soundPosition: Number; private var songReachedEnd: Boolean = false;
playingSound è semplicemente una variabile booleana che ci dice se mp3File è attualmente in riproduzione. soundPosition memorizza un valore numerico quando gli utenti premono il pulsante Pausa in modo da poter continuare a riprodurre la musica dalla posizione di pausa quando l'utente fa clic sul pulsante Riproduci. songReachedEnd indica che la canzone ha finito di suonare.
/ * * 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, last but not least, la nostra variabile array che contiene le coordinate del clip di movimento. Per esempio:
bs.buttons.y = buttonsPos [4];
Il pulsante di pausa viene quindi mostrato sullo schermo. Se usi 0 all'interno delle [parentesi] vedrai il pulsante Riproduci.
È tempo di vedere cosa fa il nostro codice per primo quando viene caricato. Gestiamo la prima funzione nel nostro codice; la funzione SimpleMP3Player.
funzione pubblica SimpleMP3Player () display.mask = displayMask; display.playerTexts.x = -73;
la funzione SimpleMP3Player è una funzione di costruzione quindi deve essere pubblica. Rinominandolo in privato si verifica un errore. Lo stato predefinito delle funzioni è pubblico, quindi non è necessario scrivere "pubblico" prima della funzione.
Mascherare con il codice è molto semplice e diretto. Sulla linea 3 vedi il codice per il mascheramento. Assegniamo il MovieClip "displayMask" alla proprietà "display" della MovieClip. Questo è tutto.
La seconda proprietà display.playerTexts.x trasferisce il Movie Clip "playerTexts" lungo l'asse orizzontale. Semplicemente spostiamolo fuori dalla vista per coordinare -73. Maschera nasconde il MovieClip "playerTexts".
bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3];
"buttons" è un Movie Clip e di default quando il mouse passa sopra di esso, il cursore rimane come una freccia di base. L'impostazione della proprietà "buttonMode" su true trasforma il cursore in una mano quando il mouse passa con il mouse. All'inizio vogliamo quel cursore come una freccia così buttonMode è impostato su false. Sulla stessa riga impostiamo la proprietà "enabled" su false. Ciò significa che il Movie Clip "pulsanti" non è selezionabile. Nella riga 2, impostiamo la posizione del clip filmato "pulsanti" sul pulsante di riproduzione disabilitato.
La prima riga può essere confusa, ma se la scrivo così ...
bs.buttons.buttonMode = false; bs.buttons.enabled = false;
... probabilmente puoi vederlo più chiaramente. Risparmio spazio scrivendolo in una riga.
Tutto ciò che facciamo ora è chiamare il nostro metodo "loadMP3".
loadMP3 ();
Questo metodo è il nostro metodo principale. Quello che fa è caricare il file mp3, dichiarare EventListeners necessario e far scorrere il preloader da visualizzare.
mp3File = new Sound ();
Questa linea crea un nuovo oggetto Sound. Possiamo accedere a tutti i metodi e le proprietà della classe Sound tramite mp3File.
mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data);
La prima riga dichiara l'evento PROGRESS e ogni volta che viene richiamato l'evento chiama il metodo mp3FileLoading. Questo ascoltatore ha alcune proprietà di cui abbiamo bisogno. Il primo è bytesTotal che contiene l'intera dimensione del file mp3 in byte. Il secondo è bytesLoaded che contiene i byte attualmente caricati. Con queste due proprietà possiamo contare la percentuale caricata dal file e visualizzarla per l'utente.
La seconda riga richiama quando è stato caricato l'intero file mp3. Chiama il metodo mp3FileLoaded.
La terza riga è per la gestione degli errori. Ad esempio, se il file mp3 non viene trovato, viene richiamato questo evento. Chiama il metodo errorLoadingSound.
Nella riga 5 l'evento viene richiamato quando sono disponibili i dati id3. Chiama il metodo getID3Data.
mp3File.load (new URLRequest ('tarzan.mp3')); Il metodo "carica" carica il nostro file mp3 Tarzan. Tra parentesi quadre dichiariamo una nuova URLReaquest e al suo interno c'è il percorso del nostro file mp3. Il nostro percorso è relativo e tarzan.mp3 deve trovarsi nella stessa posizione dei file .fla e .as. Questa linea è la stessa di sotto. Usa quello che preferisci.
var req: URLRequest = new URLRequest ('tarzan.mp3'); mp3File.load (req); Questa è la prima volta che usiamo Caurina, quindi dimostrerò rapidamente come funziona.
Tweener.addTween (target, properties);
Questo è il codice base. Target è dove scrivi il nome dell'oggetto target che vuoi interpolare. Nelle proprietà si definisce ciò che si vuole fare con il target. È possibile modificare, ad esempio, le coordinate xey, la trasparenza, la scala o la rotazione.
Tweener.addTween (display.preloader, x: 96, time: 1);
Il nostro obiettivo è il campo di testo "preloader" all'interno del Movie Clip "display". La proprietà "x" lo sposta e la proprietà "tempo" indica il tempo che l'interpolazione impiega. Il tempo è misurato in secondi. Se vuoi millisecondi usa la notazione ".5".
funzione privata 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, time: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading);
Come ho detto prima, il metodo "mp3FileLoading" mostra un valore percentuale di quanto è stato caricato il file mp3. Avvia anche la canzone quando la percentuale sale più del 50%.
currentPercent serve per contare il valore percentuale. Lo completiamo con il metodo "Math.round". La riga 4 scrive il valore percentuale nel nostro campo di testo in modo che l'utente possa vedere cosa sta succedendo con il caricamento.
All'interno dell'istruzione "if" controlliamo se la percentuale è superiore a 50 e la variabile "id3InfoAvailable" è vera. Se entrambi restituiscono true, l'istruzione "if" esegue tutto all'interno delle parentesi.
Quando l'istruzione if è vera, interrompiamo il campo di testo "preloader". Quando l'interpolazione è completa, Caurina chiama il metodo "playMP3" e gli passa due proprietà. Vediamo il metodo "playMP3" nel prossimo passaggio.
L'evento PROGRESS non è più necessario, quindi lo rimuoviamo sulla riga 9.
funzione privata mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1);
Questo metodo viene invocato quando viene caricata l'intera song. Per prima cosa rimuoviamo EventListeners non necessari. Nella riga 5 abbiamo tweenato il campo di testo "buffer" a destra.
funzione privata errorLoadingSound (e: IOErrorEvent): void trace ('Errore caricamento suono:' + e); Questa gestione degli errori è molto semplice. Traccia solo gli errori se si verificano errori.
funzione privata getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3;
Abbiamo impostato "id3InfoAvailable" su true nella riga 3. Il metodo "mp3FileLoading" controlla questa variabile ogni volta e avvia il suono solo se è vero. In questo modo assicuriamo che le informazioni di id3 siano disponibili in modo che l'utente veda le informazioni reali sul display.
Nella riga 4 assegniamo i metadati id3 di mp3File all'oggetto ID3Info denominato id3Data che abbiamo creato nel passaggio 12.
Questo metodo è il metodo più vitale nel nostro giocatore. Diamo un'occhiata al primo blocco.
private function playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); else mp3FilePosition = mp3File.play ();
Il metodo "playMP3" richiede due proprietà. "useSp" indica "usa la posizione del suono" e "sp" è "la posizione del suono".
Nella riga 3 testiamo se "useSp" è vero. Se è così, il codice riproduce la nostra canzone a partire dal punto desiderato. Questo punto è passato nella proprietà "sp". Se false, iniziamo a suonare la canzone dall'inizio. Tutto ciò è correlato al pulsante play-pause.
playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);
La riga 1 imposta il suono di riproduzione su vero. Ora possiamo controllare se il suono è in riproduzione e fare ciò che è sempre necessario.
Il nuovo EventListener nella riga 2 si attiva ogni volta che la canzone termina la riproduzione. Il metodo "songFinished" viene eseguito. Si noti che aggiungiamo EventListener all'oggetto mp3FilePosition.
Il secondo nuovo EventListener nella riga 3 aggiunge lo stesso evento "PROGRESS" a mp3File come all'inizio del codice. Questo ascoltatore ha appena attivato un metodo diverso. Il metodo "updateBuffer" serve per aggiornare il campo di testo "buffer".
bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0];
La prima linea ti sarà già familiare. Il nostro file mp3 è in riproduzione in modo che possiamo aggiornare i pulsanti per mostrare lo stato appropriato, abilitare le proprietà "buttonMode" e "enabled".
Usiamo "Timer" per mostrare la posizione attuale del suono in secondi. Con "Timer" è possibile eseguire metodi in sequenze temporali.
updateTime = new Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();
Qui, la prima riga crea un nuovo oggetto "Timer" con intervallo di 100 millisecondi. Potresti chiederti perché vogliamo aggiornare l'ora corrente ogni 100 millisecondi ... 1 secondo è troppo lento per il nostro lettore e anche 0,5 secondi è troppo lento. Voglio che aggiorni il tempo davvero senza intoppi. Altro su classe Timer.
Abbiamo anche bisogno di un EventListener per eseguire effettivamente qualcosa ogni 100 millisecondi. L'evento "TIMER" esegue il metodo "getMP3Time" che seguirò nel passaggio successivo.
La linea 4 inizia il nostro "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, time: 1);
Nell'ultimo blocco mostriamo i metadati id3 all'utente. Il nome dell'artista e il nome del brano vengono inseriti in una nuova variabile nella prima riga. Questo perché voglio capitalizzare l'intera stringa nella riga successiva. Stiamo usando il font bitmap, quindi penso che appaia meglio in maiuscolo.
Nella riga 3 ci assicuriamo che il campo di testo "songInfo" sia abbastanza lungo da mostrare la stringa "si". La riga 4 serve per evitare il word wrapping nel campo di testo e nella riga 5 assegniamo semplicemente la stringa "si" al campo di testo "songInfo".
L'ultima riga fa scorrere il MovieClip "playerTexts" su "display".
È educato mostrare all'utente quanto vengono caricati i dati del file mp3. Abbiamo il nostro preloader, ma ho pensato che avremmo avuto bisogno anche di un campo buffer perché la nostra canzone inizia a suonare dopo aver caricato il 50%. Questo metodo continua dove il metodo "mp3FileLoading" è stato interrotto.
funzione privata updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%';
Non c'è niente di speciale qui, solo una funzione privata con due linee di azione. Conteggio percentuale di base e assegnamento al campo di testo "buffer".
Io mostro questo metodo tutto in una volta perché questo è solo matematica e codifica davvero di base. Passiamo attraverso comunque.
funzione privata 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; se (totaleSecondo < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;
Nelle prime 4 righe contiamo le volte di cui abbiamo bisogno. Questo è un po 'complicato perché tutti i valori di ritorno sono in millisecondi. Giriamo anche minuti e secondi verso il basso.
Le righe 8 e 9 servono per aggiungere uno zero aggiuntivo prima di secondi se tali valori sono inferiori a 10 (questo è solo un tweaking e non è richiesto). Per me il campo di testo "tempo" sembra quindi un po 'più pulito.
L'ultima riga mostra tutto il tempo per l'utente.
Continuiamo con il codice di base.
funzione privata 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 = 'GIOCA ANCORA?';
Il metodo dell'evento "songFinished" viene lanciato ogni volta che la canzone termina la riproduzione.
Nelle prime due righe rimuoviamo EventListeners non necessari. Successivamente mostriamo il pulsante di riproduzione disabilitato all'utente e interrompiamo il file mp3. L'arresto non è richiesto, ma lo facciamo per ogni evenienza.
"playingSound" è impostato su false e "songReachedEnd" su true. Nel passo successivo vedi perché abbiamo bisogno della variabile "songReachedEnd".
"soundPosition" è accessibile da qualsiasi punto della nostra classe, quindi deve essere impostato su 0 a questo punto. Ora ci assicuriamo che se l'utente vuole suonare di nuovo la canzone, ricomincia dall'inizio.
L'ultima riga imposta il campo di testo "times" per mostrare "PLAY AGAIN?" testo. I nostri utenti sono i re, ecco perché dobbiamo dare loro tutte le informazioni possibili.
funzione privata 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];
Qui il metodo "mouseOverBs" viene attivato ogni volta che il mouse supera il Movi
