Comunidad de diseño web y desarrollo en internet

Función para escribir un texto letra a letra en Flash

Habiendo observado que había una gran cantidad de post preguntando cómo llenar un cuadro de texto letra a letra, se me ocurrió crear una función para realizar esa misma tarea.

La función permite crear aplicaciones simples como ésta (el botón escribir escribe el texto que aparece en el campo, además, este campo se vuelve editable cuando la función termina de escribir):



La función que logra esto (Código abajo) tiene 5 parámetros que, en orden son:
  • texto: El texto a escribir debe ser un String (si, se pueden usar variables y la constante newline)
  • campo: El campo de texto en el que se va a escribir (es decir, el nombre de instancia)
  • intervalo: Los milisegundos que pasan entre cada carácter escrito.
  • primeraLetra: Una variable booleana que indica si la primera letra es escrita en seguida o si debe esperar.
  • formato:[/b] El formato que se le quiere aplicar al texto en caso de querer hacerlo en forma dinámica.

Explico el cuarto parámetro, si el tiempo entre letra y letra es de 1000 milisegundos y primeraLetra es false, entonces, habrá que esperar 1 segundo antes de que la primera letra aparezca; si es true, aparece al ejecutarse la función.

Si no me explico bien, prueben usar la función y cambiar el valor de primeraLetra con un intervalo elevado (1000 o más milisegundos).

Es muy importante saber que la función define una variable para el campo de texto sobre el que etá escribiendo que es, justamente, escribiendo. Ésta variable debería ser usada para determinar si estamos escribiendo en ese campo de texto en particular ya que la función falla si tratamos de usarla 2 veces en el mismo campo al mismo tiempo.

Ahora, el código de la función:

Código :

escribir = function (texto:String, campo:TextField, intervalo:Number, primeraLetra:Boolean, formato:TextFormat) {
   //
   // Creamos el Array a partir del texto
   campo.arrayLetras = texto.split("");
   campo.escribiendo = true;
   //
   // Creamos la función que pone las letras una por una
   nuevaLetra = function () {
      if (campo.letra == undefined) {
         campo.i = 0;
      } else {
         campo.i++;
      }
      if (campo.i == campo.arrayLetras.length) {
         clearInterval(campo.nuevoIntervalo);
         campo.letra = undefined;
         campo.escribiendo = false;
      } else {
         if (campo.arrayLetras[campo.i] == " ") {
            campo.i++;
            campo.letra = " "+campo.arrayLetras[campo.i];
         } else {
            campo.letra = campo.arrayLetras[campo.i];
         }
         campo.text += campo.letra;
         campo.setTextFormat(formato);
      }
   };
   if (primeraLetra) {
      nuevaLetra();
   }
   //                               
   // Creamos el intervalo que llama a la función "nuevaLetra"
   campo.nuevoIntervalo = setInterval(nuevaLetra, intervalo);
};

Por ejemplo, con el siguiente código, llamamos a la función para 2 campos de texto, campoTexto1 y campoTexto2:

Código :

var miTexto:String = "Función creada por Hernán Rivas \n hernanrivasacosta@gmail.com";
escribir(miTexto, campoTexto1, 30, false);
var miOtroTexto:String = "El anterior es un ejemplo de multilinea";
escribir(miOtroTexto, campoTexto2, 60, false);

Espero les sea útil ^^

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate