Comunidad de diseño web y desarrollo en internet online

Aparecer texto linea por linea en Actionscript 3

No sé si habrá un tip igual a éste, (y cualquier usuario de Cristalab puede aportar tips). Estuve buscando pero sólo había funciones para aparecer texto letra por letra (y en AS2). Hace muy poco necesité este efecto y me propuse escribir una clase yo mismo, de paso que aprendo AS3. Si alguien puede mejorarlo, bienvenido sea. En el mismo código explico todo en los comentarios.

Ah! por si acaso uso aquí TweenMax de GreenSock.

Espero que a alguien le sea útil!

Código :

package
{ 
   //importamos las clases necesarias
   import gs.*;
   import flash.display.Sprite;
   import flash.text.*;
   
   public class TextAppearByLine extends Sprite
   {
      private var _txt:String;
      private var _refTextField:TextField;
      private var _txtWidth:Number;
      //este es un font de la biblioteca del archivo .fla exportado para actionscript
      private var _font:MyHelvetica=new MyHelvetica();
      private var _txtFmt:TextFormat;
      private var _fadeDuration:Number=0.5;
      private var _fadeDelay:Number=0.25;
      private var _clipDelay:Number;
            
      public function TextAppearByLine(txt:String,clipDelay:Number,txtWidth:Number)
      {
         //los parametros necesarios
         _txt=txt;//el texto en si
         _clipDelay=clipDelay;//este parametro es opcional, yo lo puse porque necesitaba varios campos de 
         //texto que aparezcan uno despues de otro.
         _txtWidth=txtWidth;//el ancho de la caja de texto
         
         
         _txtFmt=new TextFormat();//text format necesario para el texto.
         _txtFmt.font=_font.fontName;
         _txtFmt.color=0x000000;
         _txtFmt.size=20;
         
         //este campo de texto lo uso como referencia para sacar los textos linea por linea,por eso nunca lo 
         //agrego a la display list
         _refTextField=new TextField();
         _refTextField.width=_txtWidth;
         _refTextField.multiline=true;
         _refTextField.wordWrap=true;
         _refTextField.autoSize=TextFieldAutoSize.LEFT;
         _refTextField.text=_txt;
         _refTextField.defaultTextFormat=_txtFmt;
         
         makeTextFields();
      }
      
      //con esta funcion creamos los textos en si
      private function makeTextFields():void
      {
         //usamos la propiedad numLines de la clase TextField para hacer el loop
         for(var i:uint=0;i<_refTextField.numLines;i++)
         {
            var txtLine:TextField=new TextField();
            txtLine.defaultTextFormat=_txtFmt;
            txtLine.width=_txtWidth;
            txtLine.selectable=false;
            txtLine.autoSize=TextFieldAutoSize.LEFT;
            txtLine.embedFonts=true;
            //este metodo getLineText es el q hace todo el trabajo!!
            txtLine.text=_refTextField.getLineText(i);
            txtLine.x=0;
            txtLine.y=txtLine.height*i;
            //alpha en 0 para luego animar su aparicion 
            txtLine.alpha=0;
            //aqui el tween para el efecto de fade "inverso", jeje.la propiedad delay de TweenMax me evita
            //tener q hacer una funcion muy compleja con Timers para luego llamar a los tweens.
            TweenMax.to(txtLine,_fadeDuration,{alpha:1,delay:_clipDelay+_fadeDelay*i});
            //y bueno, finalmente añadimos el texto a la display list.
            addChild(txtLine);
         }
         
      }
            
   }
}


Entonces en el archivo fla escribimos algo asi:

Código :

var myString="escribir aqui tooooooooooooooooodo el texto que quieran";
var t:TextAppearByLine=new TextappearByLine(myString,0,200);
t.x=t.y=50;
addChild(t);


Por último, he de mencionar que, al ser ésta una clase, debería ser lo más reutilizable posible, por lo tanto hubiera sido mejor añadir muchas opciones en los parámetros (tipo de letra, tamaño de la letra, color del texto, etc) pero no lo hice porque me desagrada escribir muchos parámetros al llamar a mis clases y porque fue una ocasión muy específica en que la necesité. Ustedes por supuesto pueden hacer las modificaciones que necesiten.

Saludos!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, 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