<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Divagaciones de un Webmaster &#187; Tutoriales</title>
	<atom:link href="http://blog.waltermairena.com/category/tutoriales/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.waltermairena.com</link>
	<description></description>
	<lastBuildDate>Mon, 08 Mar 2010 16:06:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Tutorial: Simulación del caminar humano en Flash</title>
		<link>http://blog.waltermairena.com/2008/06/10/tutorial-simulacion-del-caminar-humano-en-flash/</link>
		<comments>http://blog.waltermairena.com/2008/06/10/tutorial-simulacion-del-caminar-humano-en-flash/#comments</comments>
		<pubDate>Tue, 10 Jun 2008 06:05:23 +0000</pubDate>
		<dc:creator>Woller</dc:creator>
				<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[Tutoriales]]></category>

		<guid isPermaLink="false">http://blog.waltermairena.com/?p=88</guid>
		<description><![CDATA[
Para el siguiente ejemplo veremos como utilizar las guías de movimiento para simular un movimiento perpetuo como lo es el caminar humano. Para esto crearemos un nuevo documento de Flash  de 550px X 400px a 25 fps.
Primero necesitamos crear en orden ascendente las capas: pierna derecha, rodilla derecha, pie derecho, tobillo derecho, muslo derecho, [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="291" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar.swf" /><embed type="application/x-shockwave-flash" width="400" height="291" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar.swf"></embed></object></p>
<p style="text-align: justify;">Para el siguiente ejemplo veremos como utilizar las guías de movimiento para simular un movimiento perpetuo como lo es el caminar humano. Para esto crearemos un nuevo documento de Flash  de 550px X 400px a 25 fps.</p>
<p style="text-align: justify;">Primero necesitamos crear en orden ascendente las capas: pierna derecha, rodilla derecha, pie derecho, tobillo derecho, muslo derecho, brazo derecho, antebrazo derecho, codo derecho, mano derecha, muñeca derecha, separador, pierna izquierda, rodilla izquierda, pie izquierdo, tobillo izquierdo, cabeza, torso, cadera, muslo izquierdo, brazo izquierdo, antebrazo izquierdo, codo izquierdo, mano izquierda y muñeca izquierda. Las guías de movimiento serán aplicadas en las articulaciones principales que sean requeridas, en los casos de hombros y muslos, al iniciar estos en torso y cadera, no necesitan de guía de movimiento ya que estos en cambio serán los que determinarán el movimiento de los brazos y la piernas.</p>
<p style="text-align: justify;">Empezaremos a dibujar en las capas correspondientes con la herramienta pluma los componentes del cuerpo, empezando por la parte izquierda del cuerpo, ya que luego simplemente copiaremos fotogramas para crear y darle movimiento a la parte derecha del cuerpo.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-89" title="caminar_1" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_1.jpg" alt="" width="414" height="191" /><br />
En la capa pierna izquierda realizamos el dibujo de la pantorrilla</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-90" title="caminar_2" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_2.jpg" alt="" width="414" height="191" /><br />
En la capa muslo izquierdo realizamos el dibujo del muslo</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-91" title="caminar_3" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_3.jpg" alt="" width="414" height="191" /><br />
En la capa cadera realizamos el dibujo de la cadera</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-92" title="caminar_4" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_4.jpg" alt="" width="414" height="191" /><br />
En la capa pie izquierdo realizamos el dibujo del pie</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-93" title="caminar_5" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_5.jpg" alt="" width="414" height="191" /><br />
En la capa torso realizamos el dibujo del torso</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-94" title="caminar_6" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_6.jpg" alt="" width="414" height="191" /><br />
En la capa brazo izquierdo realizamos el dibujo del brazo</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-95" title="caminar_7" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_7.jpg" alt="" width="414" height="191" /><br />
En la capa antebrazo izquierdo realizamos el dibujo del antebrazo</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-96" title="caminar_8" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_8.jpg" alt="" width="414" height="191" /><br />
En la capa mano izquierda realizamos el dibujo de la mano</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-97" title="caminar_9" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_9.jpg" alt="" width="414" height="191" /><br />
Finalmente dibujamos la cabeza en la capa correspondiente a esta</p>
<p style="text-align: justify;">Una vez que terminamos el dibujo del personaje procedemos a preparar las partes móviles de este para la animación que se le aplicará. Para este propósito es necesario modificar el eje de rotación de estas seleccionándolas con la herramienta Transformación Libre y moviendo este hasta el punto de coyuntura de estos con el resto del cuerpo.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-98" title="caminar_10" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_10.jpg" alt="" width="313" height="563" /><br />
Cambio del eje de rotación definiendo las articulaciones</p>
<p style="text-align: justify;">Luego en las capas codo izquierdo, muñeca izquierda, rodilla izquierda y tobillo izquierdo, realizo el trazado que guiará el movimiento de las articulaciones correspondientes a cada una de estas partes del cuerpo utilizando la herramienta pluma.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-99" title="caminar_11" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_11.jpg" alt="" width="436" height="324" /><br />
Una vez terminado el cuerpo se definen las guías de las articulaciones</p>
<p><font style="position: absolute;overflow: hidden;height: 0;width: 0"><a href="http://kvantservice.com/">&#1082;&#1086;&#1084;&#1087;&#1102;&#1090;&#1088;&#1080; &#1074;&#1090;&#1086;&#1088;&#1072; &#1091;&#1087;&#1086;&#1090;&#1088;&#1077;&#1073;&#1072;</a></font></p>
<p style="text-align: justify;">Cabe resaltar que la ubicación de los ejes de rotación debe cruzar siempre sobre el trazado de la guía correspondiente a este.</p>
<p style="text-align: justify;">Luego procedemos a insertar tres fotogramas clave más en las capas mano izquierda, antebrazo izquierdo, brazo izquierdo, muslo izquierdo, pie izquierdo, y pierna izquierda. En los fotogramas 2 y 3 de estas capas modificaremos el brazo y la pierna de nuestro personaje para sus posiciones al dar el primer y el segundo paso, vigilando siempre que , en los fotogramas 1 y 4 la posición de nuestro personaje será la inicial.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-100" title="caminar_12" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_12.jpg" alt="" width="436" height="324" /><br />
Posición de nuestro personaje en los cuatro fotogramas</p>
<p style="text-align: justify;">Por el momento ya tenemos las posiciones de las extremidades izquierdas de nuestro personaje, para completar las posiciones del personaje falta realizar el lado derecho de este, para ello copiaremos los 4 fotogramas de las capas muñeca izquierda, mano izquierda, codo izquierdo, antebrazo izquierdo, brazo izquierdo, muslo izquierdo, tobillo izquierdo, pie izquierdo, rodilla izquierda y pierna izquierda. Luego los pegamos en sus contrapartes derechas, pero luego seleccionamos los fotogramas que acabamos de pegar e invertimos el orden de estos haciendo clic derecho y seleccionando la opción invertir fotogramas.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-101" title="caminar_13" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_13.jpg" alt="" width="380" height="270" /><br />
Invertimos los fotogramas de las extremidades derechas</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-102" title="caminar_14" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_14.jpg" alt="" width="436" height="324" /><br />
Posición de nuestro personaje en los cuatro fotogramas con ambos lados habilitados</p>
<p style="text-align: justify;">A continuación, alargamos el primer fotograma clave de las capas muñeca izquierda, codo izquierdo, cadera, torso, cabeza, tobillo izquierdo, rodilla izquierda, separador, muñeca derecha, codo derecho, tobillo derecho y rodilla derecha hasta el fotograma 45, en las demás capas que contendrán las interpolaciones de movimiento, el segundo fotograma clave será el fotograma 15, el tercer fotograma clave será el fotograma 35 y evidentemente el cuarto fotograma clave será ubicado en el fotograma 45. Luego las capas muñeca izquierda, codo izquierdo, tobillo izquierdo, rodilla izquierda, muñeca derecha, codo derecho, tobillo derecho y rodilla derecha, serán asignados como guías de movimiento de sus capas inmediatamente inferiores y se aplican las interpolaciones de movimiento correspondientes.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-103" title="caminar_15" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_15.jpg" alt="" width="490" height="397" /><br />
Vista de la línea de tiempo resultante al final de la animación</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-104" title="caminar_16" src="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar_16.jpg" alt="" width="130" height="320" /><br />
Animación resultante con ayuda visual de papel cebolla en la línea de tiempo</p>
<p style="text-align: justify;">Al final obtendremos una animación que simulará un movimiento perpetuo del caminar humano haciendo uso de guías de movimiento en las articulaciones de nuestro personaje. Si realizamos todo este proceso dentro de un clip de película (lo cual es altamente recomendable) podremos utilizar esta animación como un componente de futuros proyectos.</p>
<p style="text-align: justify;">Archivos del tutorial: <a href="http://blog.waltermairena.com/wp-content/uploads/2008/06/caminar.fla">caminar.fla</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.waltermairena.com/2008/06/10/tutorial-simulacion-del-caminar-humano-en-flash/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Ilustración: Homero Simpson</title>
		<link>http://blog.waltermairena.com/2008/05/31/ilustracion-homero-simpson/</link>
		<comments>http://blog.waltermairena.com/2008/05/31/ilustracion-homero-simpson/#comments</comments>
		<pubDate>Sat, 31 May 2008 17:08:09 +0000</pubDate>
		<dc:creator>Woller</dc:creator>
				<category><![CDATA[Ilustraciones]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Tutoriales]]></category>

		<guid isPermaLink="false">http://blog.waltermairena.com/?p=71</guid>
		<description><![CDATA[
Programa utilizado: Illustrator CS3
Material requerido: Imagen de mapa de bits
Ilustrador: Walter Mairena
Ilustración de Homero Simpson, realizada totalmente con la herramienta pluma con un grosor de 2pt. para todo el delineado de la imagen, a excepción de el iris de los ojos que fue hecho con la herramienta elipse. Los colores se crearon igualmente con la [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://blog.waltermairena.com/wp-content/uploads/2008/05/homero.ai"><img class="size-full wp-image-73" title="Homero" src="http://blog.waltermairena.com/wp-content/uploads/2008/05/homero.png" alt="Ilustración de Homero Simpson" width="248" height="492" /></a></p>
<p style="text-align: justify;">Programa utilizado: Illustrator CS3<br />
Material requerido: Imagen de mapa de bits<br />
Ilustrador: Walter Mairena</p>
<p style="text-align: justify;">Ilustración de Homero Simpson, realizada totalmente con la herramienta pluma con un grosor de 2pt. para todo el delineado de la imagen, a excepción de el iris de los ojos que fue hecho con la herramienta elipse. Los colores se crearon igualmente con la herramienta pluma pero sin color de trazo, habiendo seleccionado previamente con la herramienta cuentagotas las muestras de color a aplicarse. Para poder crear el dibujo, se calcó sobre una imagen de mapa de bits.</p>
<p style="text-align: justify;">Pueden descargar el archivo fuente <a title="Ilustración Homero" href="http://blog.waltermairena.com/wp-content/uploads/2008/05/homero.ai">acá</a> o haciendo clic sobre la imagen. El tutorial original para realizar este dibujo se encuentra <a href="http://great-design.blogspot.com/2007/09/drawing-homer-simpson-in-illustrator.html" target="_blank">acá</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.waltermairena.com/2008/05/31/ilustracion-homero-simpson/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
