De component ScrollPane gebruiken

U kunt de component ScrollPane gebruiken om inhoud weer te geven die te groot is voor het gebied waarin deze inhoud wordt geladen. Als u bijvoorbeeld een grote afbeelding in een toepassing met weinig ruimte wilt plaatsen, kunt u de afbeelding in een ScrollPane laden. De ScrollPane accepteert filmclips, JPEG-, PNG-, GIF- en SWF-bestanden.

Componenten zoals de ScrollPane en de UILoader hebben gebeurtenissen complete die u toestaan te bepalen wanneer het laden van inhoud is voltooid. Als u eigenschappen voor de inhoud van een ScrollPane of UILoader wilt instellen, luistert u naar de gebeurtenis complete en stelt u de eigenschap in de gebeurtenishandler in. De volgende code maakt bijvoorbeeld een listener voor de gebeurtenis Event. COMPLETE en een gebeurtenishandler die de eigenschap alpha van de inhoud van ScrollPane op 0,5 instelt: 

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

Als u een locatie opgeeft tijdens het laden van inhoud in ScrollPane, moet u de locatie (x- en y-coördinaten) 0, 0 opgeven. De volgende code laadt bijvoorbeeld de eigenschap ScrollPane omdat het vak op locatie 0, 0 is getekend: 

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

Zie de klasse ScrollPane in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor meer informatie.

Gebruikersinteractie met de component ScrollPane

Een ScrollPane kan worden ingeschakeld of uitgeschakeld. Een uitgeschakelde ScrollPane kan geen muis- of toetsenbordinvoer ontvangen. De gebruiker kan de volgende toetsen gebruiken om een ScrollPane te beheren wanneer deze focus heeft:

Toets

Beschrijving

Pijl-omlaag

Hiermee wordt de inhoud een verticale regelschuiving omhoog verplaatst.

Pijl-omhoog

Hiermee wordt de inhoud een verticale regelschuiving omlaag verplaatst.

End

Hiermee wordt de inhoud naar de onderkant van de ScrollPane verplaatst.

Pijl-links

Hiermee wordt de inhoud een horizontale regelschuiving naar rechts verplaatst.

Pijl-rechts

Hiermee wordt de inhoud een horizontale regelschuiving naar links verplaatst.

Startpagina

Hiermee wordt de inhoud naar de bovenkant van de ScrollPane verplaatst.

End

Hiermee wordt de inhoud naar de onderkant van de ScrollPane verplaatst.

PageDown

Hiermee wordt de inhoud een verticale paginaschuiving omhoog verplaatst.

PageUp

Hiermee wordt de inhoud een verticale paginaschuiving omlaag verplaatst.

Een gebruiker kan de muis gebruiken om met de inhoud en de verticale en horizontale schuifbalken van ScrollPane te werken. De gebruiker kan inhoud met de muis slepen wanneer de eigenschap scrollDrag ingesteld staat op true . De weergave van een handje-cursor boven de inhoud geeft aan dat de gebruiker de inhoud kan slepen. In tegenstelling tot de meeste besturingselementen, treden handelingen op wanneer de muisknop wordt ingedrukt en deze worden uitgevoerd tot het moment waarop de knop wordt losgelaten. Als de inhoud geldige tabstops bevat, moet u scrollDrag instellen op false. Zoniet hebben alle muisklikken op de inhoud schuifslepen tot gevolg.

Parameters van de component ScrollPane

U kunt in Eigenschapcontrole of Componentcontrole de volgende parameters instellen voor elke instantie van ScrollPane: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize, en verticalScrollPolicy . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse ScrollPane in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor informatie over de mogelijk waarden voor deze parameters.

U kunt ActionScript schrijven om deze en additionele opties voor een component ScrollPane via zijn eigenschappen, methoden en gebeurtenissen te beheren.

Een toepassing met de component ScrollPane maken

De volgende procedure laat zien hoe u een component ScrollPane tijdens het ontwerpen aan een toepassing kunt toevoegen. In dit voorbeeld laadt ScrollPane een afbeelding uit een pad dat is opgegeven door de eigenschap source .

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component ScrollPane van het deelvenster Componenten naar het werkgebied en geef deze de instantienaam aSp .

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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";

  4. Selecteer Besturing > Film testen om de toepassing uit te voeren.

Een instantie ScrollPane met ActionScript maken

In het voorbeeld wordt een ScrollPane gemaakt, de grootte wordt ervan ingesteld en er wordt een afbeelding in geladen via de eigenschap source . Er worden ook twee listeners gemaakt. De eerste listener luistert naar een gebeurtenis scroll en geeft de positie van de afbeelding weer terwijl de gebruiker verticaal of horizontaal schuift. De tweede listener luistert naar een gebeurtenis complete en geeft een bericht in het deelvenster Uitvoer weer dat aangeeft dat het laden van de afbeelding voltooid is.

In dit voorbeeld wordt met ActionScript een ScrollPane gemaakt en hierin wordt een MovieClip (een rood vak) geplaatst met een breedte van 150 pixels en een hoogte van 300 pixels.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component ScrollPane van het deelvenster Componenten naar het deelvenster Bibliotheek.

  3. Sleep de component DataGrid van het deelvenster Componenten naar het deelvenster Bibliotheek.

  4. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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();         
}

  5. Selecteer Besturing > Film testen om de toepassing uit te voeren.