Tutorial de Synfig Studio

Tutorial De Synfig Studio

I. AÑADIENDO CAPAS

Introducción

En el tutorial anterior, hiciste una primera animación sencilla al cambiar los atributos de objetos primarios, tales como: posición, color, y tamaño. Estas formas simples, sin embargo, son casi insuficientes al momento de crear personajes u objetos avanzados. Para ello, Synfig utiliza Capas. Estas son similares a las capas que se conocen en otras aplicaciones para dibujo, como por ejemplo GIMP.

No obstante, las capas de Synfig se diferencian de las capas comunes en, por lo menos, dos características:

1. Puedes organizar las capas en grupos jerárquicos. 2. Puedes usar capas superiores para cambiar el

comportamiento (o estética) de capas inferiores.

Hacerlo es bastante fácil. Observemos un ejemplo sencillo.

1. Crea un nuevo archivo de duración 0. No hace falta molestarse con una linea de tiempo en este momento.

2. Crea un rectángulo sencillo con la herramienta correspondiente.

Combinación de capas

Aquí hay dos maneras de proceder. Primero, toma la herramienta escala (gradient tool) de la caja de herramientas de Synfig , y cliquea sobre el lienzo una vez. Deberías notar que una nueva capa se agregó en la ventana de las capas, esta nueva capa se llama 'Gradient'. Esto no tiene nada de especial. Si no ves ninguna escala en el color, sino simplemente color liso, toma la normal tool, cliquea dentro del lienzo para activar los puntos (ducks) de la escala. Sobre el lienzo tiene que haber aparecido un punto, arrástralo hasta que una escala aparezca.

Ahora tienes una escala, pero no como querías, ésta cubre todo el lienzo mientras que el objetivo era tener una escala dentro del rectángulo. Reparémoslo ahora.

Selecciona las capas escala y rectángulo en la ventana de las capas. Deberían resaltarse en azul. Luego, click derecho con el mouse y selecciona 'Encapsulate' en el menu que aparece. La ventana de capas debería cambiar, mostrando una cajita llamada 'Inline Canvas' (lienzos interactuantes) con una flecha delante.

Puedes tratar esta nueva capa como cualquier otra -- moverla, duplicarla, copiarla y pegarla. Si cliqueas sobre la flecha, puedes expandir la 'inline canvas' para ver su contenido, o sea, tus dos capas anteriores: la escala y el rectángulo.

Si le quieres poner un nombre más descriptivo, selecciona la capa en la ventana de capas y cliquea sobre su nombre. Luego simplemente la editas allí mismo. Puedes hacerle esto a cualquier capa, y te lo recomendamos.

Efecto restringido

Sin embargo, aún tenemos un problema: La escala aún cubre todo el lienzo mientras que la queríamos solamente en el rectángulo. Para ello, selecciona la capa 'gradient' en la ventana de capas. Ahora ve a la ventana 'params' (predeterminado como una de las pestañas de la ventana 'Params-Children-Keyframes'), y busca el atributo llamado 'Blend Method'. Cliquéalo dos veces y selecciona 'Onto' del menu que se despliega. (Nota de usuario .- para acceder a la operación descrita en este párrafo, hay que cliquear sobre la columna "valor" y elegir "encima" - versión 0.62.00 sobre xubuntu 10.10 (2011))

Ahora la escala debería verse solamente dentro del rectángulo. Felicitaciones! Acabas de hacer tus primeras capas interactivas con Synfig.

Desde ya, por motivos de organización, el encapsulamiento de capas mejora mucho el uso de Synfig Studio. Muchos programas pueden hacer esto. Pero el alcance y la libertad que le añade Synfig, lo separa del resto de los programas que utilizan la jerarquía de capas.

Sin embargo, una capa puede modificar solamente la información que obtiene directamente debajo de ella. En otras palabras, si fueras a echar una Blur Layer sobre las capas que están dentro del inline canvas, ésta esfumaría solamente a ellas -- todo lo que esté debajo del 'inline canvas' no sería esfumado!

Intentémoslo. Crea dos círculos rojos y en la ventana de capas muévelos debajo del inline canvas. Ahora nuestro inline canvas (con rectángulo y escala) está sobre los círculos.

Despliega el inline canvas para visualizar su contenido, y selecciona la primer capa que aparece (debería ser la capa escala). Aquí es donde queremos insertar una capa nueva. Crea un círculo de color negro. La capa de este nuevo círculo estará ubicada sobre la capa escala, dentro del inline canvas.

Ahora, en la ventana de las capas haz click derecho sobre la capa del círculo negro para que un menu se despliegue. La primer opción del menú será "New Layer". Dentro de New Layer, verás muchas categorías de capas que podrías crear, pero lo que queremos es un efecto borroso en el borde de una figura, o sea desdibujar (blur), entonces ve a la categoría Blurs y elige la capa Blur. Resumiendo, sería "New Layer->Blurs->Blur"

Bueno, se ha desdibujado... pero algo no está del todo bien - la figura no se ha desdibujado fuera del area gobernada por el inline canvas. Esto pasa porque el método de combinación (blend method) de la capa blur está predeterminado como "Composite" (puedes cambiar el método de combinación predeterminado para próximas capas, desde la sección New Layer Defaults de la caja de herramientas). Lo que queremos es un método de combinación "Straight". Simplemente elige la capa 'desdibujar', y cambia el método de combinación a "Straight" en la ventana de parámetros.

NOTA: Probablemente cambiaré la manera en que los métodos de combinación predeterminados se manejen en el futuro - como se manejan ahora parece sólo crear líos como éste.

Bueno, ahora tenemos todos los contenidos del lienzo interactivo desdibujados, pero todo debajo de él está nítido!

En profundidad...

Si vas a 'Layer > New Layer' en el menu principal de Synfig, encontrarás muchas posibilidades para hacer capas. Muchas de ellas suenan raro; 'Transform > Rotate' por ejemplo. Puedes usarlas para añadir nuevos atributos a tus objetos. Y tal cual haz hecho con otros atributos en el tutorial anterior, puedes cambiarlos para que sean distintos en ciertos marcos clave. Synfig se encargará de interpolar los pasos intermedios.

Por ejemplo, podrías crear una figura vaga y agregar una capa rotativa sobre ella. Combínalo con la lección aprendida en el tutorial anterior y puedes crear un efecto rotativo. Esta técnica se usa en la creación de animación por cortes.

http://wiki.synfig.org/wiki/Doc:Adding_Layers/es

II. BASES DE LA ANIMACION

Introducción

Crear una animación en Synfig es realmente sencillo: Significa básicamente cambiar un dibujo - solo necesitas crear el primer estado y el ultimo estado de un cambio, y Synfig se hará cargo de los pasos entre ambos.

Demos un vistazo a un ejemplo sencillo. Considera una luz en movimiento similar a la que está en frente del auto del Caballero Andante. Deja el realismo y obtendrás un circulo que se mueve de derecha a izquierda, y lo repite. En otras palabras, necesitarás crear tres 'pasos' o 'etapas':

1. El circulo está en la Izquierda. 2. El circulo está en la Derecha. 3. El circulo está de regreso en la Izquierda.

Vamos a hacerlo.

Preparando el espacio de trabajo

Inicia Synfig Studio, y crea un nuevo archivo. Haz click en el menú 'Circunflejo' (entre la regla horizontal y vertical, en la esquina superior izquierda del lienzo), luego "Editar" y luego "Propiedades". Un dialogo llamado 'Propiedades' aparecerá. Dale un nuevo nombre a tu archivo y agrégale una descripción, luego dale click a "Aplicar" (no hagas click en "guardar" aun -- aun no hemos terminado con la explicacion del dialogo de "propiedades"). Asegúrate de que editaste 'tiempo de fin'. La extraña vista '0f' cambiara hacia una presentación mas familiar en cuanto hagas click en "Aplicar". Establecerlo a 2 segundos.

Ahora crea un simple rectángulo negro que servirá como nuestro fondo. No es necesario que cubra todo el lienzo.

Ahora necesitamos un circulo. Cambia el color de pintar a rojo, y dibuja un circulo. No importa si no es perfecto: Puedes editarlo. Activa la 'Herramienta Normal', y haz click en el circulo. Esto te llevará a varias modos de edición los cuales son fáciles de detectar por el pequeño punto verde en el medio del circulo y el rectángulo blanco al rededor de él. Puedes mover el circulo arrastrándolo por el punto verde en el medio.

Estos son los primeros pasos para dibujar un objeto y moverlo, pero aun no animarlo, dirás. Es más. Demos un vistazo a como esto funciona.

Agregando movimiento

Al principio, colocaste un valor de 2 segundos en el dialogo de 'propiedades'. Debido a esto, tu ventana del lienzo (en la que haces tus dibujos) obtuvo capacidades adicionales. Hay un deslizador gris, por ejemplo. Puedes hacer click en el, y un pequeño indicador naranja aparecerá pero nada cambiará. Esto es porque necesitas cambiar primero al 'Modo de Edición Animado' haciendo click en el punto verde justo a la derecha del deslizador gris del tiempo. Notarás que tu lienzo tomará un delineado rojo; esto te recordará que los cambios que hagas a tus objetos, ahora afectarán la animación.

Anteriormente, tres 'pasos' o 'etapas' fueron mencionados. Estos son representados por los llamados 'fotogramas claves' (solo en caso de que estes familiarizado con la codificación de vídeo: No, no es lo mismo!!). Un fotograma clave es una imagen en el tiempo donde algo importante pasa con tus objetos.

Haz click en la ficha del Fotograma clave -- esta es la que tiene la pequeña llave en la ventana de 'Parámetros, etc.' -- para ser capaz de editar los fotogramas. Ahora haz click en el pequeño signo de 'más' y podrás obtener una nueva entrada en la lista de mostrados '0f, 0f, (JPM)'.

Si esto no paso, hiciste algo que no se menciono hasta ahora. Cierra tus archivos y empieza de nuevo.

Si la entrada aparece, ve a la marca '1s 0f' en la barra del tiempo. El pequeño indicador naranja debería moverse hasta ahí. Luego agrega otro fotograma clave haciendo click en el pequeño símbolo de más. Repite el proceso con el indicador de la barra de tiempo puesta en '2s 0f'. Deberías tener 3 fotogramas claves en la lista, ahora.

El s's y f's: Entendiendo la línea de tiempo

Oye ahora, Ya te habrás dado cuenta lo que esos misteriosos '1s 0f' -tipos de marcas representan. Ellos indican un punto específico en la línea de tiempo, expresando la ubicación en términos de segundos (s) y marcos (f).

Cada segundo es dividido en 24 marcos, muy parecido a una métrica o cinta de medir dividida en 100 centímetros. Las marcas del marco empiezan en cero (0) y suben hasta 24, en cuyo caso un nuevo segundo es introducido y la cuenta de los marcos regresa a cero.

Por ejemplo: "tres marcos en el sexto segundo" de una animación usando la notación de esta línea de tiempo serían "5s 3f." ¿Por qué "5s" en vez de "6s"? Porque la cuenta siempre empieza desde cero.

La lista de fotogramas claves

La lista de fotogramas claves es bastante fácil de entender: Ella muestra el 'tiempo' lo que es básicamente el inicio del tiempo, 'Longitud' que es auto explicativa, 'Saltos' que los cubriremos luego, y 'Descripción' que es, nuevamente, auto explicativa.

Ahora, ¿te estás preguntando sobre las entradas llamadas '(JMP)'? De hecho, estos son enlaces justo como lo son el la web: Haz click sobre ellos, y el indicador de tu linea de tiempo saltará hacia el tiempo exacto.

Puedes usar esto para editar tu imagen para un momento dado en el tiempo. Por ejemplo, ahora puedes saltar al primer segundo, y mover el circulo rojo a la derecha. ¡Ahí! hiciste tu primer movimiento; ¡tu primera animación con Synfig!

¿Te preguntarás donde está la animación? Solo haz click en una posición arbitraria en la linea de tiempo: Notarás que el circulo rojo esta en posiciones donde tu no lo moviste! ¿Qué paso? Synfig se dio cuenta de lo que querías hacer, saber que querías mover el circulo, y dibujar todas las imágenes entre estos estados. Cada imagen hará luego un fotograma en tu animación; y el circulo parecerá estarse moviendo.

Renderizando tu animación

Antes de que puedas ver tu animación, necesitas procesar (o renderizar) tu trabajo. Hay dos maneras de hacerlo; usando el synfigstudio (lo que has estado usando hasta ahora), o el programa de línea de comando de synfig.

Para hacer eso, cierra el modo de edición de animación haciendo click en el punto rojo en la pestaña del editor de la línea de tiempo, y graba tu archivo; por instancia bajo el nombre de CaballeroAndanteBasico.sif. Luego presiona el símbolo > en la esquina superior izquierda de la ventana del lienzo para abrir el menú, abre el menú de 'archivo' y haz click en el artículo 'mostrar'. Cambia el nombre a CaballeroAndanteBasico.gif en la misma ubicación donde guardaste CaballeroAndanteBasico.sif y escoje "gif" en vez del formato "Auto", luego haz click en "mostrar". Dependiendo de la velocidad de tu procesador esto solo debería tomar un momento, pero finalmente una ventana con una barra de estado te dirá "Archivo Renderizado Satisfactoriamente". El atributo "magick++" (si está disponible) produce gifs mucho mejores que el "gif" porque optimiza la paleta para las imágenes.

Abre CaballeroAndanteBasico.gif en Firefox o cualquier otra aplicación que sea capáz de mostrar gifs animados. De todas formas, Firefox reproducirá el gis todo el tiempo lo que hace que una animación corta dure bastante tiempo. Si estás viendo un circulo rojo moverse de izquierda a derecha y regresarse: Felicitaciones! Haz hecho tu primera animación!

Nota: también puedes ver una vista previa de tu animación. Presiona el símbolo > en la esquina superior izquierda de la ventana del lienzo para abrir el menú. Luego escoge Archivo-> Previsualizar.

Si prefieres usar la línea de comandos en vez del renderizado por el menú, abre un terminal (en Windows, ve a Inicio -> Ejecutar -> tipea cmd<enter>), cambia al directorio donde guardaste el archivo, y tipea algo como

synfig -t gif CaballeroAndanteBasico.sif

ADVERTENCIA: La versión que estas usando posiblemente no soporte salidas GIF por el momento, dependerá de la versión y las opciones de compilación.

Unos pocos mensajes aparecerán que no importan en este momento. Dependiendo de la velocidad de tu procesador debería tomar un momento, pero finalmente una linea como

CaballeroAndanteBasico.sif ==> CaballeroAndanteBasico.gif: DONE

deberá aparecer, luego estas listo para ver tu gif animado usando firefox o cualquier programa mencionado como arriba.

Conclusión

Claro, la posición de un objeto no es la única cosa que puedes cambiar con Synfig Studio. Otras posibilidades incluyen su tamaño, delineado, color, etc. Synfig viene con varios archivos de ejemplo que deberían dejarte indagar mas profundo en las posibilidades.

http://wiki.synfig.org/wiki/Doc:Animation_Basics/es

III. LO MAS BASICO SOBRE MASCARAS

Sobre Máscaras

Algunas veces queremos que los personajes esten destrás de objetos, de un edificio en el fondo por ejemplo. Si creamos un fondo en Synfig podemos colocar el personaje detrás del objeto en la pila de capas pero si el fondo es una imagen necesitamos hacerlo mediante enmascaramiento.

Este tutorial nos mostrará los dos métodos de enmascaramiento básicos: ocultación y revelado.

Ocultando

En este modo de enmascaramiento todo lo cubierto por la forma de la máscara es ocultado.

• creamos una forma de máscara y la colócamos encima de los elementos que queramos enmascarar, dentro de la misma canvas pegada o sobre ella y entonces encapsulamos la

máscara y los elementos juntos.

• establecemos el método de mezclado de la máscara a "Alpha Over".

• Todo lo que esté debajo de la forma de máscara será ocultado.

Revelado

Una máscara de revelado puede conseguirse de dos modos diferentes usando diferentes mezclados.

Máscara de revelado método 1.

• Creamos una forma de máscara y colócala debajo de los elementos que queremos enmascarar.

• Establecemos el método de mezclado de los elementos que queremos enmascarar (la capa robot en este caso) a "Straight Onto". Sólo podemos usar este método sobre una capa a la vez así que si tenemos varios objetos necesitaremos encapsularlos en un canvas pegado.

• Todo lo que esté por encima de la máscara será visible, todo lo demás será ocultado.

Máscara de revelado método 2.

Este método de máscara es similar a la máscara de ocultación y un poco más flexible que el método de revelado 1 en el sentido de que no tenemos que encapsular nada que deba ser enmascarado. Esta máscara revela todo lo que está debajo de ella, no importa el número de capas.

• Creamos una forma de máscara encima de los objetos que queremos enmascarar.• Creamos un rectángulo que cubra la escena entera.• Encapsulamdos la máscara y el rectángulo, la máscara sobre el rectángulo.• Establecemos el método de mezclado de la máscara a "Alpha Over". Esto crea una máscara completa con un agujero en ella.• Establecemos el método de mezclado de la máscara a "Alpha Over". Todo en el

agujero será visible y el resto será enmascarado.

http://wiki.synfig.org/wiki/Doc:Basic_Masking/es

CREANDO FORMAS

Introducción

Las primitivas básicas como los círculos o los rectángulos estan bien, pero son muy poco flexibles. Así que, creemos formas más complejas, para hacer esto, usaremos la Herramienta BLine.

La Herramienta BLine

En Synfig, la estructura que describe una forma se llama BLine. Es una analogía de la "ruta" en otros programas, sólo que este caso es estrictamente una spline de hermite.

Botón Restablecer Colores en la Caja de HerramientasAntes de que comencemos con el tutorial BLine, vemos como funciona Synfig. Cuando pulsamos en BLine Tool/es, vemos que esos vértices del objeto seleccionado actualmente (si fue sólo uno) desaparecieron, pero la(s) capa(s) todavía permanece seleccionada en el Panel Capas. Esto es normal. Cualquier cosa que creemos con la Herramienta BLine será insertada encima de la capa seleccionada actualmente. Ten en la mente que si queremos insertar una forma, debemos seleccionar donde vamos a insertarla antes de ir a la Herramienta — cambiando la selección después se cambiará automáticamente a la Herramienta de Transformación.

