El alumno a aprenderá a importar gráficos e imágenes para utilizarlas en la creación de animaciones en Flash.
El alumno aprenderá a establecer diferencias entre los gráficos vectoriales y las imágenes de bitmap para optimizar recursos gráficos en base a las exigencias de la animación a crear.
El alumno aprenderá a usar los ficheros de importación mas habituales que pueden utilizarse en el programa Flash.
El alumno aprenderá a trazar imágenes de bitmap para su conversión en elementos vectoriales editables en el entorno Flash.
El alumno aprenderá a editar las propiedades de las imágenes de mapa de bits y aplicar efectos específicos sobre la imagen como son el control de la compresión, relleno de objetos con imágenes de mapa de bits, etc…
Los bitmaps son gráficos de gran tamaño, constituidos a base de pixeles y que conforman un conjunto inseparable. El número de pixeles determina su resolución la cual es fija y no varia con el tamaño. Esta particularidad provoca distorsiones si se reduce y aspecto dentado si se amplia.
En cambio, un gráfico vectorial es un archivo de tamaño reducido formado por líneas, curvas y otros objetos independientes que se pueden seleccionar y editar por separado. Además sus particulares características permiten su almacenamiento en una computadora en forma de ecuaciones matemáticas que luego permitirán redibujar la imagen en la pantalla.
Las ventajas fundamentales que ofrecen los gráficos vectoriales frente a los bitmaps son por un lado el reducido tamaño del archivo que facilita una descarga rápida a través de Internet y por otro que la imagen puede escalarse a cualquier tamaño sin afectar a la calidad de la misma.
Esta claro, que si nosotros pretendemos realizar una animación de alto impacto en Web o incluso el diseño de una página Web interactiva el tiempo de descarga de la misma va ha ser un parámetro determinante de nuestro éxito. Con esto no se pretende decir que no se utilicen Bitmaps en las mismas, si no que cuando se decida su utilización en todo momento se sea consciente de lo que realmente se hace. Generalmente, cuando una película Flash se descarga o ejecuta con lentitud se debe a la importación de gráficos innecesarios.
El método de importación es de lo más sencillo, basta seleccionar la opción [Archivo > Importar] para acceder a un cuadro dialogo como el mostrado en la Fig.7.1 que nos permitirá realizar una exploración y seleccionar el archivo deseado de entre los formatos compatibles con Flash. Estos los podremos ver listados en la pestaña que nos da acceso a la lista desplegable, donde aparecen los archivos aceptados. Más adelante ya entraremos en detalles sobre cuales de ellos son los más adecuados.
 |
Flash permite importar imágenes a través del portapapeles mediante las ordenes Copiar y Pegar, aunque no es una práctica muy recomendable si no se trata de gráficos extremadamente simples. Los bitmaps importados con este método, pueden presentar problemas a la hora de trazarlos (vectorizarlos) o utilizarlos como relleno.
Esta es una de las mayores utilidades que presenta Flash, el poder importar los gráficos y elementos pertenecientes a otras bibliotecas, bien sean bibliotecas comunes como las que incluye Flash [Ventana > Bibliotecas comunes] o bien sean las correspondientes a otras películas. Para ello utilizaremos la opción [Archivo > Abrir como biblioteca] y seleccionaremos el archivo Flash cuya biblioteca deseemos importar.
Con todas estas facilidades, nos resultará fácil ir confeccionado nuestras propias bibliotecas mediante la recopilación de gráfico y elementos ya creados y que seguramente agilizarán nuestro trabajo en futuros proyectos.
Siempre se podrá importar un gráfico vectorial, a menos que sea demasiado complejo y siempre que se encuentre entre los formatos compatibles. Deberemos tener presente en este tipo de importación que si pretendemos posteriormente editar el gráfico vectorial importado deberemos desaguparlo para que el dibujo se divida en grupos individuales, opción [Modificar > Desagrupar]. Y si además queremos realizar una edición total de cada uno de estos grupos, después de seleccionarlos deberemos aplicarles la orden [Modifica > Separar].
En la figura que se muestra a continuación podemos observar una tabla con todos los archivos que se pueden importar con Flash sin tener en cuenta si esta instalado el Quick Time 4 o posterior.
 |
 |
