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.

 

[Nani]

Yeah, esto va tomando cuerpo. Amalia, como siempre, tu  creatividad me encanta.

Emilia, ya vi lo que me dices, pero tengo otra vez problemas con la cs5 y lo tengo que volver a instalar y a ver si me funciona.

Enhorabuena a todos.

[Nani]

Emilia, ya he dado con tu problema. En las opciones de "Espaciado entre letras" tenías un valor "-24".

Lo he puesto a "0" y ya se ve exactamente igual. Te lo subo.

[roger]

Pasamos al punto 2 del tutorial:

 

2.- CREACIÓN DE CAMPOS DE TEXTO MEDIANTE CÓDIGO

 

Para crear un campo de texto utilizaremos este código:

 

_root..createTextField("nombre del campo", nivel de profundidad, x, y, anchura, altura);

 

Ejemplo:

_root.createTextField("texto1",1000,300,300,400,100);

_root.texto1.text="HOLA";

_root.texto1.border=true;

 

Ahora introducimos este código en el primer fotogramas de flash o en un botón y comprobaremos cómo el propio programa crear un cuadro de texto con borde.

 

Pero...¿para qué nos sirve todo este código si podemos hacer lo mismo con las herramienta de texto que hemos estudiado antes?  Pues nos servirá cuando queramos crear de forma dinámica, en tiempo real varios campos de texto. Imaginemos que queremos crear una hoja de cálculo con columnas y filas y que cada celda sea un campo de texto. Será más rápido y efectivo hacerlo con este código.

 

Combinando estas funciones con otras que ya hemos estudiado como la función substr() podríamos hacer que dada una palabra cada letras se sitúe en un campo de texto diferente para poder ser editada por separado. Esto permitiría crear diferentes tipos de ejercicios. 

 

Combinando estas funciones con los bucles es como se crea dinámicamente muchos campos de texto. Vamos a ver un ejemplo:

_root.saltoy=0;

for (n=0; n<15; n++) {

_root.createTextField("campo"+n,n,0,_root.saltoy,100,30);

_root["campo"+n].border = true;

_root["campo"+n].size = 40;

_root["campo"+n].text=Number("0");

_root["campo"+n].type = "input";

_root.saltoy += 30;

}

 

En este ejemplo se crean 15 campos de texto con borde y de tipo de "introducción de texto". 

La variable _root.saltoy la utilizamos para hacer que los campos de texto se escriban uno debajo de  otro. Sustituye su valor por l coordenada y. A partir de este código se podría hacer una hoja de cálculo que sumara en la celda final la suma de los valores introducidos en las columnas. Sería interesante crear una hoja de cálculo sencilla y con un buen diseño gráfico para introducir esta herramienta en niveles iniciales de primaria.

 

Como ejercicio podéis experimentar más posibilidades con estas nuevas funciones. Por ejemplo crear una aplicación donde las letras de una palabra salgan aleatoriamente en el escenario cada una en un campo diferente. O palabras donde falta alguna letra que hay que completar.

 

 

 

 

[Emilia Alcaraz Delgado]

Roger y Nani,

 

Gracias, por vuestra respuesta. Así, sin el error se ve mejor la fuente. La opción del borde, de momento la descarto. Me parece muy complicada.

 

En cuanto a  la fuente.... Ya he aplicado unas recomendaciones que nos dio Octavi hace tiempo y que apunto aquí por si os hacen falta.

 

"En los cuadros de texto dinámicos tienes que incorporar la fuente a la biblioteca si no es del sistema. En la biblioteca>boton derecho> nueva fuente.

Además debes incorporar los caracteres que aparezcan en el texto que has utilizado: en el boton 'incorporar' de las propiedades del cuadro de texto dinamico escribe el texto que has usado de manera que aparezcan todos los caracteres."

 

Muchas gracias. Emilia

[Emilia Alcaraz Delgado]

Hola a tod@s,

 

He solucionado el problema del margen de una manera más sencilla, pero haciendo "trampa". He situado un segundo cuadro de texto dinàmico debajo del de la mano sin texto y en el botón "margen" he puesto el código backgroundColor.

Para resolver el problema ya me vale.

 

Gracias. Emilia

[Nani]

Si Mahoma no va a la montaña..., :)

[Amalia Casas]

Gracias Emilia, es un intento de 'rentabilizar'  la práctica...

[Amalia Casas]

Emilia, te ha quedado fantástico. Una idea muy original.

[Octavi Soler]

Hola Emilia

No sé si el problema que tienes con los tipos externos lo has resuelto ya. Como yo me he peleado mucho con este tema, te explico los pasos que sigo para no tener problemas:

Supongamos que en el cuadro dinámico o de introducción de texto has aplicado una fuente, por ejemplo,  "Escolar" tamaño 20. Al generar el swf, no tendrás ningún problema para visualizarlo correctamente, ni tampoco los ordenadores que tengan ese tipo ya instalado en el sistema. Pero a los que no lo tengan les mostrará una fuente de sustitución. Para evitarlo yo hago lo siguiente (aplicado al ejemplo propuesto):

Una vez decidida la fuente y el tamaño del cuadro, en la biblioteca, boton derecho, selecciono 'Nueva Fuente". En el cuadro emergente busco Escolar1, relleno el tamaño con el 20, en este caso, y le doy un nombre, por ejemplo Escolar_20, con el que aparecerá ahora en la biblioteca.

Vuelvo al cuadro dinámico de texto y vuelvo a seleccionar la fuente en el panel de propiedades. Verás que en la lista desplegable de fuentes aparece ahora la nueva Escolar_20 y marcada con un asterisco. Esta es la que debes seleccionar.

Ahora aún queda un paso por hacer. Haz clic en el botón 'incorporar' y en el cuadro emergente escribe la frase o palabras que van a escribirse en el cuadro, o bien selecciona los juegos de caracteres (mayúsculas, minúsculas, puntuación...) que necesites. Este paso es necesario porque flash debe seleccionar los caracteres necesarios para hacer el rendering al generar el swf.

No sé si puede abreviarse este proceso con el comando embedFonts. (?) Estaría bien, porque es bastante engorroso.

Saludos

[Emilia Alcaraz Delgado]

Hola Octavi,

 

Gracias por esta explicación tan didáctica, amplía la que habías hecho hace tiempo en el foro y que ya había utilizado.

Como bien dices, estaría bien saber como aplicar el comando embedFonts. A ver si Roger nos da una pista.

 

Hasta pronto, Emilia

 

[roger]

Hola,
Estaba esperando a introducir la funcion textFormat que es necesaria para determinar la fuente. Pero os dejo ya un link para los que queráis ir avanzando.
http://livedocs.adobe.com/flash/9.0_es/main/wwhelp/wwhimpl/common/h...

[Emilia Alcaraz Delgado]

Roger,

 

Muchas gracias. Ya le daré un vistazo.

 

Emilia