Ahora, seguimos y hacemos click en el botón "Restablecer Colores" en la esquina inferior izquierda del control de color FG/BG en la caja de herramientas. Esto nos devolverá a valor por defecto de negro y blanco. Además, establecemos el ancho de línea por defecto a algo bonito y delgado — 10pt estaría bien.

Después de que hayamos cambiado a la Herramienta BLine, miramos al Panel Opciones de Herramienta. Para asegurarnos de que sólo "Crear Región BLine", "Crear Perfil BLine" y "Enlace de Orígenes" han sido seleccionados.

Haciendo click con nuestro ratón en el canvas colocaremos los vértices. Mientras estamos colocando cada vértice, podemos arrastrar su tangente con el ratón. Haciendo esto una y otra vez, construiremos una BLine.

Debemos de acordarnos, que durante esta construcción, no hay nada que nos impida mover los vértices o tangentes a nuestro antojo. Si queremos eliminar un vértice, hacemos click derecho sobre él y los seleccionamos "Delete Vertex". Si queremos

dividir las tangentes hacemos click derecho sobre una tangente y pulsamos "Split Tangents". Si queremos cerrar una BLine hacemos click derecho sobre el primer vértice y seleccionamos "Loop BLine".

Cuando hemos terminado de colocar los vértices, debemos salir del modo de construcción si queremos crear la capa(s) BLine; Hay dos modos de hacer esto:

1. Cambiar a otra herramienta. 2. Pulsar el botón "Create" en la parte inferior del Panel de Opciones de

Herramienta (es el icono que parece un engranaje).

Por ahora, sólo tenemos que seguir y cambiar a la Herramienta Transform Tool, porque estamos usando la Herramienta BLine.

Editando BLines

Bien, ahora tenemos una bonita región en blanco con un borde en negro. Ya que hemos activado "Crear Región BLine" y "Crear Borde BLine" en los pasos anteriores, nos daremos cuenta de que hemos creado dos capas — el Borde y la Región en el Panel Capas. Además del hecho de que son dos capas separadas, sus parámetros de vértices ya han sido enlazados linked — así que podemos seleccionar uno y mover su agarre y el otro también cambiará.

Si queremos manipular los vértices después de que hemos creado las capas, es muy fácil de hacer. Sólo tenemos que hacer click en una de las capas. Si queremos eliminar un vértice, hacemos click derecho y pulsamos en "Remove Item (smart)". Si queremos insertar un punto en cualquier sitio hacemos click sobre un segmento donde queramos insertarlo y pulsamos en "Insert item (smart)".

Note

La mayor diferencia entre este modo de edición normal y el modo de construcción es el modo en que se dividen las tangentes — en el modo de construcción hacemos click derecho en la tangente en sí misma. En el modo de edición de agarre, debemos hacer click derecho sobre el vértice cuyas tangentes estan acopladas. Esto podría ser considerado un problema se usabilidad, y se arreglará en algún momento.

Esto podría parecer un desorden de capas. Y sí, si no usamos el software de manera apropiada es lo que conseguiremos. Pero hay una manera de hacer que esto sea más limpio. Como mencionamos en el Tutorial anterior, podemos encapsular capas en una jerarquía.

Una cosa rápida que comentar antes de terminar. Podemos cambiar el ancho de un borde en cada vértice. Para hacer esto seleccionamos la capa de borde (NOTA: Debemos seleccionar la Capa de Borde, la Capa de Región no tiene datos de anchura) y cambiarla mediante los agarres de anchura. Por defecto. Estos estan enmascarados. Para mostrarlos, pulsa Alt5 o hacemos click en el botón "Toggle width ducks" encima de

la ventana de canvas. Haz lo mismo para ocultarlos. También puedes ver otras cosas mediante Menú Cara de Máscara: "View → Mostrar/Ocultar Agarres".

Usando una tableta para dibujar las formas

Si tenemos una tableta gráfica podemos usar la Herramienta Dibujo para crear BLines.

Synfig Studio soporta sensibilidad a la presión, pero necesitamos configurarla primero. Tenemos que ir a "File → Input Devices..." en el menú de herramintas. En el diálogo de entrada encontramos nuestra tableta y establecemos su modo en "Pantalla". Pulsamos en Click "Salvar" y seguidamente damos a cerrar "Close".

Ahora cogemos nuestro lápiz digital, y creamos un nuevo archivo y pulsamos sobre el botón de la Herramienta de Dibujo en la caja de herramientas. Establecemos el valor de ancho de la línea para que sea lo bastante grande — por ejemplo, 15pt — sino no notaremos el efecto de sensibilidad a la presión. Elegimos marrón como el color de relleno por defecto.

Note

Los pasos anteriores deberían ser realizados con el lápiz digital de nuestra tableta, no con el ratón. Synfig Studio recuerda los ajustes para cada dispositivo de entrada de manera independiente. Eso es así porque si establecemos esas opciones con el ratón no funcionarán cuando cambiemos al lápiz digital.

En el Panel de Opciones de Herramienta, nos aseguramos que tenemos opciones que las mostradas por la imagen siguiente.I

Now let's draw some thing like a curvy mountain background. Start drawing a line from the left border to the middle of the canvas. Try to vary your stylus pressure while you are drawing. Stop near the center of the canvas. This is your first line. Notice the new outline layer created in the Layers Panel.

Señalamos con nuestro lápiz digital el últimmo agarre de nuestra nueva BLine y continuamos dibujando hacia la esquina derecha del canvas. Cuando acabemos, miramos en el Panel Capas otra vez. Hay todavía una única Capa de Borde. Synfig Studio es lo bastante inteligente como para saber que no necesitamos una nueva capa de borde y de manera apropiada extiende la anterior. Podemos extender la BLine desde las

dos terminaciones, pero si comenzamos desde cualquier otro lugar en el canvas se creará una nueva capa de borde. Debemos pensar que nuestra primera línea se mantiene seleccionada y nada nos impedirá extenderla después.

De vuelta a nuestro lienzo. En el Panel de Herramientas pulsamos en el botón con el icono de un cubo para rellenar el borde que hemos creado. Una capa de región aparecerá encima de la capa en la que estamos trabajando. Seleccionamos la capa de borde y pulsamos en el botón "Elevar la Capa" en el panel de capas para poner la capa de borde sobre la de región.

Extendiendo una línea desde ambos lados hasta las esquinas de canvas hace que el relleno aparezca abajo. Bien.

Sigamos, ahora añadimos unas líneas más sobre el área rellena para darle un aspecto como de montaña. Si tienes agarres marrones de por medio, puedes ocultarlos pulsando

el botón "Toggle vertex ducks" en lo alto de la ventana canvas (la segunda por la izquierda).

Warning!

No usar el atajo Alt2 para desconectar la visibilidad de los

agarres de vértices mientras usamos la herramienta de Dibujo. Hay un error que causará que Synfig Studio se cuelgue.Development Notes:

Este error estará arreglado en la versión (0.63.00).

La herramienta de Dibujado es genial para el dibujado de figurar complejas, pero conseguiremos tener un montón de agarres, que son difíciles de manipular con la Herramienta de Transformación como comentamos. Hay dos posibles soluciones.

Primera, podemos incrementar el valor de "Suavidad" en el Diálogo de Opciones de Herramienta mientras usamos la Herramienta de Dibujo. Que reducirá el número de vértices producidos durante el dibujado, pero que hará tu forma menos detallada.

Segunda, podemos usar la Herramienta Smooth Move para deformar una forma ya existente. Sólo tenemos que ir al botón Smooth Move Tool de la caja de herramientas y hacer click. El truco de esta herramienta es que sólo afecta los agarres seleccionados. Debemos mantener presionado el botón izquierdo del ratón en un lugar vacío del canvas. Arrastramos para crear una caja de selección. Soltamos el botón del ratón cuando lo hayamos hecho. O pulsamos CtrlA para seleccionar todos los agarres. Ahora

podemos deformar los segmentos seleccionados de las BLines. Podemos cambiar el tamaño del área de influencia mediante la modificación del "Radio" en el Panel Opciones de Herramienta.

¿Qué podemos hacer con el ancho del borde? Hay una Herramienta Ancho para esa función. Está diseñada para incrementar o reducir el ancho de una línea de la misma

manera que haríamos con un lápiz sobre un papel. Hacemos click en el botón Width Tool en la caja de herramientas, movemos el lápiz digital sobre la línea que queremos cambiar, presionamos y movemos el cursor de regreso a lo largo de la línea, como si estuviéramos tachando. El ancho del borde se incrementará en los lugares donde movamos el cursor.Si queremos reducir el ancho, sólo mantenemos presionado "Ctrl" mientras tachamos. ¡Fácil!

Si no queremos que los Agarres de Ancho se muestren, durante el uso del la Herramienta Ancho, los desactivamos con el botón "Toggle width ducks" en lo alto de la ventana canvas.

Warning!

No usar el atajo Alt5 para desactivar la visibilidad de los

agarres de ancho mientras que estemos usando la Herramienta de Ancho. Hay un error que causará que Synfig Studio se cuelgue.Development Notes:

Este error estará corregido en la versión (0.63.00).

Otras formas de crear BLines

¿Esto es todo? No, hay más. Puedes usar las herramientas Círculo, Rectángulo, Estrella y Polígono para crear BLines. Mira las opciones "Crear Borde BLine" y "Crear Región BLine" en el Panel Opciones de Herramienta cuando estemos usando estas herramientas.

