Comunidad de diseño web y desarrollo en internet online

EFECTO DE TEXTO APARECIENDO

Citar            
MensajeEscrito el 07 Mar 2009 10:04 pm
Hola a todos, estoy utilizando este codigo para que un texto me vaya apareciendo letra por letra, si pongo uno solo funciona, pero utilizando otra caja de texto con otro nombre de instancia es como si lo anulara y los dos textos aparecen igual así lo cambie, y el problema es que necesito varios campos de texto en la misma escena. Estuve mirando varios ejemplos acá en clab pero no logro solucionarlo, agradezco mucho la ayuda, chao:

Código :

//Creamos el Campo dinamico 
createTextField("_texto", 6, 100, 160, 0, 0);
_texto0.autoSize = false;
_texto0.border = false;
_texto0.type = "dinamic";
//----------------------------- 
//Formato del Campo
formato = new TextFormat();
formato.color = 0x000000;
formato.bold = true;
formato.size = 25;
formato.font = "Georgia";
//-----------------------------
//Esto es el Efectucho.. =P 
b =0;
cadenita = "La Materia y sus Propiedades";
setea = function () {
   if (b<=cadenita.length) {
      _texto0.text = cadenita.substr(0, b++);
      _texto0.setTextFormat(formato);
   } else {
      clearInterval(tempo);
   }
};
tempo = setInterval(setea,50);//velocidad,+ numero, menos velocidad

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

msie7
Citar            
MensajeEscrito el 08 Mar 2009 11:39 am
Hola, que tal. mira, prueba esto, si tienes alguna dudad, posteala

Código ActionScript :

//Formato del Campo
var formato:TextFormat = new TextFormat("Georgia", 25, 0x000000, true );

this.createTextField("_texto1", 6, 100, 160, 0, 0).autoSize = true;
this.createTextField("_texto2", 7, 100, 195, 0, 0).autoSize = true;
this.createTextField("_texto3", 8, 100, 230, 0, 0).autoSize = true;
this.createTextField("_texto4", 9, 100, 260, 0, 0).autoSize = true;

letraPorLetra_FX( "La Materia y sus Propiedades", _texto1, 100, formato );
letraPorLetra_FX( "Qumica para mocosos", _texto2, 200, formato );
letraPorLetra_FX( "Richi Rulz!!!!", _texto3, 300, formato );
letraPorLetra_FX( "BUUUUUUUUUUUUUUUU!! ºwº ", _texto4, 50, formato );

function letraPorLetra_FX( cadena:String, caja:TextField, speed:Number, formato:TextFormat )
{
   caja.setNewTextFormat( formato );
   var efecto:Object = { cadena:cadena, caja:caja }
   efecto.tempo = setInterval( letraPorLetra, speed, efecto);   
}
function letraPorLetra( obj:Object ):Void
{
   //obj{  cadena:String, caja:TextField, index:Number, tempo:Number }
   obj.index = obj.index ? obj.index : 0 ;
   if ( obj.index >= obj.cadena.length) clearInterval( obj.tempo );
   obj.caja.text = obj.cadena.substr(0, obj.index);
   obj.index++;
}


Saludos.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 08 Mar 2009 03:05 pm
Hola, gracias por tu respuesta, lo ensayé y funciona muy bien, solo tengo 2 duditas:

1. Como hago si necesito que un cuadro de texto tenga una tipografia y un tamaño de letra y los otros otras.
2. Si quiero que primero me aparezca el contenido de un cuadro, luego el del otro y luego el ultimo como lo organizo?

Muchas gracias por tu tiempo, cuidate.

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

msie7
Citar            
MensajeEscrito el 08 Mar 2009 03:49 pm
Siguiendo el código de LongVie y creando un prototype al igual que el tip de texto aleatorio, aquí tienes un prototype para crear un efecto de letra por letra.

Código ActionScript :

TextField.prototype.typeWriter = function(str:String, milisec:Number):Void{
   var ini:Number = 0;
   var campo:TextField = this;   
   //---Función de typewriter
   var type:Function = function():Void{      
      campo.text = str.slice(0, ini);      
      ini++;      
   }   
   //---Crear el intervalo
   var intervalo:Number = setInterval(type, milisec);   
}


Sólo debes llamarlo como un método:

Código ActionScript :

tu_campo_de_texto.typeWriter(cadena:String, tiempo_millisegundos:Number);


Un ejemplo concreto:

Código ActionScript :

campo.typeWriter("Esto es un texto de prueba", 30);


