Wie Textfelder gescrollt werden, verraten und mittlerweile viele Flash Seiten. Aber wie funktioniert das Scrolling von ganzen Movieclips. Eine ausführliche Anleitung sollte den Erfolg bringen... Okay. Ein wenig Basiswissen vorausgesetzt (mit Begriffen wie "Movieclip" oder "Objektaktion" sollte man vertraut sein... RTFM!!!), und dann wird das hier auch ein Spaziergang :)
Damit Ihr auch ein Ziel vor Augen habt, gibt's hier nochmal den fertigen Film zum anschauen. Natürlich ist für diese Aktion das Flash 5 Plugin eine Voraussetzung. 1. Overview:
Nun gibt's vorneweg noch einmal die Komplettansicht des Projektes, in der man schön erkennen kann, dass das alles gar nicht so aufwendig ist. Drei Ebenen mit je einem einzigen Bild und ein paar Zeilen ActionScript, und das war's auch schon.  Folgende Fenster solltet Ihr von Beginn an geöffnet haben, das erleichtert die Sache ungemein:
- Aktionen
- Bibliothek
- Instanz
- Info
- Farbmischer 2. Start
Änderung der Film-Einstellungen (Modifizieren > Film).
Hier gibt's ersteinmal folgende Werte:
- Bildrate: 25 fps
- Höhe: 200 pixel
- Breite: 200 pixel
Als "Text" habe ich eine Mischung aus einem statischen Textfeld, einer GIF-Animation, einer Vektor-Animation und einer Vektor-Grafik gewählt. Ist das alles nach Wunsch auf der Bühne zusammengesetzt, wird alles markiert und per F8 in eine Filmsequenz gewandelt. Wichtig ist jetzt, dass der "rechnerische Nullpunkt" (ein kleines Kreuz) des entstandenen Clips grundsätzlich in der Mitte der Filmsequenz liegt. Das muss noch geändert werden.
Also Doppelklick auf das "Textfeld" (um's zu bearbeiten), dann alles auf der Bühne markieren, und im "Info"-Bedienfeld die Werte für X und Y manuell auf "0" setzen. Dadurch verrutscht natürlich alles auf der Bühne, aber das kleine Kreuz sitzt jetzt schön links oben in der Ecke. [Abbildung 2 - die Inhalte des "Textfeldes" sitzen auf X:0 und Y:0] Eine Ebene höher könnt Ihr jetzt den "Text"-Movieclip wieder positionieren.
BEDENKE: die Position des Clips bestimmt nachher, wie weit er wieder "zurückgescrollt" werden kann! Dieser Y-Wert wird später als "oben" definiert werden!
Deshalb habe ich den Movieclip über das "Info"-Fenster manuell in Y-Position auf 5 pixel gesetzt.
Ausserdem hat der Movieclip im Bedienfeld "Instanz" noch den Bezeichner "text". Der Clip liegt jetzt der Übersichthalber in einer eigenen Ebene, die sich "text" nennt und als oberste Ebene in der FLA liegt.
Das Script für diesen Clip behandeln wir später, erstmal basteln wir uns noch unsere Tasten. Hierfür habe ich einfach zwei unterschiedliche Grafiken erstellt (Pfeil hoch und Pfeil 'runter), die in einer Ebene unter den eigentlichen Buttons liegen (but_grafiken). Sinnigerweise liegen die Grafiken seitlich vom Text
In der Ebene darüber liegen die eigentlichen Buttons. In grossen Projekten erspart man sich dadurch tausende unterschiedlicher Button-Symbole, was einfach Speicherkapazität freigibt. Dafür müssen die Buttons aber "blind" sein. Um das zu erreichen zeichnet man sich einfach ein Rechteck (oder Kreis...), am Besten ohne Outline. Das dann auf der Bühne markieren und per F8 in eine Schaltfläche wandeln. Ist unser Rechteck dann im ersten Schlüsselbild der Schaltfläche, wieder markieren und im Farbmischer den Wert "alpha" auf 0% stellen. Schon ist unser Button durchsichtig. Hier nochmal in deutlich: Ist der Button fertig erstellt, wieder in eine Ebene höher wechseln und ihn genau über der oberen Button-Grafik positionieren. Dieser Button erhält folgende Objektaktion (Button auf der Bühne markieren, das "Aktionen"-Fenster heisst dann "Objektaktionen"): actionscript on(press){
up=true
}
on(release,ReleaseOutside,dragOut){
up=false
}mit der Tastenkombination Strg + D könnt Ihr das Buttonsymbol einfach duplizieren und es dann genau über der unteren Buttongrafik positionieren.
In den Objektaktionen werden jetzt einfach die beiden "up"s gegen zwei "dwn"s ersetzt, so dass dann folgendes Script auf dem unteren Button ist: actionscript on(press){
dwn=true
}
on(release,ReleaseOutside,dragOut){
dwn=false
}eine kurze Erklärung:
die beiden Buttons setzen immer nur jeweils eine variable auf "true" bzw. "false", je nachdem ob die Taste gedrückt ist, oder nicht. So kann man auf einfachem Wege Tastendrücke für weitere Scriptaktionen abfangen. 3. Das Action Script
Und nun kommt der Hauptteil des Scripts. Das liegt als "Objektaktion" auf dem Movieclip "text". Diesen Clip also auf der Bühne markieren, und im "Aktionen"-Fenster folgendes Script eingeben (EXTRA nicht als Text ;): [Abbildung 4 - Das komplette Script des MC's "text"] Erster Anweisungblock:
Dieses ist ein "onClipEvent(load)" - also eine Aktion, die ausgeführt wird, sobald der Movieclip das erste mal im Film auftaucht, also geladen wurde. Hier passiert nicht wirklich viel, ausser, dass wir alle unsere Umgebungsvariablen setzen lassen.
oben=this._y
- diese Zeile setzt die obere Scrollgrenze. Bestimmt wird sie durch die Position des "text"-MC's beim starten des Filmes - dort, wo Ihr sie auf der Bühne abgelegt habt. Verschiebt Ihr also Euren "text"-MC auf der Bühne, so kann er auch nur bis zu diesem Punkt zurückgescrollt werden.
mask=190
- diese Zeile gibt den "sichtbaren Bereich" an. Soll Euer Fenster für den Text also grösser sein, könnt Ihr hier einen neuen Wert eingeben. Im Normalfall wird der "text"-MC wohl eh unter einer Maskenebene laufen, dann gebt hier einfach die Höhe in Pixeln der maske an. Ich habe 190 gewählt, da mein Text bei 5 Pixeln steht und er bis 5 Pixel über den unteren Rand gehen soll. Mein kompletter Film (bzw. die Maske...) ist 200 Pixel gross, minus 5+5 Pixel sind 190.
unten=-this._height+mask
- diese Zeile gibt die untere Scrollgrenze vor. Die errechnet sich aus der Höhe des gesamten "text"-MC's zuzüglich der sichtbaren Höhe. Da der Text nach oben scrollt, die Y-Position also negativ wird, muss die Höhe des "text"-MC's erst negiert (oder negativiert???:) werden.
speed=5
- Das ist die endgültige Scrollgeschwindigkeit. Genauer gesagt springt der "text"-MC bei jedem Bild diesen Wert an Pixeln nach oben oder unten.
Die anderen beiden Variablen sind nur die Initialisierung der beiden Werte, die durch die Buttons gesetzt werden können. Ist nicht unbedingt notwendig, aber halt einfach sicherer. Läuft der Scroller in zu umfangreichen Projekten, beugt man dadurch dicken (und unauffindbaren) Fehlern vor. Zweiter Anweisungsblock:
Das ist ein "onClipEvent(enterFrame)"was bedeutet, dass diese Anweisungen bei jedem Bild passieren, in dem dieser Movieclip zu sehen ist.
Darin befinden sich vier verschachtelte "if"-Abfragen, wobei immer zwei davon für eine Scrollingrichtung zuständig sind. So fragt die erste Funktion ab, ob denn überhaupt nach oben gescrollt werden soll - "if(_parent.up){}".Ausgeschrieben hiesse das "if(_parent.up==true){}",wobei man sich bei der Abfrage bool'scher Werte das "true" sparen kann.
Innerhalb dieser Abfrage befindet sich eine weitere, die checkt, ob sich der Movieclip immernoch innerhalb der festgelegten Grenzen befindet - "if(_this.y<oben){}"
Also wird die Anweisung "this._y+=speed" nur ausgeführt, wenn die entsprechende Taste gedrückt UND der Movieclip nicht höher als die Obergrenze ist.
"this._y+=speed" hiesse ausgeschrieben übrigens "this._y=this._y+speed" - also "nimm die aktuelle y-Position und addiere 'speed' hinzu"
Eine Erklärung der zweiten Schleife ist wohl an dieser Stelle nicht nötig. Also wird die Anweisung "this._y+=speed" nur ausgeführt, wenn die entsprechende Taste gedrückt UND der Movieclip nicht höher als die Obergrenze ist.
"this._y+=speed" hiesse ausgeschrieben übrigens "this._y=this._y+speed" - also "nimm die aktuelle y-Position und addiere 'speed' hinzu"
Eine Erklärung der zweiten Schleife ist wohl an dieser Stelle nicht nötig.
4. grobe Zusammenfassung:
Wir haben zwei Buttons, die jeweils unterschiedliche Variablen auf "true" oder "false" setzen und wir haben einen Movieclip, der ständig genau diese Variablen abfragt. ist eine davon "true" und der Movieclip innerhalb vorgegebener Grenzen, wird er um eine bestimmte Anzahl Pixel nach oben oder unten bewegt.
Für das nachträgliche Verändern....
Alle Variablen, Instanznamen etc. sind so vergeben, dass Ihr einfach alles in der Hauptzeitleiste auf der Bühne markieren könnt und per F8 in einen weiteren Movieclip packen könnt. Also immer nur relative Pfadangaben (_parent), niemals absolute (_root). Damit wird der Scroller flexibler einsetzbar.
Die Breite könnt Ihr ohne Bedenken verändern, bei der Höhe müsst Ihr halt auf die Vorgaben achten. Macht Ihr die sichtbare Fläche grösser, muss natürlich auch die Variable "mask" heraufgesetzt werden. Die Höhe des "text"-MC wird in diesem Script dynamisch ausgelesen, damit habt Ihr keinen Stress.
5. Anmerkungen:
Okay, nun wünsch' ich Euch viel Spass beim 'rumtesten, das Tutorial geht in einiger (unabsehbarer :) Zeit weiter mit folgenden Themen:
- Drag-Button für den Scrollbalken
- Quick-Jump
- Scrollen von externen MC's
Hoffe, Ihr habt Spass, lasst's ROCKN!!! viele Grüsse, boom :)
Autor: Markus Schmidt von boomshop.net
|
