Por Alfredo Morgan
20 Diciembre de 2002
Ya
instruidos sobre las bondades, características y herramientas
de flash, en esta oportunidad conoceremos las características
de texto, imagen y movimientos.
Paso
a paso...
Como
es de suponer, lo primero que debemos hacer es definir el tema o
la finalidad de nuestro banner. Personalmente utilizaré un
motivo futbolero con letras en movimiento.
1.
Siguiendo las normas de diseño para los banners
clásicos, debemos modificar nuestro escenario a un tamaño
de 468x60 pixeles. Para esto vamos a propiedades (size) y ponemos
los números ya dichos en ancho y alto respectivamente. Cambié
el color blanco predeterminado para el fondo (background) por azul
(Figura 01).
2.
Una vez que tenemos la medidas y el motivo definidos, pondremos
un logo o imagen que de un atractivo visual al banner, luego -en
una capa distinta- elegiré el texto a desplegar, para comenzar
con las modificaciones.
Para que la imagen que queremos poner aparezca en nuestro escenario
tenemos que ir a “Importar a librería” (import
to library) y ahí elegir las imágenes. Tomamos la
decisión de usar la modalidad “importar a librería”
porque así podemos usar las imagen cuantas veces queramos,
realizándole modificaciones sin temor a perder la imagen
original o a tener que volver a importarla cada vez que nos equivocamos
(Fig 02).
3.
Ya con la imagen importada la arrastro hacia el escenario y la ajusto
a la posición que me interesa y al tamaño del banner.
Luego de nombrar la capa del símbolo con el nombre de "imagen"
creo una nueva capa (layer) para poner el texto. Una vez creada
la nombro como "texto" y bloqueo la capa de la imagen
para no cometer errores. El bloqueo se realiza haciendo click debajo
del dibujo del candado. Escribo el texto y en propiedades lo clasifico
como estático.
4.
Ya tenemos lista nuestra primera parte del banner en cuanto a imagen
y texto. Lo siguiente que podemos realizar es utilizar la herramienta
“Transformar” para ir dándole distintas formas
tanto a nuestras fotos como a los textos.
Al escribir nuestro texto este quedará como un sólo
bloque por lo que no podremos hacer mayores modificaciones. Para
resolver esto y poder cambiar o transformar colores, letras y/o
formas tendremos que ir a “Modificar” – “Separar”.
En este punto, eso sí, hay que tener ojo por que desde el
momento en que hacemos esto empezamos a trabajar las letras como
imagen y no como texto.
Usando
la línea de tiempo
Para
el trabajo en Flash existen dos tipos de animaciones: las interpoladas
y las "fotograma a fotograma". Mientras que las interpoladas
se definen como formas y rotaciones que serán creadas por
el software de manera automática, las animaciones “fotograma
por fotograma” son hechas paso a paso y “a mano”.
En nuestro caso realizaremos la animación en forma interpolada.
1.-
Si miramos la línea de tiempo, al lado de cada capa nos aparecerá
un cuadrado de color gris con un círculo negro en su interior,
lo cual significa que en nuestra animación sólo tenemos
un frame o cuadro. Ya que no pueden haber animaciones de un sólo
cuadro tendremos que determinar la longitud –en frames- de
la nuestra. Para esto agregaremos un frame clave en el número
de cuadros que estimemos necesarios para una correcta reproducción
de nuestro archivo.
En mi caso elegí que la longitud de la animación llegara
a las 40 fps o cuadros por segundo. Me ubico justo en el espacio
que está debajo del número cuarenta y en el menú
que aparece luego de apretar el boton derecho del mouse presiono
"Insert Frame" o Insertar cuadro. Una vez hecho esto podremos
ver que del número 1 al 40, los cuadrados cambian a un color
gris y no se ven cortados como el resto de la línea de tiempo.
(Fig. 03).
2.-
En cuanto al logo de mi banner decidí que este fuera girando
a medida que el texto aparece.
Me
dirijo hacia el frame número 1 para verificar que está
todo derecho y en la posición que inicialmente lo quiero.
Luego, ya que decidí que los movimientos serán con
espacios de a 10 cuadros, me dirijo al frame número 10 para
realizar el primer cambio de forma en la imagen.
Una vez en el cuadro diez aprieto el botón derecho del mouse
para que aparezca un menú de opciones, allí elijo
"Insert Key Frame" o Insertar fotograma clave. Me doy
cuenta que el espacio número diez ahora tiene una división
a su izquierda y un círculo negro en su interior.
Ahora, utilizando la herramienta Transformar, realizo el primer
cambio en la orientación de la imagen. Si revisamos los cuadros
del nueve hacia atrás veremos que la imagen se mantiene en
la posición original mientras que el diez está cambiado.
Si así es como lo estamos viendo, quiere decir que vamos
bien.
3.-
Ya que me funcionó lo de los fotogramas clave, repito
la tarea en los frames número 20, 30 y 40 con distintas posiciones.
No olvidarse de insertar fotogramas claves en cada una.
En este punto tengo las cuatro divisones y las cuatro posiciones
necesarias para que el logo gire, pero me falta dar las instrucciones
para que este proceso que acabo de realizar se convierta en una
animación. Nuevamente hago clic sobre el botón derecho
del mouse, me aparece el menú de opciones y elijo "Create
Motion Twen" o "Crear Interpolación de Movimiento."
Una vez que realicé loo anterior pude notar que entre los
cuadros 1 y a 10 apareció una flecha negra. Esto quiere decir
que la instrucción recién insertada fue comprendida
y que la imagen irá cambiando desde su posición original
hasta la que yo determiné en el frame número 10. Repito
la formula en el frame 20, el 30 y el 40.
Hechas
las interpolaciones me voy al frame número 1 y presiono Enter
para ver si mi banner está o no animado. Personalmente elegí
que el logo diera una vuelta hacia la derecha y luego volviera a
su posición original. Una vez hecho esto aparecerá
una sonrisa en nuestras caras porque tenemos nuestra primera animación
en flash.
Dato:
Para revisar nuestra animación a pantalla completa tendremos
que apretar la tecla Ctrl seguida de Enter o ir al menú Control
y elegir probar película o test movie según el idioma
en que tengamos el programa.
La
hora del texto
1.-
Sin importar si el archivo es texto o imágenes los pasos
a seguir son exactamente los mismos. En esta oportunidad haré
que mientras el logo gira, el texto aparezca desde la izquierda
para desparecer por la derecha. La repetición infinita de
una animación es conocida con el término de "loop".
2.-
Pongo el texto fuera del escenario, por el lado izquierdo y repito
los mismos pasos ya descritos para la transición de las imágenes.
Ahora, sólo resta ir haciendo prueba con mayores tiempos,
transformaciones o elementos para aprovechar el tutorial.
|
En esta tercera entrega pasamos desde las necesarias -pero muchas
veces fomes- explicaciones, a la creación de contenidos.
El objetivo de este artículo en particular es el desarrollo
de un "banner", instrucciones que también pueden
ser usadas para armar el encabezado de nuestras páginas.