Es el formato vectorial más aconsejable para importar gráficos a Flash, ya que es capaz de conservar la información de capas, textos, símbolos, etc. Deberemos tratar con versiones 7 o posteriores y aún así seguir unas ciertas recomendaciones a la hora de diseñar en FreeHand para conseguir los mejores resultados tras la importación.
- Aprovechar símbolos de FreeHand que se traducirán directamente a Flash.
- Crear cada uno de los objetos en capas separadas.
- El número máximo de colores de degradado admitidos será 8.
- Las líneas terminadas con bordes rectos se importarán con bordes redondeados.
Muchos de los efectos de texto presentaran variaciones tras la importación.
Es posible importar archivos como imágenes alisadas o como imágenes con objetos independientes, en el primer caso todo el archivo será convertido a puntos, mientras que en el segundo se conservará la información vectorial (recomendable) y podrá editar los objetos individualmente.
Seleccionaremos para la importación el tipo de archivo PNG. Tras la selección del archivo se nos abrirá un cuadro dialogo donde podremos seleccionar las opciones que más nos convengan.
Es adecuado para intercambiar dibujos entre Flash y otras aplicaciones. La mejor manera de exportar un gráfico vectorial editable en Flash bajo un archivo del tipo (.ai), aunque es el peor de todos los archivos soportados por Flash.
Al importar, deberemos desagrupar todos los objetos de todas las capas para poder ser manipulados como cualquier otro objeto de Flash.
Dado que este formato no soporta los rellenos, será adecuado para los dibujos lineales de piezas mecánicas, planos de arquitectura, etc. Tampoco soporta el sistema estándar de fuentes y se requiere trabajar con la versión 10 de AutoCAD
Tal y como se comentó al principio de este tema deberemos asegurarnos de necesitar realmente este tipo de gráficos debido a su enorme tamaño, aunque esta claro que en determinados casos como fotografías, imágenes de efectos especiales o secuencias del cine es inevitable.
Los formatos soportados en Mapa de Bits son gif, jpg, png, bmp y pct, utilizando únicamente en la película exportada los formatos jpg, gif o png.
Cuando importamos una imagen bitmap y la colocamos en el escenario, automáticamente se crea una copia de la misma en la biblioteca, que seguirá existiendo aunque eliminemos la imagen del escenario. Su icono identificativo esta representado por un árbol a la izquierda del nombre.
Tanto si la imagen importada es un bitmap independiente o un conjunto de bitmaps que constituyen una animación fotograma a fotograma, como en el caso de los GIF’s animados, estas aparecen dentro de un marco rectangular de color gris y no las podemos editar del mismo modo en que se editaban los gráficos vectoriales. La Fig. 7.4 muestra el resultado de importar una imagen GIF de 4 fotogramas. Estos aparecen ubicados tanto en la línea de tiempo como en la biblioteca.
 |
Para poder editar un bitmap en primer lugar deberemos “Separarlo” para que se rompa en varias zonas editables, elegiremos la opción [Modificar > Separar]. Pese a estar separado, el bitmap continua incluido en un rectángulo invisible, la cual cosa no nos va a permitir editarlo como acostumbrábamos a hacer con el resto de objetos de Flash.
Así pues, para realizar ediciones simple sobre un bitmap importado deberemos emplear el modificador Varita Mágica de la herramienta Lazo.
Editar una zona del bitmap se resumirá en hacer “clic” con el modificador Varita mágica sobre un determinado pixel. En ese momento se seleccionarán todos los que estén a su alrededor con su mismo color o con un color perteneciente al margen de tolerancia. El umbral de tolerancia lo elegiremos en la ventana de configuración de la Varita y nos permitirá determinar “cuan diferentes” pueden ser los pixeles de alrededor respecto del seleccionado para ser incluidos también en la selección. A menor Umbral, menor diferencia permitida, afinamos más en la selección pero también seleccionamos menor número de pixeles.
Tras realizar estos pasos los elementos seleccionados se habrán convertido en objetos vectoriales editables y por tanto podremos actuar sobre ellos con los métodos que ya conocemos.
 |
 |
Es interesante cuando se han creado bitmaps en otro programa con el objetivo de constituir fotogramas diferentes en la película. El único requisito para poder realizar esta importación es que los nombres de las imágenes deben ser los mismos, pero terminados con un número secuencial que defina su orden.
Elegido el primer elemento de la secuencia para la importación, Flash pregunta automáticamente si deseamos importar toda la secuencia. El resultado será cada una de estas imágenes conformando un Fotograma Clave de la película
A lo largo de los anteriores capítulos ya hemos ido comentando que el inconveniente principal que presentan los bitmap, se manifiesta sobre todo a la hora de cargar archivos Flash desde Internet, ya que debido a su gran tamaño provocará tiempos de carga largos, pudiendo incluso el usuario llegar a abortar la carga de su WEB antes de verla.
Una posible solución, aunque no del todo viable, puesto que perderíamos mucha definición en las imágenes detalladas, sería convertir los bitmaps a vectores. A esta operación se la denomina “trazar el bitmap” o vectorizar. De todos modos esta es la única solución que se puede emplear frente a los bitmaps, otra más radical sería simplemente no usarlos. A nivel personal, se recomienda un termino medio en su uso, es decir, usarlos con conocimiento o cuando sea estrictamente necesario.
Cuando convertimos los bitmaps a vectores y asumiendo esa perdida de definición lo que conseguimos es tener esa misma imagen con un tamaño mucho más pequeño y cuyos elementos pueden seleccionarse por separado y editarse de forma individual.
 |
A continuación se explicarán los pasos que deberemos seguir para vectorizar o trazar un bitmap.
Fig.7.7 Opciones de configuración para vectorizar bitmaps |
- Establecerá la diferencia que tendrá que haber entre dos colores parecidos, para que Flash los considere como objetos individuales
- En función de este nivel, estableceremos lo cerca que deberán estar los colores para considerarlos uno solo. Es decir, los colores cuyos niveles RGB difieran menos de lo que marca el umbral se considerarán como un único elemento.
- En imágenes detalladas, este número deberá ser bajo a menos que se desee conseguir un efecto mosaico.
 |
Determinará la cantidad de pixeles vecinos que quedarán incluidos en el calculo del color (cuanto de pequeña puede ser la forma vectorial).
Cuanto menor sea este número más definida quedará la imagen, pero también será mayor el tamaño del archivo generado
Cómo de suaves deberán de ser los contornos.
La opción Pixeles tendrá de efecto de un lápiz muy fino dibujando múltiples trazos.
La opción Muy suave tendrá un efecto similar a una pluma gruesa que trata de dibujar una forma con un solo movimiento.
Anteriormente, hemos visto que cuando importábamos un bitmap, esta pasaba automáticamente a formar parte de la biblioteca, y que pese a eliminarlo del escenario seguía persistiendo en la biblioteca. Pues bien, esta necesidad de conservarlo en la biblioteca es la que nos va a permitir especificar como deberá exportarse a la hora de crear la película.
Para actuar sobre el bitmap importado según nos convenga, deberemos seleccionarlo en la biblioteca y acceder al menú [Opciones > Propiedades] o bien, hacer “doble clic” o pulsar el icono representado por una ( i ) de información. El resultado podemos apreciarlo en la Fig.7.9.
 |
