Manual de Flash CS5

Edición de imágenes
Introducción

Además de la creación de imágenes propias utilizando las herramientas de dibujo que hemos conocido en el apartado anterior del libro, Flash CS5 también permite importar imágenes creadas en otras aplicaciones. Como también sabe, las imágenes pueden tener formato vectorial o bien de mapa de bits y habitualmente, cuando trabajamos con fotografías, se trata de mapas de bits.

En las lecciones de esta sección aprenderemos a importar imágenes creadas con distintos programas. En primer lugar veremos qué ocurre al importar imágenes de mapas de bits. Como ya sabe, cuando un documento cuenta con un mapa de bits importado, su tamaño aumenta considerablemente. Para solucionar este inconveniente, en las próximas lecciones también aprenderemos a comprimir las imágenes importadas para que el tamaño del documento final sea menor.

Una vez importados y colocados los mapas de bits en nuestro documento aprenderemos a transformarlas en formas de Flash para que el programa pueda modificarlas utilizando las herramientas de dibujo que ya conoce desde el capítulo anterior. La conversión de imágenes en formas de flash modificará el formato de la imagen haciéndolo pasar de mapa de bits a imagen vectorial.

Una vez transformadas las imágenes, es decir, una forma trazada o separada de una mapa de bits pasa a considerarse como un relleno en Flash. Hay varias opciones y modificaciones que se le pueden aplicar a estos rellenos, pero en esta ocasión, en la lección Suavizar y optimizar gráficos veremos las opciones que nos ofreces las herramientas del mismo nombre.

Debido a la, cada vez mayor, integración de programas de la suite Adobe, resulta más fácil el uso de un mismo archivo con varios de los programas de la suite. La interacción entre los distintos programas y la aplicación de las herramientas concretas de cada uno resultan en productos totalmente profesionales. En las últimas lecciones de este apartado aprenderemos a importar archivos desde Photoshop e Illustrator.

Lección 21. Importar mapas de bits

Flash CSd permite importar imágenes creadas en otras aplicaciones. Los mapas de bits (en una gran variedad de formatos de archivo) se importan como objetos individuales de la capa activa y quedan automáticamente almacenados en la Biblioteca del documento. Puesto que importar un mapa de bits aumenta el tamaño del archivo de Flash en el que se incluye, es recomendable comprimir las imágenes importadas. Flash predetermina el formato de compresión JPEG para ellas. El cuadro de diálogo Propiedades de mapa de bits, accesible desde la propia Biblioteca, muestra la información del archivo de imagen de origen y posibilita el ajuste de una serie de parámetros relacionados con la resolución de este tipo de gráficos. Una imagen contenida en la Biblioteca se puede situar en el área de trabajo tantas veces como se crea conveniente. Cada una de las copias, conocidas como instancias, funciona de forma independiente. El panel Propiedades, por su parte, habilita entre otras posibilidades para la edición de los mapas de bits seleccionados, la apertura del archivo de imagen en el programa predefinido por el sistema para su edición. De este modo, los ajustes que se realicen en el editor de imágenes correspondiente se verán automáticamente reflejados en la imagen contenida en el documento de Flash.

1 Para la realización de las próximas prácticas utilizaremos los documentos, 04_Imágenes, 05_Texto y Foto_flor.jpg, que puede descargar desde la zona de descarga de nuestra web. Una vez haya copiado estos archivos en la carpeta Documentos de su equipo, despliegue el menú Archivo y pulse sobre la opción Abrir. (1)

2 Localice y abra la carpeta Documentos, seleccione el documento 04_Imágenes y, manteniendo presionada la tecla Mayúsculas, pulse también sobre el documento 05_Texto para añadirlo en este ejercicio a la selección. (2)

3 Pulse el botón Abrir para proceder a la apertura conjunta de los dos archivos seleccionados.

4 El documento activo, 04_Imágenes, nos servirá para conocer el modo de incorporar archivos de imagen a las películas de Flash. Primero, como en ocasiones anteriores, cambiaremos el modo de visualización de este documento. Despliegue el cuadro de control de zoom de la Barra de edición y seleccione la opción Ajustar a ventana. (3)

5 El documento presenta de nuevo una serie de marcas para facilitar la ejecución de la práctica. Entre las aspas numeradas dibujaremos una forma de Flash. Haga clic en la punta de flecha de la herramienta PolyStar, la novena del panel Herramientas, y seleccione la herramienta Rectángulo. (4)

