Tutorial Flash CS4 e CS5: Creare un player MP3

In questo tutorial impareremo a creare un player per riprodurre i nostri file audio in formato mp3. Per facilitare la lettura e la messa in pratica delle nozioni qui spiegate, ci limiteremo a disegnare un player molto semplice dal punto di vista grafico e ad utilizzare l'inevitabile codice ActionScript 3.0, in modo essenziale per un'applicazione basilare ma correttamente funzionante e facilmente espandibile.

Cominciamo con minimo di teoria per capire meglio il funzionamento del codice. I suoni in ActionScript 3.0 sono controllati da alcune classi specifiche:

• la classe Sound: questa classe è il punto iniziale di tutti gli script per riprodurre i suoni;
• la classe SoundChannel: questa classe controlla il suono nel documento. Ogni suono
  riprodotto viene assegnato ad un canale e possiamo avere diversi canali audio mixati tra loro. Tra le varie funzioni che possono essere controllate, abbiamo il metodo stop() ed il controllo del volume del canale stesso;
• la classe SoundTransform con cui possiamo controllare i volumi dei singoli file audio;
• la classe SoundMixer che controlla in maniera globale tutti i suoni del Flash player.

Con ActionScript 3.0 possiamo implementare i suoni in due modi differenti: importando i file audio direttamente all'interno del documento, oppure collegando file audio esterni.

Facciamo un veloce esempio con il primo metodo, per poi approfondire il secondo, che sarà il metodo che utilizzeremo per creare il nostro player mp3.

Lanciamo Flash (CS4 o CS5) e creiamo un nuovo documento ActionScript 3.0; importiamo subito un file audio mp3, tramite CTRL+R sulla tastiera; come sempre possiamo scegliere i file audio dalla vasta libreria messa a disposizione da HTML.it all'indirizzo http:// flash.html.it/audio/ oppure utilizzare quelli presenti nel file a corredo di questo articolo.

Una volta importato il file, lo ritroviamo nella libreria; clicchiamo col tasto destro su di esso e scegliamo la voce Proprietà del menu contestuale.

Dalla finestra che si aprirà, clicchiamo sul pulsante Avanzate in basso a destra, avremo così accesso a nuove opzioni di controllo tramite il codice; nella sezione Concatenamento, selezioniamo le voci Esporta per ActionScript ed Esporta in fotogramma 1 e nel campo di testo Classe inseriamo un nome univoco, ad esempio MySong. Premiamo OK e, confermando con un ulteriore OK all'avvertenza di Flash che ci informa che verrà creata una nuova classe in base alle nostre impostazioni, chiudiamo la finestra.

Con questo passaggio abbiamo configurato il nostro file audio, in modo che possa essere controllato tramite ActionScript.

Passiamo adesso a scrivere il semplice codice. Selezionando l'unico fotogramma vuoto che dovremmo avere sulla scena e lanciamo l'editor del codice (F9). Inseriamo quanto segue:

var mySound:Sound = new MySong(); 
mySound.play();

Con la prima stringa inizializziamo la classe Sound inserendola in una variabile ed imposteremo il nome della classe definito nelle opzioni di concatenamento del file mp3. La seconda riga di codice serve, evidentemente, a lanciare la riproduzione del suono. Con la sola classe Sound non possiamo fermare la riproduzione di un suono una volta avviato, l'unico controllo che abbiamo è la possibilità di far partire la riproduzione dell'audio da un punto diverso dell'inizio (di default), inserendo un valore numerico, espresso in millisecondi, tra le parentesi tonde del codice mySound.play(500).

In questo modo possiamo inserire, ad esempio, un sottofondo musicale al nostro filmato Flash in modo estremamente semplice e veloce.

Vediamo adesso il secondo metodo, quello che sfrutta i file esterni, con cui possiamo controllare più accuratamente la riproduzione dei suoni, ed iniziamo a costruire il nostro Player mp3. Affinché la nostra applicazione possa funzionare correttamente, salviamo il file .fla ed i file .mp3, nella stessa cartella del nostro PC.

Inseriamo i pulsanti di controllo. Dopo aver creato un nuovo documento Flash ActionScript 3.0, sfruttiamo le librerie comuni per inserire i pulsanti che controlleranno i nostri file audio. Andiamo sul menu Finestra > Librerie Comuni > Pulsanti e scegliamo i pulsanti che preferiamo, nel tutorial utilizzeremo i pulsanti della cartella Playback Flat, trasciniamo nello stage istanze per i pulsanti back, play, stop e forward. Decidendo o meno di inserirli in uno stesso livello, allineamoli tra loro tramite lo strumento Allinea (scorciatoia da tastiera CTRL + K, CMD + K per utenti Mac) come mostrato nell’immagine seguente (figura 2):

Dal Pannello delle proprietà assegniamo i nomi d'istanza pls_prv, pls_play, pls_stop, pls_nxt rispettivamente ai pulsanti indietro, play, stop e avanti.

Inseriamo il codice ActionScript 3.0

Dopo aver terminato graficamente il nostro player con l'aggiunta di un colore di sfondo e ridimensionando la grandezza del filmato, procediamo ad inserire il codice ActionScript 3.0 necessario per far funzionare l'applicazione.

Aggiungiamo un nuovo livello, selezioniamo il fotogramma vuoto e lanciamo il pannello dell’editor ActionScript tramite il menu Finestra > Azioni (F9).

