Textos

El texto en Flash

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML etc...
Actualmente Flash utiliza dos motores para trabajar con texto: el motor clásico, heredado de las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motor incluido en Flash CS5. Este último, es el utilizado por defecto en Flash.
Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor de texto TLF.

Insertar texto

En la barra de Herramientas encontramos la herramienta Texto , que es la que nos permitirá escribir texto en nuestros proyectos. 

 

Los caracteres del texto no está introducidos directamente en el documento, si no que están confinados en un contenedor de texto. En Flash podemos introducir dos tipos de contenedores:

• Texto de puntos.

El tamaño del contenedor depende del texto introducido, creciendo y decreciendo con él.

• Texto de área.

Podemos definir su tamaño, independientemente del texto que contenga.

Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y comenzar a escribir. En cambio, si queremos introducir un Texto de área, tenemos que hacer clic y arrastrar para definir el tamaño del área. En cualquier caso, siempre podemos convertir un Texto de puntos en área simplemente cambiando su tamaño, estirando de los controles de transformación que se muestran alrededor.

Propiedades de los textos

El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el panel muestra una gran cantidad de opciones, agrupadas en categorías.

Observarás que las imágenes anteriores muestran distintas opciones para el texto. Esto se debe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permite muchas más opciones. La de la derecha tiene establecido el motor Texto clásico, y aparecen menos opciones, las que veníamos encontrando en la anterior versión del programa.

Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y FlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores, deberás de emplear el motor clásico.
Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras más específicas las veremos más adelante, cuando vayamos a emplearlas:
Podemos elegir cómo se comporta el texto: Si es Seleccionable, y el usuario lo podrá seleccionar y copiar en el portapapeles, Sólo lectura, lo que impedirá que lo pueda seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.

Además, podemos establecer la orientación del texto, en Horizontal (por defecto) o Vertical.
Posición y Tamaño: Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte muy importante y deben respetarse.

En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina superior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superior izquierda de la escena. También se muestran los valores del ancho (AN) y alto (AL) del texto.
Carácter. En esta sección encontramos las opciones típicas del texto:
Familia: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseño.
Estilo: Nos permiten la combinación de los dos estilos de texto habituales: texto normal (Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).

Tamaño: El tamaño de la tipografía empelada.
Interlineado: Nos permite controlar la separación entre las líneas de texto dentro de un mismo párrafo.
Color: Como al resto de elementos, podemos dar color al texto.
Espaciado: Determina el espaciado adicional entre caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Ajuste automático: Activar esta casilla provoca que la separación entre caracteres se realice de modo automático.
Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro texto. Encontramos estas opciones:

• Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el equipo, lo que hace más liviano el archivo SWF al no tener que incluirlas. Aunque nos exponemos a que la fuente no esté instalada, por lo que se empleará otra. Sólo deberíamos de utilizar esta opción para las familias de fuentes más comunes.
• Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberíamos de incorporar la fuente, como veremos más adelante. No debemos de emplearla en textos animados.
• Suavizado para animación, es la mejor opción cuando pretendemos animar texto, ya que se obtienen animaciones más fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberíamos de incorporar la fuente.

Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para rotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superíndice y subíndice.

Carácter avanzado:
Vínculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés escribiendo en ese momento.
Destino: Determina si la URL a la que el texto hace referencia se cargará en la misma ventana del navegador, en una nueva ...

Además, en esta sección podemos especificar cómo se comporta el texto Por ejemplo, que se muestre en mayúsculas, los saltos, etc...

Cuestionario

1.  ¿Cómo trata Flash a cualquier texto y para qué?
2. ¿Cuales son los 3 tipos de texto que distingue Flash?
3.  Actualmente Flash utiliza  2 motores para trabajar con texto, ¿Cuáles son?
4. Dibuja el ícono del Texto.
5. En Flash podemos introducir dos tipos de contenedores, ¿Cuáles son y cuales son sus funciones?
6. Diga las formas de insertar Texto de puntos y texto de área.
7. ¿Qué motor de texto tiene más opciones y cuales son?
8. ¿Cuáles son las opciones típicas del texto en la seccion "Caracter"?
9. ¿Cuál es la mejor opcion de suavizado si pretendemos animar el texto?

El panel Color

El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten.
Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre el color que está junto al lápiz y si queremos modificar un relleno, haremos clic en el color que está junto al bote de pintura . Al hacerlo aparecerá un panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el estándar.

En vez de este selector rápido, podemos usar el panel Color, que encontraremos entre los paneles.

Así mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la herramienta Bote de Pintura).
Se pueden crear diferentes tipos de relleno:

• Sólido: Consiste en un relleno formado por un solo color.
• Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro
• Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular.
• Relleno de mapa de Bits: Permite colocar como relleno alguna imagen existente en la película (O ajena a ella si antes se "importa")

El panel Muestras

El Panel Muestras sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del panel Color). Una vez esté agregado el color, pasará a estar disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película.
Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película.

Cuestionario.

