_xmouse
Un'ultima digressione prima di entrare nel vivo. La proprietà _xmouse di un movieclip, ci dice qual'è la posizione del puntatore del mouse nel suo sistema di coordinate. Se poi il movieclip è una barra, è facile capire come questa proprietà ci possa tornare utile con la regolazione del volume.
Facciamo subito una prova: creiamo un nuovo progetto Flash, e aggiungiamo un movieclip alla libreria con il nome barra. Dentro questo movieclip, disegniamo un rettangolo alto 10 pixel e largo 100, con l'angolo superiore sinistro sul punto di registrazione del movieclip
stesso. Trasciniamo sullo stage un'istanza di questo movieclip, alla quale diamo mc come nome.
Disegniamo ora sullo stage un campo di testo dinamico, a cui associamo la variabile "testo". Inseriamo il campo in un movieclip, al
quale associamo il seguente script:
onClipEvent (mouseMove) {
testo = _parent.mc._xmouse;
}
Ad ogni movimento del mouse, inseriamo nel campo di testo il valore dell'_xmouse rispetto alla barra.
Adesso inseriamo un'altra istanza del movieclip barra sopra quella precedente, e le associamo:
onClipEvent (load) {
_visible = 0;
}
onClipEvent (mouseMove) {
_parent.mc._xscale =
_xmouse;
}
La nuova barra, all'avvio, è invisibile, e sul proprio _xmouse viene scalata la barra mc. Nella casella di testo, quello che
leggiamo è mc._xscale:
Adesso non solo sottoponiamo la scalatura al trascinamento con il mouse, invece che solamente al movimento, ma poniamo anche dei limiti per
non strabordare nell'una o nell'altra direzione. Associamo alla barra superiore:
onClipEvent(load){
function setta(){
k = Math.round(_xmouse);
if(k < 0){
k = 0;
}else if(k > 100){
k = 100;
}
_parent.mc._xscale = k;
updateAfterEvent();
}
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
premuto = true;
setta();
}else{
premuto = false;
}
}
onClipEvent(mouseMove){
if(premuto){
setta();
}
}
onClipEvent(mouseUp){
premuto = false;
}
Quando clicchiamo sulla barra, che viene resa invisibile al caricamento, la variabile premuto diventa vera: al rilascio del pulsante
del mouse, torna falsa. Se il mouse si muove quando premuto è vera, o si clicca sulla barra, viene richiamata la funzione setta
definita all'inizio. La funzione setta calcola l'_xmouse sulla barra invisibile, e ne attribuisce il valore arrotondato alla
variabile k. Se k supera il 100, viene riportata a 100, se supera in basso lo 0, viene riportata a 0: in ogni caso, il movieclip
con la barra visibile, mc, viene scalato sul valore di k.
// al caricamento del movieclip
onClipEvent(load){
// definisci la funzione "setta"
function setta(){
// al richiamo della funzione, attribuisci a "k" il
// valore arrotondato dell'_xmouse su questo movieclip
k = Math.round(_xmouse);
// se "k" diventa minore di 0
if (k < 0){
// poni "k" uguale a 0
k = 0;
// altrimenti, se "k" diventa maggiore di 100
}else if (k > 100){
// poni "k" uguale a 100
k = 100;
}
// scala il movieclip "mc" sul valore di "k"
_parent.mc._xscale = k;
// forza un refresh dello schermo
updateAfterEvent();
}
}
// alla pressione del tasto sinistro del mouse
onClipEvent (mouseDown) {
// se il puntatore è su questo movieclip
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
// setta la variabile "premuto" come vera
premuto = true;
// richiama la funzione "setta"
setta();
// altrimenti
}else{
// (non siamo sulla barra) rendi "premuto" come falsa
premuto = false;
}
}
// allo spostamento del mouse
onClipEvent(mouseMove){
// se la variabile "premuto" è vera
if(premuto){
// richiama la funzione "setta"
setta();
}
}
// al rilascio del tasto sinistro del mouse
onClipEvent(mouseUp){
// setta la variabile "premuto" come falsa
premuto = false;
}
Ed ecco il risultato:
Scaliamo una barra da 0 a 100, e questo valore è racchiuso in "k". E se regoliamo il volume su k?
Volume
Apriamo il filmato suono.fla. Aggiungiamo alla libreria un nuovo movieclip, che chiameremo barraVolume, e che conterrà un rettangolo
giallo senza contorno di 100 pixel per 10: inoltre, l'angolo superiore sinistro del rettangolo dovrà essere al centro del movieclip.
Andiamo al secondo frame del movieclip strumenti: nel layer "asset" inseriamo un'istanza della barra, tinta di grigio
tramite il pannello Effetti.
Nel layer "pulsanti", inseriamo 4 campi di testo statici, che convertiremo in movieclip: nel layer "cornice" inseriamo
un'altra istanza del movieclip barraVolume, questa volta con il colore originario e con nome di istanza barra, e sopra di essa, un'istanza del movieclip cornice, delle stesse dimenzioni della barra. Nel layer "scritte", infine, posizioniamo un
campo di testo dinamico, a cui associamo la variabile volume. Nel primo frame del movieclip, inseriamo un i=100;
Il risultato dovrà essere questo:
A tutti e quattro i pulsanti associamo lo stesso script dei titoli. Nella riga
commentata, inseriamo rispettivamente (riporto solo le parti modificate):
al pulsante PLAY
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!_root.riproduzione) { }else{
_root.suono.start(0,999);
_root.riproduzione = true;
}
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
al pulsante STOP
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (_root.riproduzione) {
_root.suono.stop();
_root.riproduzione = false;
}
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
al pulsante MIN (al quale diamo min come nome di istanza)
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
vai = true;
_parent.max.vai = false;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
onClipEvent(enterFrame){
if(vai){
start = _parent.i;
fade = (0-start)/30;
_parent.i = Math.floor(_parent.i + fade);
_root.suono.setVolume(_parent.i);
_parent.barra._width =
_parent.volume = _parent.i;
}
}
al pulsante MAX (al quale diamo max come nome di istanza)
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
vai = true;
_parent.min.vai = false;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
onClipEvent(enterFrame){
if(vai){
start = _parent.i;
fade = (100-start)/30;
_parent.i = Math.ceil(_parent.i + fade);
_root.suono.setVolume(_parent.i);
_parent.barra._width =
_parent.volume = _parent.i
}
}
Il suono parte in automatico, all'avvio del filmato, e la variabile riproduzione è vera: gli script del tasto PLAY e STOP non hanno bisogno di spiegazione (li abbiamo visti tali e quali nella sezione precedente).
Gli script interessanti sono quelli dei pulsati MAX e MAX. Come possiamo vedere, una volta premuto uno dei due movieclip, rendiamo vera la
variabile vai: a quel punto vengono eseguite le azioni sottoposte all'enterFrame (if(vai), cioè se vai è vera).
Altra cosa da vedere, è che allo stesso tempo viene settata come falsa la variabile vai dell'altro movieclip: il che significa che i due blocchi di enterFrame, non vengono mai eseguiti contemporaneamente.
Quello che succede, con questi script, non è nient'altro che l'applicazione della formula del moto uniformemente decelerato,
applicato a qualcosa che non si muove. Infatti, quello che facciamo, e decrementare decelarando il valore della variabile
"i", settata nel movieclip strumenti come 100, e che ci rappresenta il volume del suono. La "posizione" finale, sarà
sempre lo 0 per il pulsante MIN, e 100 per il pulsante MAX. La "posizione" iniziale sarà il valore attuale di "i".
L'unica fondamentale differenza, assolutamente degna di nota, è che alla "posizione" attuale della "i", noi sommiamo, invece che la somma tra la "posizione" e lo "spostamento" (fade), l'arrotondamento per difetto della somma tra la "posizione" e lo "spostamento", nel caso del MIN, e l'arrotondamento per eccesso, nel caso del MAX. Se non facessimo così, il valore non arriverebbe mai rispettivamente allo 0 e al 100. Spiego riga per riga uno solo dei due codici (sono praticamente
identici):
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
// setta la variabile "vai" come vera
vai = true;
// setta la variabile "vai" in "max" come falsa
_parent.max.vai = false;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
// ad ogni riproduzione del movieclip
onClipEvent(enterFrame){
// se la variabile "vai" è vera
if(vai){
// dai a "start" il valore attuale della "i"
start = _parent.i;
// dai a "fade" il valore di -"start" fratto 30
fade = (0-start)/30;
// assegna a "i" il valore dell'arrotondamento per
// difetto della somma tra "i" e "fade"
_parent.i = Math.floor(_parent.i + fade);
// setta il volume del suono uguale a "i"
_root.suono.setVolume(_parent.i);
// dai alla larghezza della barra il valore di "i"
// e scrivi "i" nel campo di testo "volume"
_parent.barra._width =
_parent.volume = _parent.i;
}
}
La barra
Alla barra tinta di grigio, associamo lo stesso script che abbiamo visto all'inizio di questa sezione (riporto solo le parti salienti):
onClipEvent(load){
_parent.barra._width =
_parent.i;
function setta(){
k = Math.round(_xmouse);
if(k < 0){
k = 0;
}else if(k > 100){
k = 100;
}
_root.suono.setVolume(k);
_parent.barra._width =
_parent.volume =
_parent.i = k;
updateAfterEvent();
}
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
_parent.max.vai =
_parent.min.vai =
false;
premuto = true;
setta();
}else{
premuto = false;
}
}
onClipEvent(mouseMove){
if(premuto){
setta();
}
}
Unica differenza, è che al click sulla barra viene settata come falsa la variabile vai in entrambi i movieclip MIN e MAX, in modo da interrompere gli eventuali cicli sottoposti all'enterFrame. Questo è il risultato.
Concludiamo: andiamo al movieclip pannello, e nel layer "strumenti" trasciniamo dalla libreria un'istanza del movieclip
strumenti che abbiamo appena completato. Diamo al movieclip, come nome di istanza, il nome strumenti. Selezionando ora i titoli uno ad uno, sostituiamo alle righe commentate il comando: _parent.strumenti.gotoAndStop(X); dove la X rappresenta di volta in volta il frame a cui rimandare.
Quindi, in ordine, il pulsante data conterrà:
_parent.strumenti.gotoAndStop(1);
il pulsante suono:
_parent.strumenti.gotoAndStop(2);
etcetera.