Iniziamo inserendo la seguente linea di codice necessaria affinché Flash possa caricare ed attivare la riproduzione di un file audio. Inizializziamo quindi la classe Sound, puntando adesso ad un file esterno:

var music:Sound=new Sound(new URLRequest("1.mp3"));

Continuiamo scrivendo:

var channel:SoundChannel;

Attiviamo i pulsanti Play e Stop col seguente codice, associato all'evento Click del mouse da parte dell'utente. Inseriamo un nome univoco per ogni funzione:

pls_play.addEventListener(MouseEvent.CLICK, playmusic); 
pls_stop.addEventListener(MouseEvent.CLICK, stopmusic);

Scriviamo adesso la prima funzione, dove andremo a stabilire cosa effettivamente dovrà fare il codice ActionScript alla pressione del pulsante Play:

function playmusic(e:Event):void { 
channel=music.play();
}

e la funzione relativa al pulsante Stop:

function playmusic(e:Event):void { 
channel.stop();
}

Proviamo il filmato (CTRL+Invio) e verifichiamo il corretto funzionamento dei pulsanti. Per evitare i problemi di sovrapposizione dell'audio andando a cliccare due volte sul pulsante Play, inseriamo una nuova variabile per controllare se la riproduzione è già attiva, ed inseriamo quindi una condizione if per utilizzare questa nuova variabile.

Inseriamo anche il codice per attivare i pulsanti Avanti e Indietro e le relative funzioni Ecco il codice completo fin qui redatto:

var music:Sound=new Sound(new URLRequest("1.mp3")); 
var channel:SoundChannel; 
channel=music.play(); 
channel.stop();

var isPlaying:Boolean = false;

pls_play.addEventListener(MouseEvent.CLICK, playmusic); 
pls_stop.addEventListener(MouseEvent.CLICK, stopmusic); 
pls_prv.addEventListener(MouseEvent.CLICK, playprev); 
pls_nxt.addEventListener(MouseEvent.CLICK, playnext);

function playmusic(e:Event):void {
	if(!isPlaying){
	channel=music.play();
	isPlaying= true; 
	}
}

function stopmusic(e:Event):void { 
	channel.stop();
	isPlaying= false;
}

function playnext(e:Event):void { 
	gotoAndStop(2);
	if(!isPlaying){ 
	channel.stop();
	}
}

function playprev(e:Event):void { 
	gotoAndStop(1);
	if(!isPlaying){ 
	channel.stop(); 
	}
}

Inseriamo un nuovo file audio. Per semplificare il controllo di nuove tracce audio, portiamoci nel secondo fotogramma della linea temporale e dopo aver selezionato tutta la colonna degli elementi attivi, premiamo F6 per inserire dei nuovi fotogrammi chiave (figura 3).

A questo punto, nel secondo fotogramma, avremo tutti i nostri controlli duplicati sullo stage; selezioniamoli uno per volta e cambiamo i nomi istanza, inserendo ad esempio un numero progressivo: puls_play2, puls_stop2. etc etc... Copiamo tutto il codice ActionScript dal fotogramma 1 ed incolliamolo nel fotogramma 2. L'unica accortezza che dobbiamo avere è quella di cambiare il nome delle funzioni e dei richiami ai pulsanti, inserendo i nuovi nomi d'istanza.

Inoltre è necessario inserire un comando di stop(); all'inizio del codice sia per il frame 1 che per il frame 2. Se vogliamo avere anche un riscontro visivo del passaggio tra i due fotogrammi, inseriamo un semplice numero progressivo, ad esempio 1 nel primo fotogramma e 2 nel secondo.

Ecco il codice completo del fotogramma 2:

stop(); 
var music2:Sound=new Sound(new URLRequest("2.mp3")); 
var channel2:SoundChannel; channel2=music.play(); 
channel2.stop(); 
channel.stop();

var isPlaying2:Boolean = false;
pls_stop2.addEventListener(MouseEvent.CLICK, stopmusic2); 
pls_play2.addEventListener(MouseEvent.CLICK, playmusic2);

pls_prv2.addEventListener(MouseEvent.CLICK, playprev2); 
pls_nxt2.addEventListener(MouseEvent.CLICK, playnext2);

function stopmusic2(e:Event):void { 
	channel2.stop();
	isPlaying2= false;
}
function playmusic2(e:Event):void { 
	if(!isPlaying2){
	channel2=music2.play(); 
	isPlaying2= true; 
	}
}

function playnext2(e:Event):void { 
	gotoAndStop(2);
	
	channel2.stop();
}

function playprev2(e:Event):void { 
	gotoAndStop(1);

	channel2.stop();
}

Provando il filmato (CTRL+Invio) avremo quindi la possibilità di avviare la riproduzione, fermarla, andare avanti ed indietro, sia per il fotogramma 1 (primo brano mp3) e sia per il fotogramma successivo (secondo brano mp3).

Abbiamo quindi visto come utilizzare in maniera semplice i suoni all'interno di Flash e come poter riutilizzare il codice una volta scritto. Naturalmente per applicazioni più complesse, con molteplici file audio e diversi controlli, è necessario sviluppare codice più complesso, ma questo esempio ci permette di focalizzare più chiaramente come funzionano le classi Sound.

In allegato troverete gli esempi qui utilizzati con file mp3 e fla.