Taller de Flash: Propiedades de texto

A diferencia de HTML y otros lenguajes donde las tipografías que se utilizan en el diseño web dependen directamente de las tipografías que estén instaladas en la PC del usuario, en Flash puedes utilizar cualquier fuente y esta es quizás una de las principales ventajas para los diseñadores.

Las fuentes Flash trabajan como si fueran un elemento vectorial (de hecho, lo son), por esto es que son escalables: puedes aumentar o disminuir su tamaño con la seguridad que se van a ver con una calidad excelente. También puedes realizar animaciones con fuentes. Sigue leyendo y conoce todo sobre el tratamiento de texto en Flash…

Nociones básicas de tratamiento de fuentes en Flash

En Flash no existe diferencia entre texto en caja y texto suelto, como sí sucede en Photoshop e Illustrator. Aquí siempre que utilizamos texto, Flash creará una caja contenedora. Inicialmente, si hacemos un clic con la herramienta de texto en el espacio de trabajo y comenzamos a escribir, el texto continuará linealmente (ejemplo 1). Si en vez de hacer clic, arrastramos el mouse generando una caja, el texto quedará contenido en los límites de esta caja (ejemplo 2). Las dimensiones de la caja se pueden editar, siempre utilizando la herramienta de texto.

En el ejemplo 1, el texto ha sido seleccionado normalmente (con la flecha negra). Esto me permite mover la caja de texto y agrandar o achicar el texto de la caja.Por otro lado, en el ejemplo 2 estamos trabajando con la herramienta de texto. Esto habilita la posibilidad de editar las dimensiones de la caja, sin cambiar el tamaño de la tipografía.

Cada vez que trabajes con la herramienta de texto, en el panel de propiedades aparecerán una serie de opciones, entre las más comunes están las de editar el formato del párrafo, estilos, tipografía, tamaño y color. Todas similares a las de un editor de texto común.

Pero también hay opciones propias de Adobe Flash. Veamos todas:

• Formato de texto (T): Esto lo veremos a continuación, pero básicamente puedes elegir entre texto estático (static text), texto dinámico (dynamic tex) y texto de entrada (input text).
• Tipografía, tamaño, color, estilo y párrafo (A): En la línea de arriba a la derecha verás opciones para cambiar la tipografía elegida, el tamaño de la fuente, el color, el estilo (negrita, cursiva) y la alineación del párrafo (izquierda, centrado, derecha o justificado).
• Párrafo (¶): Haciendo clic sobre el símbolo de párrafo puedes cambiar los valores para la sangría, el interlineado y los márgenes del texto.
• Dirección del texto: Al lado del símbolo de párrafo verás el símbolo Abcd, para editar la dirección del texto.
• Espaciado (A\V): Agranda o achica el espacio entre caracteres.
• Sub-texto (aª): Una opción para hacer subíndices y superíndices.
• Optimización: Al igual que otros programas de Adobe, Flash permite optimizar el texto con anti-alias especial para una mejor legibilidad, anti-alias para animaciones, bitmap o generar un anti-alias propio.
• Dimensiones de la caja: Debajo a la izquierda aparece la información de tamaño y posición de la caja de texto. Puedes editarlas directamente desde ahí.
• Enlaces: Bajo el signo del eslabón, podemos linkear un texto a un sitio web. Selecciona el texto a linkear y pega la URL en el espacio en blanco al lado del eslabón, tal como está en el gráfico.

En Flash hay tres formatos de texto, cada uno con una funcionalidad diferente. Para cambiar el formato de un texto debes tener seleccionada la herramienta de texto y elegir entre una de las opciones del cuadro T. Veamos para que sirve cada una:

Texto Estático

Es el texto que no requiere interactividad con el usuario. Puede ser el texto de un artículo, la presentación de una compañía, un título en una página web… En fin, es texto que se mira y no se toca.

En el gráfico podemos ver un sitio de ejemplo. Aquí se utilizó para la mayoría del texto el formato de Texto Estático (Static Text).

Cuando tengo Texto Estático, el Panel de Propiedades me muestra dos opciones extras:

1. Hacerlo seleccionable.
2. Linkearlo a una URL.

El Texto Estático siempre está dentro de una caja contenedora cuyas dimensiones dependen directamente de la cantidad de texto que haya. Esto es porque no tiene sentido agrandar una caja de texto que no contenga texto.

Haz clic aquí para ver el boceto de CuchiSushi con las opciones de texto.

Texto de Entrada

Este tipo de texto sirve para los casos en los que el usuario pueda ingresar texto al sistema. El ejemplo más común es un formulario de contacto, pero existen otras situaciones en las que podría ser interesante este tipo de interacción con la persona que visita tu sitio. En la imagen de arriba, dentro del formulario de consulta hay dos campos con Texto de Entrada: la consulta en sí misma y el espacio para escribir un e-mail.

En estos casos la caja contenedora de texto puede ser más grande que el texto que contiene. Aquí hay dos formas de crear una caja de texto: igual que en el texto estático o arrastrando con el cursor para crear una caja. De esta manera, puedes definir los límites del campo de escritura.

Pero cuando trabajas con Texto de Entrada (Input Text) aparecen nuevas opciones. Una de las opciones es especificar la cantidad máxima de caracteres que se puede escribir en nuestro campo de texto (en este caso 500).

También puedes definir un nombre de variable (Var) para trabajar luego con ActionScript (esto lo veremos próximamente en nuestra clase de formularios de contacto).

La opción a la izquierda de Var puede ser seleccionada en el caso que quieras mostrar un recuadro alrededor del campo de texto. A la izquierda, bajo el símbolo <> podrás renderizar el texto como HTML.

Pero lo más interesante está en el menú A. Aquí puedes elegir el formato de tu Texto de Entrada. Tienes 4 opciones: línea simple, multilínea, multilínea sin envoltura y contraseña. Los formatos no especifican la cantidad máxima de caracteres a escribir asi que debes aclararlo en el campo de Caracteres máximos.

1. El texto multilínea es un campo de texto donde la caja actúa como límite hacia los costados. Si el texto supera el ancho de la caja, continuarás escribiendo en una línea siguiente.
2. El campo en línea simple permite escribir texto en una única línea. Es muy útil en un formulario con varias opciones cortas como por ejemplo nombre, dirección, teléfono.
3. Texto multilínea sin envoltura. Esta caja de texto no tiene límites. A medida que vas escribiendo continúas en la misma línea hasta que das enter para pasar a la línea inferior.
4. El formato password permite escribir contraseñas y mostrarlas como asterísticos.

Haz clic aquí para ver el funcionamiento en línea.

Texto Dinámico

El Texto Dinámico (Dynamic Text) permite generar acciones interesantes con ActionScript. Además, se pueden enlazar a una URL, cosa que el Texto de Entrada no permite. Por otra parte, acepta los formatos de línea simple, multilínea y multilínea sin envoltura, tal como en el ejemplo anterior.

En el Texto Dinámico también se utiliza para incorporar información externa dentro de nuestro archivo SWF.

Haz clic aquí para descargar un ZIP los archivos FLA originales de esta clase (57 Kb)