Animation animator

Posteado el 15. Nov, 2010 por in Flash

Queremos agradecer a Edna Rheiner de BCB quien nos hizo llegar este tutorial del clásico Animador contra Animación que desde hace años circula en la web. Aunque solo nos explica 10 segundos consideramos bueno el tutorial y por eso lo pusimos esperamos les sirva.

Esto es lo que aprenderan a realizar

PASO 1
Creamos un nuevo documento de Adobe Flash con un tamaño de 1024 x 768 que es el tamaño estándar de un monitor.

Animation animator

PASO 2
Con al herramienta Brush vamos a crear un pequeño círculo que servirá como cursor para dibujar el muñeco.

Animation animator

PASO 3
Sobre el círculo damos clic derecho y vamos a la opción Convert to Symbol…

Animation animator

PASO 4
En la ventana le ponemos el nombre que lo identificará y seleccionamos la opción Graphic.

Animation animator

PASO 5
Vamos a Nuestra línea de tiempo e identificamos el layer con el nombre de puntero circular.

Animation animator

PASO 6
Creamos una nueva capadando clic en el botón New Layer y la renombramos con el nombre de muñeco luego con la herramienta Brush dibujamos la forma del muñequito que animaremos.

Animation animator

PASO 7
En el Frame 1 de la capa del puntero circular vamos a darle clic derecho y vamos a seleccionar la opción Create Motion Tween.

Animation animator

PASO 8
Ahora en el Frame 25 damos clic derecho y seleccionamos la opción Insert Keyframe.

Animation animator

PASO 9
Nos debería marcar un movimiento como el que se ve en la imagen.

Animation animator

PASO 10
Movemos nuestro dibujo del puntero hacia adentro de nuestra película.

Animation animator

PASO 11
Ahora vamos al frame 125 y damos clic derecho sobre la línea de tiempo del layer del muñeco y seleccionamos la opción Insert Keyframe esto lo hacemos para que le muñeco sea visible hasta el frame 125.

Animation animator

PASO 12
Agregamos un movimiento más a la capa del puntero y lo movemos hacia el muñeco.

Animation animator

PASO 13
Al puntero redondo le vamos a agregar varios movimientos para que simule dibujar la forma del muñeco.

Animation animator

PASO 14
Regresamos al frame 1 y al muñeco le damos clic derecho y vamos a la opción Convert to Symbol…

Animation animator

PASO 15
En la ventana le colocamos el nombre de muñeco y seleccionamos la opción Movie clip.

Animation animator

PASO 16
Ahora vamos a darle Doble Clic al muñeco para ingresar dentro del Movie Clip.

Animation animator

PASO 17
Renombramos el layer 1 y le colocamos el nombre de muñeco, ahora creamos una nueva capa llamada mácara.

Animation animator

PASO 18
Con la herramienta Brush vamos a pintar en la capa máscara en el frame 1 un pequeño punto sobre la cabeza de nuestro muñeco

Animation animator

PASO 19
Ahora damos clic derecho en el frame 85 de la capa del muñeco y vamos a la opción Insert Keyframe.

Animation animator

PASO 20
Insertamos un nuevo Keyframe en el frame 2 de la capa de la máscara y con la herramienta Brush pintamos otra sección del muñeco.

Animation animator

PASO 21
Repetimos este proceso hasta terminar de rellenar por completo el muñeco.

Animation animator

PASO 22
Ahora damos clic derecho sobre la capa llamada mascara y vamos a la opción Mask.

Animation animator

PASO 23
Nos debería quedar como se ve en la imagen.

Animation animator

PASO 24
En este punto ya tenemos la máscara que arma al muñeco y el puntero que lo dibuja solo falta que los hagamos coincidir, para esto vamos a regresar a la Escena principal dando Clic en el botón Scene 1.

Animation animator

PASO 25
Una vez en la Escena principal vamos al frame en donde empieza el puntero a dibujar nuestro muñeco e insertamos un Keyframe.

Animation animator

PASO 26
Ahora seleccionamos los frames del 1 al 43 y damos clic derecho sobre ellos y luego vamos a la opción Clean Frames.

Animation animator

PASO 27
Hasta el momento deberíamos de tener algo parecido a lo que se ve en la imagen.

Animation animator

PASO 28
En este punto si damos Ctrl + Enter para previsualizar el puntero debería moverse el puntero redondo y dibujar al muñeco.

Animation animator

PASO 29
Ahora creamos una nueva capa y la renombramos muñeco armado.

Animation animator

PASO 30
Ahora en el Frame 124 insertamos un Keyframe.

Animation animator

PASO 31
Con la herramienta Brush dibujamos al muñeco que se debería de ver al final de la máscara.

Animation animator

PASO 32
En el frame 140 insertamos un Keyframe nuevo para definir que hasta ese frame va a ser visible nuestro muñecom

Animation animator

