Schneller Tipp Erstellen Sie eine Texteffektklasse für Schreibmaschinen

In diesem Quick Tip erstellen wir eine statische, wiederverwendbare ActionScript-Klasse, die einen Typewriter-Effekt mit einer einzelnen Zeile erzeugt. Weiter lesen!


Schritt 1: Kurzübersicht

Wir teilen eine benutzerdefinierte Zeichenfolge in ein Array auf und fügen dann die resultierenden Buchstaben zu a hinzu Textfeld eins nach dem anderen mit der Timer Klasse.


Schritt 2: Schreibmaschinenklasse

Unsere Klasse wird sein statisch, was bedeutet, dass es nicht mit dem Neu Stichwort. Verwenden Sie für den Zugriff auf ein statisches Klassenmitglied den Namen der Klasse anstelle des Namens einer Instanz.

Erstellen Sie eine neue ActionScript-Datei und schreiben Sie den folgenden Code:

 package import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; public final class Schreibmaschine / * Deklariert die Variablen und Methoden als statisch * / private static var chars: Array; // die Zeichen in der Zeichenfolge private static var tf: TextField; // Textfeld, in das der String geschrieben wird private static var timer: Timer; // pausiert zwischen dem Schreiben jedes Zeichens private static var i: int = 0; // Variable zum Zählen der geschriebenen Zeichen. Öffentliche statische Funktion write (txt: String, txtField: TextField, time: Number): void chars = txt.split (""); // teile den String in ein Array von Zeichen auf tf = txtField; // weise tf dem an die Funktion übergebenen Textfeld zu: timer = new Timer (time); // Zeit gemäß Parameter einstellen timer.addEventListener (TimerEvent.TIMER, writeChar); timer.start (); // Schreibfunktion starten private statische Funktion writeChar (e: TimerEvent): void if (i < chars.length)  tf.appendText(chars[i]); //writes a char every time the function is called i++; //next char  if (i >= chars.length) // prüfe ob der String komplett ist timer.stop (); timer.removeEventListener (TimerEvent.TIMER, writeChar); // clear timer timer = null; 

Schritt 3: Nutzung

Die Benutzung könnte nicht einfacher sein - fügen Sie einfach das hinzu Schreibmaschine.as Klasse in Ihren Projektordner und verwenden Sie den folgenden Code:

 Schreibmaschine importieren; Typewriter.write ('Text to Write', targetTextfield, 50);

Testen Sie Ihren Film, und Sie sehen Ihr TextField mit dem Typewriter-Effekt.


Schritt 4: Beispiel

Ich habe die Klasse in diesem Beispiel swf verwendet, damit Sie den Effekt sehen können:


Fazit

Verwenden Sie diese Klasse, um Ihre eigenen Effekte zu erstellen!

Danke fürs Lesen. Wenn Sie eine erweiterte Version dieses Effekts zur Verwendung in Ihren Projekten wünschen, werfen Sie einen Blick auf Rasmus Wriedt Larsens Letter-by-Letter-Animation.