guia 5 para 10 y 11

Adobe Flash. Taller Tutorial : USO DE LAS IMÁGENES DE MAPA DE BITS EN FLASH DOCENTE: AGUSTIN RAFAEL BERDUGO IGLESIAS

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.

http://4.bp.blogspot.com/_xlTS0E5SmHQ/S1EssRabkUI/AAAAAAAACak/Yop2Tf4l2yk/s400/20071025122840-gatito.jpg


Imagen 1

Una vez copiado la imagen ya la podemos pegar en el escenario de Flash.

Imagen 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.


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.


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


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.


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).


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


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.


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.


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.


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.


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.


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…


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.

guia 5 para 10 y 11

Education