Un sito in Flash che si rispetti conquista non soltanto per le sue caratteristiche grafiche e cromatiche (fondamentali ma non uniche), ma anche per le musiche e i suoni che sono utilizzati durante la navigazione. A volte ci propongo delle insopportabili musiche di sottofondo a volume altissimo, ma spesso un sito che deve conquistare propone sempre delle tracce audio soft.

Quindi è necessario fornire all’utente un comando per bloccare l’audio o almeno diminuire il volume.

Con actionscript 2 era facilissimo e cmq c’era 100 tutorials on-line che spiegavano come utilizzare il comando Sound. E in actionscript 3…. :-0 per mia meraviglia non ho trovato buoni tutorials che trattassero l’argomento, speriamo questo sia il primo, al fine di realizzare questo:

Come si vede forniamo 2 pulsanti, una barra di caricamento audio e uno Slider per il controllo del Volume.

Prima d’iniziare a realizzare il codice AS3, dobbiamo creare nel filmato i seguenti componenti di Flash CS3: 2 pulsanti (nomi d’istanza: “play_btn” e “stop_btn”), uno slider (nome d’istanza: “sliderControlloMusica”), uno progressBar (nome d’istanza: “barraDiCaricamento”) e un testo dinamico (nome d’istanza: “caricamentoTesto”).

Per il componente Slider bisogna cambiare alcune sue caratteristiche: selezioniamo l’oggetto già inserito nel filmato, dopodichè clicchiamo in alto FINESTRA e poi FINESTRA DI ISPEZIONE DEI COMPONENTI, qui possiamo modificare lo slider ed inseriamo come valore MAXIMUN = 100. In questo modo suddividiamo la barra slider in 100 piccole sottounità, precisamente quelle percorribili dal cursore.

Vediamo ora il codice commentato:

//questa volta non realizziamo un file actionscript esterno, possiamo benissimo implementare il tutto nel pannello azioni del primo fotogramma del filmato. Importiamo le funzioni che ci servono per il progetto.

import fl.controls.ProgressBarMode;
import flash.events.ProgressEvent;
import flash.media.Sound;
import fl.controls.Slider;
import fl.events.SliderEvent;
import flash.media.SoundChannel;
import flash.media.SoundTransform;

//realizziamo l’oggetto Sound da riprodurre, prendendolo da un preciso indirizzo web  tramite URLRequest e creiamo gli oggetti SoundTransform e SoundChannel (ci seriviranno per i cotrolli) correlati al file Sound appena impostato

var suonoDaRiprodurre:Sound = new Sound();
var url:String = “http://www.tuosito.it/suono.mp3″;
var req:URLRequest = new URLRequest(url);
var SoundTransformSuono:SoundTransform = new SoundTransform();
var SoundChannelSuono:SoundChannel = new SoundChannel();

//impostiamo anche la barra di caricamento indicando l’oggetto da caricare (la barra di caricamento avere come nome istanza “barraDiCaricamento” da inserire nel pannello proprietà dell’oggetto su Flash)

barraDiCaricamento.mode = ProgressBarMode.POLLED;
barraDiCaricamento.source = suonoDaRiprodurre;

//carichiamo infine il suono, per avviarlo automaticamente inserire questa riga successivamente, in questo caso io non ho voluto avviare la riproduzione della musica automaticamente: SoundChannelSuono = suonoDaRiprodurre.play(0,99);   il primo numero indica la posizione iniziale in cui deve iniziare la riproduzione in millisecondi, il secondo definisce il numero di ripetizioni del suono.

suonoDaRiprodurre.load(req);

//aggiungiamo i listener per i pulsanti ( i pulsanti devono avere come nome istanza rispettivamente “stop_btn” e “play_btn” da inserire nel pannello proprietà dell’oggetto su Flash), e i listener per l’indicazione del livello di caricamento del suono nel testo laterale e per il controllo del suono ogni frame.

stop_btn.addEventListener(MouseEvent.CLICK, stopAudio);
play_btn.addEventListener(MouseEvent.CLICK, playAudio);
suonoDaRiprodurre.addEventListener(ProgressEvent.PROGRESS, caricamentoListener);
sliderControlloMusica.addEventListener(Event.ENTER_FRAME, controllaVolume);

//la seguente funzione confronta i bytes caricati con quelli totali e fornisce la percentuale di caricamento del file, quest’ultimo dato viene poi inserito nella casella di testo a destra (che possiede il nome d’istanza “caricamentoTesto”)

function caricamentoListener(event:ProgressEvent) {
var percentCaricato:int = event.target.bytesLoaded / event.target.bytesTotal * 100;
caricamentoTesto.text = “Caricamento: ” + percentCaricato + “%”;
}

//la funzione seguente controlla il volume ogni frame: in poche parole andiamo a rilevare il valore indicato dal cursore dello slider (che ricordiamo và da 0 a 100 in questo caso) attraverso il comando “value”, e suddividiamo il tutto per 100 al fine di equiparare il valore a quello utile per il volume (quest’ultimo come sappiamo và da 0, silenzio assoluto, a 1, max volume, mentre lo slider da 0 a 100; basta quindi dividere il valore dello slider per 100 per risolvere il problema).

function controllaVolume(e:Event) {
SoundTransformSuono.volume = sliderControlloMusica.value / 100;

//successivamente impostiamo il valore dello acquisito dallo slider come volume. Purtroppo in AS3 non è possibile impostare il valore Volume direttamente all’oggetto Suond, quindi il procedimento si complica un pò: prima và assegnato il valore Volume all’oggetto SoundTransform correllato e poi a quello SoundChannel, seguendo il metodo qui illustrato.

SoundChannelSuono.soundTransform = SoundTransformSuono;

}

//avviamo la funzione “stopAudio” che si attiva al click del pulsante Stop e che ferma ogni riproduzione audio

function stopAudio(e:MouseEvent)
{
SoundMixer.stopAll();
}

//avviamo la funzione “playAudio” che si attiva al click del pulsante Play e che avvia la riproduzione, oltre ad avviare la funzione “sliderControlloMusica”. Quest’ultima rappresenta un altro metodo per modificare il volume del suono tramite il cursore dello slider, tramite la funzione “cambiamentoSlider”

function playAudio(e:MouseEvent)
{
SoundChannelSuono = suonoDaRiprodurre.play(0,99);
sliderControlloMusica.addEventListener(SliderEvent.CHANGE, cambiamentoSlider);
}

//con la seguente funzione, ad ogni modifica della posizione del cursore sullo slider, viene riletto il valore del cursore e impostato come Volume della musica, seguendo il metodo già illustrato. In questo modo si evita di mettere un listener per ogni fotogramma. Il risultato, in questo caso, è uguale.

function cambiamentoSlider(e:SliderEvent) {
trace(sliderControlloMusica.value);
var volumeSuono:Number = new Number (sliderControlloMusica.value / 100);
SoundTransformSuono.volume = volumeSuono;
SoundChannelSuono.soundTransform = SoundTransformSuono;
}

Come al solito inserisco un file sorgente, per facilitare la comprensione del tutorials.