Einfache Scroll-Techniken in Flash MX
Eine bewährte Methode um viel Inhalt auf begrenztem Platz zu präsentieren,
bietet Ihnen das so genannte Scrolling. Mit Hilfe von Pfeilen oder Scrollbalken
kann der Betrachter die Informationen in Form von Texten und Bildern auf dem
Bildschirm verschieben. Dieses Verhalten kennen Sie unter anderem von Ihrem
Browser und ist Ihnen sicherlich vertraut. Diese überaus nützliche Technik
wollen wir in Flash adaptieren.
Erstellen Sie ein neues Flashdokument. Zeichen Sie auf der bestehenden Ebene ein großes Rechteck. Wir benötigen nur den Rahmen, so dass Sie die Füllung direkt wieder löschen können. Auf einer neuen Ebene erstellen Sie daraufhin einen Textblock mit beliebigem Textinhalt. Der Textblock sollte bedeutend höher sein als das zuvor eingezeichnete Rechteck, damit es später auch zum Scrolling kommt. Richten Sie den Textblock so aus, dass dieser mit dem Rechteck abschließt, wie in folgender Grafik:
Ausrichtung des Textblockes:
Wandeln Sie den Textblock durch Betätigen der Funktionstaste F8 in ein Symbol um. Wählen Sie unter Verhalten die Option „Grafik“ aus. Markieren Sie danach die Grafik-Instanz auf der Bühne und wandeln Sie diese erneut in ein Symbol mit Verhalten „Movieclip“ um. Durch die Verschachtelung können Sie den Text zu einem späteren Zeitpunkt bequem ändern, ohne mit etwaigen Animationen und ActionScripts in Berührung zu kommen.
Wechseln Sie in den Bearbeitungsmodus des Movieclip-Symbols. Erzeugen Sie mit der Funktionstaste F6 im Bild 25 ein Schlüsselbild. Verschieben Sie den Text in diesem Bild so weit nach oben, dass er unten mit dem Rechteck abschließt. Erstellen Sie zwischen den beiden bestehenden Schlüsselbildern ein Bewegungs-Tween. Gehen Sie hierfür ins Bedienfeld „Eigenschaften“ und wählen Sie unter „Tween“ den Eintrag „Bewegung“ aus. Markieren Sie daraufhin in einer neuen Ebene das erste Bild und betätigen Sie die Taste F9. Im Aktionen-Fenster platzieren Sie die Anweisung „stop();“, damit die Animation nicht selbstständig startet.
Das Aktionen-Fenster:
Wechseln Sie mit Strg + E zurück auf die Hauptbühne. Gehen Sie bei markierter Movieclip-Instanz in das Bedienfeld „Eigenschaften“ und geben Sie der Instanz den Namen „text“. Erstellen Sie anschließend in der Rechteck-Ebene neben der rechten oberen Außenlinie des Rahmens einen nach oben zeigenden Pfeil. Wandeln Sie dieses durch Betätigen der Taste F8 in ein Symbol mit dem Verhalten „Schaltfläche“ um. Duplizieren Sie die Instanz des Schaltflächen-Symbols und rotieren Sie diese um 180 Grad. Richten Sie das Duplikat an der unteren rechten Außenlinie des Rahmens aus.
Ausrichten der Schaltflächen:
Markieren Sie die Schaltfläche mit dem nach oben zeigenden Pfeil und rufen Sie daraufhin das Aktionen-Fenster auf. Platzieren Sie folgende Anweisungen in das Fenster:
Sobald die Schaltfläche gedrückt wird, gehen wir in der Animation des Bewegungs-Tweens ein Bild zurück. Die untere Schaltfläche benötigt eine entsprechende Anweisung, um in der Animation fortzufahren:
Es ist Ihnen sicherlich schon aufgefallen, dass der Text auch außerhalb des Rechteckes sichtbar ist. Dies wollen wir mit Hilfe einer Maske unterbinden. Erstellen Sie oberhalb der Textebene eine neue Ebene und zeichnen Sie über den bestehenden Rechteckrahmen ein Rechteck in etwa derselben Größe. Klicken Sie anschließend mit der rechten Maustaste auf die Ebene und wählen Sie in dem darauf folgendem Kontextmenü den Eintrag „Maske“ an. Klicken Sie auf die Textebene und rufen Sie über das Kontextmenü der rechten Maustaste die Ebenen-Eigenschaften auf. Entscheiden Sie sich für den Ebenenstil „Maskiert“. Die Ebene sollte daraufhin in der Darstellung der Zeitleiste eingerückt sein.
Ansicht der Zeitleiste:
Wenn Sie mit Strg + Eingabe das Projekt testen, sollte der Text nur innerhalb des Rechtecks angezeigt werden. Durch Betätigen der Schaltflächen lässt sich der Text bequem scrollen. Die vorgestellte Scroll-Technik besitzt jedoch noch einen kleinen Schönheitsfehler. Sofern Sie eine Schaltfläche länger gedrückt halten, bewegt sich der Text dennoch nur um eine Einheit weiter.
Das Problem lässt sich nur indirekt lösen. Zeichnen Sie außerhalb des sichtbaren Bühnenbereiches einen Kreis und konvertieren Sie diesen in ein Movieclip-Symbol. Benennen Sie die so entstandene Instanz mit „steuersequenz“ und wechseln Sie daraufhin in den Bearbeitungsmodus des Symbols. Platzieren Sie erneut im ersten Bild der bestehenden Ebene eine Stop-Anweisung „stop();“. Erstellen Sie mit F7 im 5. Bild ein neues Schlüsselbild und fügen Sie hier folgenden ActionScript ein:
Was zuvor Aufgabe der Pfeil-Schaltflächen war, soll nun die Movieclip-Sequenz erledigen. Erzeugen Sie daraufhin ebenso im 10. Bild ein Schlüsselbild und platzieren Sie hier folgende Anweisung:
Mit der obigen Anweisung springen wir zurück in das 5. Bild der Zeitleiste. Somit führen wir auch stetig die ActionScript-Anweisungen des 5. Bildes aus. Im 15. Bild platzieren Sie nach dem Erstellen eines entsprechenden Schlüsselbildes folgenden Code:
Schließlich benötigen wir im 20. Bild folgende Anweisung:
Durch den Sprungbefehl garantieren wir ebenso eine stetige Ausführung der ActionScript-Anweisung aus dem 15. Bild. Die fertige Zeitleiste besitzt somit folgende Darstellung:
Die Zeitleiste des Symbols „steuersequenz“:
Es fehlt eine Anpassung der beiden Pfeil-Schaltflächen. Gehen Sie mit Strg + E zurück auf die Hauptbühne und markieren Sie die obere Schaltfläche. Ersetzen Sie das bestehende ActionScript durch die folgenden Zeilen:
Statt nur auf das Drücken der Schaltfläche einzugehen, müssen wir nun ebenso auf das Loslassen reagieren. Betätigt der Benutzer die Schaltfläche, so springen wir in das 5. Bild der Instanz „steuersequenz“. Dort treffen wir auf die Anweisung, die in der vorherigen Version noch die Schaltfläche selbst ausgeführt hat. Durch den Sprungbefehl im 10. Bild wird diese Anweisung nun jedoch stetig aufgerufen und somit ein stetiges Scrollen erzeugt. Lässt der Benutzer die Maustaste los, so springen wir in das erste Bild von „steuersequenz“ und somit in eine Stopp-Anweisung. Die untere Schaltfläche benötigt natürlich ebenso eine entsprechende Anpassung an die neue Technik:
Das ActionScript unterscheidet sich kaum von den vorherigen Anweisungen. Statt in das 5. Bild springen wir nun in das 15. Bild. Die Erweiterung der Scroll-Technik ist somit fertig und die Kinderkrankheit der ersten Version beseitigt.
Beispieldatei: Einfache Scroll-Techniken[Einfache_Scroll-Techniken_in_Flash_MX1.zip]
Beispieldatei: Einfache Scroll-Techniken2[Einfache_Scroll-Techniken_in_Flash_MX2.zip]
Erstellen Sie ein neues Flashdokument. Zeichen Sie auf der bestehenden Ebene ein großes Rechteck. Wir benötigen nur den Rahmen, so dass Sie die Füllung direkt wieder löschen können. Auf einer neuen Ebene erstellen Sie daraufhin einen Textblock mit beliebigem Textinhalt. Der Textblock sollte bedeutend höher sein als das zuvor eingezeichnete Rechteck, damit es später auch zum Scrolling kommt. Richten Sie den Textblock so aus, dass dieser mit dem Rechteck abschließt, wie in folgender Grafik:
Ausrichtung des Textblockes:
Wandeln Sie den Textblock durch Betätigen der Funktionstaste F8 in ein Symbol um. Wählen Sie unter Verhalten die Option „Grafik“ aus. Markieren Sie danach die Grafik-Instanz auf der Bühne und wandeln Sie diese erneut in ein Symbol mit Verhalten „Movieclip“ um. Durch die Verschachtelung können Sie den Text zu einem späteren Zeitpunkt bequem ändern, ohne mit etwaigen Animationen und ActionScripts in Berührung zu kommen.
Wechseln Sie in den Bearbeitungsmodus des Movieclip-Symbols. Erzeugen Sie mit der Funktionstaste F6 im Bild 25 ein Schlüsselbild. Verschieben Sie den Text in diesem Bild so weit nach oben, dass er unten mit dem Rechteck abschließt. Erstellen Sie zwischen den beiden bestehenden Schlüsselbildern ein Bewegungs-Tween. Gehen Sie hierfür ins Bedienfeld „Eigenschaften“ und wählen Sie unter „Tween“ den Eintrag „Bewegung“ aus. Markieren Sie daraufhin in einer neuen Ebene das erste Bild und betätigen Sie die Taste F9. Im Aktionen-Fenster platzieren Sie die Anweisung „stop();“, damit die Animation nicht selbstständig startet.
Das Aktionen-Fenster:
Wechseln Sie mit Strg + E zurück auf die Hauptbühne. Gehen Sie bei markierter Movieclip-Instanz in das Bedienfeld „Eigenschaften“ und geben Sie der Instanz den Namen „text“. Erstellen Sie anschließend in der Rechteck-Ebene neben der rechten oberen Außenlinie des Rahmens einen nach oben zeigenden Pfeil. Wandeln Sie dieses durch Betätigen der Taste F8 in ein Symbol mit dem Verhalten „Schaltfläche“ um. Duplizieren Sie die Instanz des Schaltflächen-Symbols und rotieren Sie diese um 180 Grad. Richten Sie das Duplikat an der unteren rechten Außenlinie des Rahmens aus.
Ausrichten der Schaltflächen:
Markieren Sie die Schaltfläche mit dem nach oben zeigenden Pfeil und rufen Sie daraufhin das Aktionen-Fenster auf. Platzieren Sie folgende Anweisungen in das Fenster:
on (press) {
text.prevFrame();
}
text.prevFrame();
}
Sobald die Schaltfläche gedrückt wird, gehen wir in der Animation des Bewegungs-Tweens ein Bild zurück. Die untere Schaltfläche benötigt eine entsprechende Anweisung, um in der Animation fortzufahren:
on (press) {
text.nextFrame();
}
text.nextFrame();
}
Es ist Ihnen sicherlich schon aufgefallen, dass der Text auch außerhalb des Rechteckes sichtbar ist. Dies wollen wir mit Hilfe einer Maske unterbinden. Erstellen Sie oberhalb der Textebene eine neue Ebene und zeichnen Sie über den bestehenden Rechteckrahmen ein Rechteck in etwa derselben Größe. Klicken Sie anschließend mit der rechten Maustaste auf die Ebene und wählen Sie in dem darauf folgendem Kontextmenü den Eintrag „Maske“ an. Klicken Sie auf die Textebene und rufen Sie über das Kontextmenü der rechten Maustaste die Ebenen-Eigenschaften auf. Entscheiden Sie sich für den Ebenenstil „Maskiert“. Die Ebene sollte daraufhin in der Darstellung der Zeitleiste eingerückt sein.
Ansicht der Zeitleiste:
Wenn Sie mit Strg + Eingabe das Projekt testen, sollte der Text nur innerhalb des Rechtecks angezeigt werden. Durch Betätigen der Schaltflächen lässt sich der Text bequem scrollen. Die vorgestellte Scroll-Technik besitzt jedoch noch einen kleinen Schönheitsfehler. Sofern Sie eine Schaltfläche länger gedrückt halten, bewegt sich der Text dennoch nur um eine Einheit weiter.
Das Problem lässt sich nur indirekt lösen. Zeichnen Sie außerhalb des sichtbaren Bühnenbereiches einen Kreis und konvertieren Sie diesen in ein Movieclip-Symbol. Benennen Sie die so entstandene Instanz mit „steuersequenz“ und wechseln Sie daraufhin in den Bearbeitungsmodus des Symbols. Platzieren Sie erneut im ersten Bild der bestehenden Ebene eine Stop-Anweisung „stop();“. Erstellen Sie mit F7 im 5. Bild ein neues Schlüsselbild und fügen Sie hier folgenden ActionScript ein:
001:
_root.text.prevFrame();
Was zuvor Aufgabe der Pfeil-Schaltflächen war, soll nun die Movieclip-Sequenz erledigen. Erzeugen Sie daraufhin ebenso im 10. Bild ein Schlüsselbild und platzieren Sie hier folgende Anweisung:
001:
gotoAndPlay(5);
Mit der obigen Anweisung springen wir zurück in das 5. Bild der Zeitleiste. Somit führen wir auch stetig die ActionScript-Anweisungen des 5. Bildes aus. Im 15. Bild platzieren Sie nach dem Erstellen eines entsprechenden Schlüsselbildes folgenden Code:
001:
_root.text.nextFrame();
Schließlich benötigen wir im 20. Bild folgende Anweisung:
001:
gotoAndPlay(15);
Durch den Sprungbefehl garantieren wir ebenso eine stetige Ausführung der ActionScript-Anweisung aus dem 15. Bild. Die fertige Zeitleiste besitzt somit folgende Darstellung:
Die Zeitleiste des Symbols „steuersequenz“:
Es fehlt eine Anpassung der beiden Pfeil-Schaltflächen. Gehen Sie mit Strg + E zurück auf die Hauptbühne und markieren Sie die obere Schaltfläche. Ersetzen Sie das bestehende ActionScript durch die folgenden Zeilen:
on (press) {
steuersequenz.gotoAndPlay(5);
}
on (release) {
steuersequenz.gotoAndStop(1);
}
steuersequenz.gotoAndPlay(5);
}
on (release) {
steuersequenz.gotoAndStop(1);
}
Statt nur auf das Drücken der Schaltfläche einzugehen, müssen wir nun ebenso auf das Loslassen reagieren. Betätigt der Benutzer die Schaltfläche, so springen wir in das 5. Bild der Instanz „steuersequenz“. Dort treffen wir auf die Anweisung, die in der vorherigen Version noch die Schaltfläche selbst ausgeführt hat. Durch den Sprungbefehl im 10. Bild wird diese Anweisung nun jedoch stetig aufgerufen und somit ein stetiges Scrollen erzeugt. Lässt der Benutzer die Maustaste los, so springen wir in das erste Bild von „steuersequenz“ und somit in eine Stopp-Anweisung. Die untere Schaltfläche benötigt natürlich ebenso eine entsprechende Anpassung an die neue Technik:
on (press) {
steuersequenz.gotoAndPlay(15);
}
on (release) {
steuersequenz.gotoAndStop(1);
}
steuersequenz.gotoAndPlay(15);
}
on (release) {
steuersequenz.gotoAndStop(1);
}
Das ActionScript unterscheidet sich kaum von den vorherigen Anweisungen. Statt in das 5. Bild springen wir nun in das 15. Bild. Die Erweiterung der Scroll-Technik ist somit fertig und die Kinderkrankheit der ersten Version beseitigt.
Beispieldatei: Einfache Scroll-Techniken[Einfache_Scroll-Techniken_in_Flash_MX1.zip]
Beispieldatei: Einfache Scroll-Techniken2[Einfache_Scroll-Techniken_in_Flash_MX2.zip]