Creando primitivas geométricas como BLine nos permite tener un mejor control sobre la forma y el aspecto. Por ejemplo, si queremos deformar una estrella, entonces podemos usar la herramienta Estrella para crearla como Borde y Región y usar entonces la Herramienta Transformación para deformarla.

Ahora estamos listos para el último tutorial en esta sección.

http://wiki.synfig.org/wiki/Doc:Creating_Shapes/es

COMO EMPEZAR

Introducción

Synfig, como la mayoría de los otros programas gráficos competentes, rompe individualmente los elementos del lienzo en varias capas. De todas formas, difiere de los otros programas en dos grandes formas:

1. Una capa individual en Synfig usualmente representa una “Primitiva” única. Por ejemplo: Una región única, el delineado de una región, un JPEG importado, etc... Esto le permitirá tener un gran trato con la flexibilidad y con el control. No es muy inusual, tener para una composición cientos de capas (organizadas en la jerarquía de la cordura del artista).

1. Una capa no solo puede tener información en el tope de la imagen, debajo de ella, sino que además modificarla o distorsionarla de alguna forma. En este sentido, las capas en Synfig actúan mas como filtros, al igual que en Adobe Photoshop o en GIMP. Por ejemplo, si tenemos una capa con desenfoque, una capa con desenfoque radial, capa esferizada, capa con corrección de color, capa con bisel, etc...

Cada capa tiene su serie de parámetros, que determinan como se debe comportar. Cuando haces click en una capa (bien sea en la ventana del lienzo, o en el panel de Capas), verás sus parámetros en el Panel de Parámetros.

Synfig Studio tiene una propiedad de auto-recuperación. Si se bloquea, incluso si el archivo actual no se ha grabado, no se perderán mas de 5 minutos de trabajo. Al reiniciar, automática y rápidamente alertará al usuario para que recupere los cambios no guardados. Desafortunadamente el historial aun no se recupera. Esa propiedad vendrá mas adelante.

Una de las cosas de las que te habrás percatado, es que Synfig Studio es LENTO, siendo prácticamente obsoleto en hardware que tenga mas de 3 años de antigüedad. Esto es debido a que todo el calculo de color es hecho en un punto-flotante, porque Synfig Studio fue construido desde la base hacia arriba con un Rango-Dinámico-Alto de imágenes en la mente. SIN EMBARGO, este no será el caso por siempre.

darco tiene bastantes re-implementaciones y optimizaciones que planea agregar y que deberían mejorar dramáticamente el desempeño de Synfig en todas las plataformas. La meta no es lograr una mejora del 200% en la velocidad, es por lo menos mejorarla en un 2000%. Con la optimización que esta planificada para ser implementada, estaremos en capacidad de hacer operaciones de tuberías. Debería también aplanar el camino hacia la aceleración de hardware usando los grandes procesadores gráficos, los cuales nos darían mejoras en medida equivalente a la magnitud.

La Interfaz de Usuario

Cuando comienzas Synfig Studio, esto abrirá un splash gráfico y se levantará. Luego de que termine de cargar, deberías ver un árbol de ventanas (estructurada). La ventana en la esquina superior izquierda es la caja de herramientas. Aquí es donde puedes abrir archivos, cambiar de herramientas, etc. Te darás cuenta de que la mayoría de los botones están oscurecidos, ya que no tienes ningún archivo abierto aun.

Las otras dos ventanas (una en la parte baja, y otra a la derecha) son muelles de diálogo configurables. Puedes reorganizar el contenido de estas en la forma que quieras solo arrastrando la tabla hacia donde quieras que se ubique. Puedes incluso crear un nuevo diálogo arrastrando una ventana fuera del diálogo en el que estaba insertado.

Si accidentalmente cierras cualquier ventana de dialogo (arrastrandola fuera del diálogo, y cerrando la nueva ventana en la que se creo), no te preocupes. Simplemente ve a la caja de herramientas y accede a “Archivo->Dialogos”, y haz click sobre el dialogo que necesitas.

Existen muchos cuadros de dialog. Si no tienes la mas minima idea de lo que hace un cuadro de diálogo, simplemente mantén el puntero del ratón sobre su icono y un cuadro de ayuda saldrá, describiendo el nombre de ese cuadro.

Aquí están algunas de las más importantes:

Panel de Capas - Este cuadro muestra la jerarquía de las capas para el lienzo seleccionado. Adicionalmente te permite manipular esas capas.

Panel de Parámetros - Este cuadro te mostrará los parametros de la capa seleccionada en el momento, (O, si son seleccionadas varias capas, te mostrará únicamente los parámetros que las capas tengan en común) .

Panel de Herramientas - Te muestra cualquier opción especifica de la herramienta seleccionada.

Navegador - Muestra una miniatura de lo que esté seleccionado en ese momento sobre el lienzo, mostrándote como se verá. Ademas, puedes hacerle acercamiento o alejamiento, y mover el foco por el lienzo.

Panel del Historial - Muestra la lista del historial de la composición actual. Puedes modificar las acciones en el historia.

Si haces click en en botón “Nueva Composición” que esta en la Caja de Herramientas, una nueva Área de Trabajo se abrira.. Haciendo click en el menú circunflejo (entre la regla horizontal y vertical que están en la esquina superior izquierda del área de trabajo), luego en “Ver”, luego en "Propiedades", y el dialogo de propiedades del lienzo aparecerá.

El diálogo de propiedades del lienzo es un desastre, lo sé. Tendré que rediseñarlo en algo mucho mas comprensible en algún momento del futuro. Por ahora, ignora la sección "Área de imagen" y "Bloques y enlaces".

Si haces click en OK, el dialogo de propiedades del lienzo desaparecera y verás la Ventana del lienzo. Esta ventana representa el lienzo Raíz, eso no significa mucho en este momento, pero eso esta BIEN-- solo estoy tratando de mostrarte los alrededores.

En la esquina superior izquierda de la ventana del lienzo, veras un botón con un simbolo de acénto circunflejo. Si haces click en este botón, la ventana del menú del lienzo se abrirá. (Como acotación, si haces click en cualquier área del lienzo que no sea parte de la capa, este menú también aparecerá) Ahora, ya sabes donde esta el menu en la ventana del lienzo. Bien. Todo lo demas debería ser bastante auto-explicativo en la ventana del lienzo. (La explicación de las cosas en ese menu viene en un segundo)

Primeros Pasos

Creemos algo para poder jugar. Ahora que tienes una nueva composición abierta y el dialogo de propiedades esta fuera del camino, ve sobre la caja de herramientas y haz click sobre la herramienta de circulo. (Si no sabes cual de todas es, solo mueve el puntero del ratón sobre todas hasta que encuentres la que en la ventana de ayuda dice “círculo”).

En el segundo en el que hagas click sobre la herramienta circular, deberías darte cuenta de que el Panel de opciones de herramientas ha cambiado. Pero iremos luego hacia esa parte.

Nota: Algunos usuarios de portátiles podrían experimentar problemas con el click-arrastrar sobre el lienzo usando la herramienta de circulo, produciendo círculos exagerados o no haciendo nada. El problema es que Synfig ha detectado la almohadilla táctil del ratón y ha activado ese dispositivo (incorrectamente!) Para arreglar esto: Click sobre Archivo->Dispositivos de Entrada... El resultado será una ventana de dialogo, selecciona “deshabilitar” para tu almohadilla táctil del ratón. Luego de cambiar esto, tu ratón externo y la almohadilla táctil del ratón trabajarán según lo esperado.

Con la herramienta de circulo seleccionada, ahora puedes crear círculos en el Área de trabajo. Esto trabaja casi exactamente como esperabas que lo hiciese. Anda y crea dos círculos (o más, si así lo quieres). Si por accidente haces click sobre el lienzo en vez de hacer click y arrastrar (con el botón del ratón presionado) para dibujar el circulo, lo que sucedió, fue que creaste un circulo con un radio de 0 y efectivamente es invisible! No hay necesidad de preocuparse, puedes arreglar esto fácilmente. En el panel de parámetros, puedes cambiar los parámetros del objeto seleccionado en ese momento. Si ves una seleccionada con un radio de 0, ese debe ser tu circulo. Puedes cambiar el valor del radio a otro que no sea 0, digamos 10, y manipular desde este panel el objeto que tienes en el lienzo.

Ahora vuelve a la caja de herramientas y haz click en la herramienta normal (el circulo azul con el puntero encima). Luego de que hagas esto, haz click sobre cualquiera de los círculos. Verás entonces una caja de atado(que es medio inservible en este momento, pero yo no estoy de acuerdo), un punto verde en el centro, y un punto cian en el radio. Esos puntos son llamados patos. Si quieres modificar el circulo, agarra uno de los patos y arrástralo al rededor. Fácil!

Ahora puedes seleccionar una capa haciendo click sobre ella. Si quieres seleccionar mas de una capa, mantén presionado CONTROL mientras les estás haciendo click – esto funciona tanto en el Área de trabajo como en el Panel de capas. Pruébalo!

También puedes seleccionar múltiples patos. Puedes hacer esto de varias formas. Primero, puedes mantener presionado CONTROL e individualmente hacer click en los patos que quieras seleccionar, pero esto puede ser tedioso. Sin embargo, hay un método mucho más rápido – solo crea un cuadro de selección haciendo click con el ratón y arrastrándolo por sobre el área donde están los patos que quieras seleccionar.