6 Haga clic en la marca número 1 y arrastre hasta la marca número 2, punto en el que debe liberar el botón del ratón, para obtener un rectángulo. (5)

7 La figura dibujada, que presenta los atributos configurados para la herramienta Rectángulo en lecciones anteriores, nos servirá para comparar las características de edición de las formas de Flash con las de las imágenes generadas con otros programas. En este caso, importaremos un mapa de bits de formato comprimido. Abra el menú Archivo y seleccione la opción Importar. (6)

El submenú Importar muestra las diferentes opciones de importación ofrecidas por el programa.

8 Se despliega un submenú con las diferentes opciones de importación ofrecidas por el programa. Observe que la segunda de ellas hace referencia a un elemento llamado Biblioteca. Éste es uno de los paneles más importantes de la aplicación. Entre otras funciones, que en lecciones posteriores conoceremos, el panel Biblioteca es el encargado de almacenar todos los elementos externos que contienen las películas. Seleccione la opción Importar a escenario. (7)

9 Esta acción nos conduce al cuadro de diálogo Importar, de idéntico funcionamiento que el cuadro Abrir que ya conocemos. Pese a estar situados en la misma carpeta en la que abrimos las películas de Flash, en el cuadro central de la ventana sólo se muestran los archivos importables, no los documentos propios de la aplicación. Para proceder a la importación de la imagen Foto_flor, haga doble clic sobre su icono.

10 La imagen importada se visualiza en el centro del Escenario y sus principales características se muestran ya en el panel Propiedades. Efectivamente, el programa identifica el objeto como un mapa de bits, y no aparecen las opciones correspondientes al trazo y relleno, puesto que estos atributos son propios de las formas de Flash pero no de las imágenes con formato de mapa de bits. En su lugar se muestran un par de botones. El primero de ellos, Editar, abre la imagen dentro de la aplicación predeterminada en nuestro sistema para la manipulación de este tipo de archivos. Por su parte, el botón Intercambiar posibilita permutar una imagen del Escenario por otra de las contenidas en la Biblioteca del documento en uso. Los cuadros que sí aparecen activos son los que determinan la posición y el tamaño de la imagen en el Escenario. Para redimensionar la foto, haga clic sobre el valor del campo AN del panel de propiedades, introduzca el valor 200 y pulse la tecla Retorno. (8)

11 Haga clic sobre el valor del campo H, inserte también el valor 200 y pulse la tecla Retorno. (9)

12 Al no haber respetado las proporciones originales de la imagen, ésta se distorsiona. Además, ahora la foto oculta casi por completo la forma dibujada al inicio de la lección. Sabemos que si en lugar de un mapa de bits fuese una nueva forma, tras la reubicación de la misma desaparecería el dibujo situado bajo su relleno. Comprobemos qué pasa con los mapas de bits. Active en el panel Herramientas la herramienta Selección y, para eliminarla, pulse la tecla Suprimir.

13 El rectángulo sigue en el documento. Las imágenes importadas, a diferencia de las formas de Flash, funcionan como objetos independientes. Podría parecer que la eliminación de la imagen del Escenario comporta su desaparición en el archivo, pero no es así. Comentábamos en el momento de importarla que la imagen quedaría almacenada en la Biblioteca del documento. Ha llegado el momento de conocer este importante panel. Haga clic sobre la pestaña Biblioteca, a la derecha de la pestaña del panel Propiedades, y pulse sobre el nombre de la imagen Foto_flor.

14 En la parte superior del panel se actualiza una vista previa de la imagen seleccionada. Haga doble clic sobre la imagen que aparece en la vista previa del panel Biblioteca.

15 Se abre el cuadro de diálogo Propiedades de mapa de bits que muestra información acerca de la importación, las dimensiones reales de la imagen y su resolución. Como ya hemos dicho en alguna ocasión, cuanto mayores sean las dimensiones y resolución de una imagen importada mayor serán el tamaño de la película que la contenga. Este cuadro presenta también una serie de opciones para mejorar la relación entre el tamaño y la calidad de la imagen: la opción Permitir suavizado delimita que los bordes de la imagen queden emparejados. Haga clic sobre la casilla de verificación de dicha opción para activarla. (10)

16 Flash comprime automáticamente los mapas de bits importados, a fin de disminuir su tamaño. El cuadro desplegable Compresión determina el modo de reducción de la información de color de la imagen. Pulse el botón de flecha del cuadro Compresión para ver las opciones que contiene.