Saludos.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 08 Mar 2009 04:17 pm
Muchas gracias, con este soluciono las dos dudas anteriores, ya que las características van directamente en la caja de texto pero en los dos casos se presenta un problema, y es que cuando pongo en el codigo el texto que necesito que aparezca tiene que ir en una sola linea porque sino presenta errores, si el texto es un poco larguito o si necesito por ejemplo separar las lineas como cuando se utilizan viñetas, como lo hago? porque flash tiene como un limite de scroll horizontal, no se si me hago entender.....

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

msie7
Citar            
MensajeEscrito el 08 Mar 2009 09:42 pm
Hola, en el codigo que posteo, coloque un parametro extra, se llama formato, recibe un objeto de tipo TextFormat, el cual es un objeto de formateo de texto.

Código ActionScript :

etraPorLetra_FX( "algo", _caja, 100, new TextFormat("Arial", 0, 20));
etraPorLetra_FX( "otro", _caja2, 200, new TextFormat("Verdana", 0, 20));


Y bueno, el codigo de elchininet me resulta increiblemente practico y mas flexible, pero tendriamos que hacer unos ajuste, por ejemplo, no limpia el intervalo, y este continua su ejecucion indefinidamente, cosa que suele ser perjudicial para el programa final.

Para colocar mas lineas en tu texto tienes que colocar 2 propiedades del TextField en true

Código ActionScript :

_caja.multiline = true;
_caja.autoSize = true;


Y el texto, por ejemplo para crear un salto de linea se usa "\n" este caracter indica el salto de linea:

Código ActionScript :

letraPorLetra_FX( "Linea1\nLinea2\nLinea3", _texto4, 50, formato );


Saludos a elchininet, hacia tiempo que no lo veia por aqui.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 08 Mar 2009 10:18 pm
Hola de nuevo, le dedique algunos minutos y con el codigo de elchininet y mi codigo, obtuve esto:

Código ActionScript :

TextField.prototype.letraPorLetra = function( str:String, milisec:Number, formato:TextFormat ):Void
{
   clearInterval( this.efecto.tempo );
   if( formato != undefined ) this.setNewTextFormat( formato );
   this.efecto = { cadena:str, caja:this };
   this.efecto.index = 0;
   this.efecto.letraPorLetra = function( Void ):Void 
   {
      if ( this.index >= this.cadena.length) clearInterval( this.tempo ); 
      this.caja.text = this.cadena.slice(0, this.index); 
      this.index++; 
   }
   this.efecto.tempo = setInterval(this.efecto, "letraPorLetra", milisec, this.efecto);
}

//Formato del Campo 
var formato:TextFormat = new TextFormat("Georgia", 25, 0x000000, true ); 
 
this.createTextField("_texto1", 6, 100, 160, 0, 0)
_texto1.autoSize = true; 
_texto1.multiline = true;
_texto1.letraPorLetra( "La Materia y sus Propiedades", 100, formato ); 

this.createTextField("_texto2", 7, 100, 195, 0, 0).autoSize = true; 
_texto2.autoSize = true; 
_texto2.multiline = true;
_texto2.letraPorLetra( "Qumica para mocosos", 200, new TextFormat("verdana", 20, 0x0000ff) ); 

this.createTextField("_texto3", 8, 100, 230, 0, 0).autoSize = true; 
_texto3.autoSize = true; 
_texto3.multiline = true;
_texto3.letraPorLetra( "Richi Rulz!!!!", 300, new TextFormat("arial", 15, 0x00ff00) ); 

this.createTextField("_texto4", 9, 100, 260, 0, 0).autoSize = true; 
_texto4.autoSize = true; 
_texto4.multiline = true;
_texto4.letraPorLetra( "BUUUUUUUUUUUUUUUU!!\nSoy un mostro ºwº ", 50, formato);


Estoy seguro que se puede mejorar la funcion "letraPorLetra" pero actualmente, esta funcional y previene el manejo de intervalos con setInterval. Suerte.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 08 Mar 2009 10:50 pm
Tienes razón LongVie, olvidé eliminar el setInterval, esto traería problemas cuando se utilice varias veces el código. Entre los dos llegaremos a una buena solución, cada vez que se utiliza this en el proto se refiere al TextField al que se le haya aplicado el método, por lo que crear el objeto efecto crearía un objeto que después no se eliminaría, es preferible utilizar variables locales de la función que automáticamente se eliminan al culminar esta, sería algo como esto:

Código ActionScript :

