L'actionscript
Pulsanti
Partiamo dall'interno delle barre. Abbiamo 6 movieclip contenenti le immagini, coperti da 6 movieclip base. Ogni movieclip
base ha un nome di istanza, clip001, clip002 eccetera. Dentro ogni movieclip, c'è lo stesso rettangolo a cui è associato il primo script che abbiamo visto. Vediamo la prima parte:
onClipEvent (load) {
colore = new Color(this);
colore.setRGB(0x000000);
_alpha = 50;
}
Al caricamento del movieclip (e vale per tutti i movieclip), il colore verrà settato sul nero, e l'alpha al 50%. Quindi noi vedremo le
immagini attraverso un "velo" scuro.
Nel secondo pezzo:
onClipEvent (load) {
colore = new Color(this);
colore.setRGB(0x000000);
_alpha = 50;
}
onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse,
_root._ymouse,
true)) {
sopra = true;
if (_alpha>0) {
_alpha -= 5;
}
} else {
sopra = false;
if (_alpha<50) {
_alpha += 5;
}
}
}
stabiliamo che ad ogni riproduzione del movieclip, se con il mouse siamo sopra il movieclip stesso ( hitTest ), se l'alpha è maggiore di
zero, deve diminuire di 5 unità, altrimenti, se non siamo sul movieclip e l'alpha è minore di 50, deve aumentare di 5 unità ( la sintassi
_alpha += 5 corrisponde a _alpha =.
_alpha+ 5 )
In questo modo, al passaggio del mouse sul movieclip, questo si schiarisce fino a diventare trasparente, per poi tornare scuro quando il
mouse se ne allontana.
Inoltre, quando il mouse è sopra il movieclip, la variabile sopra è vera, altrimenti è falsa. Il sapere se siamo sopra il movieclip, infatti, ci serve per l'ultimo pezzo del codice:
onClipEvent (mouseDown) {
if (sopra) {
_root.comandi(substring(_parent._name,7,1));
}
}
Se sopra è vera, quando clicchiamo con il pulsante sinistro del mouse, viene richiamata la funzione comandi che sta nella root,
alla quale viene passato un parametro particolare: una sottostringa, della lunghezza di un carattere, che rappresenta la settima lettera del
nome di istanza del movieclip che contiene il rettangolo.
Ora, ogni movieclip rettangolo è contenuto nel movieclip base, che ha rispettivamente nome di istanza, dentro barra, clip001,
clip002, clip003... Quando clicchiamo su un rettangolo, viene preso il nome di istanza, viene tolto "clip00" e rimane la settima
lettera, cioè un numero da 1 a 6. E' questo numero, che viene inviato come parametro alla funzione della root. In pratica, se clicco sopra
la seconda immagine, che sta sotto il movieclip clip002, alla funzione comandi viene inviato il parametro 2.
Funzione
Cosa fa la funzione, quando riceve il parametro? (facciamo l'esempio con il 2). Prende l'array titoli e ne considera
l'elemento [2]. Questo elemento non sarebbe il secondo dell'array, ma il terzo,
poiché la numerazione dell'array parte da zero:
per questo motivo, il primo elemento dell'array è uno "0", che serve a spostare in avanti tutti gli elementi.
Considerato allora questo elemento, lo scrive nella casella titolo nel movieclip out, poi prende l'elemento [2] dell'array
sottotitoli, e lo scrive nella casella sottotitoli. In questo modo, ogni volta che viene cliccato su un movieclip, vengono scritte nelle
caselle, le informazioni corrispondenti.
Lo slider
Adesso il codice più difficile da comprendere, quello che permette alle due barre di scorrere. Il codice sta tutto nel movieclip vuoto
presente sullo stage, al quale ho dato il nome di istanza cursore per renderlo identificabile nel Debugger e nel Movie Explorer.
onClipEvent (load) {
centro = _root.barra1._x;
larghezza = _root.barra1._width;
destra = centro + larghezza;
sinistra = centro - larghezza;
_root.barra1.duplicateMovieClip("barra2", 2);
_root.barra2._x = destra;
}
onClipEvent (mouseMove) {
_x = _root._xmouse;
}
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;
mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;
barra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
Vediamolo un pezzo alla volta.
onClipEvent (load) {
centro = _root.barra1._x;
larghezza = _root.barra1._width;
destra = centro + larghezza;
sinistra = centro - larghezza;
_root.barra1.duplicateMovieClip("barra2", 2);
_root.barra2._x = destra;
}
Al caricamento del movieclip, vengono settate alcune variabili:
• Alla variabile centro viene assegnato il valore della posizione di barra1 sull'asse delle x (quindi il centro del
filmato, 350).
• Alla variabile larghezza viene assegnato il valore della larghezza di barra1.
• Alla variabile destra viene assegnato il valore di centro più larghezza.
• Alla variabile sinistra quello di centro meno larghezza.
Quindi, barra1 viene duplicata con il nome di barra2, e barra2 viene posizionata subito a destra di barra1. Questo è quello che otteniamo
(molto rimpicciolito):
Abbiamo preso il filmato, e ne abbiamo stabilito il centro: poi abbiamo stabilito la posizione di due limiti immaginari, a destra e sinistra,
distanti dal centro quanto la barra. Abbiamo quindi duplicato la barra e messo la copia accanto alla prima.
onClipEvent (mouseMove) {
_x = _root._xmouse;
}
Con queste righe stabiliamo che, al movimento del mouse, il cursore debba rimanere alla stessa altezza sull'asse delle X (segue il mouse
in tutti i suoi spostamenti).
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;
mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;
barra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
Ad ogni riproduzione del movieclip, vengono fatti questi calcoli.
mouseX = Math.round(_x-centro)*-1;
Viene stabilito, innanzitutto, il fattore di accelerazione mouseX, cioè a che velocità devono muoversi le barre (l'ampiezza dello
spostamento). Questo fattore è l'inverso della distanza del movieclip cursore (che segue il mouse) dal centro del filmato: quindi, più
vicino sono al centro del filmato con il mouse, più lente si muoveranno (_x - centro tende a 0). E questo movimento, dal momento che
moltiplico il fattore per -1, sarà inverso, come per una cloche d'aereo: con il mouse a destra del filmato, le barre scorreranno verso
sinistra.
mouseX = Math.round(mouseX/15);
Il valore di mouseX viene diviso per 15: con questa espressione, determiniamo effettivamente la velocità di movimento. Più è basso il numero
che mettiamo al posto di 15, più veloci saranno le barre.
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
Stabilita l'entità degli spostamenti, spostiamo le barre sommando alla loro attuale posizione il valore di mouseX. Dal momento che mouseX
uguale per entrambe, le barre si muoveranno sempre rimanendo una accanto all'altra.
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;
mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;
barra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
Assegniamo a barra1X e barra2X i valori delle rispettive posizioni delle due barre. Dovremo quindi considerare 4 possibilità,
grazie alle quali lo scorrimento diventa continuo. Prendiamo due dei casi in considerazione, il cui funzionamento vale anche per gli
altri:
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
Le barra1 si sta spostando verso sinistra: quando il suo centro ha superato la posizione del limite sinistra, la sua nuova
posizione sarà a destra di barra2, per l'esattezza alla distanza della larghezza della barra dal suo centro. Con una barra questo è
quello che succede:
La cosa importante, è che questo vale anche per l'altra barra, che dovrà spostarsi a destra di barra1. Se guardiamo le due barre
assieme, vedremo che in ogni momento c'è una barra sullo stage: se quindi le barre sono uguali, avremo uno scorrimento continuo.
