|
Mit der ScrollPane-Komponente (Bildlauffenster) können Sie Inhalt anzeigen, der zu groß ist für den Bereich, in den er geladen wird. Wenn beispielsweise in einer Anwendung nur ein kleiner Bereich für ein großes Bild zur Verfügung steht, können Sie es in ein Bildlauffenster laden. Bildlauffenster können Movieclips sowie JPEG-, PNG-, GIF- und SWF-Dateien akzeptieren.
Komponenten wie „ScrollPane“ und „UILoader“ besitzen
complete
-Ereignisse, durch die Sie bestimmen können, wann der Inhalt vollständig geladen ist. Wenn Sie Eigenschaften des Inhalts einer ScrollPane- oder UILoader-Komponente festlegen wollen, warten Sie auf das
complete
-Ereignis und setzen dann die Eigenschaft in der Ereignisprozedur. Im folgenden Codebeispiel wird ein Listener für das Event.
COMPLETE
-Ereignis sowie eine Ereignisprozedur, welche die
alpha
-Eigenschaft des ScrollPane-Inhalts auf .5 festlegt, erstellt:
function spComplete(event:Event):void{
aSp.content.alpha = .5;
}
aSp.addEventListener(Event.COMPLETE, spComplete);
Wenn Sie beim Laden von Inhalt in das Bildlauffenster eine Position angeben, müssen Sie die X- und X-Koordination als 0,0 angeben. Im folgenden Beispielcode wird der Inhalt korrekt in die ScrollPane-Komponente geladen, da das Feld bei Position 0,0 gezeichnet wird.
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
Weitere Informationen finden Sie im Abschnitt zur ScrollPane-Klasse im
ActionScript 3.0 Referenzhandbuch
für Flash Professional
.
Benutzerinteraktion mit der ScrollPane-Komponente
Ein Bildlauffenster kann aktiviert oder deaktiviert sein. Ein deaktiviertes Bildlauffenster kann keine Maus- oder Tastatureingaben entgegennehmen. Ein Benutzer kann ein Bildlauffenster mit den folgenden Tasten steuern, wenn es den Fokus hat:
|
Schlüssel
|
Beschreibung
|
|
Nach-unten-Taste
|
Der Inhalt wird vertikal um eine Zeile nach oben verschoben.
|
|
Nach-oben-Taste
|
Der Inhalt wird vertikal um eine Zeile nach unten verschoben.
|
|
Ende
|
Der Inhalt wird an den unteren Rand des Bildlauffensters verschoben.
|
|
Nach-links-Taste
|
Der Inhalt wird horizontal um eine Zeile nach rechts verschoben.
|
|
Nach-rechts-Taste
|
Der Inhalt wird horizontal um eine Zeile nach links verschoben.
|
|
Startseite
|
Der Inhalt wird an den Anfang des des Bildlauffensters verschoben.
|
|
Ende
|
Der Inhalt wird an den unteren Rand des Bildlauffensters verschoben.
|
|
Bild-ab
|
Der Inhalt wird vertikal um eine Bildlaufseite nach oben verschoben.
|
|
Bild-auf
|
Der Inhalt wird vertikal um eine Bildlaufseite nach unten verschoben.
|
Ein Benutzer kann die Maus verwenden, um mit der ScrollPane-Komponente zu interagieren, indem er auf den Inhalt oder auf die vertikalen und horizontalen Bildlaufleisten klickt. Der Benutzer kann Inhalte mit Maus ziehen, wenn die Eigenschaft
scrollDrag
auf
true
gesetzt ist. Das Einblenden eines handförmigen Zeigers über dem Inhalt zeigt an, dass der Benutzer den Inhalt ziehen kann. Im Gegensatz zu anderen Steuerelementen, treten Aktionen dann auf, wenn die Maustaste gedrückt ist, und werden fortgesetzt, wenn sie wieder losgelassen wird. Wenn der Inhalt gültige Tabstopps enthält, müssen Sie
scrollDrag
auf „false“ setzen. Andernfalls lösen alle Mausklicks auf den Inhalt einen Bildlauf aus.
Parameter der ScrollPane-Komponente
Die folgenden Parameter können für jede ScrollPane-Instanz im Eigenschaft- oder Komponenten-Inspektor festgelegt werden:
horizontalLineScrollSize
,
horizontalPageScrollSize
,
horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize
und
verticalScrollPolicy
. Jeder dieser Parameter verfügt über eine entsprechende ActionScript-Eigenschaft mit demselben Namen. Informationen zu den möglichen Werten für diese Parameter finden Sie im Abschnitt zur ScrollPane-Klasse im
ActionScript 3.0 Referenzhandbuch
für Flash Professional
.
Mithilfe von ActionScript-Anweisungen können Sie diese und weitere Optionen für eine ScrollPane-Komponente mit den Eigenschaften, Methoden und Ereignissen steuern.
Erstellen einer Anwendung mit der ScrollPane-Komponente
In der folgenden Anleitung wird erläutert, wie eine ScrollPane-Komponente einer Anwendung beim Authoring hinzugefügt wird. In diesem Beispiel lädt ein Bildlauffenster ein Bild aus einem mit der Eigenschaft
source
festgelegten Verzeichnis.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie die ScrollPane-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne und nennen Sie die Instanz
aSp
.
-
Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:
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";
-
Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.
Erstellen einer ScrollPane-Komponenteninstanz mithilfe von ActionScript-Code
Im Beispiel wird ein Bildlauffenster erstellt, die Größe dieses Fensters wird festgelegt, und es wird mithilfe der Eigenschaft
source
ein Bild in das Bildlauffenster geladen. Es werden auch zwei Listener erstellt. Der erste wartet auf ein
scroll
-Ereignis und zeigt die Position des Bilds an, wenn der Benutzer einen vertikalen oder horizontalen Bildlauf ausführt. Der zweite wartet auf ein
complete
-Ereignis und zeigt im Bedienfeld „Ausgabe“ eine Meldung zum abgeschlossenen Ladevorgang an.
In diesem Beispiel wird mithilfe von ActionScript-Code ein Bildlauffenster erstellt. In diesem Bildlauffenster wird ein Movieclip (ein rotes Feld) platziert, das 150 Pixel breit und 300 Pixel hoch ist.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie eine ScrollPane-Komponente aus dem Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“.
-
Ziehen Sie die DataGrid-Komponente aus dem Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“.
-
Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:
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();
}
-
Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.
|
|
|
