Consejo rápido crear una clase de efecto de texto en una máquina de escribir

En este Consejo rápido, crearemos una clase de ActionScript estática y reutilizable que producirá un efecto de máquina de escribir con una sola línea. Sigue leyendo!


Paso 1: Breve descripción

Dividiremos una cadena definida por el usuario en una matriz y luego agregaremos las letras resultantes a una Campo de texto uno por uno usando el Minutero clase.


Paso 2: Clase de máquina de escribir

Nuestra clase sera estático, lo que significa que no necesita ser instanciado usando el nuevo palabra clave. Para acceder a un miembro de la clase estática, use el nombre de la clase en lugar del nombre de una instancia.

Cree un nuevo archivo ActionScript y escriba el siguiente código:

 package import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; Máquina de escribir final pública Máquina de escribir / * Declare las variables y los métodos como estático * / private static var chars: Array; // los caracteres en la cadena private static var tf: TextField; // campo de texto en el que se escribirá la cadena private static var timer: Timer; // pausa entre la escritura de cada carácter privado estático var i: int = 0; // variable utilizada para contar los caracteres escritos. función estática pública write (txt: String, txtField: TextField, time: Number): void chars = txt.split (""); // divide la cadena en una matriz de caracteres tf = txtField; // asigna tf al campo de texto pasado a la función timer = new Timer (time); // establecer el tiempo de acuerdo con el parámetro timer.addEventListener (TimerEvent.TIMER, writeChar); timer.start (); // iniciar la función de escritura función estática privada 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) // verifica si la cadena está completa timer.stop (); timer.removeEventListener (TimerEvent.TIMER, writeChar); // borrar temporizador temporizador = nulo; 

Paso 3: Uso

El uso no podría ser más fácil, simplemente añada el Typewriter.as clase a su carpeta de proyecto y utilice el siguiente código:

 máquina de escribir de importación; Typewriter.write ('Text to Write', targetTextfield, 50);

Eso es todo, prueba tu película y verás tu TextField usando el efecto Typewriter.


Paso 4: Ejemplo

Usé la clase en este ejemplo swf para que pueda ver el efecto:


Conclusión

Usa esta clase para crear tus propios efectos.!

Gracias por leer. Si desea una versión más avanzada de este efecto para usar en sus proyectos, eche un vistazo a la animación de letra por letra de Rasmus Wriedt Larsen..