17 Por defecto, Flash aplica el formato comprimido JPEG a todos los mapas de bits importados, independientemente de su extensión original. Este formato puede originar pérdidas en la calidad de las imágenes mostradas a una gran resolución. Para evitar este problema, el cuadro Compresión permite adaptar la imagen al formato PNG, que conserva las propiedades de color de la imagen original, sin compresión y, por tanto, sin merma. Esta opción sólo debe ser utilizada en casos en los que prime más la calidad de las imágenes que el tamaño final de la película, y está completamente desaconsejado para los archivos que tengan como destino final su visionado en Internet. Pulse nuevamente sobre el mismo botón de flecha para volver a plegar el panel de opciones.

18 Por último, la casilla de verificación que determina la calidad predefinida por Flash para la imagen sólo aparece si el formato de compresión seleccionado es JPEG. Pulse el botón Aceptar para cerrar el cuadro de diálogo Propiedades de mapa de bits.

19 Una vez contamos con una imagen importada en la Biblioteca podemos situarla en el Escenario tantas veces como queramos, sin que esto suponga un incremento en el tamaño del documento. En la capa bloqueada del documento hemos colocado unas marcas para encajar las instancias de la imagen. Haga clic sobre el nombre de la imagen en el panel Biblioteca y, sin soltar el botón del ratón, arrástrela hasta la marca a del documento.

20 La imagen, que se visualiza en el área de trabajo con sus dimensiones reales, se ubica en el lugar indicado. Para situar en el Escenario una copia de la imagen, haga clic sobre su nombre en la Biblioteca y arrástrela nuevamente hasta la marca b del documento.

21 Los mapas de bits situados en el Escenario son instancias de la imagen contenida en la Biblioteca. (11) Funcionan independientemente y, como tal, pueden ser editadas, sin que la modificación de las características o la eliminación de una de ellas afecte al resto de las copias. Por el contrario si se elimina la imagen de la Biblioteca, las instancias del Escenario pierden la referencia y por tanto dejan de mostrar la imagen. Para conseguir una tercera instancia de la imagen Foto_flor utilizaremos otro método: copiaremos una de las instancias que ya se encuentran en el área de trabajo. Despliegue el menú Edición y pulse sobre la opción Copiar. (12)

22 Seguidamente, despliegue el menú Edición y pulse sobre la opción Pegar en el centro.

23 La nueva instancia queda situada en el centro del Escenario. Para dar por acabado este ejercicio, pulse sobre la instancia recién pegada y, sin soltar el botón del ratón, arrástrela hasta la marca c, punto en el que puede liberarlo. (13)

24 Por último haga clic en el menú Archivo para desplegarlo y seleccione la opción Guardar.

Lección 22. Conversión de 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 de Flash. El primero de ellos, Trazar el mapa de bits, convierte las imágenes en gráficos vectoriales con áreas de color diferenciadas, que pueden editarse. Este comando, accesible desde las opciones de la Barra de menús, permite manipular la imagen como un gráfico vectorial; también resulta útil si desea reducir el tamaño de archivo. 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. Mediante los parámetros que presenta el cuadro Trazar mapa de bits puede ajustar las opciones de conversión destinadas a equilibrar la calidad y el tamaño del gráfico resultante. El segundo de los métodos consiste en separar la instancia. De este modo la imagen resultante es un relleno de Flash que mantiene vinculados sus atributos de color a los del mapa de bits alojado en la Biblioteca.

1 Anteriormente, dibujamos una forma y situamos tres instancias del mapa de bits Foto_flor en el Escenario. Las mencionadas instancias nos servirán en esta lección para conocer los diferentes modos de transformar un mapa de bits en un gráfico que pueda ser editado con las herramientas de dibujo de Flash, es decir, una forma. Seleccione con un clic la instancia de la imagen situada en la marca a del documento.

2 Utilizaremos con esta instancia un método de conversión que nos dé como resultado un gráfico vectorial independiente que se asemeje al máximo a la fotografía original. Para ello, debemos recurrir a la Barra de menús. Abra el menú Modificar y pulse sobre la opción Mapa de bits. (1)

3 Se despliega un submenú, la primera opción del cual se corresponde con la función del botón Intercambiar del panel de propiedades, comentada en la lección anterior. Pulse sobre la segunda opción del submenú desplegado: Trazar mapa de bits. (2)

