Cari amici di Atlantide, colgo l'occasione per segnalarvi un sito fatto molto bene e che mi è stato molto utile per trarre ispirazioni per i miei esperimenti flash che è
gotoandlearn.com . Un nome così originale ( che richiama ad una sorta d'istruzione actionscript ) non poteva che sceglierlo uno come Lee Brimelow, Platform Evangelist della Adobe, a cui va la mia grande ammirazione.
Navigando fra i suoi tutorial mi sono imbattuto in un lettore mp3 semplice, ma ben fatto e ho deciso di riproporvelo con alcune piccole modifiche (non me ne voglia Mr Brimelow) e rivisitato nella grafica.
Dal titolo avrete capito che come "playlist" dei nostri brani ci serviremo di un file XML. Cos'è un file XML? E' semplicemente un linguaggio, somigliante all'HTML, che serve a contenere dei dati strutturati.
Vedendo il file che andremo ad usare lo capirete meglio.
Creiamo un nuovo file songs.xml e inseriamo il seguente codice (con le vostre canzoni comunque):
- Codice: Seleziona tutto
<?xml version ="1.0" encoding="UTF-8"?>
<songs>
<song indirizzo="BohemianRapsody.mp3" artista="Queen" titolo="Bohemian Rapsody" />
<song indirizzo="IlGiornoDeiGiorni.mp3" artista="Ligabue" titolo="Il giorno dei giorni" />
<song indirizzo="BillieJean.mp3" artista="Michael Jackson" titolo="Billie Jean" />
</songs>
La prima riga va inserita sempre nei file xml e specifica che quello che stiamo scrivendo è un file xml versione 1.0 che usa una codifica Unicode.
Dopodichè abbiamo un primo "nodo figlio" del nostro documento che è . Esso a sua volta a dei nodi figli che contengono le informazioni dei nostri brani. I nodi song hanno degli "attributi" che sono indirizzo,artista e titolo.
Nella stessa cartella di questo file, posizioniamo i file mp3 con il nome che abbiamo specificato tramite l'attributo indirizzo dei nodi song.
Prima di passare alla realizzazione del player, ci servirà creare una classe nuova che rappresenterà oggetti "Canzone". Una classe è un contenitore di codice che descrive degli oggetti.
Apriamo flash e creiamo un nuovo file ActionScript che chiamiamo Canzone.as e che risiederà sempre nella stessa cartella degli altri file già creati.
Siamo pronti ad inserire il seguente codice:
- Codice: Seleziona tutto
class Canzone{
public var artista:String;
public var titolo:String;
public var indirizzo:String;
public function Canzone(a:String,t:String,i:String){
artista=a;
titolo=t;
indirizzo=i;
}
}
In questo codice specifichiamo appunto che stiamo creando la classe Canzone, che ha tre parametri artista, titolo e indirizzo di tipo string. Notiamo anche una funzione che ha lo stesso nome della classe: si tratta del costruttore, che una volta ricevuta una chiamata con 3 parametri di tipo string, che rappresentano appunto artista, titolo e indirizzo di una canzone, si preoccuperà di costruire l'oggetto Canzone.
Adesso possiamo aprire un nuovo file Flash (ActionScipt 2.0) che chiamiamo mp3player.
Creiamo 5 livelli.Il primo "sfondo" conterrà la grafica del lettore. Il secondo "pulsanti" conterrà i pulsanti di navigazione del nostro player che possiamo creare noi stessi o, come ho fatto io nell'esempio, trovare nelle librerie comuni alle quali si accede del menu Finestre,Librerie comuni,Pulsanti. I pulsanti che ho scelto sono di tipo classic buttons - playback.
In particolare inseriamo cinquw pulsanti: stop,play,previous song, next song e pause. Quest'ultimo l'ho creato da solo, semplicemente prendendo un pulsante qualsiasi giù esistene e andando a sostituire il suo simbolo con il simbolo di pausa, che possiamo ricavare con un campo di testo statico scrivendo una X maiuscola in carattere Webdings. Non è necessario dare un nome istanza a tutti e cinque i pulsanti ai fini del corretto funzionamento del nostro player, ma solo al pulsante play, perchè è l'unico che sarà interessato da alcune istruzioni actionscript e scegliamo il nome "play_btn".
Nel terzo livello che chiamiamo "display" posizionimo un campo di testo dinamico in corrispondenza del display che abbiamo disegnato sul livello sfondo e al quale diamo come nome istanza "display". Per mia scelta ho deciso di impostare l'allineamento del testo centrato e il colore biaco.
Fino ad ora il tutto apparirà più o meno così:
Chiamiamo il quarto livello come al solito "actions" e nel primo fotogramma inseriamo il seguente codice (ricordo che il pannelo proprietà è richiamabile premendo F9):
- Codice: Seleziona tutto
var s:Sound = new Sound();//Creo l'oggetto sound
s.onSoundComplete = playSong;//Se la canzone è finita richiamo la funzione playSong()
s.setVolume(100);//Setto il volume a 100
//Creo un array che conterrà le mie canzoni
var sa:Array = new Array();
//Numero della canzone corrente
var cps:Number = -1;
//Posizione della riproduzione corrente
var pos:Number;
var xml:XML = new XML();//Carico il file XML delle canzoni
xml.ignoreWhite = true;//Ignoro gli spazi vuoti
xml.onLoad = function()
{
var nodes:Array = this.firstChild.childNodes;//Creo un array contenente le canzoni del file XML
for(var i=0;i<nodes.length;i++)
{
sa.push(new Canzone(nodes[i].attributes.artista, nodes[i].attributes.titolo, nodes[i].attributes.indirizzo));
/*con il metodo push creo nuovi oggetti canzone, a cui passo le informazioni delle canzoni, che ho
disponibili nell'array nodes*/
}
playSong();//Creato l'array di canzoni richiamo il metodo playSong() per cominciare la riproduzione
}
xml.load("songs.xml");//Carico il file songs.xml
//Riproduco i miei MP3
function playSong():Void
{
s = new Sound();//Inizializzo l'oggetto sound
s.onSoundComplete = playSong;//Se la canzone è finita richiamo nuovamente la funzione playSong()
if(cps == sa.length - 1)//Se siamo arrivati all'ultima canzone
{
cps = 0;//Azzero cps
s.loadSound(sa[cps].indirizzo, true);/*Carico la canzone alla posizione cps dell'array di canzoni
in questo caso la prima*/
}
else
{
s.loadSound(sa[++cps].indirizzo, true);//Altrimenti arico la canzone alla posizione cps dell'array di canzoni
}
display.text = sa[cps].artista + " - " + sa[cps].titolo;//Mostro nel display le info della canzone
}
play_btn.enabled=false;//Disabilito il pulsante play inizialmente perchè la riproduzione parte immediatamente
Il quinto livello lo chiamiamo "controlli" e vi andiamo a creare due barre, una per la navigazione della canzone e l'altra per il volume.
Disegniamo un rettangolo con altezza ridotta e lunghezza 90 px. Lo selezioniamo a premiamo F8 e lo traformiamo in Clip filmato (il nome non ha importanza), prestando attenzione a specificare come punto di registrazione quello sinistro-centrale.
Subito gli diamo come nome istanza "volume" e clicchiamo 2 volte su di esso.
Nel primo fotogramma inseriamo quello che sarà il cursore. Disegniamo un semplice cerchio, lo trasformiamo in Clip filmato e gli diamo come nome istanza "cursore".
Ripetiamo lo stesso procedimento per la barra di navigazione, che avrà sempre un cursore con lo stesso nome istanza, ma che sarà però lunga 200 px e avrà come nome istanza "navigazione".
Per abbellirle infine diamo un effetto smussatura alle due barre.
Nel primo fotogramma del livello "controlli" del nostro stage andiamo a inserire il seguente codice:
- Codice: Seleziona tutto
var pressed:Boolean;//ci dice se il cursore è premuto
var stoppato:Boolean;//ci dice se il pulsante stop è stato appena premuto
volume.cursore._x = 90;//sposto il cursore alla fine della barra
volume.cursore.onEnterFrame = function() {/*Ad ogni fotogramma in entrata (praticamente sempre visto che abbiamo impostato una frequenza di 12 fotogrammi al secondo)*/
s.setVolume((this._x/90)*100);/*Avendo a disposizione la posizione orizzontale del cursore, identificato con la variabile speciale this e la larghezza della barra, mi trovo il valore di percentuale e lo uso per settare il volume*/
}
volume.cursore.onPress = function() {//quado premo il cursore
startDrag(this, false, 90,this._y, 0, this._y);/*Uso la funzione startDrag che accetta 5 parametri, l'oggetto da trascinare (nel nostro caso sempre this), true o false per dirgli se bloccare l'oggetto al centro e rispettivamente i margini sinistro, superiore, destro e inferiore, nel nostro caso la lunghezza della barra, l'altezza del cursore, 0 e ancora l'altezza del cursore.*/
}
volume.cursore.onRelease = volume.cursore.onReleaseOutside=function () {//Quando rilascio il cursore
stopDrag();//termino il trascinamento
}
//Per la barra di navigazione useremo quasi gli stessi concetti
navigazione.cursore._x = 200;
navigazione.cursore.onEnterFrame = function() {
if(!pressed && !stoppato)this._x=(s.position/s.duration)*200; /*se non è appena stato premuto il pulsante stop e il cursore non è premuto, prendi il controllo su di esso e spostalo in base alla percentuale di scorrimento della canzone, che troviamo dividendo la posizione del suono, dataci dal parametro position, per la sua durata, dataci dal parametro duration, il tutto moltiplicato per la lunghezza della barra. 200 px.*/
secondi=Math.floor((s.position/1000)%60);/*Alla variabile secondi assegniamo il resto della divisione fra i secondi trascorsi (dividiamo per 1000 perchè position ci viene dato in millisecondi) e 60 (secondi in un minuto), il tutto arrotondato, usando il metodo floor della classe Math*/
if(secondi<10)//se i secondi sono minori di 10
secondi="0"+secondi;//aggiungiamo uno 0 prima, per una corretta visualizzazione
minuti=Math.floor((s.position/1000)/60);/*alla variabile minuti assegniamo appunto i minuti, che
ricaviamo dividendo i secondi per 60*/
if(minuti<10) minuti="0"+minuti;//se i minuti sono minori di 10 aggiungiamo sempre uno 0 prima
duration.text=minuti+":"+secondi;//mostriamo in duration i minuti e i scondi separati da ":"
}
navigazione.cursore.onPress = function() {
play_btn.enabled=false;//disabilito il pulsante play
pressed=true;
startDrag(this, false, 200,this._y, 0, this._y);
}
navigazione.cursore.onRelease = navigazione.cursore.onReleaseOutside=function () {
stoppato=false;
percent=(this._x/200)*100;//trovo la percentuale d'avanzamento del cursore
stopDrag();
s.start(((s.duration/100)*percent)/1000);/*Trovo la percentuale di avanzamento della canzone rispetto
a quella di avanzamento del cursore e faccio ripartire la canzone da lì*/
pressed=false;
}
Adesso non ci resta che scrivere il codice per i pulsanti.
Al pulsante stop diamo il seguente codice:
- Codice: Seleziona tutto
on(release){
play_btn.enabled=true;//Abilito il pulsante play
pos=0;//Assegniamo 0 a pos per far capire alla funzione playSong() che deve partire dall'inizio
s.stop();//Arresto la riproduzione della canzone
s.position=0;//Porto la posizione della canzone all'inizio
stoppato=true;
navigazione.cursore._x=0;
}
Al pulsante play diamo il seguente codice:
- Codice: Seleziona tutto
on(release){
s.start(pos/1000);/*Riparto dalla posizione pos, salvata cliccando sul pulsante stop(da notare che la
funzione start accetta il valore dal quale partire in millisecondi, ecco spiegata la divisione per 1000*/
play_btn.enabled=false;//Disabilito nuovamente il pulsante play
stoppato=false;
}
Al pulsante previous song diamo il seguente codice:
- Codice: Seleziona tutto
on(release){
if(cps>0){/*Se non ci troviamo alla prima canzone, decrementiamo di 2 cps (perchè sappiamo che playSong()
incrementa automaticamente di 1 ogni volta che viene invocato*/
cps=cps-2;
playSong();
stoppato=false;
}
}
Al pulsante next song diamo il seguente codice:
- Codice: Seleziona tutto
on(release){
if(cps<sa.length-1){/*Se non siamo arrivati all'ultima canzone richiamo playSong() che si preoccuperà
anche di incrementare cps*/
playSong();
stoppato=false;
}
}
Al pulsante pause diamo il seguente codice:
- Codice: Seleziona tutto
on(release){
if(!stoppato){
play_btn.enabled=true;//Abilito il pulsante play
pos=s.position;//Salvo la posizione della canzone
s.stop();//Arresto la riproduzione della canzone
}
}
Non ci resta altro che salvare il nostro filmato, non mi stancherò mai di dirlo, nella stessa cartella relativa agli altri file e testare il tutto.
Abbiamo realizzato il nostro mp3 player in pochi passi, che possiamo anche inserire su tutti i nostri blog e siti.
Qui c'è un esempio e da
qui è possibile scaricare i file sorgente.
cerca i file nella cartella temp...non hai salvato il file!!!
SitemapIndex
RSS Feed