miércoles, 25 de noviembre de 2009
martes, 24 de noviembre de 2009
APUNTE 1 FLASH
Flash - Animación
Por animación entendermos que los objetos que aparecen en la pantalla cambien de posición, tamaño, aspecto, color, que giren, se deformen, etc...
Tipos de Animación
En Flash existen tres tipos de animación:fotograma a fotogramainterpolación de movimientointerpolación de forma
En la animación fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.
La animación por interpolación consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final.
La animación por interpolación de movimiento es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación
La animación por interpolación de forma ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color.
ConsideracionesSe llaman Fotogramas Clave a los que contienen cambios en la forma o posición del objetoPara que un objeto se muestre en pantalla en un fotograma determinado, debe crearse un fotograma (no clave). Se mostrará así: . El rectángulo blanco significa que no ha habido cambios de forma ni posición.Podemos mover los fotogramas clave o los del rectángulo para cambiar los puntos de inicio o fin de la animación.
Podemos variar la velocidad de toda la animación en "Modificar-película-Veloc Fotogramas": nº de fotogramas/seg.
Podemos copiar un fotograma clave y pegarlo en otra posición para volver a esa situación después de haberla cambiado.
Cómo Crear Animaciones
Para crear una interpolación de movimiento, el mejor método es seguir exactamente los siguientes pasos:
Crear el objeto en el fotograma clave inicial
Crear interpolación de movimiento (con el botón derecho)
Insertar un fotograma clave al final
Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)
Si todo ha salido bien, se verá así:
En cambio, si falta el fotograma clave final, será así:
Y si lo que falta es crear la interpolación, veremos:
Para crear una interpolación de forma, el mejor método es seguir exactamente los siguientes pasos:
Crear el objeto en el fotograma clave inicial
Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación: "Forma")
Insertar un fotograma clave al final
Modificar el objeto en el fotograma clave final
Si todo ha salido bien, se verá así:
Para crear un fundido de color, seguiremos los mismos pasos que en la interpolación de forma, pero en este caso debemos asignar diferentes colores a los fotogramas inicial y final. OJO: antes, hay que "separar" el texto.
Posibles problemas en las animaciones por interpolación:Antes de animar mediante el panel "Fotograma" un objeto con borde (por ejemplo, un rectángulo o una elipse), o uno que esté formado por varios objetos, debemos agruparlos ("Modificar-Agrupar"). Si elegimos "crear una interpolación de movimiento usando el botón derecho, Flash agrupa automáticamente los objetos seleccionados.
No podemos animar independientemente cada letra de una palabra a no ser que las distribuyamos en diferentes capas (cada letra en una capa)
No podemos cambiar el color de un texto gradualmente si no está convertido a gráfico. ("Modificar-Separar")
Si dos objetos van a animarse de formas diferentes, es mejor colocar cada uno en una capa diferente.Si queremos hacer una interpolación de forma y movimiento a la vez, debemos elegir la de forma.Si sólo deseamos cambiar la posición, rotación o escala (tamaño), no debemos hacer una interpolación de forma. En su lugar, elegiremos una interpolación de movimiento.
Cómo crear una línea a través de la cual se moverá el objeto:
Crear el objeto en el fotograma clave inicialAgregar una Guía de Movimiento (con el botón derecho encima del nombre de la capa)
Crear interpolación de movimiento (con el botón derecho apuntando al fotograma inicial)Insertar un fotograma clave al finalMover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)
En la capa guía, crear un trazado (con el pincel, la pluma, el lápiz, el óvalo e el rectángulo)Insertar un fotograma clave en la capa guía, al final
Arrastrar el objeto en cada fotograma clave hasta que ajuste con el comienzo o fin del movimiento trazado.Si deseamos que la forma gire a la vez que el trazado, debemos elegir "Orientar según trazado" en la paleta fotograma, en el fotograma inicial.Podemos ocultar el trazado de guía ocultando la capa que lo contiene (botón del ojo)Cómo cambiar el color de un texto gradualmente:
Veamos cómo hacer el famoso efecto de "fade in" o "fade out" (desvanecimiento) de un texto, que cambiará de color poco a poco, del color de fondo a otro, o de otro al color del fondo (o entre dos colores cualesquiera)
Crear el objeto en el fotograma clave inicial, con el color inicial
Separar el texto ("Modificar-Separar")
Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación: "Forma")
Insertar un fotograma clave al finalCambiar el color del objeto en el fotograma final
¿Cómo hacer un giro de 360º o más?
Si intentamos hacer una interpolación de movimiento para un objeto que deseamos girar 360º, o incluso varias vueltas, veremos que no funciona mediante el método normal, puesto que Flash realizará el cambio por el camino más corto. Si lo hemos girado 380º, Flash sólo girará 20 (380-360). Si la rotación es múltiplo de 360º, el objeto vuelve a quedar en la misma posición en la que estaba, por lo que no se girará nada en absoluto.
El método adecuado para rotar una vuelta o más es:Crear el objeto en el fotograma clave inicialCrear interpolación de movimiento (con el botón derecho apuntando al fotograma inicial)En la paleta "Fotograma", elegir Rotar: "CMR" para que gire en el sentido de las agujas del reloj, o CCRM, en el contrario.
En la paleta "Fotograma", elegir el número de vueltas completasInsertar un fotograma clave al final.
Por animación entendermos que los objetos que aparecen en la pantalla cambien de posición, tamaño, aspecto, color, que giren, se deformen, etc...
Tipos de Animación
En Flash existen tres tipos de animación:fotograma a fotogramainterpolación de movimientointerpolación de forma
En la animación fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.
La animación por interpolación consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final.
La animación por interpolación de movimiento es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación
La animación por interpolación de forma ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color.
ConsideracionesSe llaman Fotogramas Clave a los que contienen cambios en la forma o posición del objetoPara que un objeto se muestre en pantalla en un fotograma determinado, debe crearse un fotograma (no clave). Se mostrará así: . El rectángulo blanco significa que no ha habido cambios de forma ni posición.Podemos mover los fotogramas clave o los del rectángulo para cambiar los puntos de inicio o fin de la animación.
Podemos variar la velocidad de toda la animación en "Modificar-película-Veloc Fotogramas": nº de fotogramas/seg.
Podemos copiar un fotograma clave y pegarlo en otra posición para volver a esa situación después de haberla cambiado.
Cómo Crear Animaciones
Para crear una interpolación de movimiento, el mejor método es seguir exactamente los siguientes pasos:
Crear el objeto en el fotograma clave inicial
Crear interpolación de movimiento (con el botón derecho)
Insertar un fotograma clave al final
Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)
Si todo ha salido bien, se verá así:
En cambio, si falta el fotograma clave final, será así:
Y si lo que falta es crear la interpolación, veremos:
Para crear una interpolación de forma, el mejor método es seguir exactamente los siguientes pasos:
Crear el objeto en el fotograma clave inicial
Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación: "Forma")
Insertar un fotograma clave al final
Modificar el objeto en el fotograma clave final
Si todo ha salido bien, se verá así:
Para crear un fundido de color, seguiremos los mismos pasos que en la interpolación de forma, pero en este caso debemos asignar diferentes colores a los fotogramas inicial y final. OJO: antes, hay que "separar" el texto.
Posibles problemas en las animaciones por interpolación:Antes de animar mediante el panel "Fotograma" un objeto con borde (por ejemplo, un rectángulo o una elipse), o uno que esté formado por varios objetos, debemos agruparlos ("Modificar-Agrupar"). Si elegimos "crear una interpolación de movimiento usando el botón derecho, Flash agrupa automáticamente los objetos seleccionados.
No podemos animar independientemente cada letra de una palabra a no ser que las distribuyamos en diferentes capas (cada letra en una capa)
No podemos cambiar el color de un texto gradualmente si no está convertido a gráfico. ("Modificar-Separar")
Si dos objetos van a animarse de formas diferentes, es mejor colocar cada uno en una capa diferente.Si queremos hacer una interpolación de forma y movimiento a la vez, debemos elegir la de forma.Si sólo deseamos cambiar la posición, rotación o escala (tamaño), no debemos hacer una interpolación de forma. En su lugar, elegiremos una interpolación de movimiento.
Cómo crear una línea a través de la cual se moverá el objeto:
Crear el objeto en el fotograma clave inicialAgregar una Guía de Movimiento (con el botón derecho encima del nombre de la capa)
Crear interpolación de movimiento (con el botón derecho apuntando al fotograma inicial)Insertar un fotograma clave al finalMover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)
En la capa guía, crear un trazado (con el pincel, la pluma, el lápiz, el óvalo e el rectángulo)Insertar un fotograma clave en la capa guía, al final
Arrastrar el objeto en cada fotograma clave hasta que ajuste con el comienzo o fin del movimiento trazado.Si deseamos que la forma gire a la vez que el trazado, debemos elegir "Orientar según trazado" en la paleta fotograma, en el fotograma inicial.Podemos ocultar el trazado de guía ocultando la capa que lo contiene (botón del ojo)Cómo cambiar el color de un texto gradualmente:
Veamos cómo hacer el famoso efecto de "fade in" o "fade out" (desvanecimiento) de un texto, que cambiará de color poco a poco, del color de fondo a otro, o de otro al color del fondo (o entre dos colores cualesquiera)
Crear el objeto en el fotograma clave inicial, con el color inicial
Separar el texto ("Modificar-Separar")
Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación: "Forma")
Insertar un fotograma clave al finalCambiar el color del objeto en el fotograma final
¿Cómo hacer un giro de 360º o más?
Si intentamos hacer una interpolación de movimiento para un objeto que deseamos girar 360º, o incluso varias vueltas, veremos que no funciona mediante el método normal, puesto que Flash realizará el cambio por el camino más corto. Si lo hemos girado 380º, Flash sólo girará 20 (380-360). Si la rotación es múltiplo de 360º, el objeto vuelve a quedar en la misma posición en la que estaba, por lo que no se girará nada en absoluto.
El método adecuado para rotar una vuelta o más es:Crear el objeto en el fotograma clave inicialCrear interpolación de movimiento (con el botón derecho apuntando al fotograma inicial)En la paleta "Fotograma", elegir Rotar: "CMR" para que gire en el sentido de las agujas del reloj, o CCRM, en el contrario.
En la paleta "Fotograma", elegir el número de vueltas completasInsertar un fotograma clave al final.
APUNTE WEB: FLASH
1. Hierba Creciendo
Una de las animaciones con las que comencé fué ésta, se trata de crear el efecto de la hierba creciendo, realmente es muy sencillo y según la complejidad que le pongas se puede lograr un buen efecto.
Para comenzar dibujaremos una de las hojas con nuestra herramienta preferida, yo lo he hecho con la herramienta línea y luego le he dado curvas a los lados obteniendo esto:
Luego, este dibujo lo convierto en Movie Clip (F8)
En el primer Frame dejo la hierba en su ubicación original, en el último la pongo más arriba y finalmente en el último KeyFrame, en las acciones de este le pongo un stop (Esc+ST).
Listo, ya tenemos nuestra hoja base para hacer "crecer la hierba". Después de tenerla lista creamos otro Movie Clip para poder insertar ésta animación cada vez que lo necesitemos dentro de nuestras películas.
Dentro del Movie Clip lo que hacemos es arrastrar la hoja que ya creamos (hierba01) todas las veces que necesitemos, para crear un efecto interesante podemos cambiarles el color haciendo un clic en el Movie Clip y cambiándole el Tinte en el Panel de Propiedades.
También podemos cambiarle el tamaño a cada una de ellas y alinearlas de diferentes formas para que se vea que unas crecen más que otras.
Y el resultado fina:
2. Puesta de Sol
Para hacer una puesta de sol trabajaremos con tres elementos, el primero es el fondo, el segundo son las montañas y el tercero es el sol.
Para hacer el sol, primero dibujamos un círculo, el cual le daremos relleno radial, para el primer color le damos un amarillo bien intenso, y para el segundo, elegimos el mismo amarillo pero le damos una transparencia cero (alpha = 0) 
Para el Fondo elegimos varias tonalidades de azules para hacer un cielo en un día soleadoFinalmente dibujamos las montañas, el resultado final de la imágen sin animación es este. Hay que recordar que el orden de las capas es montañas, sol, fondo (de arriba hacia abajo) ver imágen 11, ésto para que se vea que el sol se oculta detrás de las montañas.
Listo, ahora si a animar nuestro paisaje. Lo primero que hay que hacer es mover el sol, para ello podemos también convertirlo en un MovieClip y darle a éste el movimiento de tal forma que en el KeyFrame éste no se vea es decir, que quede oculto tras las montañas.
Luego, al fondo le vamos a cambiar el color, entonces tenemos que en el primer Frame es azul claro, insertamos un KeyFrame (éste debe terminar en el mismo Frame en el que el sol se movió tras las montañas) y allí cambiamos el relleno a uno de azules más obscuros. Luego vamos al Panel Propiedades y en Tween seleccionamos Shape. 
Para finalizar y darle un mejor efecto, a las montañas también le cambiamos el relleno, en el primer frame el color más claro está ubicado a la izquierda donde está el sol, como este ya se oculto, pondremos un verde más obscuro, e igual que en el fondo, vamos al Panel Propiedades y en Tween seleccionamos Shape.
La linea de tiempo se verá algo así:
3. Mariposa Volando
Y para finalizar con estas animaciones, la última y la más sencilla, una mariposa volando, para iniciar dibujamos una mariposa, yo utilice una fotografía como base.
Luego se convierte en un Movie Clip (F8), una vez dentro de éste, se hace una pequeña animación para dar el efecto del movimiento de alas, para ello insertamos un KeyFrame más o menos en el frame 5 (las mariposas baten las alas rápidamente y por eso la animación debe ser corta) y allí cambiamos el tamaño horizontal de la mariposa para que quede de la siguiente forma. 
Y la linea de tiempo se ve algo así: 
Una vez allí dibujamos una línea por la cual se desplazará la mariposa.
Para hacer la animación, en el primer frame ubicamos la mariposa al comienzo de la línea, y en el último KeyFrame, ubicamos la mariposa al final de la línea, finalmente al hacer el Motion Tween chequeamos la opción Orient to Path y listo.
Una de las animaciones con las que comencé fué ésta, se trata de crear el efecto de la hierba creciendo, realmente es muy sencillo y según la complejidad que le pongas se puede lograr un buen efecto.
Para comenzar dibujaremos una de las hojas con nuestra herramienta preferida, yo lo he hecho con la herramienta línea y luego le he dado curvas a los lados obteniendo esto:
Luego, este dibujo lo convierto en Movie Clip (F8)
En el primer Frame dejo la hierba en su ubicación original, en el último la pongo más arriba y finalmente en el último KeyFrame, en las acciones de este le pongo un stop (Esc+ST).
Listo, ya tenemos nuestra hoja base para hacer "crecer la hierba". Después de tenerla lista creamos otro Movie Clip para poder insertar ésta animación cada vez que lo necesitemos dentro de nuestras películas.
Dentro del Movie Clip lo que hacemos es arrastrar la hoja que ya creamos (hierba01) todas las veces que necesitemos, para crear un efecto interesante podemos cambiarles el color haciendo un clic en el Movie Clip y cambiándole el Tinte en el Panel de Propiedades.
También podemos cambiarle el tamaño a cada una de ellas y alinearlas de diferentes formas para que se vea que unas crecen más que otras.
Y el resultado fina:2. Puesta de Sol
Para hacer una puesta de sol trabajaremos con tres elementos, el primero es el fondo, el segundo son las montañas y el tercero es el sol.
Para hacer el sol, primero dibujamos un círculo, el cual le daremos relleno radial, para el primer color le damos un amarillo bien intenso, y para el segundo, elegimos el mismo amarillo pero le damos una transparencia cero (alpha = 0)
Para el Fondo elegimos varias tonalidades de azules para hacer un cielo en un día soleadoFinalmente dibujamos las montañas, el resultado final de la imágen sin animación es este. Hay que recordar que el orden de las capas es montañas, sol, fondo (de arriba hacia abajo) ver imágen 11, ésto para que se vea que el sol se oculta detrás de las montañas.
Listo, ahora si a animar nuestro paisaje. Lo primero que hay que hacer es mover el sol, para ello podemos también convertirlo en un MovieClip y darle a éste el movimiento de tal forma que en el KeyFrame éste no se vea es decir, que quede oculto tras las montañas.
Luego, al fondo le vamos a cambiar el color, entonces tenemos que en el primer Frame es azul claro, insertamos un KeyFrame (éste debe terminar en el mismo Frame en el que el sol se movió tras las montañas) y allí cambiamos el relleno a uno de azules más obscuros. Luego vamos al Panel Propiedades y en Tween seleccionamos Shape.
Para finalizar y darle un mejor efecto, a las montañas también le cambiamos el relleno, en el primer frame el color más claro está ubicado a la izquierda donde está el sol, como este ya se oculto, pondremos un verde más obscuro, e igual que en el fondo, vamos al Panel Propiedades y en Tween seleccionamos Shape.
La linea de tiempo se verá algo así:
3. Mariposa Volando
Y para finalizar con estas animaciones, la última y la más sencilla, una mariposa volando, para iniciar dibujamos una mariposa, yo utilice una fotografía como base.
Luego se convierte en un Movie Clip (F8), una vez dentro de éste, se hace una pequeña animación para dar el efecto del movimiento de alas, para ello insertamos un KeyFrame más o menos en el frame 5 (las mariposas baten las alas rápidamente y por eso la animación debe ser corta) y allí cambiamos el tamaño horizontal de la mariposa para que quede de la siguiente forma.
Y la linea de tiempo se ve algo así:
Después de tener listo el Movie Clip, vamos a la escena, allí lo que hacemos es crear una línea guía para que la mariposa se desplace por ella, ésto se logra haciéndo clic en el ícono de Add Motion Guide ubicado en la parte inferior del panel de los layers.
Una vez allí dibujamos una línea por la cual se desplazará la mariposa.
Para hacer la animación, en el primer frame ubicamos la mariposa al comienzo de la línea, y en el último KeyFrame, ubicamos la mariposa al final de la línea, finalmente al hacer el Motion Tween chequeamos la opción Orient to Path y listo.
domingo, 22 de noviembre de 2009
Suscribirse a:
Entradas (Atom)
