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
• la classe SoundChannel
  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()
• la classe SoundTransform
• la classe SoundMixer

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:

Con la prima stringa inizializziamo la classe Sound Sound 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 back, play, stop e forward Allinea CTRL + K CMD + K

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:

Continuiamo scrivendo:

var channel:SoundChannel;

Attiviamo i pulsanti Play Stop Click

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 Play

Inseriamo anche il codice per attivare i pulsanti Avanti Indietro

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:

Provando il filmato (CTRL+Invio

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