TUTORIAL 24. CAMPOS DE TEXTO

[roger]

 

Comenzamos un nuevo tutorial sobre el tema de los campos de texto. Vamos a aprender los siguientes procedimientos:

 

1. Cómo crear un campo de texto con la herramienta campo de texto de la barra de herramientas.
2. Cómo crear campos de texto directamente con código actioscript.
3. Cómo aplicar propiedades a los campos de texto mediante código.
4. Como crear formatos de campos de texto.

 

[roger]

1.- CREAR CAMPOS DE TEXTO CON LA HERRAMIENTA DE LA BARRA  DE HERRAMIENTAS.

Este es el método más fácil y el que seguramente se aprender por intuición ya que solo es necesario elegir  la herramienta texto T  y arrastrar el puntero del ratón por el escenario para crear el campo.

 

Una vez tenemos seleccionado el campo de texto podemos activas el panel de propiedades de texto del menú ventana y cambiar las propiedades como estilo de letra, tipo de fuente, color. Es importante determinar también el tipo de campo de texto. Hay tres tipos:

1. Estático: para textos que no cambiarán.
2. Dinámico: texto que pueden cambiar mediante código.
3. De introducción. Son campos preparados para que el usuario pueda introducir texto.

Pero el campo de texto puede tener un nombre también. Cuando definimos el tipo de campo de texto nos encontramos con un recuadro blanco en la parte inferior donde podemos ponerle el nombre del campo. Vamos a crear un ejemplo.

 

Creamos primero un campo de texto dinámico y le llamaremos texto1. 

Creamos un botón con el que cambiaremos el color de fondo. El código es éste:

on (press)

{

_root.texto1.backgroundColor="0x00FFFF";

 

}

 

 

Observamos cómo con la propiedad backgroundColor podemos cambiar el color de fondo del campo. El color se determina en notación hexadecimal (1,2,3,,4...A,B,C,D,E). Tenéis más información sobre los colores aquí: http://es.wikipedia.org/wiki/Colores_HTML

 

Otra propiedad de color es  borderColor:Color del borde del campo de texto.

textColor: Indica el color del texto de un campo de texto. 

Si no definimos ninguna propiedad, las propiedades predeterminadas que se establecen cuando creamos un campo de texto, son las siguientes: 

type = "dynamic"

border = false 

background = false 

password = false 

multiline = false

html = false 

embedFonts = false 

selectable = true  

mouseWheelEnabled = true 

restrict = null 

variable = null 

maxChars = null

 

Como ejercicio para esta primera parte os propongo experimentar con estas propiedades y averguar entre todos que hace cada propiedad.

 

Os dejo con un primer ejemplo en fla abierto y en swf:

tutorial24_1.fla

tutorial24_1.swf

 

Podéis enviar aquí vuestros comentarios o experimentos. 

 

 

 

[Nani]

He hecho este mini ejemplo para probar. ¿Es suficiente o hay que añadir más cosas?

 

[Javier de la Cruz]

Subo una primera actividad. Hay un cuadro de texto y tres botones. Al pinchar en ellos se cambia el color de fondo, el del borde y el de texto. Cada vez que se pincha en uno de ellos, el color de una de las partes (la que indica el botón) se transforma aleatoriamente.

[Nani]

¡Qué máquina eres, Javier! A mí no se me hubiese ocurrido.

[Emilia Alcaraz Delgado]

Hola a tod@s,

 

Gracias Roger, por este excelente tutorial.

 

Retomando vuestros fantásticos ejemplos, he rizado el rizo con el mío. Tengo dos preguntas:

 

• Se puede ampliar el borde del cuadro de texto ?
• Cuando se ponen fuentes externas al sistema, hay forma que respeten el tamaño con el que an sido creadas, cuando se crea el fichero swf ? A mi me ha salido muy pequeña i en el fla es mucho más grande.

 

Aquí os lo dejo con el fla, para que quede más clara mi pregunta.

 

Emilia

 

[Nani]

Esa misma pregunta me hago yo, ¿cómo cambiar el borde? En las opciones de cuadro de texto no se puede.

En cuanto a las fuentes, no sé a qué te refieres, yo te las veo igual en el fla. que en el swf.

[Javier de la Cruz]

Hola Emilia.No me deja abrir tu fla.

[Emilia Alcaraz Delgado]

Hola,

 

Javier te vuelvo a enviar el fla.

Nani, adjunto una imagen para que veas a lo que me refiero con la medida de la letra.

 

Gracias, Emilia.

[Amalia Casas]

Roger gracias por un tutorial tan asequible. Permite practicar antes de meterse en más complicaciones.

¡Qué bueno tu ejercicio Javier!.

Envío mi práctica.

Saludos.

[Emilia Alcaraz Delgado]

Amalia,

 

Un ejercicio muy didáctico !!! Felicidades,

 

Emilia

 

 

[roger]

Hola,

 

Respondo algunas cuestiones que habéis comentado. 

 

El borde no admite cambio de grosor mediante las propiedades del campo. Se podría hacer de otra forma más complicada, por ejemplo creando un clip con dos fotogramas y en uno le ponemos un rectángulo vacío con el grosor de borde que queramos. Después mediante un botón y con la instrucción gotoAndStop(2) podemos ver el fotograma deseado donde esta el borde. Es más complicado pero se puede hacer.

 

Sobre el tema de las fuentes hay que utilizar la propiedad embedFonts para que esa fuente se visualice en cualquier ordenador que no la tenga.

[roger]

Ahora vamos a ver que hacen las propiedades de  los campos que se basan en estados de activado o desactivado.

 

Propiedades con  valor boleano (true, false): 

 
border: Determina si el campo de texto tiene borde.

background:Determina si el campo de texto tiene fondo

password: Determina si el campo de texto es de contraseña. Los caracteres se substituirán por asteriscos.  

multiline:Determina si el campo de texto es multilinea 

html:Determina si el campo de texto acepta HTML

embedFonts:Determina si usar fuentes incorporadas o fuentes del dispositivo. Ayuda e información para usar esta propiedad  

selectable:Determina si el texto se puede seleccionar una vez publicado.

wordWrap:Determina si el texto se ajusta "lateralmente" o no, es decir, si tenemos una linea muy larga, que se muestre una sola linea o que se corte y haga un salto de linea cuando llegue al borde del campo de texto.

mouseWheelEnabled:Determina si la rueda del raton se puede usar para subir/bajar el texto.

condenseWhite:Un valor booleano que especifica si se deben eliminar espacios en blanco adicionales (espacios, saltos de línea, etc.) en el campo de texto con texto HTML. Si establece el valor true, deberá utilizar comandos HTML estándar, como <BR> y <P>, para incluir saltos de línea en el campo de texto.