sábado, 25 de septiembre de 2010

Efectos sobre los símbolos (gráficos, botones y clips)

Para explicar y demostrar las posibilidades de estos efectos vamos a manejarnos desde el panel Propiedades donde tenemos todos los efectos aplicables sobre instancias.
En primer lugar, debemos seleccionar la instancia que queremos modificar picando sobre ella en el escenario.
Podemos aplicar los efectos sobre cualquier símbolo de cualquier fotograma de la animación, tanto sobre el fotograma inicial o el final como en los intermedios. En este último caso, deberemos convertir a fotograma clave aquel que contenga la instancia y después aplicar el efecto.
Efecto Brillo
El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el hecho de que algún objeto se encienda o brille, o por el contrario se apague o pierda brillo.
Podemos hacer un como ejemplo un semáforo de luces intermitentes de color ámbar, intentando simular este efecto.
Haremos que las luces se enciendan y apaguen progresivamente de manera alternada. Para conseguir esto, creamos una interpolación para cada luz, formada por tres fotogramas claves. El tercero lo colocamos justo en el medio de la secuencia de fotogramas. A la primera luz y a la última le damos el mismo valor de brillo, y en la del medio le damos un valor más alto o más bajo según fuera el símbolo de abajo o el de arriba.
Como los movimientos de las luces son distintos e independientes los colocamos en distintas capas.
Para la luz superior los valores de brillo son: 0 para el primer fot. clave, -46 para el central y 0 para el del medio.
Y en la luz inferior al contrario: 0 para el primer fot. clave, -46 para el central y 0 para el del medio.
Efecto Tinta
El efecto de Tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en textos y en botones, por ejemplo haciendo que cambien progresivamente de color al pasarles el mousse por encima o simplemente efectos de cambio de color en presentaciones.
El tintar colores supone un toque alegre y muy vistoso en las presentaciones y si se usan varios efectos, combinados adecuadamente, dota de un ritmo rápido a la animación, como una explosión de color que sorprenda al receptor de la película.
Otro interesante uso de este efecto es simular la proyección de una luz de color sobre un objeto que se va acercando al foco. Hagamos un ejemplo de esto.
Veamos cómo al acercarse un avión a la luz roja del Sol, éste lo ilumina con una luz roja.
Aplicamos a la instancia del avión del último fotograma de su interpolación de movimiento un efecto de tinte rojo con una intensidad del 60%. Lo mismo hacemos en el centro del Sol pero con dos fases, poniendo en el fotograma central un efecto de tinte granate del 25%.
La corona solar es simplemente una interpolación de forma en cuatro fases.
Efecto Transparencia (Alpha)
Este es probablemente el efecto más utilizado debido a la versatilidad del hecho de controlar el grado de visibilidad de los objetos. Podemos, por ejemplo, simular un foco apuntando a un escenario o, lo más común, hacer aparecer objetos de la nada y también hacer que se desvanezcan poco a poco.

Efectos sobre la Interpolación de movimiento

