Usare il componente ScrollPane

Interazione dell'utente con il componente ScrollPane
Parametri del componente ScrollPane
Creare un'applicazione con il componente ScrollPane
- Creare un'istanza ScrollPane mediante ActionScript

Potete utilizzare il componente ScrollPane per visualizzare qualsiasi contenuto di dimensioni maggiori rispetto all'area in cui viene caricato. Ad esempio, se disponete di un'immagine di grandi dimensioni per la quale è disponibile solo poco spazio in un'applicazione, potete caricarla in un componente ScrollPane. Questo componente supporta i clip filmato e i file JPEG, PNG, GIF e SWF.

I componenti come ScrollPane e UILoader dispongono di eventi complete che consentono di determinare l'avvenuto caricamento del contenuto. Se desiderate impostare delle proprietà per il contenuto di un componente ScrollPane o UILoader, impostate l'ascolto dell'evento complete e la proprietà nel gestore di eventi. Ad esempio, il codice seguente crea un listener per l'evento Event. COMPLETE e un gestore di eventi che imposta la proprietà alpha del contenuto di ScrollPane su 0,5:

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

Se specificate una posizione quando caricate del contenuto nel componente ScrollPane, dovete specificare il valore 0, 0 (coordinate X e Y). Ad esempio, il codice seguente carica correttamente il componente ScrollPane perché la casella è disegnata in corrispondenza delle coordinate 0, 0:

var box:MovieClip = new MovieClip(); 
box.graphics.beginFill(0xFF0000, 1); 
box.graphics.drawRect(0, 0, 150, 300); 
box.graphics.endFill(); 
aSp.source = box;    //load ScrollPane

Per ulteriori informazioni, vedete la classe ScrollPane nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Interazione dell'utente con il componente ScrollPane

Un componente ScrollPane può essere abilitato o disabilitato. Se è disabilitato, non può ricevere input dal mouse o dalla tastiera. Per controllare un componente ScrollPane attivo, un utente può utilizzare i tasti seguenti:

Chiave	Descrizione
Freccia giù	Il contenuto si sposta verticalmente di una riga verso l'alto.
Freccia su	Il contenuto si sposta verticalmente di una riga verso il basso.
Fine	Il contenuto si sposta nella parte inferiore del componente ScrollPane.
Freccia sinistra	Il contenuto si sposta orizzontalmente di una riga verso destra.
Freccia destra	Il contenuto si sposta orizzontalmente di una riga verso sinistra.
Home	Il contenuto si sposta all'inizio del componente ScrollPane.
Fine	Il contenuto si sposta nella parte inferiore del componente ScrollPane.
Pag giù	Il contenuto si sposta verticalmente di una pagina verso l'alto.
Pag su	Il contenuto si sposta verticalmente di una pagina verso il basso.

Per interagire con il contenuto e con le barre di scorrimento verticale e orizzontale del componente ScrollPane, l'utente può usare il mouse. Potete trascinare il contenuto con il mouse quando la proprietà scrollDrag è impostata su true . La visualizzazione di un puntatore a forma di mano sopra il contenuto indica che questo può essere trascinato. A differenza di molti altri controlli, le azioni si verificano quando viene premuto il pulsante del mouse e continuano finché non viene rilasciato. Se il contenuto presenta tabulazioni valide, dovete impostare scrollDrag su false, altrimenti ogni interazione del mouse con il contenuto richiamerà un'azione di scrollDrag.

Parametri del componente ScrollPane

Potete impostare i parametri seguenti per ogni istanza del componente ScrollPane nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize e verticalScrollPolicy . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe ScrollPane nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

È possibile creare codice ActionScript per controllare queste e altre opzioni per un componente ScrollPane utilizzandone le proprietà, i metodi e gli eventi.

Creare un'applicazione con il componente ScrollPane

La procedura seguente indica come aggiungere un componente ScrollPane a un'applicazione durante la creazione. In questo esempio, il componente ScrollPane carica un'immagine da un percorso specificato dalla proprietà source .

Create un nuovo documento Flash (ActionScript 3.0).
Trascinate un componente ScrollPane dal pannello Componenti allo stage e assegnategli il nome di istanza aSp .

Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente:

import fl.events.ScrollEvent; 
 
aSp.setSize(300, 200); 
 
function scrollListener(event:ScrollEvent):void { 
    trace("horizontalScPosition: " + aSp.horizontalScrollPosition +  
     ", verticalScrollPosition = " + aSp.verticalScrollPosition); 
}; 
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener); 
 
function completeListener(event:Event):void { 
    trace(event.target.source + " has completed loading."); 
}; 
// Add listener. 
aSp.addEventListener(Event.COMPLETE, completeListener); 
 
aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";

Selezionate Controllo > Prova filmato per eseguire l'applicazione.

Creare un'istanza ScrollPane mediante ActionScript

Nell'esempio viene creato un componente ScrollPane, ne vengono impostate le dimensioni e viene caricata un'immagine nel componente usando la proprietà source. Vengono inoltre creati due listener: il primo rileva un evento scroll e visualizza la posizione dell'immagine quando questa viene fatta scorrere in verticale o in orizzontale; il secondo rileva l'evento complete e visualizza un messaggio nel pannello Output in cui è indicato che il caricamento dell'immagine è completato.

In questo esempio viene creato un componente ScrollPane mediante ActionScript e viene inserito un clip filmato (una casella rossa), largo 150 pixel e alto 300 pixel.

Create un nuovo documento Flash (ActionScript 3.0).
Trascinate il componente ScrollPane dal pannello Componenti al pannello Libreria del documento corrente.
Trascinate il componente DataGrid dal pannello Componenti al pannello Libreria del documento corrente.

Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente:

import fl.containers.ScrollPane; 
import fl.controls.ScrollPolicy; 
import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aSp:ScrollPane = new ScrollPane(); 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
 
aSp.source = aBox; 
aSp.setSize(150, 200); 
aSp.move(100, 100); 
 
addChild(aSp); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(0, 0, 150, 300); 
            box.graphics.endFill();         
}

Selezionate Controllo > Prova filmato per eseguire l'applicazione.