1.   ¿Para qué se usa el Panel Color?
2. ¿Qué hacemos para seleccionar un color determinado?
3. ¿Que hacemos si queremos modificar un borde o un relleno?
4. Dibuja el icono que abre el panel Color.
5. ¿Cuales son los tipos e relleno que se pueden crear?
6. ¿En que consiste el relleno "Sólido"?
7. ¿En que consiste el relleno "Degradado Lineal"?
8. ¿En que consiste el relleno "Degradado Radial"?
9. ¿En que consiste el relleno de mapa de bits?
10. ¿Para que sirve el Panel Muestras?

Ejercicio: Crear transparencias

1. Realiza una figura cualquiera, con relleno de cualquier color.
2. Selecciona el relleno del Rectángulo.
3. Haz clic sobre el color de relleno en la Barra de herramientas. Se mostrará el panel para cambiar el color.
4. En la parte superior del panel encontrarás el control de transparencia Alfa. Haz clic sobre él y arrastra hacia la izquierda hasta que el valor baje a 45% (por ejemplo).

Dibujar y colorear

El dibujo en Flash CS5

Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash).
No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en este ámbito es casi tan grande como la de éstos programas. Vamos a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido.

La barra de Herramientas. Herramientas básicas

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas más importantes:

• Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... Su uso adecuado puede ahorrarnos tiempo en el trabajo.
• Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente.
• Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.
• Herramienta de forma: Permite dibujar formas predefinidas como las que aparecen en la imagen, la última herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo:
• La herramienta Óvalo permite dibujar círculos o elipses de manera rápida y sencilla.
  
  
• Herramienta Lápiz: Es la primera herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
• Herramienta Pincel: Su funcionalidad es parecida a la del lápiz, pero por defecto su trazo es más grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar su herramientas.
• Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas.

La barra de Herramientas. Herramientas avanzadas

• Herramienta Lazo: Su función es complementaria a la de la herramienta Selección, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).
• Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones: . Esto es la herramienta Varita Mágica, tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este: para seleccionar Poligono.
• Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.
• Herramienta Subselección: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.
• Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)
• Herramienta Cuentagotas: Su misión es "capturar" colores para que posteriormente podamos utilizarlos. Para ver cómo funciona, consulta este videotutorial:

cuentagotas

La barra de Herramientas. Opciones

• Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente sino que además debemos hacer clic en la línea o en el objeto que has dibujado.

Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este:
Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensación de estar "unidos".
Suavizar: Convierte los trazos rectos en líneas menos rígidas.
Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos.

Ejercicio 1: Los Aros Olímpicos

Vamos a dibujar los aros olímpicos.
Como siempre, partiremos de un nuevo documento Action Script 3.0, a través del menú Archivo → Nuevo.

1. Seleccionamos la Herramienta Óvalo.
2. Trazamos un óvalo, y para que sea perfectamente circular, mantenemos pulsada la tecla Shift.
3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la herramienta Selección, copiarlos desde el menú Edición → Copiar y pegarlos desde el mismo menú.
4. Una vez estén dibujados, seleccionamos el relleno de cada óvalo y pulsamos la tecla Suprimir para eliminarlo. (Igualmente podíamos haber seleccionado el color "ninguno" y posteriormente creado los óvalos que hubieran aparecido sin color de fondo)
5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionándolo en el Panel Color.
6. Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona la Herramienta Selección, haz clic en el aro que quieras mover y arrástralo. Para movimientos precisos, puedes utilizar las teclas con flechas.

Ejercicio 2: Saturno

Vamos a dibujar un planeta parecido a Saturno

1. Seleccionamos la Herramienta Óvalo.
2. Creamos un óvalo circular, que hará de planeta.
3. Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla Suprimir.
4. Seleccionamos el relleno del óvalo y abrimos la opción Relleno.
5. Seleccionamos la opción Degradado Radial.
6. Pulsamos en y seleccionamos los colores que deseemos, (podemos añadir tantos colores como queramos y probar su efecto).
7. Dibujamos el anillo del planeta, por ejemplo creando otro óvalo con la forma adecuada. No lo dibujes sobre el planeta.
8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por ejemplo, borramos parte del planeta seleccionándola de forma rectangular y pulsando la tecla Suprimir tal y como vimos en el paso 3.
   
9. Separa los dos hemisferios del planeta.
10. Pon el anillo sobre el hemisferio inferior, y después, arrastra sobre el anillo la otra parte del planeta.

El entorno de Flash CS5

Flash CS5 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene la ventaja de que es casi idéntica a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por primera vez:

Ejercicio: Realiza un pantallaso(oprime la tecla Impr Pant) y pegalo en el escenario de Flash y crea la misma imagen que está en la parte de arriba. con un tipo de letra y color distinto al que se muestra.

La barra de Menús

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas...
Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.
Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.
Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas...
Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena ...).
Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad.
Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos.
Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película....
Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarñan a encontrar errores de progrmación en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar...
Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a todos los paneles y también la posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc.
Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...

Juego el gato