Anda y selecciona los dos círculos, y selecciona todos sus patos. Con varios patos seleccionados, moviendo uno moverás el resto. Este comportamiento depende de la herramienta normal. Así, un nombre más descriptivo para esta herramienta hubiese sido “mover” o “traducir”.

La herramienta de rotar y escalar trabajan muy parecido a la herramienta normal, excepto en el caso donde tienes varios patos seleccionados. Es mucho más fácil probarlo que leer a cerca de ello. Selecciona algunos círculos, selecciona todos sus patos, y trata de usar las herramientas de rotar y escalar.

Nota que, a diferencia de la herramienta normal, las otras herramientas de manipulación de patos TIENEN opciones asociadas con ellas. Si una herramienta particular no esta haciendo lo que quieres que haga, hecha un vistazo en el Panel de opciones de la herramienta y ve si esta configurada como lo deseas.

Enlazando

Ahora probemos enlazar. Supongamos que queremos que estos dos círculos siempre sean del mismo tamaño. Selecciona los dos círculos y luego selecciona los patos correspondientes al radio de ambos (los puntos cian). Para seleccionar múltiples patos, lo haces creando un rectángulo de selección sobre ellos, o seleccionando primero uno, y presionas la tecla CONTROL mientras seleccionas el resto. Una vez que hayas seleccionado el radio de ambos, haz click derecho sobre cualquiera de los dos radios y aparecerá una nueva ventana. Haz click en “enlazar”. Boom. Los parámetros están enlazados juntos. Puedes probarlo tu mismo seleccionado solo uno de los círculos y cambiando su radio – el otro cambiará también. Buena cosa, eh?

Enlazar es un concepto fundamental en Synfig. Puedes crear enlaces no solo entre patos, también puedes hacerlo sobre parámetros seleccionando múltiples capas, haciendo click derecho sobre los parámetros en la ventana, y seleccionando “enlazar”.

DIGRESIÓN: Esto es sobre como los border son adjuntados a sus regiones—pero me estoy adelantando a mi mismo. En este momento, el poder fundamental y la flexibilidad de enlazar en Synfig Core esta mas allá de lo que Synfig Studio actualmente permite hacer. Esto cambiará en el futuro. De cualquier forma, volvamos a la vía...

Digamos que quieres que uno de los círculos sea de diferente color. Si ves en la caja que está debajo de las herramientas, verás selector de color, el selector de borde, y algunas otras cosas como el método por defecto de mezcla y las gradientes. La solapa de color de fondo funciona exactamente como crees que va a funcionar – puedes hacer click en

el color de fondo, y una modesta paleta de selección de colores aparecerá. Ahora, cambiar el color es bastante fácil.

Pero a veces solo quieres seleccionar un color y seguir de largo. Aquí es donde el editor de paletas sale a relucir. Su el funcionamiento aun no cumple al 100% (ie: guardar y recargar la paleta personalizada aún no ha sido implementado), pero la paleta por defecto es bastante decente. Haz click en la barra del editor de la Paleta y dale un vistazo – es la que que tiene el botón de paleta. Haciendo click en los colores cambiará inmediatamente en la ventana.

Todo hasta ahora va bien, pero seguimos sin cambiar el color del círculo. Hay dos formas de hacerlo. La primera forma es seleccionar el círculo que quieres modificar, ir a los parámetros y hacer doble click sobre el parámetro de color – un dialogo con el selector de colores aparecerá y podrás modificarlo como quieras. Fácil. Solo haz click sobre la “herramienta de relleno” de la caja de herramientas, luego haz click en el círculo de la ventana del lienzo. Boom. El círculo cambio de color. Esto funciona con mas de un círculo, pero llegaremos a eso en un segundo.

Prueba jugar un poco con los círculos por un rato. Cambia un poco los parámetros, y ve que sucede. Para empezar, juega un poco con el lápiz.

En profundidad

Por supuesto, hasta ahora sólo has aprendido a utilizar las características básicas de Synfig Studio pero no como animar un dibujo. Esto podrás verlo en el próximo tutorial.

http://wiki.synfig.org/wiki/Doc:Getting_Started/es

INTERFAZ

Synfig no se abre en una sola ventana, abre varias ventanas en el escritorio. Si estás familiarizado con The GIMP, reconocerás este diseño. Esta página intenta darte una breve introducción a los diferentes elementos que encontrarás tras abrir synfig.

Esta es Category:Caja de Herramientas la ventana principal de Synfig: aunque tengas varios proyectos abiertos, sólo habrá una Caja de Herramientas. La ventana está separada en tres áreas o paletas:

La ventana superior contiene botones que dan acceso a las operaciones de Archivo estándares : crear un nuevo archivo, abrir un archivo, salvar (todo) archivo(s) (con un nuevo nombre), deshacer y rehacer así como dan acceso al diálogo de ajustes y al sistema de ayuda.

En la paleta inferior están las herramientas que nos permiten crear y manipular objetos (o mejor: capas, así cada objeto está en su propia capa). Pueden encontrar información detallada de cada herramienta aquí.

La última paleta contiene los ajustes por defecto para las nuevas capas: los colores de frente y fondo, el ancho de línea, opacidad y modo de capa.

Una vez que hemos abierto un archivo o creado un nuevo proyecto (ej: mediante los botones en la Caja de Herramientas) veremos la ventana canvas. ¡Aquí es donde crearemos nuestra animación!

La mayoría de las aplicaciones de gráficos tienen un conjunto de menús en lo alto de la pantalla, en la parte superior de la ventana principal, o en la parte superior de la ventana de dibujo, Synfig tiene una careta: el pequeño triángulo negro en la esquina superior izquierda del canvas. Donde están todos los menús que esperamos y que nos permiten acceder a la mayoría de las características de Synfig.

El área sombreada en ajedrez gris es el área de trabajo en la que podemos crear elementos/capas y manipularlos.

La línea temporal que puedes ver en la imagen sólo aparece cuando has definido una duración distinta de cero en el diálogo de ajustes del proyecto. En la parte izquierda podemos ver el número actual de marco y en la parte derecha dos botones para cambiar

el estado de animación y bloquear/desbloquear los marcos-clave. El TutorialDoc:Animación Básica nos proporciona una buena introducción sobre como trabajar con estos botones.

En la imagen anterior hay tres elementos sobre el canvas, la curva negra - llamada Bline - está seleccionada. Los pequeños puntos coloreados controlan la curva y se llaman ducks.

La tercera ventana contiene también tres áreas, cada una de las cuales puede mostrar diferentes paneles: es esta imagen el Panel de Navegación, el Panel Opciones de Herramienta y el Panel Capas estan activados.

Puedes ver las descripciones detalladas de los otros paneles aquí.

La cuarta y última ventana muestra el Panel de Parámetros, donde podemos encontrar parámetros detallados y ajustes para el elemento activo como el color, ancho, opacidad, posición y demás. A la derecha está el Panel de Pista Temporal que nos permite crear y modificar Puntos de Ruta.

http://wiki.synfig.org/wiki/Doc:Interface/es

NIVEL INTERMEDIO

REBOTE DE PELOTA

Diferentes aproximaciones para el mismo resultado

Con Synfig hay cuatro maneras de crear una pelota rebotando usando las posibilidades técnicas de este programa.

1. En la primera se hace el rebote de la pelota manualmente. Eso implicaría crear muchos puntos de interepolación y ajustarlos para concordar con un movimiento parabólico (en tiempo y trayectoria).

2. La segunda manera es usar parámetros de interpolación de los puntos de interpolación (puntos verdes) cuando están colocados en la interpolación TCB. Esto reduciría drásticamente la cifra de interpolaciones y también hace que el tiempo de los rebotes sea más fácil.

3. Para la tercera forma se hace uso del enlace con la línea Béizer. Si se dibuja el camino del rebote de la pelota usando una línea Béizer es fácil hacer siga el camino incluso variando la velocidad.

4. The fourth way to simulate a bouncing ball is to create the mathematical equations to do that. Just make several parabolic shots at the rigth place a the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

Rebote manual de la pelota

La regla para hacer el rebote manual es dibujar en un papel el rebote deseado. Después marcar la línea horizontal con intervalos regulares y hacerlos coincidir en la intersección de la curva en vertical. Véase la imagen:

Teniendo intervalos regulares en el eje horizontal (X) nos da intervalos irregulares en el eje vertical (Y). Esto se debe a la naturaleza de la curva.

Ya que se tengan los puntos localizados en una cuadricula 2D éstos se pueden dibujar directamente en Synfig haciendo uso de la cuadrícula (F12). Después se normalizan los valores para que sean completamente simétricos. Esto nos da la siguiente tabla:

Tiempo Posición X Posición Y Comentarios 0f -175.0 92.0 Punto más alto 4f -165.0 92.0 8f -155.0 81.118 12f -145.0 63.678 16f -135.0 29.479 20f -125.0 -15.522 Punto más bajo 24f -115.0 29.479 28f -105.0 63.782 ... ...

La posición en X se incremente en pasos de 10.0 mientras que la posición en Y obedece a una curva parabólica.

Para proceder con más rebotes sólo se duplican los puntos de interpolación (poner el ratón en el punto, dar click derecho y duplicar) reproduciendo movimientos simétricos. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

