tag:blogger.com,1999:blog-62579573386199614622024-03-05T07:15:10.816+01:00stopmocionateq u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-6257957338619961462.post-53576976055860737202016-08-18T15:33:00.002+02:002016-08-18T15:33:53.887+02:00Y para no terminar<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/plXmbLAUTRg?rel=0" width="640"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Más videos, más ejemplos, más aprendizaje, más stopmoción!<br />
<br />
<br />
<br /></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-47135926891508001182013-01-09T19:51:00.000+01:002014-03-08T00:29:36.246+01:00Y para terminar<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
El fin del curso es inminente, y aunque queda mucho por ver, por profundizar, por experimentar,... confío en que estas clases hayan servido para <span style="color: white;">plantar la semilla de la animación</span> en el huerto de la creatividad de cada uno de los alumnos.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://3.bp.blogspot.com/--1HsrRWoJGo/UO1ZFYbDeCI/AAAAAAAABgk/S-0AAtYsULM/s320/DSC02632.JPG" height="240" width="320" /> <img border="0" src="http://4.bp.blogspot.com/-2L05KVQ9TN8/UO1czWgEQqI/AAAAAAAABhQ/n-hG8WxNaUI/s320/DSC02633.JPG" height="240" width="320" /></div>
<br />
Hacer es aprender, por eso os animo a seguir haciendo cosas. No se trata de hacer algo impresionante, capaz de ganar el mejor concurso de animación, aunque si eso pasara... pues estupendo!! <span style="color: white;">Lo importante es estar constantemente en acción</span>, haciendo y deshaciendo, probando y volviendo a probar, hasta el aburrimiento. Como bien decía mi profesora de inglés: <b><span style="color: white;">PRACTICE MAKES PERFECT</span></b> (la práctica lleva a la perfección).<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/-ntyArGwWb4k/UO1cdxdyyCI/AAAAAAAABhI/3MLa9W0He44/s320/DSC02637.JPG" height="240" width="320" /> <img border="0" src="http://1.bp.blogspot.com/-9s6wHGs2lKk/UO1dQQRXN9I/AAAAAAAABhY/4DcykUAWbDY/s320/DSC02634.JPG" height="240" width="320" /></div>
<br />
<div style="text-align: left;">
<span style="color: white;"> Como despedida, os dejo este consejo visual (que resume todo lo dicho arriba) para que lo veáis, lo razonéis y lo disfrutéis <span style="font-family: Verdana, sans-serif;">:)</span></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/wwBg-Eln0Y8?rel=0" width="560"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: white; font-size: large;">Stopmocionaos!! Stopmocionad!!</span></b><br />
<b><br /></b>
<b><br /></b>
<b><br /></b></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-63792970871784528302013-01-09T19:50:00.001+01:002013-01-09T19:50:57.270+01:00Unos, doses, treses... Tan importante como saber crear cada movimiento es saber calcular cuánto dura, y por tanto, cuántas posiciones hay que dibujar/modelar/mover para que ese movimiento tenga el ritmo adecuado. Esto es lo que se conoce como <b><span style="color: white;">timing</span></b>.<br />
<br />
¿Cómo calcular el timing de algo? Podemos guiarnos de una serie de pautas para que sea más fácil: viendo animaciones de otros, observando y "cronometrando" movimientos reales,... y probando, probando y volviendo a probar.<br />
<br />
<div style="text-align: center;">
<span style="color: white;"><b>Larry Lauria</b> explica muy bien en este enlace la importancia del timing:</span><br />
<a href="http://www.animation.dreamers.com/clases/tooninstitute/timing.php">http://www.animation.dreamers.com/clases/tooninstitute/timing.php</a></div>
<br />
<br />
Mmmm <b><span style="color: white;">fotograma</span></b> eh? Esa palabra nos suena de haberla leído más veces ya en el blog.<br />
<br />
<span style="color: white;">Un <b>fotograma</b> es cada una de las imágenes en que se divide el movimiento</span>. Como bien explica Larry, hay un estándar de cine que establece que para <b><span style="color: white;">1 segundo</span></b> de imagen en movimiento son necesarios <b><span style="color: white;">24 fotogramas</span></b>. En video son <span style="color: white;">25</span> si el sistema es<span style="color: white;"> PAL</span> (europeo), o <span style="color: white;">29</span> si es <span style="color: white;">NTSC</span>, pero nosotros nos centraremos únicamente en el estándar de 24. De aquí deducimos que, haciendo los 24 dibujos, completamos 1 segundo. Correcto. Es lo que se conoce como <b><span style="color: white;">animación a unos</span></b> (1 dibujo ocupa 1 fotograma).<br />
<br />
Hay animadores que, por ahorrar trabajo y tiempo, hacen 12 dibujos en vez de 24, y los ajustan de manera que esos doce hacen 1 segundo de animación. Es lo que se conoce como <span style="color: white;"><b>animación a doses</b></span> (1 dibujo ocupa 2 fotogramas). Del mismo modo, hay animadores que incluso animan sólo 8 dibujos en 1 segundo: <b><span style="color: white;">animación a treses </span></b>(1 dibujo ocupa 3 fotogramas).<br />
<br />
<span style="color: white;">En la siguiente gráfica podemos visualizar y entender el lío de números de arriba:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="640" src="http://1.bp.blogspot.com/-1-ZtxiBouLs/UO1rhRiQlTI/AAAAAAAABiI/FIBaZbNypkM/s640/2s3s.jpg" width="418" /></div>
<br />
Larry (en el enlace de arriba) nos enseña, además, que hay elementos (ojos, boca,...) que tienen<b> <span style="color: white;">su propio timing</span></b>. En caso de que mezclásemos animaciones de 1s, 2s y 3s hay un truco que nos servirá para mantener cierto orden y evitar desajustes. Se trata de hacer <span style="color: white;"><b>ciclos o secuencias de fotogramas que sean múltiplos de tres</b></span>. ¿Por qué? Porque así sabremos seguro que, tarde o temprano, dentro del tiempo de ejecución de la animación, ese movimiento se completará rítmicamente, sin pérdida de fotogramas, sin cortes ni saltos. ¿Cómo hacer para saber si un número es múltiplo de tres? Fácil. Sumando todas sus cifras: si el resultado es 3, 6 ó 9, es múltiplo, y por tanto, es válido.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-tTrHAvyZ2HA/UO2H1TLQDlI/AAAAAAAABig/or32R0jPioU/s1600/d.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="http://2.bp.blogspot.com/-tTrHAvyZ2HA/UO2H1TLQDlI/AAAAAAAABig/or32R0jPioU/s640/d.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: left;">
En el siguiente video hay dos pelotas botando. Ambas realizan un movimiento cíclico: una dura 48 fotogramas (2 segundos) y la otra 35 (algo menos de 2 segundos). El animador que las hizo decidió crear un bucle inicial de 8 segundos, y luego copió ese bucle hasta completar casi 1 minuto.</div>
<div style="text-align: left;">
<div style="text-align: center;">
<br /></div>
</div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="393" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/57073144" webkitallowfullscreen="webkitallowfullscreen" width="700"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Dejando a un lado el hecho de que botan ANTES de llegar al suelo (ejemmm pequeño gran fallo de animación), podemos observar que la de la derecha, la de 48 fotogramas, no tiene problemas de enlazado al llegar a los 8 segundos: el bucle es perfecto. Pero la falta de ajuste de la otra hace que ya no encaje bien al hacer el ciclo final. Para solucionarlo, lo más fácil sería reducir su movimiento de 35 fotogramas a 24, y eso nos garantizaría un <span style="color: white;">ciclo perfecto de dos pelotas iguales con timing diferente</span> <span style="font-family: Verdana, sans-serif;">:)</span></div>
<div style="text-align: left;">
<br /></div>
Con experiencia se consigue dominar este baile de tiempos sin volverse loco. Sólo hay que empezar a pensar en unos, doses y treses, y probar probar probar!<br />
<br />
<br />q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com1tag:blogger.com,1999:blog-6257957338619961462.post-80927131596868986752012-12-31T12:57:00.000+01:002013-08-27T13:23:01.019+02:00Ejemplos de Animación / de Animadores Además del trabajo que supone realizar un movimiento fluido y coherente, y por si fueran pocas las horas invertidas en cada toma (me refiero a películas y cortos), el <b><span style="color: white;">animador</span></b> tiene que conformarse con ser un absoluto desconocido para el público <span style="font-family: Verdana, sans-serif;">:(</span>.<br />
<br />
A todos nos suenan nombres como <span style="color: white;">Tim Burton </span>(<i>Pesadilla antes de Navidad</i>) o <span style="color: white;">Henry Selick</span> (<i>Los mundos de Coraline</i>), pero en realidad son otros quienes realizan el trabajo duro. Son otros los que se pasan horas y horas moviendo piezas minúsculas, y son otros también quienes crean esas piezas y los espacios en que se mueven.<br />
<br />
Esta entrada quiere rendir un pequeño e insignificante homenaje a todos esos currantes anónimos que convierten la plastilina en un ser viviente. <b><span style="color: white;">GRACIAS!</span></b><br />
<div style="text-align: center;">
<b><span style="color: white;"><br /></span></b></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/UUISX8qs5Oc" width="640"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/hlMmBCei6h0" width="640"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/O0drdslGnUE" width="640"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/kCdLW3IahUE" width="640"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-77538521283888010122012-12-30T19:16:00.000+01:002012-12-31T19:26:02.271+01:00Bla, bla, bla Una de las acciones más habituales de un personaje, aparte de caminar, es hablar. Es muy importante saber sincronizar el habla con los movimientos de la boca (a base de experiencia y cronómetro seremos capaces de calcular con mayor precisión cada vez), y también es de crucial importancia saber qué forma debe tener la boca para cada sílaba pronunciada, ya que no es lo mismo una T que una A que una R...<br />
<div>
<br /></div>
<div>
Veamos a nuestro personaje de ejemplo, Chester<b><span style="color: white;">*</span></b>:<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="http://1.bp.blogspot.com/-ckXJf3puV8M/UOB4N_0ubvI/AAAAAAAABak/eLtrwh_OnRI/s200/chester.jpg" width="162" /></div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
<div style="text-align: center;">
Perfecto... pero le falta la boca.</div>
</div>
<div>
<br /></div>
<div>
¿Qué boca poner? Pues depende. Tendremos que saber qué es lo que va a decir para decidir qué boca hacer. ¿Y cómo sabremos cual es la boca adecuada? A continuación, la respuesta:</div>
<div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmYZRA7_gpOzcjk2WUQwGG6W9k506Lq49cRFugOLkxPlNI33BShYjMXup-lBD36St0t6nidiJ6AGmHSy6FUKcOSw2Qhi0kq-ze6dBQhkLwogDFYB0Y4fyllDkM0l85O1heeCpEBIjaLzrR/s1600/Preston_Blair_Phonemes.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmYZRA7_gpOzcjk2WUQwGG6W9k506Lq49cRFugOLkxPlNI33BShYjMXup-lBD36St0t6nidiJ6AGmHSy6FUKcOSw2Qhi0kq-ze6dBQhkLwogDFYB0Y4fyllDkM0l85O1heeCpEBIjaLzrR/s400/Preston_Blair_Phonemes.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.sfu.ca/~kwc11/IAT445/Research.html">http://www.sfu.ca/~kwc11/IAT445/Research.html</a></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="400" src="http://2.bp.blogspot.com/-fGBWYr07QF8/UOB36wRHBtI/AAAAAAAABac/h0fFeayBx54/s400/bocas+varias.jpg" width="396" /></div>
<div style="text-align: center;">
<br /></div>
Para no tener que hacer bocas con todas las letras del abecedario, los animadores han acordado utilizar <b><span style="color: white;">gestos comunes a diferentes letras y sonidos</span></b>. Así, en función de lo que vaya a decir nuestro personaje, iremos escogiendo las "bocas predeterminadas" que correspondan. Arriba podemos ver dos ejemplos, uno aplicado a 3D y el otro a dibujo.<br />
<br />
Escogeremos, de los dos, el que mejor se ajuste a nuestras necesidades, o haremos una mezcla de ambos: cualquier opción es buena si significa <i>mejorar</i>. En nuestro caso, aplicaremos a la boca de Chester las formas dibujadas de arriba:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="http://1.bp.blogspot.com/-9EcXZAlgytQ/UOB4vp3MB9I/AAAAAAAABas/VFV96R3fJ3o/s320/bocas_chester.jpg" width="249" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div>
<div style="text-align: center;">
Ahora sólo nos queda experimentar. </div>
<div style="text-align: center;">
En el siguiente video, Chester va a decir <span style="color: white;">HOLA</span>:<br />
<br /></div>
</div>
<div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56514218" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<div>
<div style="text-align: center;">
(lo dice muy despacio para que podamos apreciar con claridad las diferentes bocas que hemos utilizado)</div>
</div>
<div>
<br /></div>
<div>
<div style="text-align: center;">
Ahora Chester va a decir <span style="color: white;">BIEN!</span> y <span style="color: white;">DÍGAME?</span>:<br />
<br /></div>
</div>
<div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56514367" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56514219" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
<div style="text-align: center;">
Qué majo que es.</div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
Si tuviésemos un audio con una conversación más larga, deberíamos ir anotando palabra por palabra lo que dice el personaje, cuánto dura cada una y cuántas posiciones de boca necesita. Existen <b><span style="color: white;">hojas de registro</span></b> (también llamadas <i><span style="color: white;">hojas de exposición</span></i> o <i><span style="color: white;">dope sheet</span></i>) para tal efecto, en las que los animadores apuntan minuciosamente todos estos datos haciendo cálculos temporales segundo a segundo (y fotograma a fotograma).</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jadellewellynstopmotion.tumblr.com/post/334001922/better-dope-sheet" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-xSgs89FWuz0/UNtdmRRP7cI/AAAAAAAABZ0/ENjhOzEc8ew/s1600/Captura+de+pantalla+2012-12-26+a+la(s)+21.25.16.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: x-small;">(haz clic en la img para ir al enlace original)</span></div>
<div>
<br /></div>
<div>
Es una manera organizada de no dejar nada al azar, no sea que se nos olvide una palabra y se vaya la conversación al garete! En el <span style="color: white;"><u>Manual del Animador</u> de Williams</span> hay varias páginas dedicadas a explicar cada parte de estas hojas. Recomiendo encarecidamente que les echéis un vistazo, y os pongo una muestra para que no podáis resistir la tentación <span style="font-family: Verdana, sans-serif;">:)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Fs3Mbk0PWnA/UOHYF7jyVJI/AAAAAAAABbc/wZUCdx4FVgk/s1600/Captura+de+pantalla+2012-12-26+a+la(s)+21.23.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://1.bp.blogspot.com/-Fs3Mbk0PWnA/UOHYF7jyVJI/AAAAAAAABbc/wZUCdx4FVgk/s640/Captura+de+pantalla+2012-12-26+a+la(s)+21.23.31.png" width="560" /></a></div>
<br />
<div style="text-align: center;">
<span style="color: white; font-size: x-small;">* La imagen de Chester, y las bocas dibujadas, han sido extraídas del libro <u>Trucos con Flash CS3</u>, de Chris Georgenes, editado por Marcombo.</span></div>
<span style="color: white; font-size: x-small;"><br /></span></div>
</div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-65795488046997220792012-12-26T20:14:00.000+01:002012-12-26T20:16:36.417+01:00La pelota que bota Siguiendo con nuestra dinámica de movimientos sencillos (y, a poder ser, cíclicos) vamos a realizar un ejercicio que reúne dos de las normas más importantes de animación: una pelota botando.<br />
<br />
¿Cómo algo tan simple puede ser tan completo? Para poder apreciar cada detalle, vamos a hacer el ejercicio paso a paso, añadiendo mejoras para convertirlo en una animación <i>creíble</i> (y con esto de <i>creíble</i> no nos referimos literalmente a <i>real</i>).<br />
<br />
Lo primero, <span style="color: white;">escogeremos el material</span> (plastilina, cartulina, dibujo sobre papel,...) y lo segundo, como hemos hecho anteriormente, decidiremos <span style="color: white;">quién es el personaje y qué va a hacer</span>. Para ejemplo de este blog, vamos a hacer una pelota en dibujo sobre papel, una pelota que bote indefinidamente.<br />
<br />
El dibujado es bien fácil: un circulito nos llega. Si se quiere se pueden añadir detalles de color y sombra por aquello de darle cierto relieve.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="http://4.bp.blogspot.com/-JMFG-7PQ0Z4/UNswVnQVh_I/AAAAAAAABZg/i8y4_hQgnRs/s200/pelota4.jpg" width="200" /></div>
<br />
Ahora hay que conseguir que bote. También parece fácil: hay que animarla de manera que suba y baje verticalmente sobre el papel. Vamos a dibujar <span style="color: white;">una linea que simule el suelo</span> para que el rebote sea más evidente. La unión para crear el bucle la haremos, por ejemplo, cuando la pelota esté en el aire, a punto de caer.<br />
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56331252" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe>
<br />
<br />
<div style="text-align: left;">
Vale. Aquí pasa algo extraño, parece una pelota robótica a la que no le afecta la ley de la gravedad. Si nos fijamos en las pelotas reales, cuando bajan aceleran (por la atracción de La Tierra) y cuando suben deceleran (por esa misma atracción). <b><span style="color: white;">Ley básica de animación nº 6: las frenadas y las arrancadas</span></b>. ¿Cómo se hace esto? Veamos los esquemas siguientes:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyd8Q4S55cyBcXDbtoFXpiElmNgJguBS9CYg40uGGEelWqayFwHClCP4bwbcOMATyu74M-a4zRj99aBtSGOieO_BhQVVeaIEaMjxT53NaOjq-EtydGR2w06c7Dp2iuPNYa3uEmcR4fIz5/s400/1.jpg" width="400" /></div>
<br />
<div style="text-align: center;">
La <u>separación</u> que hay entre cada movimiento es la misma siempre. </div>
<div style="text-align: center;">
El movimiento que se genera es de <u>velocidad constante</u>, sin saltos ni cambios.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="156" src="http://3.bp.blogspot.com/-yrVsYcUkFU8/UNstl2dU4uI/AAAAAAAABZM/cNFb3VlHej0/s640/2.jpg" width="640" /></div>
<br />
<div style="text-align: center;">
Ahhhh qué pasa aquí... pues que la <u>separación</u> entre los movimientos cambia. </div>
<div style="text-align: center;">
Si queremos que algo acelere, empezaremos con separaciones pequeñas hasta alcanzar una separación grande; </div>
<div style="text-align: center;">
y para decelerar haremos lo contrario: partiremos de separaciones amplias para acabar con unas minúsculas.</div>
<br />
Apliquemos esto a nuestra pelota robótica:<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56331347" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Esto ya es otra cosa. Es evidente que la pelota tiene un peso y que la gravedad la atrae y afecta. Pero aún necesita otro detalle para ser totalmente <i>creíble</i>: <b><span style="color: white;">ley básica de animación nº 10: exageración</span></b>. ¿Dónde vamos a exagerar qué movimiento? En el mundo real, una pelota no es totalmente rígida: si le damos una patada es muy probable que el pie le produzca una deformación temporal (aunque no seamos capaces de verla) y al salir disparada ya recupera su forma.</div>
<br />
<div style="text-align: left;">
En nuestro ejemplo, al golpearse contra el suelo, pasa exactamente lo mismo: la pelota se achatará un poco por el efecto del rebote. Esto, que es apenas imperceptible en la realidad, <span style="color: white;">lo vamos a exagerar en la animación</span>, para remarcar el efecto y darle <i>credibilidad</i> (como dijimos al comienzo, muchas veces lo más <i>creíble</i> no es lo más <i>real</i>).</div>
<br />
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56331436" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe></div>
<div style="text-align: center;">
<br /></div>
Estas reglas pueden aplicarse no sólo al dibujo, también a los recortes y a los muñecos, y dominar la exageración y las frenadas-arrancadas es esencial para crear <span style="color: white;">una animación atractiva y convincente</span>.<br />
<br />
<br /></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com3tag:blogger.com,1999:blog-6257957338619961462.post-1521427468730601282012-12-25T02:53:00.000+01:002012-12-25T20:05:13.810+01:00Cut out con 6 recortes<div style="text-align: left;">
Una de las técnicas de animación en stopmotion es la <span style="color: white;"><b>animación por recortes</b></span> o <i><b><span style="color: white;">cut out</span></b></i>, que es la que se realiza con fragmentos de cartón, papel, fotografías, etc.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/8461831?portrait=0" webkitallowfullscreen="webkitallowfullscreen" width="400"></iframe></div>
<br />
Para crear un <i>cut out</i> pensaremos, primero, en <span style="color: white;">quién</span> va a ser nuestro personaje y <span style="color: white;">qué</span> va a hacer. Una vez que sepamos esto, analizaremos cuántas posiciones clave va a necesitar la acción a desarrollar.<br />
<br />
Como ejemplo para el blog, haremos <span style="color: white;">un gato de cartón que va a <u>pestañear</u> y a <u>maullar</u></span>.<br />
Se me ocurren varias posiciones clave:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="http://2.bp.blogspot.com/-Em_kftbcIv4/UNkBYDcYlhI/AAAAAAAABYg/c-2uPYtkJOo/s200/DSC02663.JPG" width="150" /> <img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFJpPixchZYKgQlBmsPl_M2LKk6V2S87lo8RZe5vn1xC54ODxqYtt15WEfUMYLjULmx_1pzl-XtbTFuRW8z2aI_qR9J4HgknEUnctZhL4bKqetC1R4zrkPaumHsvZLcyTF9ob0CVS-hpd/s200/DSC02665.JPG" width="150" /></div>
<div class="separator" style="clear: both; text-align: center;">
ojos cerrados y ojos abiertos para el parpadeo,</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQA3emS4AGuCNS8Y4hugYRWmzLGpKhDb2RvI6YRFQl1YEMvq01Jux4IfKahZ7fPy1xARejCD3tCb4wm34c_qKUS9U_FqCc5DwoVSDV538rarIWqc0gXy3sqz1U-5ZBiAygfStla1As-TQ/s200/DSC02666.JPG" width="150" /></div>
<div class="separator" style="clear: both; text-align: center;">
ojos mirando hacia un lado,</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="http://3.bp.blogspot.com/-uXPXMgAMYfM/UNkBTzhpFYI/AAAAAAAABYQ/4rp8ddFSvio/s200/DSC02661.JPG" width="149" /> <img border="0" height="200" src="http://1.bp.blogspot.com/-pjZ29FlPyaQ/UNkBWPvbe5I/AAAAAAAABYY/JgCJGQtBVYg/s200/DSC02662.JPG" width="149" /> <img border="0" height="200" src="http://4.bp.blogspot.com/-t0quwjAI--Y/UNkBRrKlBwI/AAAAAAAABYI/UmNQKIh22bk/s200/DSC02660.JPG" width="149" /></div>
<div class="separator" style="clear: both; text-align: center;">
y tres posiciones de boca para el maullido.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
¿Cómo colocar/combinar estos recortes para hacer que el gato pestañee y maulle? Armándonos de paciencia lo primero, y luego haciendo un pequeño <b><span style="color: white;">esquema del desarrollo de la animación</span></b>: primero va a pestañear, mirará a un lado, volverá a pestañear, maullará, pestañeará y volverá a maullar (por ejemplo...). Una vez que tenemos claro el esquema, colocamos los recortes en un fondo neutro y vamos fotografiándolos para componer la animación:<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="338" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/52636732" webkitallowfullscreen="webkitallowfullscreen" width="600"></iframe>
<br />
<br />
<div style="text-align: left;">
Aquí, como en los movimientos cíclicos, la combinación de nuestros recortes puede hacer que seamos capaces de crear una animación de muchos segundos con sólo 6 elementos. <span style="color: white;">Esto no es vagancia</span>; es una manera sencilla de economizar tiempo y recursos (lo que ya habíamos visto de <i>menos es más</i>), y es aplicable a recortes, dibujos, fotografías e incluso muñecos.<br />
<br />
<br /></div>
</div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-60045695613919989462012-12-25T01:30:00.000+01:002012-12-25T01:41:24.625+01:00Caminemos En esta entrada del blog vamos a analizar una acción habitual aparentemente sencilla, que además es <u>el movimiento cíclico por excelencia</u>: <span style="color: white;">caminar</span>.<br />
<br />
Veamos el siguiente video:<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/51358860?title=1&byline=1&portrait=1" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
caramba, ¡parece que el personaje tiene prisa! </div>
<div style="text-align: center;">
camina tan rápido que apenas apreciamos con detalle el movimiento de sus extremidades... </div>
<div style="text-align: center;">
a ver si, pidiéndole que vaya más despacio, somos capaces de analizar cada paso:</div>
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/51358859?title=1&byline=1&portrait=1" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
mmmmm, esto ya es otra cosa, pero aún podría avanzar más lento...</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="400" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/51358858?title=1&byline=1&portrait=1" webkitallowfullscreen="webkitallowfullscreen" width="500"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: white;">ahora sí. </span></b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Al verlo muy despacio, podemos hacer dos apreciaciones:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
- <b><span style="color: white;">el movimiento es cíclico</span></b>, se repite una y otra vez como un bucle (cada video dura 20 segundos, pero estamos de acuerdo en que sería lo mismo aunque durasen 10, 20 ó 45 minutos).</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
- <b><span style="color: white;">el movimiento es simétrico</span></b>: el desplazamiento de las extremidades del lado derecho del cuerpo es exactamente igual que el del lado izquierdo, y esa simetría<b> </b>hace que el movimiento corporal sea fluido.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
En el manual del Animador de Williams hay decenas de hojas dedicadas al estudio de las caminatas, así que intentaré no repetirme. Las animaciones de arriba se componen de <b><span style="color: white;">8 dibujos</span></b>, y el dibujo nº 8 enlaza de manera fluida con el nº 1 para generar ese bucle infinito.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Veamos los 8 dibujos por separado, y nos daremos cuenta de la simetría descrita anteriormente:</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
1<img border="0" height="155" src="http://1.bp.blogspot.com/-tfleuhhz9jw/UHncAWYA80I/AAAAAAAABMQ/X6czzTssSOo/s200/1.jpg" width="200" /> <img border="0" height="155" src="http://4.bp.blogspot.com/-zOU_J16ntIM/UHncCUM1YOI/AAAAAAAABMY/q79tHJE_XkQ/s200/2.jpg" width="200" />2</div>
<div class="separator" style="clear: both; text-align: center;">
3<img border="0" height="155" src="http://1.bp.blogspot.com/-uTxn4vxK58o/UHncDg4GB8I/AAAAAAAABMg/aWBXssIffGk/s200/3.jpg" width="200" /> <img border="0" height="155" src="http://2.bp.blogspot.com/-ekpe1QjUhSg/UHncE5MffcI/AAAAAAAABMo/wr2XjcoHTsg/s200/4.jpg" width="200" />4</div>
<div class="separator" style="clear: both; text-align: center;">
5<img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaV3r2TGyS8SAmSTefVcAPcpQgmG9TQplfn1lO503yK9NOsjbq1TMd9n3nXJ510m9qOZTLreCv0_YReKidCRrDhzoKgELfas9BaZ9AoIqLbthNlZmg9il0kE_Tk2IXjqxwOxDcqTdvTiw/s200/5.jpg" width="200" /> <img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jaBFzQqo6ok7NC_Cn1JEPtYqaG7AkfZ7ohLDcx7qDMveHHrXao54AJj5V0luWOq9L2wdKc7rR_qDm4vnoqn111aJMehy36-t0oIF0fGGHPt1MFXySgLD-U5gwn_Buq5i4X_Z__KrdIj-/s200/6.jpg" width="200" />6</div>
<div class="separator" style="clear: both; text-align: center;">
7<img border="0" height="155" src="http://3.bp.blogspot.com/-JOlbcN7h_K8/UHncJSD9a8I/AAAAAAAABNA/I_LlReEdlig/s200/7.jpg" width="200" /> <img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQG3WEFfNUt0hQxk26747mghXdWqhMMwLsmz8TSdpQ6cx3SRcS-xOOw0fCeGetRTydFJBL482vZDNTYtOgC8fb9O4NBCcPxKVeZb6s5nPRra9CgyXuTawnnYLL-LAMfarFbT1ok0n8EyXH/s200/8.jpg" width="200" />8</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
¿sí? ¿no? ¿la vemos o se nos escapa?</div>
<div class="separator" style="clear: both; text-align: center;">
desordenemos los dibujos para hacer estas combinaciones: </div>
<div class="separator" style="clear: both; text-align: center;">
el 1 con el 5, el 2 con el 6, el 3 con el 7 y el 4 con el 8.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
1<img border="0" height="155" src="http://1.bp.blogspot.com/-tfleuhhz9jw/UHncAWYA80I/AAAAAAAABMQ/X6czzTssSOo/s200/1.jpg" width="200" /> <img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaV3r2TGyS8SAmSTefVcAPcpQgmG9TQplfn1lO503yK9NOsjbq1TMd9n3nXJ510m9qOZTLreCv0_YReKidCRrDhzoKgELfas9BaZ9AoIqLbthNlZmg9il0kE_Tk2IXjqxwOxDcqTdvTiw/s200/5.jpg" width="200" />5 </div>
<div class="separator" style="clear: both; text-align: center;">
2<img border="0" height="155" src="http://4.bp.blogspot.com/-zOU_J16ntIM/UHncCUM1YOI/AAAAAAAABMY/q79tHJE_XkQ/s200/2.jpg" width="200" /> <img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jaBFzQqo6ok7NC_Cn1JEPtYqaG7AkfZ7ohLDcx7qDMveHHrXao54AJj5V0luWOq9L2wdKc7rR_qDm4vnoqn111aJMehy36-t0oIF0fGGHPt1MFXySgLD-U5gwn_Buq5i4X_Z__KrdIj-/s200/6.jpg" width="200" />6 </div>
<div class="separator" style="clear: both; text-align: center;">
3<img border="0" height="155" src="http://1.bp.blogspot.com/-uTxn4vxK58o/UHncDg4GB8I/AAAAAAAABMg/aWBXssIffGk/s200/3.jpg" width="200" /> <img border="0" height="155" src="http://3.bp.blogspot.com/-JOlbcN7h_K8/UHncJSD9a8I/AAAAAAAABNA/I_LlReEdlig/s200/7.jpg" width="200" />7 </div>
<div class="separator" style="clear: both; text-align: center;">
4<img border="0" height="155" src="http://2.bp.blogspot.com/-ekpe1QjUhSg/UHncE5MffcI/AAAAAAAABMo/wr2XjcoHTsg/s200/4.jpg" width="200" /> <img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQG3WEFfNUt0hQxk26747mghXdWqhMMwLsmz8TSdpQ6cx3SRcS-xOOw0fCeGetRTydFJBL482vZDNTYtOgC8fb9O4NBCcPxKVeZb6s5nPRra9CgyXuTawnnYLL-LAMfarFbT1ok0n8EyXH/s200/8.jpg" width="200" />8</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: white; font-size: large;">IGUALES!!!</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
no es que se parezcan.... es que son lo mismo,</div>
<div class="separator" style="clear: both; text-align: center;">
tan sólo cambia el color rojo, para remarcar la diferencia entre el lado derecho y el izquierdo. </div>
<div class="separator" style="clear: both; text-align: center;">
¿¿Cómo es posible que nuestro experimentado y analítico sistema ocular </div>
<div class="separator" style="clear: both; text-align: center;">
NO nos haya advertido de esta trampa??</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
Amigos míos, esto nos enseña dos cosas que nos serán de mucha utilidad en trabajos futuros:</div>
<div style="text-align: center;">
<b> </b><span style="color: white;"><b>al ojo humano se le engaña fácilmente</b>, y<b> lo más sencillo es lo más efectivo</b> (menos es más)</span>.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Finalizaremos esta entrada con una pregunta y un reto: ¿cuántos os habéis fijado en el <span style="color: white;">movimiento ascendente y descendente</span> de la cabeza del personaje en cada paso? Seguramente ninguno. Es algo que asumimos como "lo normal", y nuestro ojo (que es muy vago) no nos alerta de ello. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
Os apuesto lo que queráis a que sois incapaces de caminar sin realizar esa onda con la cabeza.</div>
<div style="text-align: center;">
<span style="color: white;">Probadlo!</span></div>
<div style="text-align: center;">
<span style="color: white;"><br /></span></div>
<div style="text-align: center;">
<span style="color: white;"><br /></span></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-86795933304597690092012-12-24T20:37:00.002+01:002012-12-25T01:28:24.936+01:00Movimiento cíclico Sin duda <b><span style="color: white;">los ciclos</span></b> son esenciales en la animación. Con ellos ahorramos tiempo y esfuerzo, y son aplicables a un sin fin de movimientos conocidos: una persona o animal caminando, el bote de una pelota, el aleteo de un pájaro...<br />
<br />
Todo animador que se precie recurrirá al uso (y disfrute) de los movimientos cíclicos para hacer sus creaciones. Para realizarlos correctamente hay que tener en cuenta un par de cosas:<br />
<br />
-<b><span style="color: white;"> la continuidad</span></b>: la transición desde el último movimiento al primero ha de ser fluida e imperceptible,<br />
- y <b><span style="color: white;">la sencillez</span></b>: a menos movimientos, menos trabajo, y menos problemas de animación<br />
<br />
Pongamos como ejemplo algo muy simple: <b><span style="color: white;">un pestañeo</span></b>. Lo primero que debemos hacer es analizar las partes en que dividiremos ese movimiento. Para eso marcaremos tres puntos principales (key frames=fotogramas clave) que serán el <span style="color: white;">INICIO</span>, el punto medio o<span style="color: white;"> NUDO</span> y el <span style="color: white;">FINAL</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="" border="0" height="160" src="http://4.bp.blogspot.com/-irZ9_eWwlQg/UNjtcDGByuI/AAAAAAAABWE/yR5pIMLhzJk/s200/1.jpg" title="INI" width="200" /> <img alt="" border="0" height="160" src="http://3.bp.blogspot.com/-MaINbs_EMvg/UNjtd931UzI/AAAAAAAABWQ/LvEvlaMjzII/s200/3.jpg" title="NUDO" width="200" /> <img alt="" border="0" height="160" src="http://4.bp.blogspot.com/-irZ9_eWwlQg/UNjtcDGByuI/AAAAAAAABWE/yR5pIMLhzJk/s200/1.jpg" title="FIN" width="200" /></div>
<div style="text-align: center;">
<i><span style="color: white;">1 INI > 2 NUDO > 3 FIN</span></i></div>
<div style="text-align: center;">
<i><br /></i></div>
Con esto ya tenemos 3 posiciones, pero quizás resulte un pestañeo un poco brusco... vamos a añadir una posición más entre cada fotograma clave para hacer el movimiento más suave. Así que entre el ojo abierto y el cerrado pondremos uno con el párpado a medio camino:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/-V9aQbp5_TNA/UNjxCvRdhlI/AAAAAAAABXY/kbuCHg3VcJE/s1600/1.jpg" /> <img border="0" src="http://3.bp.blogspot.com/-_Pgeb78GtjQ/UNjxD7kWjNI/AAAAAAAABXc/HakNUuE7w_Y/s1600/2.jpg" /> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRAumMD3Jdtt2S5eldT6IrEInoSwVuREccRuxWBoaoLnUx9QS0AjqWCGpqAhAaATLDSqeCOCwHkviuCS7MZDnG6r6fIvZKsxQ4sCSeuA5WUjT-eopw-mll4mmzy86vi9Sl2FOcSDop0AY/s1600/3.jpg" /> <img border="0" src="http://3.bp.blogspot.com/-_Pgeb78GtjQ/UNjxD7kWjNI/AAAAAAAABXc/HakNUuE7w_Y/s1600/2.jpg" /> <img border="0" src="http://4.bp.blogspot.com/-V9aQbp5_TNA/UNjxCvRdhlI/AAAAAAAABXY/kbuCHg3VcJE/s1600/1.jpg" /></div>
<div style="text-align: center;">
<i><span style="color: white;">1 INI > 2 NUDO(1) > 3 NUDO(2) > 4 NUDO(3) > 5 FIN</span></i></div>
<div style="text-align: center;">
<i><br /></i></div>
Esto ya está mejor, el pestañeo es mucho más creíble. Si quisiéramos una manera de pestañear más "emocional" (un coqueteo sensual, o unos ojos recién levantados o con mucho sueño,...) seguiríamos añadiendo dibujos intermedios a los que ya tenemos, para ralentizarlo mucho más.<br />
<br />
<span style="color: white;"> <b>¿Y si trasladamos esto a plastilina o cartón?</b></span><br />
<br />
Esta pequeña teoría de los ciclos es aplicable también a muñecos y recortes. Así, en uno de nuestros días de taller, hemos realizado varios trabajos pensando en movimientos sencillos.<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="color: white;">·· Transformación de una flecha en una F ··</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="239" src="http://1.bp.blogspot.com/-QfzgAYuRhc0/UNiteFHMXUI/AAAAAAAABVE/TNetoHUx61w/s320/DSC02626.JPG" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
El resultado final es este:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="320" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56259162" webkitallowfullscreen="webkitallowfullscreen" width="400"></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: white;">·· La tijera que abre y cierra ··</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="147" src="http://3.bp.blogspot.com/-NkkwIuOLLVI/UNitgPq49cI/AAAAAAAABVM/v8OnB2UCdF4/s200/img1.jpg" width="200" /> <img border="0" height="147" src="http://1.bp.blogspot.com/-Yorca3SCX68/UNitiNM4ztI/AAAAAAAABVU/gzIRnlh-RbA/s200/img2.jpg" width="200" /> <img border="0" height="147" src="http://1.bp.blogspot.com/-iIshNI7WPQY/UNitkFEK1WI/AAAAAAAABVc/jO5afc5MOX8/s200/img3.jpg" width="200" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Para que el ciclo sea perfecto, la 2ª imagen se repite después de la 3ª.</div>
<div class="separator" style="clear: both; text-align: center;">
Si no hiciésemos eso, habría un salto desde la última tijera, totalmente abierta, hasta la primera, cerrada:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56260445" webkitallowfullscreen="webkitallowfullscreen" width="400"></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;">
(<i>1, 2, 3, 1, 2, 3, 1, 2, 3</i>...)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Con la repetición de la tijera intermedia, nos queda así:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/56259163" webkitallowfullscreen="webkitallowfullscreen" width="400"></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;">
(<i>1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2</i>...)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: white;">Muuuuuucho mejor!</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-12337589944727568262012-11-24T18:39:00.000+01:002012-11-24T18:39:55.192+01:00Reglas básicas de animación<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="237" src="http://3.bp.blogspot.com/-4Ny1RCGpNH0/UHqyxTr1FuI/AAAAAAAABNY/i6dycUx0Gng/s400/ollie-and-frank-734871.jpg" width="400" /></div>
<br />
Allá por los años 30, unos animadores de Disney (Ollie Johnston y Frank Thomas) establecieron 12 pautas a seguir para lograr una buena animación. Su efectividad, más que demostrada en películas como Blancanieves o Pinocho, hace que hoy en día se sigan utilizando sin cuestionarlas, incluso en 3D.<br />
<br />
Las 12 reglas de la animación son:<br />
<br />
<span style="color: white;">1- ENCOGER Y ESTIRAR</span><br />
Convertir en chicle lo que normalmente es rígido, exagerando el movimiento, para comunicar más claramente la acción al espectador.<br />
<br />
<span style="color: white;">2- ANTICIPACIÓN</span><br />
Lo normal es acción-reacción, pero no olvidemos que estamos contando una historia visualmente. Antes de que la acción suceda, conviene dar "una pista visual" a nuestro público: anticipación-acción-reacción.<br />
<br />
<span style="color: white;">3- PUESTA EN ESCENA</span><br />
De nada sirve representar cuidadosamente un movimiento, si después la colocación de la cámara hace que no sea apreciable. Es fundamental saber colocar al personaje y a la cámara para captar la acción.<br />
<br />
<span style="color: white;">4- ACCIÓN DIRECTA Y POSE A POSE</span><br />
Ambas son dos maneras diferentes de animar, que pueden ser combinables. La <u>Acción Directa</u> crea un movimiento continuo, mientras que en <u>Pose a Pose</u> el movimiento es analizado previamente escogiendo los puntos clave que lo estructuren. La <u>Acción Directa</u> es mucho más fresca y fluida, mientras que <u>Pose a Pose</u> es mucho más controlado, indicado para acciones más complejas.<br />
<span style="color: white;"><br /></span>
<span style="color: white;">5- ACCIÓN CONTINUADA Y SUPERPUESTA</span><br />
Es muy probable que nos encontremos con elementos que se mueven a diferente velocidad (pensemos en un domador de circo utilizando un látigo), así que hay que tener en cuenta que muchos de esos movimientos vienen marcados por un desfase (la acción se alarga para dramatizarla/hacerla cómica).<br />
<br />
<span style="color: white;">6- FRENADAS Y ARRANCADAS</span><br />
Todos los movimientos vienen precedidos de una aceleración y tienen una deceleración final. Pensemos en un coche: para circular a 50km/h necesita arrancar desde cero y pasar por el 10, el 20, el 30 en un<i> in crescendo</i> hasta llegar al 50, y para frenar le sucede lo mismo. En la animación este acelerar/decelerar suaviza la acción, evitando movimientos robóticos.<br />
<br />
<span style="color: white;">7- ARCOS</span><br />
Todo bicho viviente (y los no vivientes también) describe, cuando se mueve, trayectorias fluidas en forma de onda. Respetar esto es de crucial importancia para dotar de realismo a la acción.<br />
<br />
<span style="color: white;">8- ACCIÓN SECUNDARIA</span><br />
Es importante que, por ejemplo, cuando realicemos un movimiento con el brazo, el resto del cuerpo lo acompañe de manera menos marcada, como siguiendo la inercia del movimiento principal. Y si ese brazo tiene una pulsera holgada, ésta se mueva de acuerdo a las órdenes dadas por nuestra extremidad.<br />
<br />
<span style="color: white;">9- SENTIDO DEL TIEMPO o TIMING</span><br />
ESENCIAL. Hay que saber cuánto tiempo se tarda en realizar una acción. No se trata tan sólo de hacerla fluida, con arcos, con frenadas y arrancadas... si no de que dure lo que tiene que durar. Algo tan básico sirve para determinar el peso y tamaño de los cuerpos, y también para calcular la duración total de nuestra película.<br />
<br />
<span style="color: white;">10- EXAGERACIÓN</span><br />
Muy similar a la regla nº 1, pero aplicada a gestos/acciones. Pensemos en los dibujos animados de Ren y Stimpy.<br />
<br />
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/7ZJyEWMYEnA" width="420"></iframe></div>
<div style="text-align: center;">
<span style="text-align: -webkit-auto;"><br /></span></div>
<div style="text-align: left;">
<span style="text-align: -webkit-auto;">En la realidad no existe tanta exageración, pero en el mundo cartoon nos sirve para remarcar sensaciones en los personajes.</span></div>
<div style="text-align: left;">
<span style="text-align: -webkit-auto;"><br /></span></div>
<div style="text-align: left;">
<span style="text-align: -webkit-auto;"><span style="color: white;">11- PESO Y PROFUNDIDAD</span></span></div>
<div style="text-align: left;">
<span style="text-align: -webkit-auto;">Tened siempre presente la Ley de la Gravedad. De nada sirve que hagamos un muñeco gordo y pesado si después se mueve como un jilguero en la animación. Hay que remarcar su peso en el caminar, y en sus movimientos.</span></div>
<div style="text-align: left;">
<span style="text-align: -webkit-auto;"><br /></span></div>
<div style="text-align: left;">
<span style="text-align: -webkit-auto;"><span style="color: white;">12- PERSONALIDAD</span></span></div>
<div style="text-align: -webkit-auto;">
Nuestro muñeco es un actor, y debemos lograr que transmita felicidad, tristeza, frustración, miedo... no sólo con muecas faciales, si no con todo su cuerpo. Un truco para conseguir esto es actuar nosotros mismos delante de un espejo (con un poco de exageración). Repetir una y otra vez la acción hasta ser capaces de verlo tal y como lo queremos expresar, y entonces trasladarlo al muñeco.</div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
<span style="color: white;"> Todas estas reglas no dejan de ser una meticulosa observación de la realidad que nos rodea (exagerándola, en algunos casos). No hay que memorizarlas, pero sí entenderlas, y escoger, de todas ellas, cuáles son para nosotros, pequeños principiantes del mundo animado, las esenciales.</span></div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
En el siguiente enlace aparecen las mismas reglas con un ejemplo visual para entenderlas mejor:</div>
<div style="text-align: -webkit-auto;">
<a href="http://www.xsiforum.com/forum/index.php?topic=5444.0"><span style="color: white;">http://www.xsiforum.com/forum/index.php?topic=5444.0</span></a></div>
<div style="text-align: -webkit-auto;">
<br /></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-91714972603748524682012-11-08T10:52:00.002+01:002012-11-08T10:52:42.988+01:00Esqueleto articulado<div style="text-align: left;">
Cuando planeamos una animación, pensamos en los posibles personajes que la van a protagonizar. Y, muy seguramente, esos personajes se moverán, caminarán, saltarán, repartirán guantazos o se rascarán la cabeza. Para que puedan hacer todo eso, es necesario que dispongan de <b><span style="color: white;">articulaciones</span></b>.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Para hacer un muñeco articulado a nuestra imagen y semejanza, lo primero que haremos será medir nuestro cuerpo: piernas, brazos, antebrazos, tronco, cabeza... tomaremos nota de cada parte, haciendo un croquis en un papel. Tal que así:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2pdbI3C8zTTIDioYZMhZwLxlH8tgAy9vQa8KPHwyLuvJV2cvhdG2efGLH8FSd4s4SNOUl4qaFJFuY0rNh-q2vtZKfPJmShuoMvBrMMdb8gUEXaB0ai2MIIZQbW3zv_y4xrYAw5TXuYjS/s400/IMG_4776.JPG" width="240" /></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
En ese dibujo tan estupendo, marcaremos con un círculo las partes donde vamos a poner articulaciones: rodillas, muñecas, codos, cuello, cadera, tobillos.... aquí se nos planteará la primera duda: <b><span style="color: white;">¿cuántas articulaciones son necesarias?</span> </b>Sólo en la columna tenemos 33 vértebras ¿en verdad es necesario marcarlas todas? ¿y en los carpos y metacarpos?...</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
<img border="0" height="400" src="http://3.bp.blogspot.com/-XcbT42KqMlo/UJt6Bs9nxUI/AAAAAAAABQg/mQl7lR9-ydM/s400/IMG_4779.JPG" width="225" /></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
No hace falta que seamos estrictos. De hecho, cuantas menos articulaciones pongamos, menos preocupaciones tendremos. Imaginad por un momento que tuviésemos que mover un brazo con su codo, su muñeca y con todas las pequeñas articulaciones de cada dedo de la mano. <b><span style="color: white;">Horror</span></b>. Hay que economizar al máximo el esfuerzo y el tiempo, así que intentaremos eliminar todas las partes móviles que no sean de vital importancia.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7tdRcyviESWOTYnC70ealuJJbceXfLyhILg-4SL6Pl10RyfBkX6gA1nxA3kIupZ64DIpPt2Xa45b5OrC6Gz_5SyEbeb1l6NA8miXMhGWhUZVo70jZeuqRjChHRfC9tBgDiHTXoCfGgVcE/s400/IMG_4778.JPG" width="208" /></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Veamos este video: </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" mozallowfullscreen="mozallowfullscreen" src="http://player.vimeo.com/video/24596562?title=0&byline=0&portrait=0" webkitallowfullscreen="webkitallowfullscreen" width="400"></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Esto es un esqueleto profesional muy caro (más de 200€), pero nosotros podemos sobrevivir en el mundo de la animación con algo mucho más modesto. Utilizaremos <b><span style="color: white;">alambre de jardinería</span></b>, muy flexible/manejable y económicamente asequible. ¿Y cómo hacemos las articulaciones? Pues, en lugar de las piezas (de precio desorbitado) del muñeco profesional, usaremos el mismo alambre de jardinería del resto del cuerpo, trenzando varias partes en los "huesos" y dejando un hilo sencillo en cada zona articulada.<br />
<br />
Las medidas que hemos tomado las escalaremos a <b><span style="color: white;">1:5</span></b> (1:10 resultaría extremadamente pequeño, y 1:2 sería demasiado grande). Y, por seguir un orden, yo cortaría un único alambre para las dos piernas, otro para los brazos y otro para la cabeza y la columna vertebral, para que resulte más fácil unirlo todo luego.<br />
<br /></div>
<div style="text-align: left;">
Alambre, alicates y tenazas. ¡Manos a la obra!... y mucha maña.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
<img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP2NERtRz00rcKtQPJr4m7shMN3LDrZOiL9BmLct2Z2MyVPMZxw8ZoYE14o9Wnc2bY4FLuHX45I4OOpYylAwzWWuQ-ZZB4o1yThjvYHt-PTMTRVgbzQT2t2a4gDU4dT3LizVohfAJzVCjc/s320/IMG_4813.JPG" width="320" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<img border="0" height="320" src="http://1.bp.blogspot.com/-VFZX-YwUQdg/UJt7i85w2YI/AAAAAAAABQw/8c_LLu6P-dY/s320/IMG_4817.JPG" width="196" /></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
El <span style="color: white;">resultado final</span> debería ser algo similar a esto:</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: center;">
<img border="0" height="271" src="http://1.bp.blogspot.com/-0dH2YbW-sjE/UJt9Xwf1khI/AAAAAAAABQ4/81rdFVxwZ4E/s400/DSC02622.JPG" width="400" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
(vale, le falta un poco de brazo, pero para ser hecho en hora y media de clase está muy bien)</div>
</div>
<div style="text-align: left;">
<br />
Otra opción para construir el armazón de un muñeco es trenzar el alambre entero (sin preocuparnos de marcar las articulaciones), hacer el esqueleto y <b><span style="color: white;">reforzar con pasta de modelar</span></b> las partes rígidas.<br />
<br /></div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="http://2.bp.blogspot.com/-21WvbD5Ngqc/UJt-HWbbRvI/AAAAAAAABRA/K0cH6ZjJp_M/s320/IMG_4818.jpg" width="206" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">El resultado será una estructura más pesada, pero también más resistente y estable.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">Ya sólo nos queda "vestirlo" y prepararlo para su gran actuación.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<br /></div>
q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0tag:blogger.com,1999:blog-6257957338619961462.post-61188532034551531462012-10-12T16:22:00.001+02:002012-10-14T17:48:30.876+02:00Bienvenid@s<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQNtGjR6HAo2m7kzfGQC6XC0xC0hb0te-iU4NngFowKAC_dP10rKck0eV-IqaMg8AEeMoSqq8MAmzOmbIzjKvNtKCH02oZhLbROTstgHHLE7vN2MhZgfXoOpFamiRe62n0eKLSSnxNx2Mh/s400/gromitarmy1.jpg" width="400" /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Es probable que a muchos de vosotros os suenen términos como <i><span style="color: white;">stopmotion</span></i>, <i><span style="color: white;">claymation</span></i>, <i><span style="color: white;">pixilation</span></i>... y también es probable que no os suenen en absoluto. No importa. A lo largo de este curso aprenderemos las diferencias entre cada uno de ellos, y nos convertiremos en unos pequeños <i>amateurs</i> de este mundo animado enormemente complejo y atrayente.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
En cada clase intentaremos realizar un ejercicio práctico, que nos sirva de ancla para esponjarnos de la teoría que lo acompaña, y para crear con nuestras propias manos un universo nuevo. Como decía un profesor de mi facultad: <span style="color: white;">"manos ocupadas, cabecita despierta"</span>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Todos los ejercicios realizados (sean video, foto, dibujos, escritos...) serán subidos al blog en forma de entrada, y serán correctamente etiquetados para utilizar este espacio como memoria compartida de nuestros progresos y aprendizajes.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
En el <b><span style="color: white;">lateral del blog</span></b> podemos encontrar, además de un saludo inicial y el contador de visitas, una serie de blogs informativos sobre stopmotion (<b><span style="color: white;">STOP! VISITA OBLIGADA</span></b>), una pequeña selección de animaciones (<b><span style="color: white;">EJEMPLOS ANIMADOS</span></b>) y el enlace al que, sin duda, es el mejor manual de animación que existe: <u>The Animator's Survival Kit</u>, de Richard Williams. Además, podemos suscribirnos al blog, para recibir en nuestro correo personal un aviso cada vez que una entrada sea publicada (<b><span style="color: white;">STOPMOCIONA EL MAIL!</span></b>).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<span style="color: white; font-size: large;">Stopmocionémonos!</span><br />
<span style="color: white; font-size: large;"><br /></span>
<span style="color: white; font-size: large;"><br /></span>
<span style="color: white; font-size: large;"><br /></span>
<span style="color: white; font-size: large;"><br /></span>q u e f a s shttp://www.blogger.com/profile/15130454685218924525noreply@blogger.com0