LAS IMÁGENES DE MAPA DE BITS EN FLASH. En este tutorial aprenderemos las técnicas básicas de tratamiento de imágenes con Flash. Es un tutorial básico pero obligatorio para poder seguir avanzando en el dominio de esta potente herrameinta. Para empezar diremos que podemos insertar en Flash los formtatos más frecuentes de imágenes: 1. JPG 2. PNG 3. GIF 4. BMP 5. WMF 6. SWF Los anteriores formatos se pueden dividir en dos tipos: 1. Imágenes de mapas de bits: JPG, PNG, GIF, BMP. 2. Imágenes vectoriales: WMF, SWF. Las imágenes de mapas de bits están compuestas a partir de la unión de pequeños puntos (píxeles) cada uno con un color determinado. Las imágenes vectoriales se componen de vectores creados por fórmulas matemáticas. Lo que se traduce en la posibilidad de escalarlas sin que se pierdan calidad. En cambio en las imágenes de mapa bits pasa lo contrario, si las escalamos veremos esos puntitos (pixels) muy grandes (cuadrados). Por esta razón decimos que la imagen se ve pixelada. Las imágenes que dibujamos en Flash son vectoriales y cuando se guardan se almacenan en un archivo con extensión swf. 1.- Copiar imágenes de mapa de bits a Flash. Vamos a crear un archivo nuevo en Flash y vamos a copiar una imagen de mapa de bits. Por ejemplo esta de un gatito. http://4.bp.blogspot.com/_xlts0e5smhq/s1essrabkui/aaaaaaaacak/yop2tf4l2yk/s400/20071025122840-gatito.jpg Una forma sencilla de copiar imágenes es pulsar el botón derecho del ratón cuando estemos sobre la imagen. Nos saldrá un menú y elegiremos la opción copiar. Genmagic.org Página 1
Imagen 1 Una vez copiado la imagen ya la podemos pegar en el escenario de Flash. Imagen 2 Genmagic.org Página 2
Otra forma es importar la imagen al escenario. Para ello utilizaremos el menú Archivo Importar a escenario. Esta opción es útil cuando tenemos la imagen en el disco duro o en un USB. Si al importar tenemos muchas imágenes numeradas como imagen1, imagen2, imagen, Flash lo detectará y nos preguntará si queremos importarlas todas a la vez. En este caso las colocará cada una en un fotograma distinto. Las cámaras fotográficas suelen guardar las imágenes numeradas. 2.- Operaciones con imágenes de mapa de bits. 2.1 Escalar. Primero hacemos clic en la imagen para seleccionarla. Vamos al menú Modificar Transformar Escalar. Imagen 4 Observamos que la imagen está encuadrada ahora por un rectángulo vacío. En los lados de este rectángulo encontramos unos cuadraditos que los llamaremos tiradores porque estirando de ellos la imagen se hace más grande. Pero ojo!. Si estriamos la imagen de cualquier tirador podemos deformarla haciéndola perder sus proporciones. Si queremos hacer más grande o más pequeña la imagen sin que pierda sus proporciones originales, antes de comenzar a estirar la imagen debemos tener pulsada la tecla mayúsculas (flecha). Manteniendo pulsada esta tecla ahora sí que podemos estirar o encoger la imagen. Genmagic.org Página 3
También podemos utilizar el menú de contexto para realizar este procedimiento y los siguientes. 2.2 Rotar. Imagen 5 Vamos al menú Modificar Transformar Rotar y sesgar. Seleccionamos un tirador y ya podemos girar la imagen. Si lo que queremos es que gire por la esquina opuesta mantendremos pulsada la tecla Alt. Si queremos que gire en incrementos de 45º mantendremos pulsada la tecla mayúsculas. Genmagic.org Página 4
2.3 Sesgar Imagen 6 Vamos al menú Modificar Transformar Rotar y sesgar. Situamos el puntero en el contorno pero no en los tiradores, y movemos el puntero manteniéndolo presionado. Como vemos la opción sesgar permite distorsionar un objeto inclinándolo a lo largo de uno o de ambos ejes. Esta opción resulta interesante para crear animaciones con efector parecidos al 3D. 2.4 Separar o romper una imagen La separación de un mapa de bits nos permite seleccionar y modificar por separado partes del área de una imagen ya que convierte los píxeles de la imagen en áreas diferenciadas que se pueden seleccionar y modificar por separado. Vamos a ilustrar este procedimiento con algunos ejemplos prácticos. Primero seleccionamos nuevamente la imagen y la vamos a separar. Lo haremos mediante el menú Modificar Separar o más rápidamente con Ctrl-B. Imagen 7 Genmagic.org Página 5
Debemos comprobar cómo la imagen sale punteada. Decimos ahora que la imagen está separada o que la hemos roto. Ahora ya podremos hacer más cosas con esta imagen como seleccionar partes, recortar áreas. Una de las primeras cosas que vamos hacer con la imagen separada es experimentar cambiándola de forma mediante el estiramiento de sus esquinas y de sus lados. Imagen 8 Vamos a comprobar cómo al acercar el puntero a cualquier lado de la imagen se visualizará a su lado un pequeño segmento curvo. Esto nos indica que podemos estirarla. Lo mismo pasará si nos acercamos a una de sus esquinas pero esta vez se visualizará un pequeño ángulo que nos indica qu podemos estirarla por ese punto (ver imagen 8). En la imagen 9 podemos ver algunos ejemplos de estos procedimientos. Genmagic.org Página 6
Imagen 9 2.5 Recortar y dividir imágenes con la herramienta selección. Una vez seleccionada la imagen, con la herramienta selección (flecha negra de la barra de herramientas) podemos seleccionar partes de la imagen como en la imagen 10. Una vez seleccionada la parte podemos separarla o borrarla con la tecla Supr. Imagen 10 2.6 Recortar imágenes en base a formas. También podemos dibujar formas encima de la imagen y recortarla según la imagen. Pero recordemos que la imagen debe estar separada siempre (Ctr-B). Genmagic.org Página 7
Imagen 11 En la imagen 11 hemos dibujado un círculo sobre la imagen. Ahora podemos seleccionar la paerte que queremos borrar. Si hacemos clic en el espacio exterior al círculo podremos borrarlo. Imagen 11 2.7 Recortar imágenes con la herramienta lazo. Con la herramienta lazo podemos recortar objetos para quitarles el fondo. Vamos a recortar el gatito para ubicarlo en un paisaje. Imagen 12 Genmagic.org Página 8
Antes de utilizar la herramienta lazo podemos utilizar la herramienta lupa para hacer un trabajo más preciso. Para utilizar el lazo vamos a ir recortando el contorno del gato. Si es la primera vez que usamos esta técnica seguramente nos costará. Es cuestión de práctica, y además mejoraremos nuestra psicomotricidad. Empezamos recortando y no soltaremos el botón del ratón hasta que no cerremos el final de la línea con el principìo. Una vez recortado suprimimos la superficie exterior al gato con la tecla Supr y ya tenemos al gatito solito. Ahora vamos a buscarle una casita vieja donde pueda vivir. Pero antes vamos a agrupar la imagen del gatito. Recordemos que esta imagen estaba separada. Para agruparla seleccionamos la imagen y con Ctr-G la tendremos agrupada. Imagen 13 Si la imagen del gatito no se ve, es posible que se nos haya quedado debajo. Para poder hacer que la imagen esté encima de la otra seleccionaremos la imagen de la casa y con la opción Modificar Organizar Enviar al fondo tendremos solucionado el problema. 2.8 Obtener y cambiar el color de un pixel. Si seleccionamos la imagen del gato y hacemos varias veces zoom con la herramienta lupa, observaremos los pixels de la imagen. En la imagen 14 hemos se puede observar la ampliación del ojo del gato. Comprobamos que los pixels son cuadrados. Esto es así porque la imagen es de tipo de mapa de bits. En las imágenes vectoriales no se ven pixels. La repetesentación de los colores en Flash viene dado por un código hexadecimal. Genmagic.org Página 9
Imagen 14 Para obtener este código hexadecimal utilizaremos la herramienta Color de relleno de la barra de herramientas. Moviendo el puntero del ratón sobre la imagen podremos obtener el código de color. Esto puede ser muy útil por varias razones. Una de las razones es poder identificar y utilizar ese color en concreto para usarlo en una página web, de fondo o en el propio Flash. Otra de las razones es que podemos utilizar ese color para rellenar otros objetos o dibujos. Para terminar este apartado vamos a cambiar el color de varios pixels del ojo del gato. Para ello simplemente podemos pintar con la herramienta Pincel seleccionando la forma de cuadrado que s encuentra en la parte inferior de la barrra de herramientas. Vamos a pintar algunos pixels de color rojo para que se aprecie más cuando quietemos el zoom. Imagen 15 Hemos pintado de rojo 4 pixels. Ahora seleccionamos la imagen y la volvemos a agrupar Ctrl-G. Y ya tememos la imagen modificada. Genmagic.org Página 10
2.9 Rellenar objetos con mapas de bits. Imagen 16 Las imágenes de mapas de bit nos pueden servir también para rellenar formas y nos dan mayor poder de creatividad. Esta es una forma de utilizar los dibujos y objetos vectoriales con las imágenes de mapa de bits. La herramienta que utilizaremos será el Cuentagotas que podemos encontrar en la barra de herramientas. Su función es capturar los bits de colores necesarios para después poder rellenar las formas que queramos. Para poder crear los rellenos de la imagen 16 primero tenemos que crear los objetos. Una vez dibujados seleccionamos la imagen de mapa de bits que queramos. La separamos (Ctr-B), si aún no lo está. El paso siguiente es escoger la herramienta Cuentagotas. Arrastrarla sobre el espacio que queramos de la imagen y hacer clic. Observaremos de inmediato que el puntero viene acompañado del icono de la herramienta de Relleno. Ahora ya podemos elegir una objeto de los que hemos dibujado en el escenario y hacer clic dentro. Si nos ha salido bien, el objeto debe tener de relleno partes de la imagen de bits que habíamos seleccionado. Podemos observar cómo, si el objeto a rellenar tiene mayor superficie que la imagen de mapa de bits, entonces esta imagen se repetirá dentro del objeto. Este es el caso en la imagen 16 en que corresponde a la flor. Genmagic.org Página 11
2.10 Conversión de mapas de bits a gráficos vectoriales. Flash también nos permite convertir una imagen de mapa de bits a una imagen vectorial. Vamos a crear un documento nuevo. Buscamos una imagen que nos guste y la pegamos en el escenario. Imagen 16 Una vez seleccionada la imagen elegimos la opción del menú Modificar Mapa debits Trazar mapa de bits. Imagen 17 Nos saldrá un cuadro de diálogo en el que se nos piden unos datos. Aquí lo más importante es entender el concepto de umbral de color. Genmagic.org Página 12
Para convertir una imagen de mapa de bits a vectorial Flash reduce los colores. Pero cómo lo hará? Al comparar el color de dos píxeles, si la diferencia en los valores RVA es inferior al umbral de color, se consideran iguales. Esto quiere decir que cuanto más grande sea el valor del umbral de color, disminuye el número de colores. Disminuye el peso de la imagen pero también la calidad. Se parecerá más a un dibujo que a una fotografía. Imagen 18 (imágenes vectoriales) Imagen 19 (imagen de mapa de bits) En la imagen 18 la figura del tigre de la derecha tiene un umbral de 150 y el de la izquierda de 100. Se aprecia la diferencia de calidad. Observemos también la diferencia entre la imagen de bits (imagen19) y la vectorial (figura izquierda de la imagen 18). Ha hábido pérdida de detalle en la imagen. Podríamos conseguir mucho más detalle en la imagen vectorial, pero entonces tendría tantos vectores que la imagen sería muy lenta al dibujarse en la pantalla. Genmagic.org Página 13
3.- Colocación y organización de las imagénes en el escenario. Si queremos trabajar con precisión en el escenario debemos conocer las siguientes herramientas: Reglas Cuadrícula Guías Ajustar objetos (icono imán de la barra de menú) Las tres primeras las podemos activar desde el menú Ver. Imagen 20 Gracias a estas herramientas no solamente vamos a poder situar bien los objetos sino que además podemos escalarlos de una forma más precisa. Una herramienta muy interesante es la guía. Imagen 21 La guía nos permite diferenciar zonas en el escenario para colocar por ejemplo botones, interfaces Genmagic.org Página 14
Para crear una guía sólo basta con hacer clic con el puntero en cualquiera de las reglas y arrastrarlas al escenario. Finalmente otra herramienta muy utilizada para colocar los objetos es la opción del menú Edición Pegar in situ. Esta opción tiene más sentido cuando trabajamos con fotogramas y queremos copiar una imagen y pegarla en otro fotograma pero con las mismas coordenadas que tenía. 4.- Obtención de las propiedades de una imagen Para obtener las propiedades de una imagen primero la seleccionaremos y activaremos la opción Propiedades del menú ventana. Imagen 22 Con el cuadro de propiedades podemos saber la dimensión de las imágenes y su ubicación en el escenario gracias a la información de las coordenadas. También podremos modificar estos parámetros con gran precisión. 5.- Ejercicio propuesto. Crear un fotomontaje creativo en el que se trabajen la mayor parte posible de conceptos y procedimientos estudiados en este tutorial. El fotomontaje debe implicar como mínimo el recorte de imágenes y su integración en otras. Genmagic.org Página 15