Todos los cambios que realicemos sobre el bitmap y que luego activemos con el botón Probar de la ventana de propiedades, podremos verlos reflejados en la pequeña ventana de previsualización de la parte superior Izquierda. De igual modo se nos informará del grado de compresión obtenido.
- Si importamos archivos BMP o PCT, Flash utiliza la compresión JPEG de manera predeterminada. Esta es la compresión más eficiente.
- Por defecto, tendremos activada la casilla Usar datos de JPEG importado, lo cual indica que se debe mantener el nivel de compresión original cuando exportemos el archivo en formato JPEG comprimido.
- En caso de estar desactivada, nos aparecerá una casilla donde indicaremos el grado de compresión que va de 1 (poco comprimido y alta calidad) a 100 (muy comprimido y baja calidad).
- El método Sin perdida (PNG/GIF) comprimirá de manera que no se pierda ninguna información de la imagen. Esta opción será muy conveniente cuando realice una presentación que se ejecutara desde el propio disco duro en modo local debido a que los archivos que implica suelen ser bastante grandes. En cambio si pretende realizar una publicación WEB podrá usar este método con formas simple y no demasiados colores.
De todas formas la configuración global, donde nosotros estableceremos la calidad de la imagen, directamente vinculada a su compresión, la estableceremos a la hora de publicar la película.
Como resumen podemos decir que la ventana de propiedades de bitmap nos va a permitir controlar la compresión utilizada en imágenes importadas de una forma individual, es decir, sobre cada una de las imágenes importadas podremos aplicar los parámetros que más nos convengan.
Para finalizar y como último apunte diremos que el Botón Importar, podrá importar directamente y desde esta ventana (al igual que importamos desde el menú archivo) un nuevo bitmap ya directamente comprimido con los ajustes que se hayan seleccionado previamente. Este nuevo bitmap se almacenará en la biblioteca con el mismo nombre que tuviera el bitmap anterior.
|
A parte de todo lo que ya se ha comentado acerca de los bitmaps, una curiosa e interesante utilidad que podemos agradecer a trabajar con los mismos es la posibilidad de rellenar un objeto con una imagen bitmap previamente importada. Es decir, en vez de aplicar un relleno de color o un degradado a un objeto, utilizaremos una imagen bitmap como patrón de relleno. A continuación explicaremos los pasos necesarios para convertir un bitmap en patrón de relleno. 1.- Importemos el bitmap y elijamos la opción [Modificar > Separar] con lo que el programa a convertido el bitmap en un objeto especial que ha quedado totalmente seleccionado. 2.- Haciendo “clic” con la herramienta Cuentagotas sobre la imagen bitmap separada podremos decir que estamos tomando una muestra de la misma, con lo que los selectores de color de relleno mostrarán una pequeña imagen con la reproducción del bitmap. 3.- A partir de este momento, el bitmap ha quedado seleccionado como relleno, con la particularidad de conservar su tamaño original. Esto quiere decir, que cuando dibujemos una forma cerrada en Flash, se rellenará automáticamente con el contenido original del bitmap seleccionado con el cuentagotas. Si el objeto dibujado es más pequeño sólo veremos una porción del bitmap, pero si es mayor la imagen se repetirá en su interior. 4.- Por otro lado, todos los elementos que vayamos dibujando en el escenario después de dibujar el primero con el patrón bitmap de relleno terminarán de completar la imagen de fondo que otros dejaron a medias. El efecto es similar a bloquear el relleno para controlar los degradados. Quizá, la mejor manera de entender esto sea observar la >Fig.7.10 y luego practicar un poco con los conceptos. 
Fig.7.10 El bitmap separado y seleccionado con la herramienta cuentagotas va a actuar como un relleno bloqueado cuando dibujemos objetos en el escenario. 5.- Si ahora disminuimos el tamaño del elemento bitmap situado en el escenario y volvemos a tomar una muestra del mismo con la herramienta cuentagotas, el efecto logrado será un patrón de repetición que rellenará los objetos dibujados. Podemos apreciarlo en la Fig.7.11. 
Fig.7.11 Diferentes patrones de relleno en función del tamaño del bitmap seleccionado con la herramienta cuentagotas. 6.- Por otro lado en el panel relleno también podemos encontrar las diferentes muestras de los bitmaps importados que podrán ser empleados para conformar rellenos. 
Fig.7.12 Diferentes muestras de bitmaps que podrán ser utilizadas como relleno. |