Uno dei problemi più comuni per un flasher è quello di far scorrere dei contenuti - siano essi testi, video o immagini - all'interno di un determinato spazio, creare ovvero i cosiddetti "scroller". Se fino a Flash Mx 2004 era necessario utilizzare delle maschere all'interno dei movieclip, in Flash 8 è stato introdotto un nuovo comando che facilita notevolmente queste operazioni: si tratta della proprietà scrollRect.
Questo comando è nato in pratica appositamente per realizzare dei sistemi di scorrimento dei contenuti, infatti la descrizione ufficiale che troviamo nella guida di Flash recita «The scrollRect property allows you to quickly scroll movie clip content», ovvero «la proprietà scrollRect permette di scrollare rapidamente il contenuto di un movieclip».
Sintassi di scrollRect
Abbiamo detto che stiamo parlando di una proprietà, più precisamente appartenente alla classe MovieClip. La sintassi è molto semplice:
nomeistanza.scrollRect = oggetto Rectangle
Come possiamo vedere i parametri da indicare sono due: il nome istanza del movieclip a cui applicare il rettangolo di scorrimento, e l'oggetto Rectangle: sarà quest'ultimo a stabilire le dimensioni del rettangolo da utilizzare come "delimitatore" dell'area visibile del movieclip.
Un esempio pratico
Vediamo un esempio pratico per comprendere meglio la situazione. Portiamoci sul primo fotogramma della linea temporale ed inseriamo il seguente codice:
_root.createEmptyMovieClip("mc",1);
with(mc){
lineStyle(1,0x000000,100);
beginFill(0x000099,70);
lineTo(100,0);
lineTo(100,100);
lineTo(0,100);
lineTo(0,0);
endFill();
}
mc.onEnterFrame = function(){
this._y += 5;
}
Testando il filmato vediamo apparire sullo stage un quadrato di colore blu chiaro che si muove verticalmente all'interno dell'area del filmato.
Supponiamo di voler mostrare solamente una parte alla volta di questo quadrato, in un'area limitata così che una volta al di fuori di questa area il quadrato non sia visibile; basterà modificare il codice in questo modo:
import flash.geom.Rectangle;
_root.createEmptyMovieClip("mc",1);
with(mc){
lineStyle(1,0x000000,100);
beginFill(0x000099,70);
lineTo(100,0);
lineTo(100,100);
lineTo(0,100);
lineTo(0,0);
endFill();
}
mc.onEnterFrame = function(){
this._y += 5
}
mc._y = -100;
rett = new Rectangle(0,0,100,60);
_root.scrollRect = rett;
Cosa fanno queste nuove righe di codice? La prima importa la classe flash.geom.Rectangle;, indispensabile per creare un oggetto Rectangle, come facciamo nella penultima riga dello script. Questo oggetto ci servirà per valorizzare il parametro scrollRect, come possiamo vedere nell'ultima riga.
Per l'esempio abbiamo creato un rettangolo largo 100 pixel e alto 60, posizionato alle coordinate 0,0 ed associato a _root, quindi allo stage. Con la riga mc_y = -100 spostiamo il quadrato al di fuori dello stage, in modo che l'animazione parta da fuori.
Con queste poche righe aggiunte allo script abbiamo fatto sì che il quadrato scorra all'interno di un'area prestabilita.
Nota: abbiamo impostato scrollRect su _root perchè la proprietà scrollRect va impostata nel movieclip genitore di quello che facciamo scorrere, nel nostro caso il genitore del movieclip era proprio _root. Nel caso avessimo altri oggetti sullo stage però questi non sarebbero visibili qualora non fossero compresi nell'area dello scrollRect, per cui questa soluzione non sarebbe applicabile in un ambito reale, ma andava bene solamente per una dimostrazione veloce.
Uno scroller interattivo
L'esempio visto poco fa come detto non è adatto ad ambiti reali in quanto va ad influenzare la visualizzazione degli elementi su tutto lo stage, inoltre non prevede interattività da parte dell'utente ma si limita a mostrare lo scorrimento di un elemento che opera senza essere influenzato dalle azioni del visitatore. Vediamo allora come creare uno scroller per un'immagine, utilizzando questa volta due movieclip, in modo che non venga influenzata la visualizzazione di altri elementi posti e facendo sì che l'utente possa interagire con il filmato.
Per prima cosa importiamo all'interno dell'area di lavoro un'immagine a nostra scelta, e convertiamola in clip filmato. A questo punto sullo stage avremo un movieclip contenente l'immagine importata: selezioniamolo ed attuiamo una nuova conversione, così da avere un movieclip "contenitore" con dentro il movieclip contenente l'immagine. La situazione sarà simile a quella illustrata in figura.
In questo modo abbiamo un movieclip "contenitore" che ha al suo interno un altro movieclip dentro al quale c'è l'immagine che andremo a mostrare graduialmente.
Diamo come nome istanza (dal pannello proprietà) al primo movieclip contenitore, quindi sul primo fotogramma della timeline inseriamo il seguente codice
import flash.geom.Rectangle;
rect = new Rectangle(0,0,325,300);
contenitore.scrollRect = rect;
_root.onMouseMove = function() {
rect.x = _xmouse;
rect.y = _ymouse;
contenitore.scrollRect = rect;
}
Cosa fa questo codice? Come prima cosa importa la classe flash.geom.Rectangle, quindi imposta il rettangolo da utilizzare per lo scorrimento, posizionandolo alle coordinate 0,0 e dandogli dimensioni 325 (larghezza) per 300 (altezza), quindi lo associa al movieclip contenitore.
Quindi impostiamo una funzione, da eseguire ogni volta che il mouse viene mosso (onMouseMove) che si occupa di spostare il rettangolo in base alla posizione del mouse e aggiornare la posizione del movieclip contenitore rispetto ad esso.
Se testiamo il filmato, noteremo che a seconda della posizione del mouse varierà l'area visibile dell'immagine. Possiamo notare come venga mosso solo il rettangolo di scorrimento, mentre il movieclip contenitore conserverà sempre la sua posizione. Se modifichiamo il codice in questo modo:
import flash.geom.Rectangle;
rect = new Rectangle(0,0,325,300);
contenitore.scrollRect = rect;
_root.onMouseMove = function() {
rect.x = _xmouse;
rect.y = _ymouse;
contenitore.scrollRect = rect;
trace("X: " + contenitore._x);
trace("Y: " + contenitore._y);
}
vedremo che all'interno del pannello output i valori tracciati saranno sempre uguali, ad indicare proprio che il movieclip non viene mosso rispetto alla sua posizione originale.
Esempio di scrollRect con MovieClip annidati
Conclusione
Abbiamo visto come tramite l'utilizzo della proprietà scrollRect sia molto semplice creare dei sistemi di scorrimento, siano essi interattivi o automatizzati, senza dover ricorrere all'utilizzo delle maschere. Questo, oltre ad offrire dei vantaggi in termini di tempo di lavorazione, consente eventualmente di preparare tutto via codice (il che può rivelarsi utile in progetti che facciano un uso massiccio di classi esterne) e soprattutto lo scrollRect permette prestazioni migliori rispetto all'utilizzo delle maschere per quanto riguarda i testi e i contenuti complessi.
Abbiamo anche notato come bastino poche righe di codice per creare un esempio interattivo: volendo è possibile aggiungere dei controlli ed altre feature agli slider di questo tipo, così da renderli ancor più accattivanti...è insomma possibile sbizzarrirsi per creare sistemi di scorrimento al tempo stesso gradevoli ed efficenti!
Il sorgente degli esempi riportati è scaricabile qui.
