Använda komponenten ScrollPane

Du kan använda komponenten ScrollPane för att visa innehåll som är för stort för området som det läses in till. Om du till exempel har en stor bild och bara ett litet utrymme för den i ett program, kan du läsa in den i en ScrollPane. ScrollPane tar emot filmklipp, JPEG-, PNG-, GIF- och SWF-filer.

Komponenter som ScrollPane och UILoader har complete -händelser som gör att du kan avgöra när innehållet har lästs in fullständigt. Om du vill ange egenskaper för innehållet i en ScrollPane- eller UILoader-komponent avlyssnar du complete -händelsen och anger egenskapen i händelsehanteraren. Med följande kod skapas till exempel en avlyssnare för Event. COMPLETE och en händelsehanterare som anger alpha -egenskapen för ScrollPane-innehållet till .5: 

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

Om du anger en plats när du läser in innehåll till ScrollPane, måste du ange platsen som 0, 0 (X- och Y-koordinater). Följande kod läser till exempel in ScrollPane korrekt eftersom rutan ritas på platsen 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

Mer information finns i avsnittet om klassen ScrollPane i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional .

Använda komponenten ScrollPane

En ScrollPane kan vara aktiverad eller inaktiverad. En inaktiverad ScrollPane tar inte emot mus- eller tangentbordsinmatning. Användare kan använda följande tangenter för att styra en ScrollPane när den har fokus:

Nyckel

Beskrivning

Nedpilen

Innehållet flyttas upp en lodrät radrullning.

Uppilen

Innehållet flyttas ned en lodrät radrullning.

End

Innehållet flyttas längst ned i ScrollPane.

Vänsterpil

Innehållet flyttas en vågrät radrullning till höger.

Högerpil

Innehållet flyttas en vågrät radrullning till vänster.

Hem

Innehållet flyttas högst upp i ScrollPane.

End

Innehållet flyttas längst ned i ScrollPane.

PageDown

Innehållet flyttas upp en lodrät sidrullning.

PageUp

Innehållet flyttas ned en lodrät sidrullning.

Användare kan använda musen för att interagera med ScrollPane, både på innehållet och på de lodräta och vågräta rullningslisterna. Användaren kan dra innehåll med musen när egenskapen scrollDrag har värdet true . När en handpekare visas över innehållet betyder det att användaren kan dra innehållet. Till skillnad från med de flesta kontroller inträffar åtgärderna när musknappen trycks ned, och fortsätter tills den släpps. Om innehållet har giltiga tabbstopp måste du ange värdet false för scrollDrag . Annars orsakar alla musträffar på innehållet rullningsdragning.

ScrollPane-komponentparametrar

Du kan ställa in följande parametrar för varje ScrollPane-instans i egenskapsinspektören eller komponentinspektören: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize och verticalScrollPolicy . Var och en av de här parametrarna har en motsvarande ActionScript-egenskap med samma namn. Information om möjliga värden på de här parametrarna finns i avsnittet om klassen ScrollPane i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional .

Du kan skriva ActionScript för att styra de här och andra alternativ för en ScrollPane-komponent med hjälp av dess egenskaper, metoder och händelser.

Skapa ett program med komponenten ScrollPane

I proceduren nedan beskrivs hur du lägger till en ScrollPane-komponent i ett program när du redigerar. I det här exemplet läser ScrollPane in en bild från en sökväg som anges av egenskapen source .

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra ScrollPane-komponenten från panelen Komponenter till scenen och ge den förekomstnamnet aSp .

  3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen för att köra programmet.

Skapa en ScrollPane-förekomst med ActionScript

Exemplet skapar en ScrollPane, ställer in dess storlek och läser in en bild till den med hjälp av egenskapen source . Två avlyssnare skapas också. Den första avlyssnar en scroll -händelse och visar bildens position när användaren rullar lodrätt eller vågrätt. Den andra avlyssnar en complete -händelse och visar ett meddelande i utdatapanelen om att bilden har lästs in.

Det här exemplet skapar en ScrollPane med ActionScript och placerar ett MovieClip (en röd ruta) som är 150 pixlar brett och 300 pixlar högt i den.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra ScrollPane-komponenten från panelen Komponenter till bibliotekspanelen.

  3. Dra en DataGrid-komponent från panelen Komponenter till bibliotekspanelen.

  4. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen för att köra programmet.