2 premesse
1. Ci sono diversi modi per riprodurre questo effetto: ad esempio, uno dei più semplici (concettualmente), ma anche dei più laboriosi, è quello delle maschere. Qui invece ne presento una versione fatta con ActionScript: può essere adattata in mille modi, e può produrre effetti meravigliosi. È facilmente modificabile, e fa risparmiare molto tempo.
2. Non ho inventato niente. Essendo un effetto molto richiesto e di grande impatto, ho solo asciugato all'osso il codice, perchè fosse il più intuitivo possibile, e ho cercato di spiegarlo nel modo più semplice che mi riusciva. Purtroppo, per capire la spiegazione (non strettamente necessaria, ma sicuramente utile), mi baso su alcuni concetti di Geometria che devo considerare assimilati.
Notazione importante:
In sesta pagina lo script per l'effetto laser implementato in Flash MX.
la base geometrica
Piccola digressione geometrica. Consideriamo un sistema di assi cartesiani, del tutto simile a quello usato dal Flash per definire la posizione degli oggetti sullo stage. Questo sistema ha l'Origine in alto a sinistra, e i suoi assi si espandono verso destra e verso il basso.
Consideriamo la posizione del punto B rispetto al punto A: se ad ogni quadratino corrispondono 10 pixel, il punto Bè 20 pixel più a destra e 20 pixel più in basso del punto A. Dal momento che il sistema cartesiano ha l'origine in alto a sinistra, il valore della X e della Y del secondo punto, sarà aumentato, in entrambi i casi, di 20 unità. Se le coordinate del punto A sono (40,20), le coordinate del punto B sono (60,40). Allo stesso modo, volendo considerare la posizione di D rispetto a C, vediamo come il valore della X sia aumentato da 20 a 30 unità, mentre quello della Y sia diminuito da 90 a 70.
Noi considereremo le coordinate di due punti per definire gli spostamenti dal primo al secondo, e un segmento predefinito di retta, per tracciare il percorso tra i due. Quindi, prima di continuare, soffermiamoci un attimo a considerare come sia lo spostamento da A a B: sommando 20 unità al valore della X, e venti unità al valore della Y, quindi 20 e 20. Lo spostamento da C a D, invece, si ottiene sommando 10 unità al valore della X, e sottraendone 20 al valore della Y, quindi 10 e -20.
Il segmento predefinito
Consideriamo un segmento di retta assolutamente particolare e unico.
Questo segmento è la diagonale di un quadrato di 100 unità di lato. Nel suo sistema cartesiano, ha il primo vertice nel punto di coordinate (0,0), e il secondo nel punto di coordinate (100,100). Riproduciamo in Flash questo segmento.
Creiamo un nuovo filmato. Sullo stage disegnamo un segmento che sia la diagonale di un quadrato di 100 pixel di lato, con la direzione rappresentata nella figura. Convertiamo la linea in movieclip. Editiamo il movieclip, e posizioniamo il vertice superiore del segmento nel punto di registrazione, in modo che parta dal centro del movieclip e si sposti verso il basso e verso destra.
Nel filmato seguente, è presente un movieclip costruito così. Spostando il secondo vertice tramite il cerchietto, potremo vedere dalle caselle di testo le sue coordinate. È possibile inserire anche delle coordinate, e spostare così il vertice tramite il pulsante "modifica". Da notare che queste coordinate sono in riferimento al primo punto, che è anche l'Origine del piano.
Ad esempio, inserendo nelle caselle 20 e 20, cioè quei valori di spostamento che avevamo visto nella prima parte, il segmento assumerà la forma di quello congiungente i punti A e B. Se inseriamo 10 e -20, i valori dello spostamento tra C e D, il segmento assomiglierà nuovamente a quello rappresentato nella figura.
Questi valori sono, infatti, le coordinate del secondo punto rispetto al primo, quando questo viene considerato come Origine del piano.
Ma la cosa veramente interessante, è che questi valori sono l'_xscale e l'_yscale del movieclip contenente il segmento.
Il che significa che se posiziono il segmento sul punto A, e come valore di _xscale assegno 20 così come assegno 20 al valore di _yscale, ottengo il segmento AB.
Esempio
Vogliamo rappresentare la forma disegnata dai segmenti di retta rappresentati nella figura. Le coordinate di B rispetto ad A sono 20 e 20. Le coordinate di C, rispetto a B, sono -10 e 20. Le coordinate di D rispetto a C sono 30 e 20, le coordinate di F rispetto a D sono 0 e -30.
Gli stessi valori li ottengo sottraendo alle coordinate del secondo punto quelle del primo. Valori delle coordinate del punto B meno quelle del punto A, uguale 20 e 20, valori delle coordinate del punto C meno quelle del punto B, uguale -10 e 20, e così via. Ottengo quindi 4 coppie di valori:
( 20 e 20 ) (-10 e 20 ) ( 30 e 20 ) ( 0 e -30 )
Posiziono una copia del segmento sul punto A, come _xscale e _yscale assegno la prima coppia di valori e ottengo il segmento AB, posiziono un'altra copia del segmento sul punto B, come _xscale e _yscale assegno -10 e 20 e ottengo il segmento BC, e così via.
L'effetto laser è tutto qui.
Flash
Creiamo un nuovo filmato. Aggiungiamo un nuovo movieclip, che chiameremo "esterno", tramite il pulsante + in basso a sinistra nel pannello Libreria.
Sullo stage, dentro il movieclip "esterno", disegniamo una figura, e tramite lo strumento Calamaio (Ink Bottle), disegnamone il contorno: poi cancelliamo il riempimento. Inseriamo questo contorno in un livello guida, e spezziamolo in un punto.
Creiamo l'animazione di un movieclip (nome di istanza: cursore) che segue il percorso formato dal contorno (ho lasciato una copia del contorno su un altro layer, per poter vedere chiaramente il percorso del movieclip).
In ogni momento di questa animazione, possiamo individuare delle coppie di punti. Un punto è la posizione attuale del movieclip, l'altro è la posizione che aveva il movieclip nel frame precedente. Sottraendo i valori delle coordinate del punto precedente a quelli del punto attuale, ottengo i due valori di cui parlavamo prima. Per ogni frame, creo una copia del segmento "tipo", la posiziono sul vecchio punto, e come _xscale e _yscale assegno quei due valori.
Creiamo quindi un movieclip con il segmento sullo stage, e assegniamogli un nome di istanza (linea). Creiamo un altro movieclip vuoto, al quale associamo il codice.
Il codice
onClipEvent (load) {
i = 1;
vecchiaX = _parent.cursore._x;
vecchiaY = _parent.cursore._y;
}
onClipEvent (enterFrame) {
if (i < _parent._totalframes) {
dup = "linea"+i;
duplicateMovieClip ("_parent.linea", dup, i);
nuovaX = _parent.cursore._x;
nuovaY = _parent.cursore._y;
_parent[dup]._x = vecchiaX;
_parent[dup]._y = vecchiaY;
_parent[dup]._xscale = nuovaX - vecchiaX;
_parent[dup]._yscale = nuovaY - vecchiaY;
vecchiaX = nuovaX;
vecchiaY = nuovaY;
i++;
}
}
In sintesi
Finchè l'animazione non è completa (vale il ciclo in cui aumenta il valore della "i" finchè non è uguale al numero di frame che compongono l'animazione del movieclip che segue il percorso), considero per ogni frame due coppie di valori. La prima coppia (nuovaX e nuovaY), è composta dalle coordinate del movieclip nel frame attuale, la seconda coppia (vecchiaX e vecchiaY), è composta dalle coordinate del movieclip nel frame precedente. Sottraggo i valori di una coppia a quella dell'altra, duplico il movieclip del segmento, posiziono il duplicato sul punto del frame precedente, e come valori di _xscale e _yscale assegno i risultati delle sottrazioni; trasformo infine le coordinate attuali in "vecchie". Nel frame successivo considero le nuove coordinate, e il ciclo si ripete.
// al caricamento del movieclip
onClipEvent (load) {
// setta la variabile "i" uguale a 1
i = 1;
// considera la prima coppia di coordinate,
// posizione attuale del movieclip
// "cursore", su cui è applicata l'animazione del percorso
vecchiaX = _parent.cursore._x;
vecchiaY = _parent.cursore._y;
}
// ogni volta che il movieclip viene riprodotto
onClipEvent (enterFrame) {
// se il valore di "i" è minore del numero totale di
// frame dell'animazione
if (i < _parent._totalframes) {
// dai a "dup" il valore stringa di "linea"
// più il valore numerico di "i"
dup = "linea" + i;
// duplica il movieclip della linea, dagli come nome il
// valore di "dup", e come profondità il valore di "i"
duplicateMovieClip ("_root.linea", dup, i);
// individua la nuova coppia di valori, cioè la
// posizione attuale di "cursore"
nuovaX = _parent.cursore._x;
nuovaY = _parent.cursore._y;
// del movieclip duplicato, il cui nome è il valore di "dup"
// setta la posizione corrispondente alle coordinate
// che aveva il movieclip nel frame precedente
_parent[dup]._x = vecchiaX;
_parent[dup]._y = vecchiaY;
// setta il fattore di scala con i valori ottenuti dalla
// differenza tra le coordinate attuali del movieclip, e
// quelle che aveva nel frame precedente
_parent[dup]._xscale = nuovaX-vecchiaX;
_parent[dup]._yscale = nuovaY-vecchiaY;
// fai diventare le coordinate attuali "vecchie",
// per poterle sottrarre nel ciclo seguente
vecchiaX = nuovaX;
vecchiaY = nuovaY;
// aumenta il valore della "i" di una unità
i++;
}
}
Osservazioni
Minore è il numero di frame che compongono l'animazione, maggiori saranno gli spostamenti da un punto all'altro, e maggiori saranno i valori dell'_xscale e dell'_yscale. Se l'animazione è di 70 frames, ad esempio, il risultato sarà questo (è evidentissimo il funzionamento dell'effetto):
Maggiore il numero di frames, minori gli spostamenti, più "morbida" l'immagine (l'esempio iniziale è di 300 frames). Ingrandendo al massimo il filmato, si può vedere come le curve siano in realtà composte da segmenti di retta di dimensioni e angolatura diversa.
Se all'interno del movieclip "linea", creo un'interpolazione di movimento con il colore, ottengo l'effetto presente nell'esempio d'inizio pagina.
Dal momento che tutto l'effetto si svolge dentro il movieclip "esterno", si potranno avere più effetti laser contemporaneamente all'interno della stessa timeline.
Flash MX
L'esempio può essere scaricato da pulsante in alto a destra.
Quasi lo stesso effetto (non identico, con questo sistema non si può variare il colore della linea durante la riproduzione, se non con uno script più complesso) si ottiene in Flash MX in modo molto più semplice, sfruttando i Drawing Methods dei movieclip.
Abbiamo sempre il livello guida e l'animazione del cursore, ma non c'è più ne la linea da duplicare, ne il movieclip di controllo. Lo script giace in un frame, ed è il seguente (nel fla la sintassi è contratta):
this.createEmptyMovieClip("laser", 1);
this.laser.lineStyle(0,0x000000,100);
this.laser.moveTo(cursore._x, cursore._y);
this.onEnterFrame = function(){
if(this._currentframe < this._totalframes + 1){
this.laser.lineTo(cursore._x, cursore._y);
}
};
Molto semplicemente creiamo un movieclip per il disegno, assegniamo uno stile per la linea, e ogni frame tracciamo la linea alla nuova posizione del cursore.
// creaiamo un movieclip vuoto con nome di istanza "laser"
this.createEmptyMovieClip("laser", 1);
// assegniamo lo stile per la linea, nera,
// con alpha al 100%, stroke hairline
this.laser.lineStyle(0,0x000000,100);
// spostiamo il movieclip per il disegno alla posizione
// iniziale del cursore
this.laser.moveTo(cursore._x, cursore._y);
// ad ogni riproduzione del movieclip
this.onEnterFrame = function(){
// se il numero del frame corrente è minore del
// numero di frame totali più uno
if(this._currentframe < this._totalframes + 1){
// traccia la linea verso l'attuale posizione del cursore
this.laser.lineTo(cursore._x, cursore._y);
}
};
