
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Realizziamo un semplice player di file mp3 per prendere confidenza con le classi dedicate alla gestione dei suoni
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:
stop()
ed il controllo del volume del canale stesso;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.
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.
Se vuoi aggiornamenti su Tutorial Flash CS4 e CS5: Creare un player MP3 inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Nell’ultima versione di Photoshop, gli sviluppatori hanno pensato a implementare una funzione molto interessante per gli esperti del settore fotografico: […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Impariamo ad utilizzare Takamaka, una blockchain Java Full Stack, per scrivere codice Java installabile ed eseguibile su una blockchain
Come indicizzare al meglio un sito basato su animazioni Flash
Sovrapposizione di filmati ed oggetti html
Come creare un’applicazione per la gestione di un negozio di commercio elettronico con il framework PHP Laravel. Una guida completa che, partendo dalla configurazione di un ambiente di sviluppo basato su Laravel, descrive nel dettaglio tutti i passaggi necessari per pubblicare un e-commerce con cui promuovere e vendere i propri prodotti online