4 Se abre el cuadro de diálogo Trazar mapa de bits que 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. Trataremos de que se ajuste al máximo a la imagen original. El valor del cuadro Umbral de color, que puede estar comprendido entre 1 y 500, es el parámetro que utiliza el programa para comparar el color de dos píxeles Si reducimos este valor el programa diferenciará los píxeles de colores semejantes; si lo aumentamos, los píxeles de tonalidad similar serán considerados iguales, disminuyendo el número de colores que presentará el gráfico vectorial. En el campo Umbral de color introduzca el valor 10.

5 El valor del siguiente cuadro de texto, Área mínima, establece el número de píxeles circundantes que deben ser considerados en la asignación de un color. Haga doble clic en el campo Área mínima e inserte el valor 1. (3)

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 para ver las opciones que contiene.

7 Cuanto más suaves sean las curvas menos se ajustará el contorno del gráfico al de la imagen original. Seleccione con un clic la opción Píxeles. (4)

El valor del cuadro Umbral de color, que puede estar comprendido entre 1 y 500, es el parámetro que utiliza el programa para comparar el color de dos píxeles.

8 Por último el cuadro desplegable Umbral de esquina permite determinar si se mantienen los bordes afilados de la imagen original o se suavizan. Haga clic en el botón de punta de flecha del campo Umbral de esquina y seleccione la opción Muchas esquinas. (5)

9 Ya están configurados los parámetros de modo que la imagen vectorial resultante se asemeje al máximo al mapa de bits original. Pulse el botón Aceptar para dar inicio al proceso de conversión de la imagen.

10 Tras este breve proceso, que varía en función de la cantidad de colores conservados, la instancia queda convertida en una forma de Flash. (6) Su aspecto es prácticamente el mismo que el que presentaba antes de la conversión, cuando era interpretada por el programa como un mapa de bits. Para observar mejor el aspecto del gráfico trazado, haga clic en la instancia de la imagen situada en la marca b del documento.

El campo Área mínima establece el número de píxeles circundantes que deben ser considerados en la asignación de un color.

11 Durante la realización de las prácticas del curso utilizaremos este documento para comparar el comportamiento de los diferentes objetos generados a partir de la imagen original, por lo que repetiremos el proceso para diferenciar mejor el modo en que la instancia ha sido convertida en una forma. Para ello desharemos la conversión anterior. Despliegue el menú Edición y pulse sobre la opción Deshacer Trazar mapa de bits. (7)

12 Repetiremos el proceso para trazar de nuevo el mapa de bits, pero esta vez seleccionaremos los valores apropiados para que el gráfico resultante presente claramente el aspecto de un dibujo. Abra el menú Modificar, pulse sobre Mapa de bits y, en el submenú, seleccione de nuevo la opción Trazar mapa de bits. (8)

13 En el campo Umbral de color, introduzca la cifra 80.

14 De este modo el programa obviará ciertos colores que presenta la imagen original. Haga doble clic en el campo Área mínima e introduzca el valor 5 para que el programa asigne un mismo color a un mayor número de píxeles.

15 Pulse el botón de flecha del cuadro Umbral de esquina para desplegarlo y seleccione la opción Pocas esquinas. (9)

16 Por último, Despliegue el cuadro Ajustar a curva y seleccione la opción Redondeado.

17 Con estas acciones conseguiremos que los contornos y bordes del gráfico resultante se diferencien de los de la imagen original. Pulse el botón Aceptar.

El cuadro deplegable Ajustar curva sirve para indicar cómo pueden 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.

18 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 el resultado de la conversión, haga clic sobre la instancia situada en la marca b del documento. (10)

19 Podemos comprobar cómo 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 Foto_flor practicaremos el otro método posible para transformar un mapa de bits en una imagen vectorial interpretable por Flash. Abra el menú Modificar.

20 El uso del comando que necesitamos emplear no es exclusivo de los mapas de bits, por lo que no se encuentra disponible en el submenú que contiene esta opción. Se puede separar otro tipo de objetos para que pasen a ser considerados formas por Flash, como veremos en próximas lecciones. Para convertir la instancia seleccionada en un relleno, seleccione el comando Separar con un clic de ratón.

21 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 Foto_flor 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. Si ahora eliminásemos la imagen de la Biblioteca el gráfico trazado seguiría presentando su aspecto actual, puesto que nada lo liga con la imagen original. En cambio, el relleno separado y la instancia que no ha sido modificada, la situada en la marca c del documento, quedarían sin contenido. Para finalizar este ejemplo práctico, pulse en cualquier zona libre del Escenario.