In diesem Artikel wollen wir einen einfachen horizontalen Newsticker erstellen, der Texte beliebiger Länge ohne Unterbrechung als Laufschrift anzeigt.
Zunächst legen wir einige MovieClips an, die unseren Lauftext darstellen. Wir beginnen mit einem MC, der lediglich ein leeres dynamisches Textfeld enthält. Die benötigten Zeichen sollten in diesem Textfeld eingebunden werden; z.B. alle Buchstaben, Zahlen, Satzzeichen sowie die deutschen Sonderzeichen ä, ö, ü, Ä, Ö, Ü und ß.
Das Textfeld kann ruhig recht klein sein, da es später automatisch an die Textgröße angepasst wird.
Wir geben dem Textfeld den Instanznamen "ttext" (für TickerText) und dem MovieClip mit dem Textfeld den Bezeichner "text". Diesen Clip geben wir zum  Export für ActionScript frei, da er später mit attachMovie() instanziert wird.
Wenn wir uns entschieden haben wie groß unser Ticker-Fenster werden soll, legen wir einen MovieClip für den Hintergrund des Tickers an. Das kann im Normalfall einfach eine rechteckige Form mit einer beliebigen Füllung sein. Diesem Clip geben wir den Bezeichner "bg" (für BackGround).
Nun benötigen wir noch einen weiteren leeren MovieClip als Container.
Als letztes wird der "Haupt"-MovieClip erstellt, der unsere Elemente zusammenbringt. Dieser Clip benötigt 5 Ebenen, die von unten nach oben folgendes enthalten:
- Zuunterst eine Instanz unseres Hintergrundes, der wir auch den Instanznamen "bg" geben.
- Darüber eine Instanz unseres leeren MovieClips. Diesem MC geben wir den Instanznamen "container".
- Auf der nächsten Ebene erstellen wir eine rechteckige Form in der Größe unseres Hintergrundes und legen diese Ebene als Maskenebene für den Container fest.
- Über der Maske habe ich noch einen Rahmen ohne Füllung gezeichnet, um die Kontur des Tickers klar abzugrenzen.
- Die oberste Ebene nennen wir "code" – dies ist der Platz für unser ActionScript.
Unser Text soll nun von rechts nach links dieses Anzeigefenster durchlaufen. Da der Text vielleicht kürzer ist als die Fensterbreite, brauchen wir mehrere identische Textfelder, die nebeneinander angezeigt werden. Aus diesem Grund habe ich das Textfeld in einen eigenen MovieClip gesetzt: Nun können wir so viele Instanzen dieses Clips erschaffen, wie wir benötigen (auch bei einem sehr langen Text brauchen wir mindestens zwei Textfelder, denn wenn der erste Text links verschwindet, soll der nächste ja schon rechts hervorkommen).
Beginnen wir also mit einem Array für die Text-MovieClips und einigen Hilfsvariablen:
var txt = new Array();
var gap = 10;
var spd = 2;
var textwidth = 0;
In der Variable "gap" legen wir fest, wie groß der Abstand zwischen den einzelnen Exemplaren des Textes sein soll (hier habe ich 10 Pixel gewählt). Die Variable "spd" legt die Geschwindigkeit des Textes fest und in der Variable "textwidth" werden wir später die Breite des Textfelder speichern.
Nun schreiben wir eine Funktion, der wir die gewünschte Zeichenkette übergeben können. Diese Funktion erzeugt gleichzeitig alle benötigten Textfelder und setzt die Bewegung in Gang:
function setText(t) {
txt[0] = container.attachMovie("text", "txt0", 0);
txt[0].ttext.autoSize = true;
txt[0].ttext.text = t;
txt[0]._x = bg._width + gap;
txt[0]._y = bg._height / 2 - txt[0]. ttext.textHeight / 2;
textwidth = txt[0]. ttext.textWidth;
var ratio = bg._width / (textwidth + gap) + 1;
for (var i=1; i
txt[i] = container.attachMovie("text", "txt" + i, i);
txt[i].ttext.autoSize = true;
txt[i].ttext.text = t;
txt[i]._x = txt[i - 1]._x + textwidth + gap;
txt[i]._y = txt[i - 1]._y;
}
go();
}
Zunächst erstellen wir nur ein Textfeld, das wir im ersten Feld unseres Arrays speichern und weisem ihm unseren Text zu. Damit können wir herausfinden, wie breit der Text im Vergleich zur Breite des Fensters ist und wie viele Textfelder wir insgesamt brauchen. Wir müssen die "autoSize"-Eigenschaft dieses Textfeldes auf true setzen, damit sich das Textfeld automatisch an den Inhalt anpasst. Nun setzen wir dieses Textfeld horizontal rechts aus dem Fensterbereich und vertikal in etwa in die Mitte des Fensters (indem wir von der halben Höhe des Hintergrundes noch einmal die halbe Höhe des Textfeldes abziehen).
Als nächstes setzen wir die Variable "textwidth" auf die Breite des ersten Textfeldes. In einer weiteren Variable "ratio" speichern wir die Anzahl Textfelder, die wir benötigen; dazu teilen wir die Breite des Hintergrundes durch die Breite des Textfelder und zählen sicherheitshalber noch 1 dazu. Jetzt können wir in einer Schleife alle weiteren Instanzen des MovieClips "text" erzeugen, mit denen wir im Prinzip genau das gleiche machen, wie mit der ersten Instanz: autoSize auf true setzen, Text zuweisen und horizontale sowie vertikale Position festlegen. Damit jedes Textfeld schön brav neben dem nächsten steht, nehmen wir die Position des vorherigen und zählen die Textbreite und den Abstand in Pixeln dazu.
Wenn alle Textfeld-MCs erstellt und angeordnet sind, kann es mit dem Scrollen losgehen. Noch befinden sich ja alle Textfelder rechts außerhalb unseres Fensters und sind somit unsichtbar (die Text-Clips wurden ja in dem Container instanziert, der unter unserer Maske liegt).
Dazu rufen wir nach der Schleife eine Funktion namens "go()" auf, die wir im Folgenden schreiben:
function go() {
this.onEnterFrame = function() {
for (var i=0; i
txt[i]._x -= spd;
if (txt[i]._x < -(textwidth + gap)) {
queue(i);
}
}
}
}
Diese Funktion macht nichts anderes, als dass sie in jedem Frameaufruf (onEnterFrame) alle Textfelder nacheinander durchgeht und um die Anzahl Pixel nach links verschiebt, die wir zu Beginn in der Variable "spd" festgelegt haben.
Nun sollen ja alle Textfelder, die links aus dem sichtbaren Bereich hinauswandern, rechts wieder an die Schlange angefügt werden – sonst hätten wir ja keine Endlosschleife. Für diese Neupositionierung sorgt die kleine Funktion "queue()":
function queue(n) {
if (n == 0) {
txt[n]._x = txt[txt.length - 1]._x + textwidth + gap;
} else {
txt[n]._x = txt[n - 1]._x + textwidth + gap;
}
}
Was ist zu tun? Ganz einfach: Handelt es sich um das erste Textfeld (also das, was zu Beginn ganz links stand), wird es rechts neben das Textfeld mit der höchsten Indexnummer (jenes, was zu Beginn ganz rechts stand) gesetzt; in diesem Fall sind nämlich alle Textfelder wie am Anfang von links nach rechts in aufsteigender Reihenfolge angeordnet. Ist das erste (oder noch mehrere andere) Textfeld schon nach hinten gewandert, können wir davon ausgehen, dass ganz rechts das Textfeld mit der nächstkleineren Indexnummer steht und wir setzen unser Textfeld einfach dahinter. Folgende Liste sollte das noch einmal veranschaulichen:
Text0 | Text1 | Text2 | Text3 || Anfangsposition
Text1 | Text2 | Text3 | Text0 || Erstes Textfeld wandert hinter das letzte
Text2 | Text3 | Text0 | Text1 || Zweites Textfeld wandert hinter das erste
Nun ist unser "Ticker"-MC soweit fertig. Wir können ihn auf der Hauptzeitleiste auf die Bühne ziehen und ihm einen Instanznamen verpassen, z.B. "ticker".
Den Text für unseren Ticker können wir entweder direkt der Funktion setText() übergeben (bei kurzen Nachrichten durchaus praktisch), oder aus einer externen Quelle (Text- oder XML-Datei oder ein serverseitiges Script) beziehen. Wie man dabei vorgeht, ist in einem anderen Artikel beschrieben; hier ging es zunächst um den puren Ticker. Um die Laufschrift zu testen, geben wir auf der Hauptzeitleiste einfach folgende Zeilen ein:
this.onEnterFrame = function() {
ticker.setText("Dies ist ein Test");
delete this.onEnterFrame;
}
Warum onEnterFrame? ActionScript wird ausgeführt, bevor das jeweilige Bild angezeigt wird. Wir müssen also mindestens einen Frameaufruf warten, bis Flash die Funktion "setText()" unseres Tickers kennt.
Autor: Datic
Website: Ekto.net
|
MEMBERS LOGIN
SEITE DURCHSUCHEN
