Kitabı oku: «Aprender Flash CS5 con 100 ejercicios prácticos», sayfa 4
016Convertir imágenes en formas de Flash
LAS INSTANCIAS DE LOS MAPAS DE BITS no pueden ser editadas con las herramientas de dibujo de Flash, a menos que sean transformadas en formas. Existen dos métodos para convertir instancias de mapas de bits en objetos editables: convertirlas en gráficos vectoriales con áreas de color diferenciadas o separar la instancia.
IMPORTANTE
Si convierte una instancia de un mapa de bits en un gráfico vectorial, éste ya no aparecerá vinculado a la imagen importada. Esta última podrá ser eliminada del panel Biblioteca sin que el gráfico vectorial generado a partir de ella sufra alteración alguna.
1.Cambie el zoom a la opción ajustar a ventana y seleccione una de las instancias de imagen situadas en el documento en el ejercicio anterior.
2.Utilizaremos con esta instancia un método de conversión que nos dé como resultado un gráfico vectorial independiente que presente claramente el aspecto de un dibujo. Para ello, abra el menú Modificar, pulse sobre la opción Mapa de bits y haga clic sobre la opción Trazar mapa de bits.
El campo Área mínima establece el número de píxeles circundantes que deben ser considerados en la asignación de un color.
3.El cuadro de diálogo Trazar mapa de bits presenta una serie de parámetros modificables, en función del aspecto que queremos que presente el gráfico vectorial producto de la conversión. En el campo Umbral de color, introduzca el valor 80.
El valor del cuadro Umbral de color, que puede estar compren-dido entre 1 y 500, es el parámetro que utiliza el programa para comparar el color de dos píxeles.
4.En el campo Área mínima, inserte el valor 5 para que el programa asigne un mismo color a un mayor número de píxeles.
5.Haga clic en el botón de punta de flecha del campo Umbral de esquina, seleccione la opción Pocas esquinas.
6.El cuadro desplegable Ajustar curva sirve para indicar cómo deben ser los contornos del gráfico generado. Pulse el botón de flecha de este cuadro y seleccione la opción redondeado y pulse el botón Aceptar para dar inicio al proceso de conversión de la imagen.
El cuadro desplegable Ajustar curva sirve para indicar cómo deben ser los contornos del gráfico generado. Cuanto más suaves sean las curvas menos se ajustará el contorno del gráfico al de la imagen original. El cuadro desplegable Umbral de esquina permite determinar si se mantienen los bordes afilados de la imagen original o se suavizan.
7.Tras este proceso la instancia queda convertida en una forma de Flash. Al contener menor información, el gráfico vectorial generado presenta un tamaño menor, pero ha perdido gran parte de la definición del archivo original. Para observar mejor su aspecto, haga clic en la instancia de la imagen situada a su derecha.
8.La nueva conversión ha distorsionado la imagen y ha reducido el número de colores que presentaba. El nuevo gráfico vectorial queda desvinculado de la imagen que contiene la Biblioteca, y puede ser editado como un relleno creado con las herramientas de dibujo de Flash. Con la segunda instancia de la imagen, abra el menú Modificar y seleccione el comando Separar para convertir la instancia en un relleno.
El uso del comando Separar no es exclusivo de los mapas de bits, por lo que no se encuentra disponible en el submenú que contiene esta opción.
La opción Separar se ejecuta de inmediato y la imagen queda convertida en un relleno de Flash con la particularidad de que conserva aún el vínculo con la imagen de la que procede, el mapa de bits almacenado en la Biblioteca. Este vínculo permite que el relleno en que se ha convertido la instancia conserve los atributos de color de la imagen original.
IMPORTANTE
Para comprobar si una imagen se ha convertido en relleno y, por lo tanto, puede ser manipulada como tal, diríjase al panel Propiedades, concretamente a la sección Relleno y trazo.
017Suavizar y optimizar gráficos
UNA FORMA TRAZADA O SEPARADA de un mapa de bits pasa a ser considerada como un relleno por parte de Flash. El programa presenta una serie de opciones que facilitan el suavizado del contorno del relleno creado y la optimización de las curvas presentes en sus diferentes fragmentos, diferenciados por el color de los mismos.
IMPORTANTE
La aplicación del comando Suavizar bordes de relleno permite la creación de escenarios, fragmentos de relleno con contornos curvos diferenciados, a partir de una forma. Su uso en gráficos con muchos detalles puede aumentar el tamaño del archivo de un documento de Flash.
1.Con la segunda imagen seleccionada, la que, como recordará, convertimos en relleno, despliegue el menú Modificar, pulse sobre la opción Forma y seleccione el comando Suavizar bordes de relleno.
2.Automáticamente se visualiza el cuadro de diálogo del mismo nombre. En el campo Distancia, introduzca la cifra 20.
El campo Distancia, el primero de los parámetros definibles, indica la cantidad de píxeles a los que afectará la aplicación del suavizado.
3.El campo Número de escenarios controla la cantidad de curvas utilizadas para la aplicación del efecto. En este campo, inserte el valor 1.
Las opciones disponibles en el campo Dirección son idénticas a las que presenta el cuadro de diálogo Expandir relleno: Expandir y Hundir.
4.Se puede seleccionar la dirección en la que se aplicará el efecto. En este caso queremos que la forma seleccionada se expanda el número de píxeles indicados en el cuadro Distancia. Compruebe que la opción Expandir está seleccionada y pulse Aceptar.
5.La imagen se expande. Los nuevos píxeles conservan los atributos de color del mapa de bits original y las esquinas de la imagen se redondean. La aplicación de este modificador sobre formas con muchos detalles puede acarrear el aumento del tamaño del documento. Para subsanar este problema, Flash permite ajustar el número de curvas de las formas a fin de optimizarlas. Veamos qué sucede al intentar optimizar una imagen separada de un mapa de bits. Abra el menú Modificar, seleccione la opción Forma y, en el submenú desplegado, pulse sobre el comando Optimizar.
6.Esta acción nos conduce al cuadro de diálogo Optimizar curvas. La Intensidad de optimización puede definirse introduciendo el valor adecuado o deslizando el ratón pulsado en dicho campo. Introduzca el valor 70 y pulse el botón Aceptar.
7.Dado que en el cuadro de diálogo Optimizar curvas se hallaba marcada la opción Mostrar mensaje con totales, aparece una ventana de advertencia en la que se informa del grado de optimización que se va a aplicar. Haga clic también en Aceptar de este cuadro.
La optimización sólo se aplica a las esquinas de la forma y no altera el contenido del relleno, puesto que éste carece de curvas. Al seguir esta forma vinculada a los atributos de color del mapa de bits de la Biblioteca, su relleno se considera una forma unitaria.
Cuanto mayor es el valor de intensidad de optimización, más drástica es la eliminación de curvas sobrantes.
IMPORTANTE
Los tres primeros comandos del submenú Forma permiten mejorar el resultado de los dibujos en los que aparecen curvas. La opción Suavizado avanzado modera las curvas, reduciendo sus imperfecciones. La opción Enderezado avanzado efectúa una serie de pequeños ajustes a las líneas y las curvas ya dibujadas (no actúa sobre los segmentos rectos), de forma que las líneas resultantes proporcionan una sensación más estilizada. Finalmente, la opción Optimizar afina las líneas curvas y los contornos de relleno reduciendo el número de curvas utilizadas para definirlos.
018Introducir textos estáticos
FLASH DISPONE DE UNA HERRAMIENTA que permite incluir texto, cuyo contenido y apariencia pueden ser modificados durante su introducción o tras la misma. Al crear un texto nuevo, Flash emplea los atributos del texto predeterminados por el programa.
IMPORTANTE
Al crear un texto nuevo, Flash emplea los atributos del texto predeterminados por el programa. Para cambiar los atributos de fuente o párrafo del texto existente, es necesario seleccionarlo primero. Cuando hay texto seleccionado, los atributos se modifican mediante el panel Propiedades.
1.Empezaremos este ejercicio dibujando una figura para comprobar el comportamiento de los textos. Haga clic sobre la herramienta Rectángulo del panel Herramientas y trace esta figura en algún punto del documento.
2.Una letra T mayúscula identifica la herramienta Texto en el panel Herramientas. Active dicha herramienta y haga clic en el centro del rectángulo dibujado.
3.Automáticamente aparece una caja de texto con el correspondiente cursor de edición. Escriba directamente la palabra diseño y active la herramienta Selección para comprobar el aspecto.
4.La palabra introducida se muestra dentro de un marco rectangular azul, que representa la selección del bloque de texto que la contiene. Cada bloque de texto de un documento funciona de manera independiente y sus atributos pueden ser modificados desde el apartado Carácter del panel Propiedades. Pulse el botón de flecha del cuadro Familia y elija la fuente que usted prefiera.
Flash predetermina que los textos introducidos sean de tipo estático. El cuadro desplegable Tipo de texto, en la parte superior del panel Propiedades permite cambiar esta disposición.
5.El campo Estilo permite elegir a partir de un desplegable un atributo de texto, como negrita o cursiva. Despliegue el campo Estilo y elija la opción Bold Italic, por ejemplo.
6.Cada fuente presenta unos caracteres diferenciados, tanto en estilo como en tamaño. El tamaño de los textos, al igual que el grosor de los trazos, viene indicado en puntos (independientemente de las unidades de regla que presente el archivo). Haga clic en el campo Tamaño de fuente e introduzca el valor 16.
7.Para cambiar el color del texto, pulse sobre la muestra del cuadro Color y seleccione con un clic el color que prefiera de la paleta emergente.
8.Tenga en cuenta que los atributos seleccionados se aplicarán a todos los textos introducidos a partir de este momento. Active la herramienta Texto pulsando sobre ella en el panel Herramientas y haga clic en un punto fuera del rectángulo para crear un nuevo bloque de texto.
9.Escriba de nuevo la palabra diseño y active la herramienta Selección.
10.La palabra introducida presenta los atributos de fuente seleccionados para el bloque anterior. Para acabar este ejercicio, pulse en la punta de flecha del cuadro Color del texto y, en la paleta emergente, haga clic sobre la muestra de color negro de la primera columna.
IMPORTANTE
No es necesario seleccionar el bloque de texto para cambiar sus atributos. Durante la introducción del texto, como en todos los programas destinados a la edición de este tipo de elementos, es posible alterar las características del mismo.
019Utilizar el motor de texto TLF
TLF RESPONDE A LAS SIGLAS DE TEXT LAYOUT FRAMEWORK, el nuevo tipo de texto predeterminado en Flash CS5. Este tipo de texto permite editar textos y manipularlos como si trabajase con un programa de maquetación, de hecho es el mismo motor de texto utilizado por InDesign
1.Antes de empezar descargue el archivo Texto.fla y ábralo con Flash CS5
2.Verá que este archivo contiene un texto que utilizaremos para conocer el nuevo motor de texto. Si utiliza la herramienta Texto para editarlo deberá seleccionar la parte del texto que le interesa, por el contrario si utiliza la herramienta Selección los cambios se aplicarán a todo el texto. Seleccione el cuadro de texto con la herramienta Selección.
Por defecto los textos se alinean a la izquierda del bloque en el que se encuentran incluidos. El botón Alinear a la izquierda se muestra activo, por tanto, en el panel de propiedades.
3.Como ya conocemos las herramientas de grupo Carácter pasaremos a trabajar el párrafo. Despliegue el menú Párrafo y en la categoría Alinear seleccione la opción Centro.
4.Ahora veremos cómo se organiza el texto en el cuadro de texto. Despliegue el menú Contenedor y flujo y en la categoría Caracteres máx seleccione la última opción Justificar.
5.Observe que el texto ahora ocupa la totalidad de el cuadro. A continuación modificaremos los Efectos de color del texto. Despliegue dicho menú y en la categoría Estilo seleccione la opción Tinta.
6.Aumente el valor Tinta hasta el 50% utilizando el botón deslizante y modifique los valores de los colores Rojo, Verde y Azul hasta que consiga el tono más adecuado.
7.Por último modificaremos algunas de las características básicas del texto como la fuente, el tamaño y el color. Esta vez active la herramienta Texto y seleccione el texto completo.
8.Despliegue el menú Familia y seleccione la fuente que más le convenga.
9.A continuación aumente el tamaño del texto haciendo clic sobre el número 12 del campo Tamaño y, sin soltarlo, desplazando el ratón hacia la derecha. Suelte el botón cuando el texto haya adquirido un tamaño considerable y sobrepase un poco el tamaño del texto.
10.Fíjese que en la parte inferior del cuadro de texto aparece ahora una cuadro con una cruz roja. Este cuadro indica que el texto sobrepasa el cuadro. Solucionaremos este inconveniente en el próximo ejercicio. Ahora para acabar modifique el color del texto. Seleccione el cuadro de texto con la herramienta Selección.
11.Haga clic en el menú Color y de la paleta de colores que se despliega seleccione la que más le guste.
020Redimensionar y ubicar bloques de texto
FLASH SITÚA EN BLOQUES INDEPENDIENTES los diferentes textos estáticos de un documento, pero gracias al motor de texto TLF se puede dividir un texto en dos cuadros manteniendo la continuidad del texto. El programa, por defecto, adapta automáticamente las cajas de texto a su contenido y presenta el texto con una orientación horizontal.
IMPORTANTE
Es posible modificar la dirección de texto desde la el comando dirección de texto del panel Propiedades. Los textos horizontales siempre presentan un flujo de izquierda a derecha, y el selector que aparece en el bloque cuando está en modo de edición posibilita fijar una anchura determinada para el mismo. Los textos verticales, por su parte, pueden presentar un flujo de izquierda a derecha o en la dirección opuesta, y el selector de sus bloques permite fijar, esta vez, una altura determinada para los mismos.
1.Seleccione la herramienta Texto y haga clic sobre el indicador de texto desbordado.
2.Fíjese que tras haber hecho clic sobre ese dicho cuadro el puntero del ratón ha cambiado de aspecto. Se ha convertido en una flecha con un texto incrustado, lo cual significa que el texto que sobresale del cuadro anterior se insertará en un nuevo cuadro. Haga clic en algún punto vacío del documento y cree un nuevo cuadro de texto.
3.Fíjese en que efectivamente el texto restante ha pasado al siguiente cuadro. Puede ocurrir que en el nuevo cuadro vuelva a aparecer el indicador de cuadro desbordado. En ese caso cambiaremos la dimensión del nuevo cuadro. Seleccione la herramienta Selección y arrastré uno de los puntos de anclaje del cuadro de texto para aumentar su tamaño.
4.Suelte el ratón cuando el cuadro haya adquirido la dimensión adecuada. A continuación modificaremos la posición y orientación de este cuadro. Con la herramienta Selección seleccione el segundo cuadro y despliegue el panel Posición y tamaño.
5.Haga clic sobre el valor del campo X y sin soltar el botón desplace el ratón hacia izquierda y derecha hasta que el cuadro se sitúe en la posición mas conveniente.
6.Haga lo mismo con el campo Y.
7.Comprobemos ahora que efectivamente se trata de un texto enlazado, tal como indica la línea que conecta los dos cuadros. Seleccione la herramienta Texto y haga clic al inicio del texto del primer cuadro. En esa posición escriba unas palabras o una frase y compruebe como el texto se desplaza al siguiente cuadro.
8.Al ser el texto más largo ahora es probable que el segundo texto vuelva a mostrar un indicador de texto desbordado. Vuelva a aumentar el tamaño del cuadro utilizando la herramienta Selección.
9.Por último comprobaremos que a pesar de tratarse de un único texto el estilo de cada cuadro puede ser modificado independientemente. Con el segundo cuadro seleccionado despliegue el menú Carácter y despliegue el campo Color.
10.Observe que el color se ha aplicado únicamente sobre el texto de este segundo cuadro.
IMPORTANTE
Recuerde que en el cuadro de diálogo Preferencias del programa, concretamente en la categoría Texto, se puede establecer la orientación, el flujo y el ajuste aplicable a los bloques de texto vertical.
021Suavizar y separar texto
PARA REPRESENTAR LOS TEXTOS ESTÁTICOS contenidos en un documento, Flash crea contornos a los caracteres. Estos contornos son utilizados durante la reproducción del archivo, una vez éste ha sido exportado o publicado.
IMPORTANTE
Sólo en el texto horizontal estático, el usuario puede utilizar fuentes especiales denominadas fuentes de dispositivo. De este modo, el reproductor de Flash, Flash Player, utilizará la información de fuente de los sistemas de los usuarios que reproduzcan el archivo, obviando por tanto los contornos.
1.En este ejercicio, conoceremos el modo de asegurar la correcta visualización de los textos estáticos durante la reproducción de los archivos de Flash. Para ello utilizaremos un nuevo texto menos extenso. Cree un nuevo rectángulo y con la herramienta Texto escriba su nombre. A continuación con la herramienta Selección haga clic sobre su nombre.
Es posible asignar una fuente a un texto tanto desde el cuadro Fuente del panel Propiedades como desde la opción Fuente del menú Texto.
2.Despliegue el menú Texto, seleccione la opción Fuente y pulse sobre la opción Algerian. (Si no dispone de esta fuente, elija cualquier otra.)
3.Debe tener en cuenta que en función de la fuente seleccionada y el tamaño del texto es posible que éste no se visualice correctamente en el documento final, publicado o exportado, de Flash. Esto es debido a que el programa crea contornos en los textos estáticos y los utiliza para reproducir el archivo. Posibilita seleccionar fuentes de dispositivo, únicamente en el texto horizontal estático, como alternativa a la exportación de información de contorno de fuente. Despliegue de nuevo el menú Texto, pulse sobre la opción Fuente y seleccione la opción _sans.
Si el listado de fuentes no se muestra al completo, para acceder a las opciones ocultas del submenú que aparece se debe pulsar el botón de flecha de la parte inferior del mismo.
Gracias a las fuentes de dispositivo, Flash Player, el reproductor de los archivos exportados o publicados, utiliza la fuente disponible en el equipo local más parecida a la fuente de dispositivo seleccionada.
4.Los textos con tamaños pequeños (por debajo de los 10 puntos) que utilicen las fuentes de dispositivo pueden ser más nítidos y legibles que los que presentan contornos de fuente exportados. El panel Propiedades permite asignar de modo directo una fuente de dispositivo a los bloques de texto seleccionados.
Como la información de la fuente de dispositivo no está incluida en el documento, la utilización de este tipo de fuentes reduce el tamaño del archivo final.
5.Abra el menú Modificar y seleccione con un clic la opción Separar.
6.Automáticamente el programa genera un bloque de texto independiente para cada una de las letras que componían la palabra. Haga clic sobre una de las letras de su nombre
7.Cada nuevo bloque de texto puede ser ahora editado independientemente. En el panel Herramientas, pulse sobre el icono de la herramienta Selección, despliegue el menú Modificar y pulse sobre la opción Separar para transformar en una forma independiente el carácter seleccionado.
8.A partir de este momento, esta letra pasa a ser considerada por el programa como un relleno independiente, que puede ser editado con las herramientas de dibujo de Flash destinadas a tal efecto. Pulse en la punta de flecha del cuadro Color del relleno del panel Propiedades y seleccione con un clic la muestra de color que desee de la paleta emergente.
IMPORTANTE
En lugar de separar los caracteres de un texto para corregir los problemas de visualización de las fuentes, también se puede optar por acudir a las opciones del submenú Modo de vista previa del menú Ver y seleccionar la opción Suavizar texto. Esta opción facilita la lectura de los textos más pequeños, ya que alinea los contornos de texto con los límites de los píxeles.
Ücretsiz ön izlemeyi tamamladınız.