Schreibmaschinen-Text
Eine statische Webseite kann mit einem simplen Trick bei Ihren Besuchern den Eindruck erwecken, dass es sich um eine interaktive Webpräsenz handelt. Wir wollen das Eintippen eines Textes simulieren. Dieser Trick ist Ihnen sicherlich aus zahlreichen Werbebannern bekannt und erfreut sich immer noch einer großen Beliebtheit, um die Aufmerksamkeit eines Besuchers zu ergattern oder gar den Eindruck einer persönlichen Anrede zu vermitteln. Im Folgenden wollen wir zwei Verfahren zur Realisierung des Effekts vorstellen. In der einfacheren aber zugleich unrealistischer wirkenden Vorgehensweise bedienen wir uns einer Maske. Mit Hilfe der Maske können wir den sichtbaren Bereich von entsprechend zugeordneten Ebenen zu jedem Zeitpunkt in der Zeitleiste frei definieren.
Platzieren Sie zunächst in der vorhandenen Ebene der Zeitleiste einen statischen Text mittig auf der Bühne. Erstellen Sie daraufhin eine weitere Ebene und betätigen Sie die rechte Maustaste oberhalb der soeben erzeugten Ebene. Im darauf erscheinenden Kontextmenü wählen Sie den Eintrag „Maske“ aus. Beide Ebenen werden bei Ihnen daraufhin vermutlich gesperrt. Ihre Zeitleiste sollte also wie folgt aussehen:
Die bisherige Zeitleiste
Entsperren Sie beide Ebenen, indem Sie jeweils auf das Schloss-Symbol klicken. Erzeugen Sie im 20. Bild der Textebene durch Betätigen der Funktionstaste F6 ein Schlüsselbild. Wechseln Sie in das erste Bild der Maskenebene und zeichnen Sie hier ein Rechteck ein. Das Rechteck muss den vorhandenen Text komplett überdecken. Erzeugen Sie daraufhin auch in dieser Ebene im 20. Bild ein neues Schlüsselbild. Verschieben Sie im 1. Bild der Ebene das Rechteck so weit nach links das es den Text nicht mehr überdeckt. Verwenden Sie zum Verschieben am Besten die Pfeiltasten um nicht die Höhe des Rechtecks zu verändern. Nun wollen wir einen Bewegungstween zwischen dem 1. und 20. Bild der Ebene erstellen. Markieren Sie hierfür in der Zeitleiste beispielsweise das 1. Bild und rufen Sie das Bedienfeld „Eigenschaften“ auf.
Das Bedienfeld „Eigenschaften“
Unter „Tween“ wählen Sie nun den Eintrag „Bewegung“ aus. Die Animation ist fertig. Bei genauer Betrachtung werden Sie jedoch feststellen, dass alle Buchstaben mit einer einheitlichen Geschwindigkeit auf dem Bildschirm erscheinen. In der Realität würde dies durch die Beschaffenheit einer normalen Tastatur wohl anders aussehen. Außerdem können Sie bei noch genauerer Betrachtung erkennen, dass ein Buchstabe zu einem Zeitpunkt nie komplett erscheint. Dies würden wir jedoch natürlich von einem eingetippten Text erwarten. Das erste Manko kann mit einem erheblichen Mehraufwand durch die Erstellung mehrerer Bewegungstweens noch umgangen werden. Bei dem zweiten Manko versagt die vorgestellte Variante jedoch letztendlich. Dieses Problem lässt sich nur noch mit Hilfe von ActionScript beseitigen.
Erstellen Sie ein neues Flash-Dokument. Auf der bestehenden Ebene wollen wir dieses Mal einen dynamischen Text platzieren. Gehen Sie in das Bedienfeld „Eigenschaften“ und vergeben Sie unter „Var“ den Namen „typewritertext“. Dieser Schritt ist notwendig, um mit ActionScript auf das Textfeld zugreifen zu können. Lassen Sie das Textfeld zunächst leer. Beachten Sie, dass das Feld eine ausreichende Größe besitzt um später den gewünschten Text komplett aufnehmen zu können. Erstellen Sie im 10. Bild der Zeitleiste ein Schlüsselbild. Wir benötigen eine weitere Ebene für unsere ActionScript-Anweisungen. Rufen Sie im ersten Bild der neuen Ebene mit Hilfe der Funktionstaste F9 das Aktionen-Fenster auf. Wir wollen in diesem Bild lediglich zwei Variablen definieren:
Die erste Variable „textcontent“ nimmt den darzustellenden Text auf. Die zweite Variable „textlength“ dient uns lediglich als Zähler. Die genaue Funktion der Variable wird im nächsten ActionScript deutlich. Erstellen Sie hierfür im 10. Bild der Ebene ein Schlüsselbild und rufen Sie daraufhin erneut das Aktionen-Fenster auf. Platzieren Sie in dem Fenster folgenden ActionScript:
Der Code startet mit einer Bedingung. Die Anweisung „length“ angewandt auf die Variable „textcontent“ gibt die Länge der in „textcontent“ enthaltenen Zeichenkette zurück. In unserem Fall liefert uns die Anweisung somit den Wert 20, da die Zeichenkette „Schreibmaschinentext“ 20 Buchstaben besitzt. Solange die Variable „textlength“ einen Wert kleiner oder gleich 20 besitzt, ist die Bedingung in der ersten Zeile erfüllt und alle weiteren Anweisungen innerhalb der geschweiften Blockklammern werden ausgeführt. Wir erinnern uns, dass wir die Zählervariable „textlength“ zu Beginn mit dem Wert 1 belegt haben. Somit gelangen wir zunächst auf alle Fälle zu den weiteren Anweisungen. In der zweiten Zeile weisen wir der Variable „typewritertext“, dem Variablennamen des dynamischen Textfeldes, einen Wert zu. Durch die direkte Zuweisung erhalten wir eine Ausgabe in unserem Textfeld und somit eine sichtbare Ausgabe für den Benutzer. Die Anweisung „textcontent.substring(0, textlength)“ kürzt die in „textcontent“ gespeicherte Zeichenkette auf den Wert von „textlength“ Zeichen ab. Wir beginnen hier bei dem 0. und somit bei dem ersten Zeichen. Beim ersten Aufruf dieser Anweisung erhalten wir somit eine Ausgabe des Buchstaben „S“. Anschließend erhöhen wir den Wert der Variable „textlength“ um eine Einheit. Bei einem erneuten Aufruf der Anweisung aus der zweiten Zeile würden wir nun also die Buchstaben „Sc“ zurückgeben.
Die Anweisung wird jedoch nicht direkt wieder aufgerufen. Dies soll mit einer kleinen Verzögerung geschehen. Um den Schreibmaschinen-Effekt realistischer zu gestalten, überlassen wir mit der Anweisung „random(8)“ die Länge der Verzögerung dem Zufall. Mit Hilfe von „random(8)“ erzeugen wir eine Zufallszahl zwischen 0 und 7. Zu diesem Wert addieren wir 2 hinzu und übergeben das Ergebnis der letzten Anweisung „gotoAndPlay()“. Letzteres erzeugt einen Sprung auf das übergebene Bild in der Zeitleiste. Wir springen somit zufällig an eine Position zwischen dem 2. und 9. Bild. Das Überspringen des ersten Bildes ist entscheidend, da wir sonst den Wert der Zählervariable „textlength“ wieder auf 1 zurücksetzen würden.
Beispieldatei: Einfaches Verfahren [Schreibmaschinen-Text1.zip]
Beispieldatei: Realistischeres Verfahren [Schreibmaschinen-Text2.zip]
Platzieren Sie zunächst in der vorhandenen Ebene der Zeitleiste einen statischen Text mittig auf der Bühne. Erstellen Sie daraufhin eine weitere Ebene und betätigen Sie die rechte Maustaste oberhalb der soeben erzeugten Ebene. Im darauf erscheinenden Kontextmenü wählen Sie den Eintrag „Maske“ aus. Beide Ebenen werden bei Ihnen daraufhin vermutlich gesperrt. Ihre Zeitleiste sollte also wie folgt aussehen:
Die bisherige Zeitleiste
Entsperren Sie beide Ebenen, indem Sie jeweils auf das Schloss-Symbol klicken. Erzeugen Sie im 20. Bild der Textebene durch Betätigen der Funktionstaste F6 ein Schlüsselbild. Wechseln Sie in das erste Bild der Maskenebene und zeichnen Sie hier ein Rechteck ein. Das Rechteck muss den vorhandenen Text komplett überdecken. Erzeugen Sie daraufhin auch in dieser Ebene im 20. Bild ein neues Schlüsselbild. Verschieben Sie im 1. Bild der Ebene das Rechteck so weit nach links das es den Text nicht mehr überdeckt. Verwenden Sie zum Verschieben am Besten die Pfeiltasten um nicht die Höhe des Rechtecks zu verändern. Nun wollen wir einen Bewegungstween zwischen dem 1. und 20. Bild der Ebene erstellen. Markieren Sie hierfür in der Zeitleiste beispielsweise das 1. Bild und rufen Sie das Bedienfeld „Eigenschaften“ auf.
Das Bedienfeld „Eigenschaften“
Unter „Tween“ wählen Sie nun den Eintrag „Bewegung“ aus. Die Animation ist fertig. Bei genauer Betrachtung werden Sie jedoch feststellen, dass alle Buchstaben mit einer einheitlichen Geschwindigkeit auf dem Bildschirm erscheinen. In der Realität würde dies durch die Beschaffenheit einer normalen Tastatur wohl anders aussehen. Außerdem können Sie bei noch genauerer Betrachtung erkennen, dass ein Buchstabe zu einem Zeitpunkt nie komplett erscheint. Dies würden wir jedoch natürlich von einem eingetippten Text erwarten. Das erste Manko kann mit einem erheblichen Mehraufwand durch die Erstellung mehrerer Bewegungstweens noch umgangen werden. Bei dem zweiten Manko versagt die vorgestellte Variante jedoch letztendlich. Dieses Problem lässt sich nur noch mit Hilfe von ActionScript beseitigen.
Erstellen Sie ein neues Flash-Dokument. Auf der bestehenden Ebene wollen wir dieses Mal einen dynamischen Text platzieren. Gehen Sie in das Bedienfeld „Eigenschaften“ und vergeben Sie unter „Var“ den Namen „typewritertext“. Dieser Schritt ist notwendig, um mit ActionScript auf das Textfeld zugreifen zu können. Lassen Sie das Textfeld zunächst leer. Beachten Sie, dass das Feld eine ausreichende Größe besitzt um später den gewünschten Text komplett aufnehmen zu können. Erstellen Sie im 10. Bild der Zeitleiste ein Schlüsselbild. Wir benötigen eine weitere Ebene für unsere ActionScript-Anweisungen. Rufen Sie im ersten Bild der neuen Ebene mit Hilfe der Funktionstaste F9 das Aktionen-Fenster auf. Wir wollen in diesem Bild lediglich zwei Variablen definieren:
001:002:
textcontent = "Schreibmaschinentext"; textlength = 1;
Die erste Variable „textcontent“ nimmt den darzustellenden Text auf. Die zweite Variable „textlength“ dient uns lediglich als Zähler. Die genaue Funktion der Variable wird im nächsten ActionScript deutlich. Erstellen Sie hierfür im 10. Bild der Ebene ein Schlüsselbild und rufen Sie daraufhin erneut das Aktionen-Fenster auf. Platzieren Sie in dem Fenster folgenden ActionScript:
001:002:003:004:005:006:
if (textlength <= textcontent.length) { typewritertext = textcontent.substring(0, textlength); textlength++; pic = random(8) + 2; gotoAndPlay(pic); }
Der Code startet mit einer Bedingung. Die Anweisung „length“ angewandt auf die Variable „textcontent“ gibt die Länge der in „textcontent“ enthaltenen Zeichenkette zurück. In unserem Fall liefert uns die Anweisung somit den Wert 20, da die Zeichenkette „Schreibmaschinentext“ 20 Buchstaben besitzt. Solange die Variable „textlength“ einen Wert kleiner oder gleich 20 besitzt, ist die Bedingung in der ersten Zeile erfüllt und alle weiteren Anweisungen innerhalb der geschweiften Blockklammern werden ausgeführt. Wir erinnern uns, dass wir die Zählervariable „textlength“ zu Beginn mit dem Wert 1 belegt haben. Somit gelangen wir zunächst auf alle Fälle zu den weiteren Anweisungen. In der zweiten Zeile weisen wir der Variable „typewritertext“, dem Variablennamen des dynamischen Textfeldes, einen Wert zu. Durch die direkte Zuweisung erhalten wir eine Ausgabe in unserem Textfeld und somit eine sichtbare Ausgabe für den Benutzer. Die Anweisung „textcontent.substring(0, textlength)“ kürzt die in „textcontent“ gespeicherte Zeichenkette auf den Wert von „textlength“ Zeichen ab. Wir beginnen hier bei dem 0. und somit bei dem ersten Zeichen. Beim ersten Aufruf dieser Anweisung erhalten wir somit eine Ausgabe des Buchstaben „S“. Anschließend erhöhen wir den Wert der Variable „textlength“ um eine Einheit. Bei einem erneuten Aufruf der Anweisung aus der zweiten Zeile würden wir nun also die Buchstaben „Sc“ zurückgeben.
Die Anweisung wird jedoch nicht direkt wieder aufgerufen. Dies soll mit einer kleinen Verzögerung geschehen. Um den Schreibmaschinen-Effekt realistischer zu gestalten, überlassen wir mit der Anweisung „random(8)“ die Länge der Verzögerung dem Zufall. Mit Hilfe von „random(8)“ erzeugen wir eine Zufallszahl zwischen 0 und 7. Zu diesem Wert addieren wir 2 hinzu und übergeben das Ergebnis der letzten Anweisung „gotoAndPlay()“. Letzteres erzeugt einen Sprung auf das übergebene Bild in der Zeitleiste. Wir springen somit zufällig an eine Position zwischen dem 2. und 9. Bild. Das Überspringen des ersten Bildes ist entscheidend, da wir sonst den Wert der Zählervariable „textlength“ wieder auf 1 zurücksetzen würden.
Beispieldatei: Einfaches Verfahren [Schreibmaschinen-Text1.zip]
Beispieldatei: Realistischeres Verfahren [Schreibmaschinen-Text2.zip]