ESCALAR : Esta casilla, al activarla, permite un incremento/decremento progresivo del tamaño del objeto inicial cuando sus dimensiones son distintas a las del objeto que está en la posición final de la animación.
Todas las interpolaciones de movimiento que hemos hecho hasta ahora tenían esta opción activada aunque no lo hayamos indicado expresamente. Flash la activa por defecto, ya que es lo más normal.
ACELERACIÓN : Esta barra deslizante nos permite determinar la aceleración del primer tramo de la animación. Podemos elegir valores entre -100 y 100. Si el valor de aceleración es negativo el símbolo se moverá despacio primero e irá acelerando de manera progresiva. Si dicho valor es positivo provocará un efecto opuesto.
Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un coche, arranca, va cogiendo velocidad poco a poco (valor -100) y después va frenando y disminuyendo su velocidad hasta pararse.
Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en el Panel de Fotograma, concretamente en el apartado de Movimiento, seleccionable mediante el menú desplegable existente.
Desde el panel Propiedades estudiamos todas las posibilidades.
En el campo (Etiqueta) podemos darle un nombre a la interpolación que nos ayudará a identificarla en la barra de tiempos. Aparecerá a lo largo de todos los fotogramas que la componen.
ROTACIÓN: Esta opción es muy interesante ya que nos da la posibilidad de aplicar una rotación al objeto mientras se produce el movimiento. Para que surta efecto debemos seleccionar el primer fotograma de la interpolación.
Se nos presenta un submenú con cuatro opciones:
Ninguna . Con esto le indicamos a Flash que no aplique rotación alguna sobre el símbolo en movimiento.
Automática . Marcando esta opción hacemos que se produzca la rotación en aquella dirección que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o y por el otro, es decir, cuando la imagen inicial y final está en la misma posición (en cuanto a rotación se refiere), el hecho de activar esta opción no tendrá ningún efecto.
Esta opción es la que está marcada por defecto y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones. Para que hubiera tenido efecto deberíamos haber rotado la última imagen de la interpolación.
A la izquierda (CCW). Permite realizar el número de rotaciones completas en la dirección contraria a la de las agujas del reloj, que le indiquemos en la casilla de la derecha. Tanto si la última imagen tiene rotación como si no.
En caso de que tuviera rotación la imagen final, esta se le añadiría.
A la derecha (CW). Realiza lo mismo que la opción anterior pero en la dirección de las agujas del reloj (hacia la derecha).
ORIENTAR SEGÚN DIRECCIÓN DE TRAZO: Si activamos esta casilla, cuando la interpolación sobre la que actuamos es una interpolación por guía de movimiento, Flash hará que el símbolo tome la dirección de la guía, rotando para orientarse en la misma posición que adopta la línea.
SINCRONIZAR: Con esto evitamos que no se reproduzca el último bucle de un símbolo gráfico incluido en nuestra película con una animación en su línea de tiempos interna, cuando el número de fotogramas que ocupa en la línea principal no es múltiplo de los fotogramas que contiene la instancia.
AJUSTAR A LA LÍNEA GUÍA: Si activamos esta opción, el centro de la instancia (identificado con una cruz) se ajustará forzosamente a la guía que hemos marcado en la correspondiente capa.
De hecho si intentamos mover la instancia en un fotograma de la animación, Flash la volverá a colocar sobre la guía de manera automática.

Interpolación de movimiento (guía de movimiento)

Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos Flash en línea recta. Puesto que esto supone una cierta limitación Flash incluye la Guía de movimiento.
Una guía de movimiento es una capa especial que marca una trayectoria para los símbolos de la capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos permitirá crear un movimiento no forzosamente rectilíneo.
Crear un movimiento mediante esta técnica es bastante sencillo, basta con crear una interpolación de movimiento en una capa, seleccionarla (debemos asegurarnos de esto para evitar que la guía se asocie a otra capa), y colocar el símbolo del último fotograma al final del trazado que realizaremos previamente en la capa de la guía. No es necesario colocarnos al principio del trazado ya que Flash lo hace automáticamente.
Vemos como la capa a la que se asocia la guía aparece debajo y alineada a la derecha.
Luego, podemos dibujar un trazado en el fotograma 1 de la capa guía, y asociar el símbolo (gráfico o clip) del primer fotograma clave de la interpolación al comienzo del trazado y ubicar el último fotograma clave al final (la asociación se realiza haciendo coincidir el trazado con el centro del símbolo).

Transformación libre en interpolación

Acabamos de ver las interpolaciones de movimiento como un mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar este comando del programa para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamaño.
Esto es muy sencillo con Flash, basta con modificar la instancia del símbolo en el último fotograma de la interpolación de movimiento, pero esta vez cambiándole el tamaño, con la herramienta transformación libre.
Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamaño se producirá mientras el objeto se desplaza. También podemos hacer el cambio de tamaño en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes.

Interpolación de movimiento

