Scrollbalken mit Flash 3
Einleitung
Im folgenden Tutorial wird ein voll funktionstüchtiger Scrollbalken, so wie wir ihn von Windows- oder Mac- Anwendungen kennen, erstellt.
Tragender Befehl für diesen Effekt ist "Tell Target".
Vorausgesetzt wird Basiswissen in Flash 3.
Und so sieht der fertige Scrollbalken aus
Erstellen der Grafiken, Schalter und Movieclips
Als erstes erstellen wir die Grafiken, Schalter und Movieclips.
Wir benötigen die Pfeile nach oben und nach unten sowie das Feld (hier ein strich), in dem der scrollregler später laufen soll (Abb.1). Die beiden Pfeile werden als Schaltflächen definiert.
In einer neuen, höherliegenden Ebene wird der Scrollregler erstellt (Abb.2) und als Film definiert. Dieser Film soll aus 20 Bildern bestehen, und mittels 'Bewegungs Tween' den lauf des Scrollreglers beschreiben, das heißt auf Bild 1 befindet sich der Regler ganz oben im Scrollfeld (hier Strich) und auf Bild 20 ganz unten im Scrollfeld (Abb.3 - Darstellung der Bewegung durch den 'Zwiebelschicht' Effekt). Außerdem bekommt Bild 1 und Bild 20 des Filmobjektes den Befehl 'Stop'. Dieser Film erhält den Instanzname 'regler' (->Modifizieren -> Instanz -> Instanzname).
Mit dem zu scrollenden Text (Abb.4) wird ähnlich verfahren wie mit dem Scrollregler. Auch er wird in eine neue, höherliegende Ebene gelegt und als Filmobjekt definiert. Auf Bild 1 befindet sich der Text in Ausgangsstellung (Abb.4) und auf Bild 20 an der Stelle, an der er am Schluß des Scrollvorgangs stehen soll (Abb.5). Genau wie beim Scrollregler bekommt Bild 1 und Bild 20 den Befehl Stop zugewiesen. Dieser Film erhält den Instanzname 'text'.
Abb.1 |
Abb.2 |
Abb.3 |
Abb.4 |
Abb.5 |
Maskieren des Textfilms
Uber der Ebene mit dem Textobjektes wird eine neue Ebene erstellt. Auf dieser Ebene wird ein Quadrat erstellt, das die Fläche des Bereiches definiert, in dem der Text sichtbar sein soll (Abb.6). Mit der rechten Maustaste wird über das Ebenenmenü die Auswahl 'Maske getroffen (Abb.7).
Erstellen der dragover Schaltfächen
Und wieder brauchen wir eine neue Ebene. Auf dieser zeichnen wir ein Quadrat (Abb.9) das als Schaltfläche definiert wird. Im Schaltflächen Bearbeitungsmodus fügen wir dem 'Aktiv' Bild ein Schlüsselbild zu. Das Quadrat auf dem 'Normal' Bild wird gelöscht.
WICHTIG: In den Instanzeigenschaften der Schaltfläche muß unter 'Optionen der Maus-Ereignisse' auf 'Als Menüelement behandeln' umgestellt werden (Abb.10).
Ebenso unter Distanzeigenschaften wird der Schaltfläche folgende Befehle zugefügt (Abb.11):
On (Press, Drag Over)
Begin Tell Target ("/regler")
Go to and Stop (1)
End Tell Target
Begin Tell Target ("/text")
Go to and Stop (1)
End Tell Target
End On
Jetzt wird diese Schaltfläche 20mal kopiert und direkt untereinander gelegt, so daß immer die unteren Ecken einer Schaltfläche die oberen beiden Ecken der darunterliegenden berührt (Abb.12).
Danach werden alle 20 Schaltflächen markiert (Abb.13) und so skaliert, daß sie den kompletten Skrollbereich ausfüllen (Abb.14).
Abb.9 |
Abb.10
Abb.11 |
Abb.12 |
Abb.13 |
Abb.14 |
Setzen von Aktionen zu den dragover Schaltflächen sowie zum Pfeil nach unten
Jetzt müssen die Befehle aller dragover Schaltflächen modifiziert werden.
Die Oberste dragover Schaltfläche ist richtig belegt. Die Zweite von oben bekommt statt Go to and Stop (1), Go to and Stop (2) zugewiesen, also muß der Befehlsbereich folgenden Inhalt haben:
On (Press, Drag Over)
Begin Tell Target ("/regler")
Go to and Stop (2)
End Tell Target
Begin Tell Target ("/text")
Go to and Stop (2)
End Tell Target
End On
Die Dritte muß in
On (Press, Drag Over)
Begin Tell Target ("/regler")
Go to and Stop (3)
End Tell Target
Begin Tell Target ("/text")
Go to and Stop (3)
End Tell Target
End On
umgewandelt werden, ...........
......... Und die Zwanzigste muß in
On (Press, Drag Over)
Begin Tell Target ("/regler")
Go to and Stop (20)
End Tell Target
Begin Tell Target ("/text")
Go to and Stop (20)
End Tell Target
End On
umgewandelt werden.
Wenn die Befehle aller dragover Schaltflächen modifiziert wurden, bekommt der Pfeil nach unten folgenden Befehl zugewiesen:
On (Press)
Begin Tell Target ("/text")
Play
End Tell Target
Begin Tell Target ("/regler")
Play
End Tell Target
End On
On (Release)
Begin Tell Target ("/text")
Stop
End Tell Target
Begin Tell Target ("/regler")
Stop
End Tell Target
End On
Erstellen des Reverse Films und setzen von Befehlen zum Pfeil nach oben
Da es den Befehl 'play reverse' nicht gibt, muß der Pfeil nach oben mit einem kleinen Trick zum funktionieren gebracht werden.
Wir erstellen ein neues Symbol (Einfügen -> Neues Symbol) eine neue Filmsequenz. Diese hat auf Bild 1 den Befehl Stop, auf Bild 2:
Begin Tell Target ("/regler")
Go to Previous Frame
End Tell Target
Begin Tell Target ("/text")
Go to Previous Frame
End Tell Target
und auf Bild 3 den Befehl Go to and Play (2).
Das fertige (unsichtbare) Filmobjekt ziehen wir nun aus der Bibliothek auf unsere Szene und geben ihm den Instanzname reverse
Jetzt bekommt der Pfeil nach oben den Befehl:
On (Press)
Begin Tell Target ("/reverse")
Go to and Play (2)
End Tell Target
End On
On (Release)
Begin Tell Target ("/reverse")
Go to and Stop (1)
End Tell Target
End On
und fertig ist der Scrollbalken. :-)
Zusatz
Um ein erneutes Zurückspringen auf Frame1 des Scrollbalkens und des zu scrollenden Inhaltes bei zu intensivem Betätigen des Pfeils nach unten zu verhindern, muß hinter dem letzten Frame des Films "text" und des Films "regler" noch ein zusätzliches Keyframe mit dem Befehl
Go to Previous Frame
eingefügt werden.
Bei Problemen, Fragen oder Verbesserungsvorschlägen schick mir doch einfach ein Mail an dominik@chameleon-agentur.de.
Ansonsten noch ein fröhliches und erfolgreiches flashen, und viel Spaß beim scrollen ;-) wünscht
Dominik
