Un clásico, el efecto de texto que se escribe letra por letra. Idóneo para entender la estructura básicas de una clase de as2.
Typewriter.as
Actionscript:
-
import mx.utils.Delegate;
-
class Typewriter {
-
private var interval:Number;
-
private var string:String;
-
private var speed:Number;
-
private var textfield:TextField;
-
private var index:Number;
-
public function Typewriter (textfield:TextField, string:String, speed:Number) {
-
this.textfield = textfield;
-
this.string = string;
-
this.speed = speed;
-
index = 0;
-
interval = setInterval(Delegate.create(this, exec), this.speed);
-
}
-
private function exec() {
-
this.textfield.text = this.string.substr(0, index);
-
index++;
-
if (index> this.string.length) {
-
clearInterval(interval);
-
}
-
}
-
}
Modo de uso
Para utilizar la clase, basta con utilizar el constructor new pasando como argumentos los siguientes parámetros:
- Nombre de instancia de un campo de texto
- Nombre de una cadena
- Velocidad
Actionscript:
-
var tpw:Typewriter = new Typewriter(mytext, mystring, 20);
Ejemplo de uso
En este ejemplo, se crea un campo de texto dinámicamente al que se le da un formato de texto.
Actionscript:
-
mystring = "Lorem ipsum dolor sit amet, orci at, feugiat nonummy.";
-
// --
-
var myformat:TextFormat = new TextFormat();
-
myformat.font = 'Verdana';
-
myformat.size = 10;
-
myformat.align = 'justify';
-
// --
-
_root.createTextField("mytext", 1, 20, 20, 460, 200);
-
mytext.multiline = true;
-
mytext.wordWrap = true;
-
mytext.setNewTextFormat(myformat);
-
// --
-
var tpw:Typewriter = new Typewriter(mytext, mystring, 20);
Descarga Typewriter.zip
Typewriter.zip se ha descargado 4,157 veces.
Loading ...
Excelente Toni, y excelente el nuevo Blog, espero que esta nueva etapa sea fruto de muchos y nuevos éxitos. Te deseo lo mejor.
Abrazos
Hola Tony, felicidades por el nuevo blog.
Estoy empezando ahora un poco con el tema de las clases y no entiendo alguna cosilla, asi que si alquien puede ayudarme....
En esta linea:
interval = setInterval(Delegate.create(this, exec), this.speed);
No entiendo muy bien lo que hace Delegate.
Muchas gracias de antemano y saludos a todos/as....
Hola Diego,
Este quizá no es el mejor ejemplo para entender la utilidad de Delegate, ya que podía haber escrito perfectamente:
interval = setInterval(this, 'exec', this.speed);
Y funcionaría igual.
Zárate escribió un articulo esclarecedor sobre el tema:
http://www.zarate.tv/articulos/delegando-que-es-gerundio/
saludos
Guai!
Es curioso ver como si pones el textField aliniado 'left' o 'right' va mucho más rápido, por lo menos en player de mac.
Toni:
¿Sería posible que la cadena de texto no estuviera en el interior del flash sino en el html?
La idea sería que con un único archivo swf se pudiera presentar cualquier texto corto con efecto de máquina de escribir.
Me interesaría especialmente para un Flash MX 2004.
Gracias
Hola Fabian, tienes diferentes opciones puede que alguna se adapte a tus necesidades:
1. Con flashvars, puedes pasar parámetros desde html a flash, claro que esto solo te sirve cuando cargas la película de flash.
2. Con externalInterface puedes establacer una comunicación fuida entre flash y javascript, en el blog hay un ejemplo (flashtracer)
3. Para mi la mejor opción, sería utilizar un archivo externo a flash (.txt o .xml) que contendría los textos.
saludos.
Hola, una pregunta simple:
¿Es posible incluir en el string etiquetas html? (saltos de linea, negritas o enlaces?)
He probado a incluir antes de declarar el string lo siguiente
mystring.html = true;
en la caja de texto (he dibujado una a mano) está marcada la opcion de admitir etiquetas html y dentro del texto las etiquetas en el siguiente formato : '<br>'
pero no me funciona.
Gracias de todas formas por este magnifico tutorial
Un saludo
:)
Tambien tienes que modificar la clase para que te admita el salto de línea:
Abre el archivo Typewriter.as y modifica el método exec como sigue
Saludos
Gracias Toni, ahora funciona perfecto!
Un saludo
:)
muy buen efecto!
me preguntaba si no hay forma de detener el tipeo, ya que quiero que cada vez que el mouse esté sobre un botón tipee una leyenda diferente. He probado, y si no se termina de escribir la leyenda anterior parece sobreescribirse la nueva sobre ella.
Hola edgardo,
tendría que modificar la clase y añadir un método que pare el tipeo. La modifico y lo pongo en el blog.
saludos
Gracias, muy buen tutorial. Por cierto, ¿habría alguna manera de cambiar el color del texto?
Hola
Quería saber como puedo hacer para colocarle el sonido de la máquina
gracias