Esta es la gráfica resultante de la aproximación manual del rebote de una pelota.

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

La animación resultante y el archivo son los siguientes:

File: Media:manual.sifz

Ball Bounce using waypoints interpolations

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

Time X position Y position Comments 0f -175.0 92.0 Highest point 20f -125.0 -15.522 Lower point 40f -75.0 92.0 Highest point 60f -25.0 -15.522 Lower point ... ...

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

But if you edit the TCB parameters this is the result you obtain:

The TCB parameters are the following:

Time X position Y position Comments Tension Continuity BiasTemporal Tension

0f -175.0 92.0 Highest point 0.0 0.0 0.0 0.0 20f -125.0 -15.522 Lower point 0.0 -2.2 0.0 0.0 40f -75.0 92.0 Highest point 0.0 0.0 0.0 0.0 60f -25.0 -15.522 Lower point 0.0 -2.2 0.0 0.0 80f 25.0 92.0 Highest point 0.0 0.0 0.0 0.0 ... ... ... ... ... ... ... ...

That's the resulting animation:

And the sample file: Media:waypoint-2.sifz

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

Ball Bounce following a path

To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature.

The use of a path to perform the bounce have some advantages.

You can see the complete ball bounces in one shot. You can make the ball rotate along the path (this would allow make bounces of

non rounded things).

You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.

It has some disadvantages:

It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:

(You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste

canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.

Once linked you can drag it and it would be stick to the bline.

Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline.

Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

Time Amount Comments 0f 0.0 Highest point 20f 0.2 Lower point 40f 0.4 Highest point 60f 0.6 Lower point 80f 0.8 Highest point 100f 1.0 Lower point

This coincides with the main waypoints of the last method we have seen. But look what's the result:

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

Time Amount Comments 0f 0.0 Highest point

20f 0.2 Lower point 24f 0.2626 28f 0.3085 32f 0.3463 36f 0.3741 40f 0.4 Highest point 44f 0.4245 48f 0.4554 52f 0.4926 56f 0.5280 60f 0.6 Lower point 64f 0.6629 68f 0.7075 72f 0.7445 76f 0.7783 80f 0.8 Highest point 84f 0.8253 88f 0.8539 92f 0.8928 96f 0.9375 100f 1.0 Lower point

Now look to the graphs again and notice that the X travel is now a straight line.

This is the resulting animation and the sifz file.

The sample file: Media:bline.sifz

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

http://wiki.synfig.org/wiki/Doc:Ball_Bounce/es

CREAR UNA LUPACrea un nuevo documento.

Inserta una capa cícruclo, esta será el contorno de la lupa, por lo que me gustaría otro color,

Yo elijo marrón

y la llamo "outline".

Haz otra capa circulo, y con click derecho elige copiar u luego pegar,

haz click en el punto azul claro y haz el radio un poco menor

Elige "Transparentar" como el método de mezcla en el parámetro de la capa

y acabarás teniendo un agujero.

Yo llamo esta capa "hole"

Haz una tercera capa círculo y establece su color con transparencia. Esta capa será el cristal.

Ahora debería verse así.

Ahora escoge la Herramienta de línea Bezier para hacer el mango.

En las opciones de herramienta veo que sólo tienes seleccionada "Contorno". No quiero tener relleno.

Haz click en el contorno del cristal con la herramienta de línea bezier y haz el mango.

Incrementa el espesor del contorno a 14 puntos en el parametero espesor de la capa.

Selecciona las todas las capas (3 círculos y una línea bezier) y encapsúlalas mediante click derecho del ratón.

Yo he llamado a la capa encapsulada "magnifying glass"

Haz una nueva capa, elige "esferizar". Baja esta capa hasta el final (esta es el efecto de aumento y todo lo que esté por debajo de esta capa sera ampliado).

Entonces selecciona la capa encapsulada "magnifying glass", ve a sus parametros y haz click derecho, elige "Exportar"

una ventana aparece pregutando el nombre para este exportado valor. Yo elijo "zoom".

Haz click en la capa "Spherize", y en su lista de parametros haz click derecho en "Radio", elige "Convertir/Exponencial".

Haz click en el panel "Descendientes" y encuentra el valor exportado "zoom", haz click en el, vuelve al panel de las capas y haz click en la capa Esferizar si no estña actualmente seleccionada.

En el parametro "Radio" hay un pequeño triángulo, haz click en el para abrir los subparametros, haz click derecho en "Exponente" y elige "Connectar".

Ahora el radio de la capa Esferizar estará conectada al zoom de la capa encapsulada llamada "magnifying glass", así que si haces zoom en ella, la capa seguirá.

Yo también necesitaré conectar el origen de la capa Esferizar con el origen de la capa encapsulada

Hago click en la capa Esferizar y el pequeño circulo verde se hace visible, este es el origen. Haz click en el y muevelo un poco al lado (esto es así porque éste cubre el origen de la capa encapsulada y yo quiero seleccionarlos y enlazarlos los dos juntos.

Haz control click en la capa "magnifying glass" para tener ámbas capas activadas,

ahora que ves los dos orígenes, haz control click izquierdo en ámbos de manera que se vuelvan más brillantes y luego haz click derecho y elige "Enlazar" desde el menu emergente.

Ahora cuando se mueve la capa "magnifying glass", la capa Esferizar la seguirá. Necesitamos algo sobre lo que hacer aumento así que importo una imagen y la pongo bajo la capa Esferizar.

El parámetro "Cantidad" de la capa Esferizar decide cuanto efecto de aumento habrá, prueba, incluso podrás poner valores negativos.

A mi me gustaría hacer que la lupa pueda girar, así que creo una nueva capa "Rotar" dentro de la capa "magnifying glass". To la pongo encima de todas las capas interiores. La capa de rotar solo afecta a las capas inferiores.

También he añadido una capa "Bisel" dentro de la capa "magnifier glass" para hacerla parecer menos plana. Puedes estudiar los parametros de esas nuevas capas extra si descargas el fichero synfig (la imagen es usada también en este archivo)

http://wiki.synfig.org/wiki/Doc:Building_a_magnifying_glass/es

ANIMACION POR CORTES

Este es un breve tutorial para mostrar como crear animaciones de estilo de recorte por partes (cut-out). Por lo general, las animaciones de estilo cut-out usan el arte de imagen estática en vez del arte de vector para crear la animación. Véa la serie South Park. Usted debería obtener como resultado, una especie de animación como ésta:

Contents

1 Preparando el material 2 Importando las imagenes cut-out 3 Encapsulando las capas de imagen 4 Agregar las Capas de Rotación

5 Ahora a animarlo!

Preparando el material

Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo se ha preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este archivo. También contiene uno con el final .sifz que es el resultado de la animación.

Cada parte del cuerpo (cabeza, brazos, piernas, etc.) es un archivo PNG único. (En la imagen de partes, las imágenes individuales están compuestas en una más grande). Se han puesto a todos los archivos las mismas dimensiones horizontales y verticales para que entonces todas las imágenes pueden caber una sobre otra para componer al personaje sin la necesidad de ajustar sus tamaños o posiciones. Esto ayudará más tarde al importar cada imagen en Synfig.

Importando las imagenes cut-out

Esto es tan simple como ir al Caret Menu y seleccionar el File-> Import y escoger el archivo apropiado para cada parte del personaje o actor. Después de repetir este proceso para cada uno de los archivos de imagen de su personaje, debería obtener algo parecido a lo que aparece debajo.

Cuando usted va siguiendo los pasos del tutorial, notará que todas las capas de imagen tienen las mismas dimensiones. El límite de cada capa de imagen es el rectángulo con los ducks (pequeños circulos) verdes mostrados. Las cajas resaltadoras de todas las capas (layers) coinciden ya que expresamente creé cada imagen con esas dimensiones y las coloqué correctamente. Esto nos permitirá que hagamos lo siguiente: Seleccione todas las capas (CTRL + clic en cada capa) y vaya hacia la esquina Superior izquierda hasta la Inferior Derecha (puestos todos en color gris). Haga el clic derecho-> Link on each one. Esto enlazará todos los límites de las capas de imagen para mantenerlos en una misma posición relativa. Esto prevendrá cualquier modificación casual de los bordes de la imagen y evitará cualquier deformación inapropiada.

Obviamente el orden de cada capa es importante para reubicar las partes del personaje a fin de formarlo correctamente (en el caso, por ejemplo, que la pierna izquierda esté detrás de la derecha).

Encapsulando las capas de imagen

Como usted puede imaginar, vamos a hacer girar las Capas para realizar la animación cut-out. Pero antes de aplicar la rotación de cada parte del cuerpo personaje, tenemos que encapsularlo de modo que la rotación sólo se aplique a las capas/partes deseadas. Después de la encapsulación y de renombrar las capas del lienzo, el resultado se parecerá a esto:

Agregar las Capas de Rotación

Antes de añadir las Capas de Rotación (para hacerlas girar), debería de analizar su personaje detenidamente. Tiene que comprender el marco mecánico al que los movimientos del personaje están ligados, esto es, mediante el mecanismo del esqueleto del personaje. Para un simple personaje humanoide, uno considera la cadera como el centro de rotación del esqueleto entero. Cada miembro gira con relación a la rotación de la cadera. También cada submiembro debería girar con relación a su elemento padre y el padre a su vez con relación a la cadera (usamos la cadera como el hueso raíz o padre).

En nuestro ejemplo, el cuerpo girará con relación a la cadera y la cabeza con relación al cuerpo. Cuando hacemos girar la cadera del personaje estará la necesidad de darle una rotación idéntica al cuerpo. La cabeza tiene que girar con el torso y además con la cadera. Este efecto acumulativo de miembros rotativos y submiembros es conocido como la jerarquía de miembros. La cabeza también necesita su propia rotación individual que no afectará a ningún otro miembro.

Vayamos al principio añadiendo una Capa de Rotación (Rotate Layer) a la cadera. Iremos al lienzo de la cadera pegada y seleccionaremos la capa de imagen de la cadera. Inserte una nueva Capa de Rotación (File-> Layer-> New Layer-> Transform-> Rotate) encima de la capa de imagen de la cadera. Renombre la capa como 'Rotar cadera' (o como quiera). Ahora vaya al cuadro de diálogo de parámetros de Capa de Rotación

(Rotate Layer) y seleccione Amount parameter. Este parámetro establece el ángulo de rotación. Exporte este parámetro (clic derecho) y dele un nombre propio (por ejemplo, cadera).

Ahora al setup de la capa de rotación. Debería haber notado que hay un parámetro de origen en la Capa de Rotación (Origin parameter), este es el punto de origen de la rotación. Es muy importante que usted ponga el origen en la posición apropiada, permitiendo a la rotación apropiada de las capas de imagen, en este caso usted debería de colocar el origen de rotación en el centro de las caderas del personaje. Como otro ejemplo de obviedad, los brazos girarán sobre el hombro y no sobre la mano.

Antes Después

Ahora, un razonamiento: Cuando hacemos girar la cadera del personaje también necesitaríamos hacer una rotación idéntica al cuerpo. La cabeza tiene que girar el con el torso y además con la cadera. Otro opción de hacer esto consistiría en que cada miembro del cuerpo tenga su propia rotación, más las rotaciones de aquellos miembros superiores al que está ligado en su jerarquía. Para lograr esto, debería añadir la misma capa de rotación a todos los miembros que dependen de la rotación de cadera. Copie y pegue la Capa de Rotación de la cadera para hacer girar a todas las capas de imagen encapsuladas.

Recuerde que el parámetro de rotación es exportado, y el valor es compartido entre todas las capas de rotación pegadas, dando el efecto deseado. Todos los miembros girarán ahora congruentemente con la cadera. ¡Magia! Vea la imagen.

Para cada uno de los miembros siguientes en el nivel, necesitaríamos una Capa de Rotación individual adicional. Los siguientes miembros del nivel de jerarquía son: las piernas y el cuerpo. Tenemos que añadir una Capa de Rotación para cada miembro del siguiente nivel. Deberá repetir el mismo proceso para cada uno: Añadir la Capa de Rotación, renombrarlo, exporte el Amount parameter (muy importante) y coloque el Origen al lugar de rotación apropiado.

Después hacer esto para las piernas y el cuerpo, debería obtener algo como lo siguiente:

Observe que por suerte usted ha exportado el parámetro Amount para cada capa de rotación agregada. Entonces todas las copias de la capa de Rotación de la cadera comparten la misma rotación. El mismo se aplica a las otras capas de rotación (cuerpo y piernas).

Ya que los brazos y la cabeza son miembros del cuerpo del niño, ellos también deberían de tener la misma rotación que el cuerpo. Repita los mismo pasos para la capa de rotación de cuerpo y cópielo sobre los brazos y las capas de imagen principales.

Ahora ver como trabaja este estilo de animación. Necesita ahora una capa de rotación adicional para el resto de los miembros para producir su rotación individual. Repita los pasos de Añadir una Capa de Rotación (Rotate Layer), lo renombra, exportan el parámetro Amount y centran el punto de Origen. Tendría algo como esto:

Ahora a animarlo!

¡Ahora es el momento de animar al personaje!. Puede ir al cuadrado de diálogo hijo (Child Dialog) y ampliar los Nodos ValueBase y seleccionar cualquiera de los parámetros ya exportados (ángulos). O bien usted puede seleccionar el parámetro mismo de la capa apropiada. Esto pondrá al duck (pequeño circulo de color verde en los extremos) de ángulo en la posición apropiada mostrando las posiciónes y ángulos alternados debido a las rotaciones anidadas realizadas para cada submiembro. Puede hacer uso de la característica Group (Grupo) de Synfig para seleccionar múltiples capas dispersadas con sólo hacer un doble clic.

¡No mueva el punto de origen de rotación de ninguna capa! Si hace esto, romperá la composición. He preparado las imágenes individuales con un área redondeada escondida (vea la imagen del personaje detenidamente y verá lo que quiero decir). Esto permite que hagamos rotaciones sin revelar esquinas agudas.

http://wiki.synfig.org/wiki/Doc:Cut-out_Animation/es

ANIMACION DE UNA FLOR

Este tutorial te mostrará cómo crear una simple animación de una flor que crece hecha con la herramienta Blines (linea Bezier).

Contents

1 Ajustes Básicos 2 Animar el tallo

3 Añadiendo los pétalos

4 Escondiendo los pétalos

Ajustes Básicos

Haz click sobre Fichero > Nuevo. Puedes mantener los valores por defecto aquí y simplemente hacer click sobre OK.

Haz click sobre los colores de frente y de fondo en la caja de herramientas, para crear un gradiente como desees. (También puedes editar el gradiente directamente haciendo click sobre él).

Selecciona la Herramienta de Gradiente y arrastra el cursor verticalmente sobre el tapiz para rellenarlo con el gradiente.

Selecciona la Herramienta Bline (Línea de Bezier) y en el diálogo de las opciones de la herramienta, asegúrate de que solamente "Rellenar" está seleccionado.

En la caja de herramientas, fija el color de frente a verde. Dibuja una especie de triángulo con la herramienta Bline. Para cerrar el contorno después de poner tres vértices, haz click con el botón derecho del ratón sobre el primer vértice y selecciona "Loop Bline" (Hacer Bucle).

Nota: Si la única opción disponible es "Separar Tangentes", arrastra un poco el punto rojo (el "Pato") que cubre el primer vértice, y entonces haz click con el botón derecho de nuevo sobre el vértice (el punto naranja) para que aparezca la opción Hacer Bucle.

Ahora que el contorno está cerrado, puedes "crear" la figura Bline seleccionando otra herramienta o presionando el boton Crear (el icono como unas ruedas dentadas) debajo de las opciones de herramienta.

Esto será la base del tallo. Puedes tocar los manejadores de tangentes (los puntos rojos) un poco, para hacer un triángulo más redondo. Con la Herramienta Normal, haz click con el botón derecho sobre cada vértice y selecciona "Separar tangentes", de modo que las dos tangentes de cada vértice se pueden manejar separadamente. Hemos acabado con los ajustes básicos.

Animar el tallo

Necesitamos cambiar nuestra imagen simple en algo que pueda ser animado. En el Menú del Lienzo selecciona Editar > Propiedades. Ve a la pestaña de tiempo y fija el Tiempo Final en 6s.

Ahora hay una pequeña linea de tiempo bajo el lienzo.

Haz click en el comienzo de la línea de tiempo (0f), luego, en el Panel Fotogramas Clave (el que tiene un icono de una llave) haz click en "+" (añadir un fotograma clave). Los fotogramas clave nos permiten Asentar la escena; esto es, en un fotograma clave, las propiedades de cada elemento se recordarán.

Haz click de nuevo en la línea de tiempo, en 4.5s. Presiona el círculo verde en la esquina inferior derecha del lienzo ( o el icono que tengas ahí, dependiendo del tema que uses), para cambiar Modo de Edición de Animación (el círculo es rojo ahora).

Con la Herramienta Normal, selecciona la punta verde, y mueve el vértice superior hacia arriba para hacer un tallo.

Puedes jugar con los manejadores de las tangentes para mover un poco la forma si lo deseas.

Estando aún en 4.5s, haz click con el botón derecho en el borde del tallo cerca de la parte más alta, y elige, "Insertar Vértice". Haz lo mismo en el otro lado del tallo. Haz click con el botón derecho sobre esos puntos nuevos y elige de nuevo Dividir Tangentes. Intenta hacer una figura que se parezca a la de la imagen para crear el brote.

Si ahora pinchas en 2s (por ejemplo), verás que la figura del brote es ligeramente visible, incluso si es más bien pequeña, e incluso si los patos del brote son invisibles. Digamos que queremos que el brote aparezca en el momento 3.5s, y el tamaño completo en el momento 4.5s.

Pincha en 3.5s en la línea de tiempo. Échale un vistazo a los Parámetros y al diálogo Línea de tiempo. Verás que cada parámetro en el Panel de Parámetros corresponde a una fila en el diálogo de la Línea de tiempo. El último parámetro es la lista de vértices. Haz click sobre la flecha pequeña a la izquierda para desempaquetar la lista. Deberías ver algo como esto:

Cada punto grande verde es un valor grabado (aquí las posiciones de los vértices se grabaron en el momento cero con el fotograma clave, y en el momento 4s cuando movimos algunos vértices o manejadores de vértices). Los dos vértices que añadimos para hacer la yema o brote están marcados en "DYN" (dinámico). Haz click sobre ellos en la lista de parámetros, y selecciona "Mark Activepoint as Off". El diálogo debería aparecer ahora como en la imagen, la parte en gris es la parte donde los vértices del brote no tienen efecto sobre el tallo.

Por ejemplo si haces click ahora sobre 2s o sobre 3s, el contorno de la yema no es visible. Comienza a verse un poco tras el momento 3.5s.

Sin embargo, el contorno del tallo puede no parecer bonito durante el crecimiento desde 0 a 4s. Asegúrate de que estás aún en Modo de Edición de Animación, y retoca la figura, en varios momentos del tiempo, hasta conseguir algo que te guste.

La animación del tallo se ha terminado, pero aún faltan los pétalos.

Puedes observar una previsualización: Ve a Fichero > Previsualización, selecciónalo y espera hasta que la previsualización se genere, y observa:) (Las previsualizaciones son a menudo alisadas y desenfocadas, pero el resultado final será claro. Se pueden obtener previsualizaciones de mejor calidad usando el zoom y el número de imágenes por segundo en la ventana de diálogo de previsualizaciones.

Añadiendo los pétalos

Ahora puedes abandonar el "Modo de Edición de Animación" haciendo click sobre el círculo rojo en la esquina inferior derecha del lienzo.

Cambia el color de pintura a rosa, y crea un pétalo con la herramienta bline. Notarás que el pato Duck verde que permite el movimiento fácil de un perfil está en el centro del lienzo. Selecciona todos los vértices del pétalo con Ctrl+A y muevelos junto al pato verde (con la Herramienta Normal), como se muestra.

Arrastra entonces el pato verde muy cerca de la parte superior del brote. Toca un poco el pétalo si es necesario. Selecciona también, en el panel de capas Layers Panella capa del pétalo y olócala debajo de la capa del tallo. Haz click en el pétalo para seleccionarlo,

y entonces haz Ctrl-Click sobre el tallo. Ahora ambos objetos deben aparecer seleccionados.

Haz click ahora sobre el vértice superior del tallo y ctrl-click sobre el pato verde del pétalo (ambos deben aparecer en un color más ligero, por estar seleccionados). Haz click con el botón derecho sobre el vértice superior del tallo, y selecciona "link". El pétalo se moverá un poco puesto que el pato verde se ha ligado con el vértice del tallo.

Ahora que hay una unión entre el pétalo y el extremo del tallo, cuando el extremo del tallo se mueve, el pétalo le seguirá. ( Y si el pato verde el pétalo se mueve, el extremo del tallo se moverá, pero no queremos hacer eso aquí).

En el Layers Panel (panel de capas), selecciona la recién creada capa del pétalo y duplícala (con el tercer botón del diálogo). En el lienzo, presiona Ctrl+A para seleccional todos los vértices del pétalo duplicado, y muévelos un poco, de forma que los pétalos no estén sobrepuestos (No muevas el pato verde, solo los naranjas). Repite el proceso varias veces para tener algo parecido a la imagen.

Nota que los pétalos duplicados también están ligados al tallo.

Si vas al primer fotogramaclave, verás que los pétalos son visibles. No queremos eso. Queremos que los pétalos aparezcan y florezcan el final del crecimiento.

Escondiendo los pétalos

Esta parte es, quizás, la más complicada. Supongo que debe haber una forma más sencilla de hacerlo, y si la encuentro, actualizaré el tutorial;)

Digamos que queremos que los pétalos aparezcan un poco después de los 4 segundos de animación, y que alcancen el tamaño completo a los 5 segundos, en lugar de ser visibles y de tamaño completo en todo momento. Cambia a Modo de Edición de Animación de nuevo haciendo click en el círculo verde en la esquina inferior derecha del lienzo.

En la línea de tiempo, haz click para colocar el cursor en los 5 segundos. En el panel de fotogramas clave Panel de Fotogramas Clave, haz click en "+" para añadir un fotograma clave nuevo en 5s, asegúrate de que los cambios que haremos no afectarán a los fotogramas siguientes. Haz click en 4s, y en el Panel de Capas, selecciona todas la capas de pétalos (con Ctrl+click), y entonces presiona Ctrl+A para seleccionar todos los vértices de los pétalos. Escalalos minimizándolos con la Herramienta Escala Scale Tool, y muévelos, para que estén ocultos tras el tallo como se muestra.

Entre el segundo 4 y 5, los pétalos aparecerán y florecerán. Pero el problema es que aún son visibles desde la primera imagen hasta los 4 segundos. Podríamos bien cambiar el tamaño de los pétalos y hacerlos pequeños y ocultos en cada imagen desde el segundo 0 a los 4s, o bien podríamos hacerlos invisibles en esas imágenes.

Escojamos la segunda opción. Para hacer las cosas más simples, vamos a Encapsulate (encapsular) las capas de pétalos en un Inline Canvas. Con todas las capas de pétalos seleccionadas, haz click con el botón derecho sobre ellas en el panel de capas y selecciona Encapsulate (encapsular). Puedes renombrar las capas para hacer las cosas inteligibles.

Selecciona los "Pétalos" inline lienzo y salta al primer fotograma clave. En la pestaña de Parámetros, fija el Amount (parámetro de cantidad) valor a 0. Los pétalos ahora son visibles en ese fotograma clave. Nota que dos puntos de dirección son añadidos al frente del parámetro "Cantidad", uno en el segundo 0s y el otro en el 5s. Arranstra el punto 5s a 4s de forma que la opacidad de los pétalos esté entre los segundos 1 y 4.

Aun hay un problema : De 0s a 4s, la opacidad de los pétalos crece lentamente, haciendo los pétalos visibles cuando no deberían serlo. Para resolver esto, cambiaremos el método de interpolación de la Cantidad: Haz click con el botón derecho en el punto direccional 0f, y selecciona Edit waypoint. Aparecerá un nuevo diálogo, en el que puedes elegir la interpolación In y Out. Fija la interpolación Out a constante, mientras otra punto direccional es encontrado. Así desde 0f a 4s el valor de Cantidad será igual a 0, y en el segundo 4 cambiará de momento a 1, y hará los pétalos visibles, como se esperaba. Alternativamente, podríamos alcanzar el mismo efecto fijando la interpolación In (de entrada) del punto direccional en 4s a Constante.

Nota como (la mitad del) punto direccional cambia de círculo verde (significando animación suave del parámetro Cantidad) a paso rojo (significando que el parámetro Cantidad ha saltado repentinamente)

Ahora has acabado.

El tallo crece durante 4.5 segundos y entonces permanece quieto los últimos 1.5 segundos. Los pétalos están escondidos hasta el segundo 4, y entonces crecen rápidamente entre el segundo 4 y 5, y permanecen parados también los últimos 1.5 segundos.

Haz click sobre Fichero > Render (Fichero > Mostrar) para ver tu animación. Selecciona cualquier formato que quieras, y no olvides desmarcar la opción "Use current frame" (de otro modo tan solo un fotograma se mostrará).

http://wiki.synfig.org/wiki/Doc:Flower_Animation/es

SINCRONIZAR EL HABLA

Este es un pequeño tutorial sobre cómo hago yo el lipsync. Necesitaremos un grabador de audio (por ejemplo Audacity), el programa Papagayo, un editor de vídeo (como Avidemux), un editor de texto (como gedit) y por supuesto Synfig.

Aconsejo fijarse en los dibujos de Preston Blair. http://www.animationarchive.org/2006/05/media-preston-blairs-animation-1st.html

Tenemos hecho nuestro dibujo (en este caso en vista frontal).

1. Grabamos con Audacity el texto que queremos utilizar.

2. Lo arreglamos (si es necesario) y lo exportamos al formato wav. Le ponemos de nombre Texto.wav.

3. Con el programa Papagayo abrimos el fichero Texto.wav.

4. Arreglamos el texto conforme a las instrucciones del programa Papagayo y guardamos como Texto.pgo

5. Una vez arreglado le damos a "Export voice…" Nos lo guardará como Texto.dat.

6. Abrimos Texto.dat con gedit. Al lado de los fotogramas anotamos la posición de los fonemas correspondientes; así, 1 corresponde a 1f, 24 corresponde a 1s, 25 corresponde a 1s 1f, 50 corresponde a 2s 2f, etc.

Ahora ya sabemos la posición exacta de cada fonema. Nos queda decidir cuántas poses diferentes queremos. (podemos utilizar el esquema dado por Preston Blair, o utilizar uno propio).

Vamos a nuestra animación. Vamos a hacer que se mueva la boca, sin la cabeza.

1. Exportamos la boca (si queremos seguir las indicaciones de Preston Blair, exportaremos la cabeza).

2. Cambiaremos la interpolación a Constante.

3. Ahora, en el lienzo exportado, dibujaremos cada pose en el fotograba adecuado, duplicando el keyframe cuando sea necesario. Si la velocidad del texto es muy rápida, entonces no es necesario dibujar todos los fonemas.

Podemos dibujar primero todos los fonemas en el primer segundo y empezar con la animación a partir del fotograma 1s, de modo que duplicaremos el fotograma clave correspondiente en cada momento. En este caso renderizaremos a partir del fotograma 1s.

Otra cosa que podemos hacer es crear una librería de fonemas aprovechando el paste canvas layer como en este tutorial http://vimeo.com/10318012.

Después utilizaremos el editor de vídeo (Avidemux) para añadir el audio al vídeo.