PASO 33
Creamos una nueva capa y la renombramos Muñeco con puntos.

Animation animator

PASO 34
Ahora insertamos un Keyframe nuevo y arrastramos la imagen del muñeco con los puntitos y la línea azul alrededor, a nuestro documento de Flash. (Aclarando todas las imágenes que vamos a utilizar en este tutorial las trabajamos con anterioridad en Photoshop.)

Animation animator

PASO 35
Insertamos un nuevo Key frame en el frame 127 para definir que hasta ese punto será visible nuestro muñeco.

Animation animator

PASO 36
Creamos una nueva capa y la renombramos Puntero negro.

Animation animator

PASO 37
En la capa del puntero negro insertamos un Keyframe en el frame 125 y dibujamos el puntero negro con un puntero de 4 flechas como se ve en la imagen.

Animation animator

PASO 38
Una vez dibujado nuestro puntero vamos a darle clic derecho sobre el Keyframe que acabamos de insertar y vamos a la opción Create Motion Tween.

Animation animator

PASO 39
Insertamos un nuevo Keyframe en el frame 138 y movemos el puntero que dibujamos justo sobre le muñeco.

Animation animator

PASO 40
Ahora en el frame 141 insertamos un nuevo Keyframe, en este punto lo que estamos haciendo es que el puntero entre desde afuera y le de clic al muñeco para que se ponga como en selección.

Animation animator

PASO 41
El resto de frames que no queremos vamos a removerlos, los seleccionamos y damos clic derecho sobre ellos luego vamos a la opción Remove Frames.

Animation animator

PASO 42
Ahora vamos a simular el clic derecho del puntero, para esto insertamos una nueva capa y le colocamos el nombre clic derecho, luego insertamos un Keyframe en el frame 141 y arrastramos nuestra imagen hacia nuestro documento, luego cremos un Motion Tween sobre el Keyframe y ahora insertamos varios Key frames en diferente separación como se ve en la imagen.

Animation animator

PASO 43
Ahora en el primer Keyframe seleccionamos la imagen y luego vamos a la ventana Properties y en la opción Color: seleccionamos la opción Alpha y le colocamos un valor de 0%.

Animation animator

PASO 44
El segundo Keyframe se queda igual, en el tercero cambiamos la imagen por una imagen que tenga selecciónado la primera opción.

Animation animator

PASO 45
Ahora en el cuatro Keyframe insertamos una nueva imagen que tenga seleccionada la opción Convert to Symbol…

Animation animator

PASO 46
En el último Keyframe vamos a hacer que la ventana se desvanezca así que seleccionamos la imagen y vamos a la ventana Properties y en la opción color seleccionamos Alpha y colocamos un valor de 0%.

Animation animator

PASO 47
Creamos una nueva capa y la renombramos puntero blanco, luego en el frame 147 insertamos un Keyfame y dibujamos un puntero blanco justo al lado de donde aparecerá nuestra ventana, ahora al keyfame le damos un Create Motio Tween.

Animation animator

PASO 48
Insertamos un nuevo Keyframe justo donde la ventana con la primera opción seleccionada aparecer y movemos el puntero sobre la opción.

Animation animator

PASO 49
Luego insertamos un nuevo Keyframe donde la ventana con la segunda opción aparece y movemos el move hacia arriba como si estuviera seleccionando esa opción.

Animation animator

PASO 50
Insertamos un nuevo Keyframe y dejamos al puntero en el mismo lugar.

Animation animator

PASO 51
Si seguimos los mismos pasos que con las ventanas de clic derecho, vamos a poder realizar el efecto de la ventana que escribe el nombre del objeto.

Animation animator

PASO 52
Luego para los dibujos siguientes Creando los Keyframes en los lugares correctos y haciendo los dibujos respectivos vamos a logar los efectos de movimientos que necesitamos.

Animation animator

PASO 53
Vemos en este dibujo hicimos una especia de sombra a nuestro muñeco para darle la apariencia de movimiento rápido que necesitamos.

Animation animator

PASO 54
En este paso vemos que volvemos a utilizar el puntero negro solo que con un cuadro punteado en la esquina y nuestro muñeco esta en una posición distinta, aquí también modificamos el cuadro celeste que rodea al muñeco.

Animation animator

PASO 55
Aquí en este paso creamos una capa nueva con un puntero diferente y una capa nueva que contiene al muñeco con el dibujo del cuadro de rotación.

Animation animator

PASO 56
Los pequeños detalles son importantísimos a la hora de darle animación a nuestro muñeco como vemos en este paso dibujamos unas formas para simular que el muñeco esta hablando.

Animation animator

PASO 57
Al finalizar su animación podrán obtener un resultado como se ve a continuación, todo es cuestión de paciencia y de ser detallistas a la hora de animar nuestro muñeco.

Animation animator

Descarga el editable de Animation vrs Animator Flash


Tags: ,

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Hire PHP Developer India
Get Adobe Flash player