Permite desplazar un símbolo Flash de un lugar a otro del escenario, siendo necesarios únicamente dos fotogramas claves, lo que optimiza mucho el rendimiento de la película.
Es importante destacar que para que una Interpolación de movimiento se ejecute correctamente aquellos objetos que intervengan deberán haber sido previamente convertidos a símbolo.
También se debe tener cuidado al realizar una Interpolación con dos símbolos que se encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:
1) Separar en distintas capas los objetos fijos y los que estarán animados.
2) Poner también en distintas capas objetos que vayan a ser animados con direcciones o formas distintas.
Pasemos al tema en cuestión. Una interpolación de movimiento es el desplazamiento de un símbolo de uno a otro punto del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, "intuye" una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos).
La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar desde la ventana Propiedades. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos.
Flash también nos permite crear animaciones con trayectorias rectilíneas en varias fases, con direcciones distintas. Para ello, una vez creada la interpolación, basta con picar en uno de los fotogramas intermedios y crear un nuevo fotograma clave. Si movemos el símbolo en ese fotograma a otro lugar del escenario y reproducimos, la animación irá primero a esa posición y después a la posición final.

Interpolación de forma

Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash nos ofrece la técnica de la Interpolación de Forma, que consiste simplemente en ir transformando el contorno de un objeto hasta que sea igual que el contorno de otro objeto distinto.
Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Sólo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la apariencia final que queremos que tenga.
Fundamental:
1) Los objetos o dibujos que usemos deben ser OBJETOS DESAGRUPADOS, de lo contrario NO SE REALIZARÁ LA INTERPOLACIÓN DE FORMA.
2) Separar en distintas capas los objetos fijos y los que estarán animados.
3) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformará todos los objetos del primer fotograma en aquello que haya en el último fotograma de la interpolación.

Animaciones

Flash es un programa básicamente orientado a la animación, de ahí la gran importancia de este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita sobretodo mucha práctica.
En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones.
En el tema de la animación, Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren muchos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programación como Java, de una manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco.
Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones más básicas y conviene conocerlas.
Con Interpolación de forma  e Interpolación de movimiento veremos distintos tipos de animaciones que el creador de películas Flash deberá tomar como guía inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocándolas en distintas capas. Con esto es con lo que conseguiremos los efectos más espectaculares a la par que útiles.
Es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan, ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, que es el mensaje.

Capas (en línea de tiempo)

Todo el mundo ha visto alguna vez como trabajan los dibujantes de dibujos animados. Y todos hemos visto como colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos?
Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente.
Clarifiquemos esto con un ejemplo:
Supongamos que tenemos 2 capas. En una de ellas los fotogramas de 1 al 10 contienen el dibujo de un arco de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un arquero (del 5 en adelante están vacíos).
Bien, esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5 fotogramas) el arco con el arquero, para después (durante los fotogramas del 5 al 10) mostrar el arco sin arquero.
De este modo el arco es independiente del arquero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada.
Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada animación distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarán parte de la animación. Si queremos que un objeto NO forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha animación.
Siguiendo con el ejemplo del arquero, si quisiéramos crear un movimiento que haga que el arquero se desplace hacia un lado no hay ningún inconveniente, pero si el arco estuviera en la misma capa que el arquero, entonces AMBOS objetos se moverían hacia dicho lado, con lo que resultaría imposible que sólo se moviera el arquero. La solución es separar los objetos en 2 capas, como ya hemos hecho.
Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos interese).
Trabajar con Capas:
La vista standard de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo usarlos.
Insertar Capas: Como su nombre indica, sirve para Insertar capas en la escena actual. Inserta capas normales (en el siguiente punto se verán los distintos tipos de capas).
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.

Trabajar con objetos

Independientemente de si estamos trabajando en una animación, en una página web, en un catálogo para un CDRom o en cualquier otra cosa, tendremos que trabajar con objetos. A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra película y sea visible, de modo que podamos trabajar con él ,un objeto sería, por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...
Los objetos así considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario.
Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Colores o del Panel Mezcla). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).
El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vió en el tema de Dibujar, y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad si que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como la Brocha o el Cubo de Pintura.
Seleccionar
Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que están seleccionadas.
Veamos como seleccionar las diferentes partes de un objeto:
Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar.
Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.
Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.
Además de la Herramienta Flecha, también podemos usar la Herramienta Lazo. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque ser rectangulares.
Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma. Esto es útil para modificar de un modo rápido todos los elementos del fotograma.
Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en el menú Editar > Seleccionar Todo.

Archivo del blog