Komplettes Scroll-System für Flash MX
Das Scrollsystem aus dem Artikel „Einfache Scroll-Techniken in Flash MX“ wollen wir im Folgenden in der Funktionalität um einen Scrollpanel erweitern. Zudem wollen wir den zu scrollenden Text in einer Textdatei auslagern. Eine Änderung des Textes ist somit noch bequemer als in dem bisher vorgestellten Verfahren.
Öffnen Sie die zweite Beispieldatei des besagten Artikels. Löschen Sie die nicht mehr benötigte Maskenebene und den Textblock. Aus Gründen der Übersicht sollten Sie die entsprechenden Symbole ebenso aus der Bibliothek entfernen. Markieren Sie anschließend alle auf der Bühne befindlichen Objekte und konvertieren Sie diese durch Betätigen der Funktionstaste F8 in ein Symbol mit dem Verhalten „Movieclip“.
Die dadurch entstandene Instanz soll den Namen „scrollsystem“ erhalten. Weisen Sie der Instanz folgende ActionScript-Anweisungen zu:
Mit Hilfe des Scriptes lesen wir den Inhalt einer Textdatei „text.txt“. Diese muss die Variable „scrolltext“ besitzen. Dem Inhalt der Variable wollen wir ein noch zu erstellendes dynamisches Textfeld „scrolltext“ zuweisen. Erstellen Sie im selben Verzeichnis des Flashdokuments eine Textdatei. Die Datei muss mit der Zeichenkette „scrolltext=“ beginnen. Der nachfolgende Inhalt kann beliebig editiert werden. Es darf jedoch kein kaufmännisches Und („&“) im Text vorkommen. Mehr Informationen zum Einlesen von Texten aus Textdateien erhalten Sie im Artikel „Externe Texte einlesen“. Klicken Sie doppelt auf die Instanz „scrollsystem“, um in den Bearbeitungsmodus des Symbols zu wechseln. Erstellen Sie innerhalb des Rechteckrahmens ein dynamisches Textfeld. Gehen Sie in das Bedienfeld „Eigenschaften“ und geben Sie hier unter „var“ den Variablennamen „scrolltext“ ein. Das dynamische Laden des Textes aus der Textdatei sollte somit funktionieren.
Wenden wir uns also unserem Scrollpanel zu. Erstellen Sie zwischen den bestehenden Pfeil-Schaltflächen ein zirka 20 Pixel hohes Rechteck und wandeln Sie dieses in eine Schaltfläche um. Weisen Sie daraufhin der Schaltfläche folgende Aktionen zu:
Mit „startDrag” und „stopDrag” ermöglichen wir das Verschieben des späteren Panels. Wandeln Sie die Schaltfläche in ein Movieclip-Symbol um. Achten Sie darauf, dass beim Erstellen des Symbols der Registrierungspunkt nach oben gesetzt ist. Geben Sie anschließend der erzeugten Instanz den Namen „panel“. Auch diese Instanz soll einige Aktionen ausführen:
In jedem Bildereignis führen wir eine noch zu definierende Funktion „scrollen()“ aus. Mit Hilfe der Funktion soll der Text im Textfeld entsprechend gescrollt werden. Beim Laden der Instanz übergeben wir einmalig den Wert der Y-Koordinate für spätere Berechnungen an eine Variable panelStart.
Markieren Sie die Instanz „panel“. Konvertieren Sie diese erneut in ein Movieclip-Symbol. Achten Sie wiederum darauf, dass der Registrierungspunkt „oben“ ausgewählt ist. Geben Sie der neuen Instanz den Namen „scrollPanel“ und wechseln Sie daraufhin in den Bearbeitungsmodus des Symbols. Erstellen Sie eine zweite Ebene und zeichnen Sie in dieser zwischen den beiden Pfeil-Schaltflächen eine Führungsebene für den Scrollbalken ein.
Kehren Sie zum Bearbeitungsmodus des Symbols der Instanz „scrollsystem“ zurück. Erstellen Sie auch hier eine neue Ebene und fügen Sie in dieser folgende Anweisungen ein:
Die Höhe des Scrollbalkens im Scrollpanel wird dynamisch an die Länge des zu scrollenden Inhaltes angepasst. Zudem definieren wir die bereits erwähnte Funktion „scrollen“ zum Verschieben des Inhaltes im Textfeld. Es folgen zwei weitere Funktionsdefinitionen:
Die Funktionen „scrollDown“ und „scrollUp“ sorgen für eine dynamische Anpassung der Position des Scrollbalkens im Scrollpanel. Indirekt sorgen die Funktionen dadurch für das Scrolling des Textinhaltes. Das erweiterte Scroll-System ist somit fast fertig. Es fehlt eine kleine Anpassung der Instanz „steuersequenz“. Ersetzen Sie die vorhandene Anweisung im 5. Bild durch die Folgende:
Im 15. Bild müssen Sie entsprechend für einen Aufruf der Funktion „scrollDown()“ sorgen. Platzieren Sie hier entsprechend folgende Anweisung:
Testen Sie das fertige Scroll-System durch Betätigen der Tastenkombination Strg + Eingabe. Falls Ihnen etwas unklar erscheint oder es für Sie an einer Stelle zu schnell ging, so haben Sie durch die beigefügte Beispieldatei die Gelegenheit, das gesamte Scroll-System nochmals nachzuvollziehen.
Beispieldatei: Scroll-System mit Scrollpanel[Komplettes_Scroll-System_fuer_Flash_MX.zip]
Öffnen Sie die zweite Beispieldatei des besagten Artikels. Löschen Sie die nicht mehr benötigte Maskenebene und den Textblock. Aus Gründen der Übersicht sollten Sie die entsprechenden Symbole ebenso aus der Bibliothek entfernen. Markieren Sie anschließend alle auf der Bühne befindlichen Objekte und konvertieren Sie diese durch Betätigen der Funktionstaste F8 in ein Symbol mit dem Verhalten „Movieclip“.
Die dadurch entstandene Instanz soll den Namen „scrollsystem“ erhalten. Weisen Sie der Instanz folgende ActionScript-Anweisungen zu:
001:002:003:004:005:006:007:
onClipEvent (load) { lv = new LoadVars (); lv.onLoad = function () { _root.scrollsystem.scrolltext = lv.scrolltext; }; lv.load ("text.txt"); }
Mit Hilfe des Scriptes lesen wir den Inhalt einer Textdatei „text.txt“. Diese muss die Variable „scrolltext“ besitzen. Dem Inhalt der Variable wollen wir ein noch zu erstellendes dynamisches Textfeld „scrolltext“ zuweisen. Erstellen Sie im selben Verzeichnis des Flashdokuments eine Textdatei. Die Datei muss mit der Zeichenkette „scrolltext=“ beginnen. Der nachfolgende Inhalt kann beliebig editiert werden. Es darf jedoch kein kaufmännisches Und („&“) im Text vorkommen. Mehr Informationen zum Einlesen von Texten aus Textdateien erhalten Sie im Artikel „Externe Texte einlesen“. Klicken Sie doppelt auf die Instanz „scrollsystem“, um in den Bearbeitungsmodus des Symbols zu wechseln. Erstellen Sie innerhalb des Rechteckrahmens ein dynamisches Textfeld. Gehen Sie in das Bedienfeld „Eigenschaften“ und geben Sie hier unter „var“ den Variablennamen „scrolltext“ ein. Das dynamische Laden des Textes aus der Textdatei sollte somit funktionieren.
Wenden wir uns also unserem Scrollpanel zu. Erstellen Sie zwischen den bestehenden Pfeil-Schaltflächen ein zirka 20 Pixel hohes Rechteck und wandeln Sie dieses in eine Schaltfläche um. Weisen Sie daraufhin der Schaltfläche folgende Aktionen zu:
001:002:003:004:005:006:007:
on (press) { startDrag ("", false, 0, 0, 0, _parent._parent.scrollPanel._height - (_parent._parent.panelHeight)); } on (release) { stopDrag (); }
Mit „startDrag” und „stopDrag” ermöglichen wir das Verschieben des späteren Panels. Wandeln Sie die Schaltfläche in ein Movieclip-Symbol um. Achten Sie darauf, dass beim Erstellen des Symbols der Registrierungspunkt nach oben gesetzt ist. Geben Sie anschließend der erzeugten Instanz den Namen „panel“. Auch diese Instanz soll einige Aktionen ausführen:
001:002:003:004:005:006:007:
onClipEvent (enterFrame) { _parent._parent.scrollen(); } onClipEvent (load) { _parent._parent.panelStart = this._y; }
In jedem Bildereignis führen wir eine noch zu definierende Funktion „scrollen()“ aus. Mit Hilfe der Funktion soll der Text im Textfeld entsprechend gescrollt werden. Beim Laden der Instanz übergeben wir einmalig den Wert der Y-Koordinate für spätere Berechnungen an eine Variable panelStart.
Markieren Sie die Instanz „panel“. Konvertieren Sie diese erneut in ein Movieclip-Symbol. Achten Sie wiederum darauf, dass der Registrierungspunkt „oben“ ausgewählt ist. Geben Sie der neuen Instanz den Namen „scrollPanel“ und wechseln Sie daraufhin in den Bearbeitungsmodus des Symbols. Erstellen Sie eine zweite Ebene und zeichnen Sie in dieser zwischen den beiden Pfeil-Schaltflächen eine Führungsebene für den Scrollbalken ein.
Kehren Sie zum Bearbeitungsmodus des Symbols der Instanz „scrollsystem“ zurück. Erstellen Sie auch hier eine neue Ebene und fügen Sie in dieser folgende Anweisungen ein:
001:002:003:004:005:006:007:
panelHeight = scrollPanel.panel._height; scrollPanel.panel._height = scrollPanel._height / scrolltext.maxscroll; function scrollen () { scrolltext.scroll = Math.ceil(scrollPanel.panel._y / scrollPanel.panel._height) + 1; }
Die Höhe des Scrollbalkens im Scrollpanel wird dynamisch an die Länge des zu scrollenden Inhaltes angepasst. Zudem definieren wir die bereits erwähnte Funktion „scrollen“ zum Verschieben des Inhaltes im Textfeld. Es folgen zwei weitere Funktionsdefinitionen:
001:002:003:004:005:006:007:008:009:010:011:012:013:014:015:
function scrollDown () { if (scrollPanel.panel._y + panelHeight < scrollPanel._height - panelHeight) { scrollPanel.panel._y += panelHeight; } else { scrollPanel.panel._y = scrollPanel._height - panelHeight; } } function scrollUp () { if (scrollPanel.panel._y - panelHeight > panelStart) { scrollPanel.panel._y -= panelHeight; } else { scrollPanel.panel._y = panelStart; } }
Die Funktionen „scrollDown“ und „scrollUp“ sorgen für eine dynamische Anpassung der Position des Scrollbalkens im Scrollpanel. Indirekt sorgen die Funktionen dadurch für das Scrolling des Textinhaltes. Das erweiterte Scroll-System ist somit fast fertig. Es fehlt eine kleine Anpassung der Instanz „steuersequenz“. Ersetzen Sie die vorhandene Anweisung im 5. Bild durch die Folgende:
001:
_parent.scrollUp();
Im 15. Bild müssen Sie entsprechend für einen Aufruf der Funktion „scrollDown()“ sorgen. Platzieren Sie hier entsprechend folgende Anweisung:
001:
_parent.scrollDown();
Testen Sie das fertige Scroll-System durch Betätigen der Tastenkombination Strg + Eingabe. Falls Ihnen etwas unklar erscheint oder es für Sie an einer Stelle zu schnell ging, so haben Sie durch die beigefügte Beispieldatei die Gelegenheit, das gesamte Scroll-System nochmals nachzuvollziehen.
Beispieldatei: Scroll-System mit Scrollpanel[Komplettes_Scroll-System_fuer_Flash_MX.zip]