TextField.prototype.typeWriter = function(str:String, milisec:Number):Void  {
   var ini:Number = 0;
   var campo:TextField = this;
   //---Función de typewriter 
   var type:Function = function ():Void {
      if (ini>=str.length) {   clearInterval(intervalo);   }
      campo.text = str.slice(0, ini);
      ini++;
   };
   //---Crear el intervalo 
   var intervalo:Number = setInterval(type, milisec);
};


No es necesario crear un formato de texto, ya que alejilla está trabajando con campos de texto situados en la escena y estos ya tendrían el formato que ella desea, esto sería de gran utilidad si estuviera trabajando con textos creados por as.

alejilla para los saltos de líneas sigue el consejo de LongVie "\n" significa nueva línea y "\r" es el caracter de retorno o enter.
Para que tu texto dinámico sea multilíneas, selecciónalo y ve a las propiedades y ponlo en la propiedad "multilinea".

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 09 Mar 2009 01:37 am
:O yo pense que creaba los textos con codigo :P bueno, pues con todo este codigo, hay para escoger :D

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 09 Mar 2009 02:51 pm
Primero que todo muchas gracias a los dos por los aportes, la parte de \n para cambiar de linea funciona muy bien cuando son lineas corticas, pero sigue pasando una cosa si tengo por ejemplo un texto de 8 o 10 lineas estas debo ponerlas en la linea 12 de este codigo, como tiene que ser en esa sola linea me va creando un scroll en la parte de las acciones que llega a un límite y luego no me deja poner más texto, y si se pasa de linea, por ejemplo así, para poder poner todo el texto:

campo.typeWriter("Esto es un texto de prueba\nEsto es un texto de prueba
\nEsto es un texto de prueba", 30);

Me saca errores y no funciona.

TextField.prototype.typeWriter = function(str:String, milisec:Number):Void {
var ini:Number = 0;
var campo:TextField = this;
//---Función de typewriter
var type:Function = function ():Void {
if (ini>=str.length) { clearInterval(intervalo); }
campo.text = str.slice(0, ini);
ini++;
}; //---Crear el intervalo
var intervalo:Number = setInterval(type, milisec);
};
campo.typeWriter("Esto es un texto de prueba\nEsto es un texto de prueba\nEsto es un texto de prueba", 30);

Lo único que me esta faltando para que funcione como quiero es poder poner en esta última linea en la parte del codigo un texto larguito sin que se me acabe el liimite como horizontalmente, o no se si se pueda seguir escribiendo hacia abajo de alguna manera. No se si sea posible. Muchas gracias

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

msie7
Citar            
MensajeEscrito el 09 Mar 2009 02:59 pm
A... se me olvidaba, desde el principio le puse multilinea a la caja de texto dinámico, mi duda es en el código...

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

msie7
Citar            
MensajeEscrito el 09 Mar 2009 06:29 pm
Hola, ¿que errores te saca?

Y ¿entonces necistas un scroll bar? porque si tienes muchas lineas, estas obvio saldran de la pantalla si el capo de texto tiene la propiedad de autosize en true, pues el texto se va haciendo cada vez mas y mas grande, podrias quitar la propiedad de autosize y darle un ancho y un largo predertminado, entonces ya no se saldria de la pantalla.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 09 Mar 2009 10:23 pm
Hummm... creo que ella se refiere a la ventana de las acciones al escribir el código y no al texto de la escena...
alejilla si te refieres a eso no creo que esto pueda traer problemas a no ser que estés presionando "enter" para seguir escribiendo debajo, debes ecribir constantemente el código sin dar enter porque si no te crearía una nueva línea de código y te daría error.

Para mejorar tu escritura de código ve al extremo superior derecho de la ventana de las acciones presiónalo para que te salgan las opciones y desmarca WordWrap en el código.

Si no es esto debes explicar mejor tu problema, quizás adjuntando alguna imagen donde se pueda visualizar a lo que te refieres.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 09 Mar 2009 11:27 pm
Hola a los dos, si, me refería a la parte de las acciones, le desactive donde me dijo elchininet y le puse en ajustar texto y ya me deja poner muchas lineas sin problema. Muchas gracias a los dos queda solucionado.

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

msie7
Citar            
MensajeEscrito el 10 Mar 2009 12:02 am
:o nunca me habia psasdo :P bueno que bien que no era tan grave como pense. Saludos Ale.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 06 Mar 2010 04:15 pm
no entiendo nd ummm??? como apenas estoy iniciado flash no logro entender muy bien ..!! me gustaria que me dieran un procedimiento mas claro por fas, es para un trabajo del colegio!!!

Por Albeirorock

1 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.