November '09 challenge - Synfig Tutorials

[pixelgeek]

As we move over to the new revamped wiki, we need more/updated tutorials to help out the newcomers. Anything you can do - written walkthroughs of common tasks, Annotated screenshots or if you’re really slick, video/screencasts - would help. Pick your own topic, update outdated tutorials or create new ones. If you have a particular one in mind, post first so that we don’t have multiple people tackling the same topic. If you want to post directly on the wiki, contact an administrator and they can set you up with access, or post it wherever you can, and we can move it over.

What took you the longest to figure out in Synfig?

Chris

[Rafael]

Hi, pixelgeek. As you can see here:
http://synfig.org/forums/viewtopic.php?f=10&t=836
It doesn’t still work. I want to update and translate into spanish the “reuse animations” tutorial. Can you help me?
Thanks.

[pixelgeek]

I’m going to defer to genete on that one.

Chris

[antiFlash]

[size=150]Draw keyframes in Inkscape and convert to Synfig Studio animation![/size]

Hi everybody, I’m working in a method to transform a converted Inkscape drawing with curves that act as keyframes.

When they are converted via saxon with a XSLT transformation sheet (http://www.synfig.com/wiki/Svg2synfig), it only converts the drawing as independent curves in a 0 frames Synfig file, and with the trouble to work all the keyframes again in Synfig, using only those lines as reference.

This way, the curves can be transformed in just one curve with differents shapes as the times grows up.

You may be able to convert an Inkscape file with the link provided, feel comfortable with a little of Regular Expressions, the gvim editor and its differents modes, and get a little time to follow the Instructions, (inside the attached file).

Just browse into the directories:

1 fileInternals -- to get a dive into what will be going on 2 simple -- look for a simple example that don't deserves a more serious work 3 complex -- still a simple example, but bigger and with a simple method it can be converted in almost no time in a serious animation

Finally, I will update this post and maybe make a pdf to explain better.
Please give feedback.

Regards.
conversion.tar.gz (1.16 MB)

[antiFlash]

Draw keyframes in Inkscape and convert to Synfig Studio animation ! ! !

Hi everybody, as said before, here I leave a new and reworked tutorial, more detailed and with some screenshots to illustrate. The RegExKeyframes.zip is the file who contains the pdf tutorial.

Hope you understand it, and sorry if somehow repetitive.

Please give feedback.

Regards.
RegExKeyframes.zip (709 KB)
bounce.tar.gz (11.6 KB)

[Genete]

Wow!
That’s a great tutorial!
Honestly I prefer to draw directly on Synfig but I recognize that you have started an interesting subject thinking on using inkscape as primary keyframe compositor.
It can be interesting even using Synfig itself as the main drawing editor. Perhaps the copy, paste and morph and automatization to convert the copied objects to keyframes is a feature that is worth to think on implement.

I’ll upload it to the wiki if you include in your document the same license that the one we have in the wiki.
Great job!
-G

[Genete]

@Rafael

Hi, pixelgeek. As you can see here:
http://synfig.org/forums/viewtopic.php?f=10&t=836
It doesn’t still work. I want to update and translate into spanish the “reuse animations” tutorial. Can you help me?
Thanks.

Rafael,
you can translate it to spanish, place here the translation and I will put it into the wiki.
Sorry for the long response delay.
-G

[Rafael]

Hi Genete. The “reuse animations” tutorial is OK. After this:

Now you can create all the keyframes you need to store your “poses”. Once done you can go to the proper frame and insert a copy of the pose keyframe. It will produce a keyframe in the “eyelids” canvas, but will not produce any keyframe on the other layers (for example the eyeball). This allows you independently animate of a portion of your model, separate from the rest of it.

You can add:
Be sure that the exported canvas must be as longer as the animation.

When I have a little more time, i’ll do the translation.
Thanks.

[Genete]

You can add:
Be sure that the exported canvas must be as longer as the animation.

Done!
-G

[Rafael]

Hi, Genete. This is for you:

Si puedes, échale un vistazo por si me he colado. También tendrás que poner tú los enlaces (obviamente yo no puedo). Si ves que algo se entendería mejor de otro modo, no dudes en cambiarlo (no me sentiré ultrajado , al fin y al cabo cuanto mejor redactado y más claro esté, mejor para todos). He colocado una imagen por si alguien se despista, como está en español…

(empiezo a traducir lo que falta)

Hay un problema con esta técnica. Haces las copias de las posturas de animación enteras que has almacenado en los primeros keyframes del tiempo (fotogramas 2 y 4 de la muestra) y por lo tanto has hecho las copias de todos los otros objetos que existen en la escena (siguiendo el ejemplo, el globo ocular).
Si ya tienes realizada una animación del globo ocular y superpones los keyframes de un guiño (abierto y cerrado) en medio, entonces la animación de globo ocular se romperá por la inserción de las copias de los keyframes del movimiento del párpado.

EXPORTANDO EL LIENZO.

Cada vez que encapsulas un grupo de capas obtienes una capa madre (Paste Canvas) llamada “lienzo en línea” (Inline Canvas), que es una capa especial que contiene otras capas dentro e impide que la composición de las capas interiores afecte a las capas inferiores pero que están fuera de este grupo, o sea fuera de su alcance.
Uno de los parámetros de la capa encapsulada es el lienzo (Canvas). El lienzo se parece a un espacio de trabajo que representa todo lo que está contenido por la capa encapsulada.

(dibujo del ojo)

Para evitar el problema descrito en la sección anterior (el keyframe afectando a todos los objetos de la escena) puedes hacer lo siguiente:

1. Antes de la creación de las posturas de los keyframes de los párpados, encapsula todas las capas que forman los párpados dentro de un Lienzo en Línea.
2. Después selecciona la capa encapsulada y el parámetro Lienzo en el Diálogo de Parámetros.
3. Clic derecho en el parámetro Lienzo, exportar, y dale un nombre (en el ejemplo será “párpados”).

Una vez exportado vas al Panel de Navegador de lienzos y seleccionas sólo el lienzo exportado.
Haz doble clic encima y se abrirá una nueva ventana de trabajo con lo que fue encapsulado en el paso 1 solamente - el lienzo “de párpados” en la muestra.

Ahora puedes crear todos los keyframes que necesites para guardar tus “posturas”. Una vez hecho esto, puedes ir al fotograma apropiado e insertar una copia de la postura (keyframe). Esto producirá un keyframe en el lienzo “de párpados”, pero no producirá ningún keyframe sobre los otros (por ejemplo el globo ocular). Esto te permite que puedas animar una parte de tu modelo por separado, independiente del resto. Asegúrate de que el Canvas exportado sea tan largo como la animación.

Ahora, una vez que has almacenado los parpadeos (abierto y cerrado) en la posición deseada puedes ir a la ventana principal (simplemente cierra la zona de trabajo “de párpados”).Verás que todas las modificaciones se han transmitido a la animación principal, pero no han creado ningún keyframe en su área de trabajo. Incluso las capas que están dentro de la capa encapsulada “de los párpados” no tienen ningún keyframe (puedes ver una indicación de que hay keyframes en el lienzo exportado - líneas verticales rotas- pero no se muestra ningún keyframe en el diálogo keyframes). De todos modos, puedes ver los waypoints creados por los keyframes y pellizcarlos, pero no los propios keyframes. Para modificar los keyframes deberías editar el lienzo exportado otra vez en su propia zona de trabajo. Si modificas el lienzo encapsulado en la zona de trabajo principal, se crearán waypoints de acuerdo con los keyframes de la zona de trabajo principal, no de la zona de trabajo exportada, por lo tanto conseguirás efectos diferentes dependiendo con qué zona de trabajo modifiques las capas.

Ahora, una vez que has creado tu animación de los párpados puedes ir al globo ocular y modificarlo a tu gusto, insertando keyframes o waypoints sin preocupaciones sobre las interferencias con la animación del párpado. También puedes animar el globo ocular antes y hacer la animación de los párpados más tarde. No interferirán el uno con el otro.

Sería una gran mejora si pudieras conectar los cursores de tiempo de la zona de trabajo principal y la zona de trabajo del lienzo exportado para mostrar ambas ventanas en el mismo momento temporal. Esto daría la posibilidad de saber dónde insertar ‘la postura’ keyframes en el exportado para tenerla en su animación local.

UNA MUESTRA

Aquí puedes encontrar la animación de una muestra de un ojo que parpadea (las posiciones cerradas y abiertas son las copias de los keyframes “Abierto” “y Cerrado”, mientras que el globo ocular se mueve por separado en su propia animación.
He almacenado las posturas “Abierta” “y Cerrada” en los fotogramas 0 y 2. La animación está definida para empezar en el fotograma 6.

ANIMACION

archivo de muestra

Todos los comentarios son bienvenidos.

[Genete]

Rafael, thanks for your time. After a quick read I don’t see any needed modification.
I’ll incorporate to wiki ASAP.
Cheers
-G

[Rafael]

Hi, Genete. If it is OK for you, this night I’ll put here another translation.

[Genete]

@Rafael

Hi, Genete. If it is OK for you, this night I’ll put here another translation.

Sure!
-G

[Genete]

synfig.sourceforge.net/wiki/Doc: … mations/es

Please check it out!
-G

[Rafael]

Please check it out!

It is OK.
Hi, Genete. Here is the translation of the tutorial “Shiny effects”. I have updated few sentences.

Hola, aquí está la traducción. De nuevo, si ves algo que es mejorable, cámbialo. Es posible que me haya equivocado con la traducción de algún comando, ventana o herramienta. Al seguir el tutorial original, he encontrado algunas diferencias posiblemente debidas a la versión de Synfig utilizada. Las he puesto en negrita, échales un vistazo por si fuera un despiste mío y si crees que están bien, las añades al original. He repetido las imágenes para que estén también traducidas, pero no les he puesto los comentarios en rojo de los originales. Si crees que es mejor ponerlos no te cortes. Yo no lo he hecho porque creo que no hace falta, que ya está bastante claro (sobre todo si además se han hecho los tutoriales iniciales).

Efectos Brillantes #1 por Ceox
Nivel de Dificultad: Intermedio
Longitud: Aproximadamente 30 minutos
Versión de Synfig Estudio: 0.62,00

En este tutorial haremos algunos efectos de brillo sobre un texto.
Podría parecer largo porque hay mucho texto, pero cuando lo probé por primera vez lo hice en 5-10 minutos, por tanto si aprendes toda la materia podrás ser capaz de hacerlo rápido también.

Contenido
Parte 1 - Diseño
1.1 Paso 1: Crear el Nuevo del Documento
1.2 Paso 2: Crear la Capa de Texto
1.3 Paso 3: Seleccionar la Capa de Texto
1.4 Paso 4: Editar la Capa de Texto
1.5 Paso 5:
1.6 Paso (OPCIONAL) 6:
1.7 Paso 7:
1.8 Paso 8:
1.9 Paso 9:
1.10 Paso 10:
Parte 2 - Animación
2.1 Paso 1:
2.2 Paso 2:
2.3 Paso 3:
2.4 Paso 4:
2.5 Paso 5:
2.6 Paso 6:
2.7 Paso 7:
2.8 Paso 8:

Parte 1 - Diseño
Paso 1: Crear un Nuevo Documento
Comenzamos abriendo Synfig y creando un nuevo documento con todos los ajustes por defecto excepto estos:

Paso 2: Crear la Capa de Texto
Ahora creamos una nueva capa de texto. En este tutorial voy a usar el texto “Ceox”. No es mi verdadero nombre, pero es lo que haré. Empecemos añadiendo la capa de texto:

Paso 3: Seleccione la Capa de Texto
Ahora deberías ver una "Capa de Texto " en tu área de trabajo. Selecciona la capa de texto en el panel de capas, de modo que se destaque, y verás sus parámetros en la ventana “Parámetros”, que está debajo del espacio de trabajo si no lo has colocado en otra parte. (Click sobre la imagen para ampliarla; se abrirá en una nueva ventana).

Paso 4: Editar la Capa de Texto
Ahora vamos a modificar el texto en la ventana “Parámetros”. Primero haz doble click con el ratón sobre el color en la celda “Valor” y escoje el color que quieras, con 100 “Transparencia”. He elegido un azul bastante oscuro. Luego doble click sobre texto, también en la celda “Valor” y escribe tu nombre en la ventana emergente. Después de esto, cambia el tamaño a 50pt y la fuente a Arial, ambos presionando dos veces en cada campo en la celda “Valor” correspondiente. Aquí está una captura de pantalla de todas las cosas que hemos modificado: (He oscurecido todos los valores que deberían estar bien por defecto, pero si quieres puedes comprobar también los demás).

Paso 5: (OPCIONAL)
Si quieres “más fantasía” sobre tu texto, créale una sombra, como indica este paso. Click derecho sobre la capa de texto en el panel de capas y escoge " Duplicar Capa ":

Ahora deberías tener dos capas de “Texto” una sobre otra. Escoje la capa “Texto” inferior y cámbiale el color. Voy a escoger un verde sencillo. Ahora cambia el tamaño de esta capa aproximadamente 2-3 puntos más grande que la otra, en este caso a 52pt. Ahora tenemos una sombra para nuestro texto, aunque pudiera no estar perfectamente alrededor del mismo. Puedes fijar esto moviendo la capa inferior un poco. Así es como mi texto se ve ahora:

Paso 6:
Ahora creamos la primera cosa brillante. Añade una nueva capa como añadimos la capa de texto, pulsando sobre la pequeña flecha negra en la esquina de nuestra lona y escogiendo " Capa > Nueva Capa> Gradientes> Gradiente Linear.

Ahora tu lienzo debería estar lleno de algún gradiente coloreado. No te preocupes, recuperaremos tu texto en el siguiente paso, que en realidad viene ahora. Escoge la capa "Gradiente Lineal “en el panel de capas y luego haz doble click sobre el valor “Gradiente” en la ventana “Parámetros”, como hicimos en el Paso 4. Ahora deberías ver una ventana que se llama " Editor de Gradiente”. En el fondo de esta ventana deberías ver dos ‘medio flechas’ (one black and the other white) ( una blanca y una negra), una al lado izquierdo y otra al derecho. Click sobre la del lado izquierdo. (Cuando el color de la flechita es blanco, está seleccionada). Cambia el color a blanco y el valor “Transparencia” a 0. Ahora selecciona la flecha del lado derecho y haz lo mismo. Ahora inserta una nueva flecha (o CPunto, como quieras llamarlo) pulsando en el centro del área sobre la que están las flechitas con el botón derecho del ratón y selecciona " Insertar CPunto ":

Observa que este menú sólo aparecerá mientras mantienes el botón derecho pulsado. Ahora selecciona esta flecha (cambiará su color a blanco) y su valor “Alfa” a 50. Como habrás notado por ahora, la cantidad alfa controla la transparencia de un objeto. Ahora tu Editor de Gradiente debería parecerse a esto:

y en tu área de trabajo algo como esto:

Paso 7:
Gira y escala la capa "Gradiente Lineal " con la Herramienta Normal " utilizando los puntos de control como te muestra el vídeo. [http: // personal.inet.fi/musiikki/ceox/synfigtuto1/vid1.swf.html Click aquí para ver vídeo. Se abre en una ventana nueva.]

[Rafael]

Paso 8:
Selecciona la capa "Gradiente Lineal " en el panel de capas y cambia el "Método de Mezcla " a “Encima” en la ventana “Parámetros”. Ahora la capa de Gradiente es visible sólo sobre las capas que están debajo de ella. El gradiente debería desaparecer si lo colocaras como el vídeo mostró en el paso anterior. (No ponerlo arriba del texto) .

Paso 9:
Es más fácil hacer todas las animaciones después, por lo tanto ahora podríamos hacer otro efecto brillante, que prefiero llamar “un destello”. Comenzamos seleccionando la herramienta BLINE (Línea Bézier) (File:Draw-camino 128sif.png) y aumentamos al 400 % en nuestra área de trabajo. Podemos usar el zoom aumentando y disminuyendo en la ventana “Navegador”:

Ahora tenemos que dibujar un nuevo objeto con la herramienta BLINE (File:Draw-camino 128sif.png) en alguna esquina aguda de nuestro texto. Asegúrate de que está marcada la opción “crear región” en la ventana de las propiedades de la herramienta:

Escogí la esquina del X, porque este efecto queda muy bien sobre el último carácter. De modo que ahora dibuja una forma como ésta:

( Inserta un vértice haciendo click con el botón izquierdo y cierra la línea pulsando sobre el primer punto con el botón derecho, seleccionando después " Hacer Bucle ")

Paso 10:
Ahora reduce con el zoom al 100 % otra vez. Deberías tener una nueva capa en el panel de capas:
Como queremos un efecto brillante no necesitamos el contorno de la línea bézier (Bline). Podemos resolverlo de tres modos:
1- deseleccionamos la capa en el panel de capas pulsando sobre el cuadrado de la izquierda

2- En el panel de capas hacemos click derecho sobre la capa del contorno y le damos a “Borrar capa”.
3- Antes de dibujar la Bline, la deseleccionamos en la ventana de las propiedades de la herramienta.
As we want a brilliant effect we don’t need the contour of the Bline. We can solve it by three ways:
1-Unselect the layer in the layers list clicking on the square of the left side
2-In the layers list we do right click on the layer of the contour and choose “erase layer”.
3-Before drawing the Bline, unselect “contour” in the window of the properties of the tool.

Selecciónala pulsando sobre ella. Ahora tenemos sus parámetros en la ventana “Parámetros”. Cambia su color a blanco, (si no lo es). Pon su “Desvanecimiento” a 1pt " y el “Tipo de Desvanecimiento” en " Desenfoque Box ". No queremos que sea visible aún, por lo tanto también tenemos que poner el valor “Transparencia” a 0 en el editor de color. Ahora todo está listo para la animación.

Parte 2 - Animación

Paso 1:
Primero animamos la capa “Gradiente Lineal”. Selecciona esto en el panel de capas. Ahora deberías tener dos puntos de control verdes visibles en el área de trabajo. Escoge la herramienta “Normal” y selecciónalos dibujando un rectángulo sobre ellos. Abre la ventana de fotogramas clave pulsando sobre su icono (una llave de oro) en la misma ventana donde están los “Parámetros”. Asegúrate que su indicador de tiempo está en “0f” (la pequeña línea naranja sobre un fondo gris) y añade un fotograma clave (keyframe) pulsando sobre “Añadir un nuevo Fotograma Clave”. Mueve el indicador de tiempo “a 2s” y añade otro fotograma clave. Ahora tu ventana debería parecerse a esto:

[Rafael]

Paso 2:
Mueve el indicador de tiempo a “0f” y pulsa la pelota verde en la esquina inferior derecha de tu área de trabajo. Después de esto, su color se cambia a rojo, como se puede ver en la imagen. Ahora sube los puntos de control un poco (esto no afecta a la animación), lo justo para crear un punto de ruta (waypoint). Vuelve a “2s”, donde insertamos el segundo fotograma clave y mueve los dos puntos de control verde hacia el lado derecho de su texto. La primera animación ha sido creada. Puedes mover sobre su indicador de línea de tiempo (timeline) para verlo. Esto deberías tener en tu área de trabajo:

Paso 3:
Ahora vamos a encapsular la capa de nuestro " Gradiente Lineal " y las dos de “Texto” seleccionándolos todos. (Selecciona varias capas pulsando CTRL y seleccionando las capas). Entonces haz click derecho right click sobre una de las seleccionadas y escoge “Encapsular”. Las capas se agruparán en una capa con el símbolo de una caja y etiquetado como " Lienzo en línea". Se pueden abrir todas las capas pulsando sobre la pequeña flecha que está a la izquierda del icono de la caja.

Paso 4:
He vuelto arriba y me he dado cuenta de que tenemos que hacer la animación entera un poco más larga. Click sobre la flecha negra en la esquina superior izquierda del área de trabajo, selecciona “Editar” y luego “Propiedades”. Aparece una nueva ventana. Ves a la etiqueta “Tiempo” y cambia el Tiempo de Fin a 4s 2f.

Paso 5:
Seleccione la capa de la Bline, coloca el indicador de tiempo en “2s” y un añade un fotograma clave, como en el Paso 2. Ahora repite esto también en “3s” “y 4s”. Mueve el indicador de tiempo hacia atrás a “2s” y presione el icono de la pelota verde para entrar en el modo animar. Ahora abre la ventana “Colores” de la ventana “Parámetros” y pon el valor “Transparencia” a 1. Cierra la ventana. Mueve el indicador de tiempo a “3s” y pon el valor “Transparencia” a 100 en la la ventana “Colores” como antes. Ahora mueve el indicador de tiempo a “4s” y pon “la transparencia” a 0. Ya tenemos el destello en la esquina de nuestro texto apareciendo y desapareciendo en 2 segundos. Nos habrá aparecido un punto verde el el tiempo “0s”. Como no lo necesitamos, lo borraremos haciendo click derecho sobre él y seleccionando “borrar”. A green point will have appeared at the time “0s”. Since we do not need it, we will erase it doing right click on it and selecting “delete”.

Tu línea de tiempo debería parecerse a esta (sin los textos, por supuesto):

Paso 6:
Tu animación está básicamente lista, pero el destello necesita algún toque. Primero añade una nueva capa sobre la Bline en el panel de capas, con el botón derecho del ratón, selecciona "Nueva Capa> Transformar> Rotar ".

Una nueva capa llamada “Rotar” debería aparecer. Ahora encapsula “Rotar” y la BLine como en el Paso 3, pero sólo selecciona éstos dos. Si no hiciéramos esto el efecto de rotación afectaría también a nuestro texto, pero no es lo que queremos. Ahora deberías tener dos capas de “Lienzo en línea”. Abre el primero pinchando el icono de la pequeña flecha blanca de al lado. Esto es lo que verás ahora:

Paso 7:
Selecciona ambas capas del Lienzo en línea abierto y verás su contorno brillar y una nueva línea, que tiene un punto verde y un punto azul a ambos lados. Mueve el punto verde al centro del destello así:

Paso 8:
Asegúrate de que estás todavía en el Modo Animado (la pelota en la esquina inferior derecha del área de trabajo está de color rojo, de lo contrario estará verde), coloca su indicador de tiempo en “2s” y selecciona sólo la capa “Rotar”. Ahora pon el valor “Cantidad” a 0.01 en la ventana “Parámetros”, justo para poner el punto de ruta (waypoint). Mueve el indicador de tiempo a “3s” y pon el valor “Cantidad” a 180 (para 180 grados) y luego mueve el indicador de tiempo a"4s" y el valor “Cantidad” a 359.
¡Enhorabuena, lo has hecho!
Aquí está el archivo de Synfig.
Y aquí está el resultado final:

Espero que estas instrucciones te hayan ayudado algo:) Para otras preguntas, ponte en contacto conmigo en ceoxmusic.gmail.com

[Rafael]

Se me olvidaba añadir mi fichero, no sé, por si hay algo diferente por la versión.
Conforme vaya teniendo tiempo, iré traduciendo otros tutoriales (es lo menos que puedo hacer).

When I have more time, I will be translating other tutorials (it is the minimum that I can do).
Thanks.
tutorial texto glossy.sifz (2.44 KB)