Verlauf
Alle Kapitel anzeigen
voriges Kapitel
Scrollen und Ziehen mit der Komponente ScrollPane
Die Komponente ScrollPane ermöglicht das Scrollen und Ziehen eines Bildes oder einer swf-Datei, die von extern in den ScrollPane-Container geladen werden. Darin unterscheidet sich diese von den vorangegangenen Methoden, bei denen ein Movieclip oder Sprite gescrollt oder gezogen wird.
Die Fenster für die Komponenten und des Komponenten-Inspektors lassen sich im Menü über Fenster>Komponenten (Strg+F7) bzw. Fenster>Komponenten-Inspektor (Umschalt+F7) öffnen.
Im nachfolgenden Beispielvideo liegen die fla-Datei (scrollpane.fla) und das zu ladende Bild in demselben lokalen Ordner. Daher genügte es in diesem Fall bei der Quelle nur den Dateinamen anzugeben. Bei einer Internet-Anwendung muss die absolute URL der Datei angegeben werden.
In dem Video wird gezeigt, wie man- eine Instanz der Komponente ScrollPane erzeugt,
- ein extenes Bild über Scrollbalken scrollen und
- zusätzlich auch bei gedrückter Maustaste ziehen kann,
- wie man die Scrollbalken ausblendet und
- das Erscheinungsbild der Komponente (Skin) verändern kann.
Im Videobeispiel wurden bis jetzt kein ActionScript-Code geschrieben. Allerdings können im Komponenten-Inspektor nur wenige Parameter eingestellt werden. Wenn man man andere Parameter verändern möchte, muss man dafür ein selbst ein Skript schreiben.
Die Komponente ScrollPane ist eine Unterklasse der Komponente BaseScrollPane, in der wichtige Eigenschaften zu finden sind. Beide sind im Paket fl.containers enthalten.
Ändern der Startposition des geladenen Bildes bzw. der swf-Datei (scrollpane_zentriert.fla)
Standardmäßig wird die geladene Datei in die linke ober Ecke des ScollPane-Containers gelegt.
Über die BaseScrollPane-Eigenschaften horizontalScrollPosition und verticalScrollPosition lässt sich die Datei positionieren, wobei über die BaseScrollPane-Eigenschaften maxHorizontalScrollPosition und maxVerticalScrollPositiondie maximale Bildlaufposition ermittelt werden kann.
Das nachfolgende Skript, das ergänzend zum Beispiel aus dem Video im ersten Frame der Zeitleiste platziert wird, zentriert die geladene Datei auf die Mitte des ScrollPane-Containers.
Wichtig ist dabei, dass die Instanz der Komponente ScrollPane benannt wird. In unserem Fall mit scrollPane.
// Positionieren des Bildes
scrollPane.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event):void {
scrollPane.horizontalScrollPosition=scrollPane.maxHorizontalScrollPosition/2;
scrollPane.verticalScrollPosition=scrollPane.maxVerticalScrollPosition/2;
}
Die Positionierung der Datei kann erst erfolgen, wenn die Datei vollständig geladen wurde. Daher wird die Zentrierung in einem COMPLETE-Eventhandler vorgenommen.
Zuerst werden die maximalen Positionen ermittelt, diese anschließend halbiert und mit diesen Werten wird die Datei positioniert.
In der nachfolgenden swf-Datei sind die Slider der Scrollbalken in der Mitte der Laufleisten.
Eine Instanz der Komponente in ActionScript erzeugen und verwenden (scrollpane_as.fla)
Damit man eine Instanz der Komponente über ActionScript erzeugen kann, muss die Komponente einmal aus dem Komponentenfenster in die Bibliothek gezogen werden. Oder: Vom Komponentenfenster auf die Bühne ziehen. Damit liegt die Komponente und ihre Assets auch in der Bibliothek und dann anschließend die Instanz auf der Bühne wieder löschen.
Nachfolgend das Skript, das im Ergebnis dem vorangegangenen Beispiel scrollpane_zentriert.fla entspricht.
import fl.containers.*;
import fl.controls.*;
// Neuen ScrollPane-Container erzeugen
var scrollPane:ScrollPane = new ScrollPane();
// Positionieren des ScrollPane-Containers
scrollPane.width=stage.stageWidth-40;
scrollPane.height=stage.stageHeight-40;
scrollPane.x=20;
scrollPane.y=20;
this.addChild(scrollPane);
// Externen Inhalt des ScrollPane-Containers laden
scrollPane.source="http://www.dma.ufg.ac.at/assets/23033/intern/linz_altstadt.jpg";
// Dragging erlauben
scrollPane.scrollDrag=true;
// Einblenden der Scrollbars
scrollPane.horizontalScrollPolicy=ScrollPolicy.ON;
scrollPane.verticalScrollPolicy=ScrollPolicy.ON;
// Zentrieren des Bildes auf die Containermitte
scrollPane.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event):void {
scrollPane.horizontalScrollPosition=scrollPane.maxHorizontalScrollPosition/2;
scrollPane.verticalScrollPosition=scrollPane.maxVerticalScrollPosition/2;
}
Man sieht, dass alle Eigenschaften, die sich im Komponenten-Inspektor einstellen lassen, auch direkt in Actionskript verändert werden können.
Der Import des fl.controls-Pakets ist notwendig wegen der ScrollPolicy-Klasse.
Selbst gestaltete Scrollbuttons zusammen mit der Komponente ScrollPane verwenden (scrollpane_buttons.fla)
Analog zu Kapitel 2 kann man selbst gestaltete Buttons zum Scrollen der importierten Datei verwenden.
Dabei werden die Buttons in eine eigene Ebene über der Ebene mit der ScrollPane-Instanz gelegt. Im nachfolgenden Beispiel zwei Dreieck-Buttons für das Scrollen nach links und rechts.
Die Buttoninstanzen haben die Namen links_btn und rechts_btn. Bei Rollover über die Buttons wird das Bild gescrollt. Die Scrollbalken der Komponenteninstanz scrollPane wurden im Komponenten-Inspektor ausgeblendet, und die Ziehfunktion wurde aktiviert.
Das Skript für die Funktionalität der Buttons entspricht im Großen und Ganzen dem Skript aus Kapitel 2.
Der Vorteil der Verwendung der ScrollPane-Komponente besteht darin, dass man das Randproblem nicht extra behandeln muss. Wenn das Bild die Containerkante erreicht hat, lässt es sich automatisch nicht mehr weiter bewegen.
Im nachfolgenden Skript sind die wichtigen Stellen hervorgehoben:
// Zentrieren des Bildes auf die Bühnenmitte
scrollPane.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event):void {
//trace(scrollPane.maxHorizontalScrollPosition);
//trace(scrollPane.maxVerticalScrollPosition);
scrollPane.horizontalScrollPosition=scrollPane.maxHorizontalScrollPosition/2;
scrollPane.verticalScrollPosition=scrollPane.maxVerticalScrollPosition/2;
}
// Der nachfolgende Abschnitt kommt für die Buttons dazu:
// Scrollbuttons: entspricht fast zur Gänze dem Skript aus Kapitel 2
var schrittweite:int=5;
links_btn.addEventListener(MouseEvent.ROLL_OVER, startScrollen);
rechts_btn.addEventListener(MouseEvent.ROLL_OVER, startScrollen);
function startScrollen(e:MouseEvent):void {
switch (e.target) {
case links_btn :
this.addEventListener(Event.ENTER_FRAME, nachRechts);
break;
case rechts_btn :
this.addEventListener(Event.ENTER_FRAME, nachLinks);
break;
}
}
links_btn.addEventListener(MouseEvent.ROLL_OUT, stopScrollen);
rechts_btn.addEventListener(MouseEvent.ROLL_OUT, stopScrollen);
function stopScrollen(e:MouseEvent):void {
switch (e.target) {
case links_btn :
this.removeEventListener(Event.ENTER_FRAME, nachRechts);
break;
case rechts_btn :
this.removeEventListener(Event.ENTER_FRAME, nachLinks);
break;
}
}
function nachLinks(e:Event) {
scrollPane.horizontalScrollPosition -= schrittweite;
}
function nachRechts(e:Event) {
scrollPane.horizontalScrollPosition += schrittweite;
}
Die eigentliche Positionsveränderung erfolgt durch die Eventhandler nachLinks und nachRechts, in denen die x-Position des Bildes über die scrollPane-Eigenschaft horizontalScrollPosition um die Schrittweit verkleinert bzw. vergrößert wird.
