<?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>Blog de Oxxigeno &#187; Flash, Flex y ActionScript</title>
	<atom:link href="http://www.oxxigeno.com/blog/categoria/tecnologias/actionscript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.oxxigeno.com/blog</link>
	<description>Blog corporativo de Oxxigeno</description>
	<lastBuildDate>Tue, 23 Feb 2010 10:11:05 +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>Animaciones en Flash sin actionscript</title>
		<link>http://www.oxxigeno.com/blog/2009/02/animaciones-en-flash-sin-actionscript/</link>
		<comments>http://www.oxxigeno.com/blog/2009/02/animaciones-en-flash-sin-actionscript/#comments</comments>
		<pubDate>Mon, 23 Feb 2009 09:07:26 +0000</pubDate>
		<dc:creator>ecorrea</dc:creator>
				<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Flash, Flex y ActionScript]]></category>

		<guid isPermaLink="false">http://www.oxxigeno.com/blog/?p=366</guid>
		<description><![CDATA[El reto diario al que se tiene que enfrentar un diseñador al usar Flash es compensar la utilización de animación tradicional y de programación actionscript según las necesidades del momento.
Muchas veces tendemos a buscar una solución programada a problemas que pueden ser resueltos fácil y rápidamente sin recurrir al actionscript. Preferimos buscar trozos de código [...]]]></description>
			<content:encoded><![CDATA[<p>El reto diario al que se tiene que enfrentar un diseñador al usar Flash es compensar la utilización de animación tradicional y de programación actionscript según las necesidades del momento.</p>
<p>Muchas veces tendemos a buscar una solución programada a <strong>problemas que pueden ser resueltos fácil y rápidamente sin recurrir al actionscript</strong>. Preferimos buscar trozos de código en la web que muchas veces solo entendemos por encima en lugar de desarrollar efectos hechos por animación desde cero. En definitiva nos volvemos un poco ciegos a la alternativa animada y preferimos el engorro del código.</p>
<p>Si bien actionscript te permite realizar efectos espectaculares en tiempo real, esto muchas veces no es necesario y la utilización de código no esta justificada. Ademas siempre es mas fácil que otra persona entienda una linea de tiempo animada que un montón de lineas de código, por lo tanto un proyecto puede ser retomado mas fácilmente por diferentes personas.</p>
<p>Vamos a ver como animar un objeto que desprende una estela, utilizando únicamente las interpolaciones de movimiento, clips de película anidados y algún filtro.</p>
<p><span id="more-366"></span>1º <strong>Dibujamos el objeto que queremos animar</strong>. En mi ejemplo una bolita que dibujare utilizando la herramienta <em>Óvalo</em>.</p>
<p>Seleccionando el objeto y pulsando F8 lo convertimos en un clip de película (no me preguntéis del porque no un gráfico ya que es simplemente una preferencia personal).</p>
<p><img class="alignnone size-full wp-image-368" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-1.png" alt="bolita" width="95" height="81" /></p>
<p>2º <strong>Seleccionamos el clip y nuevamente lo convertimos en otro clip</strong>. Por lo que tendremos un clip anidado en otro. Al que encierra la forma de la bolita lo he llamado <em>bola </em>y al segundo que lo contiene lo he llamado <em>anima bola</em>.</p>
<p><img class="alignnone size-full wp-image-369" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-2.png" alt="otro clip" width="233" height="26" /></p>
<p>3º Editamos <em>anima bola</em> y <strong>creamos la siguiente linea de tiempo</strong></p>
<p><strong><img class="alignnone size-full wp-image-370" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-3.png" alt="línea de tiempo" width="537" height="50" /><br />
</strong></p>
<p>El primer y el ultimo fotograma clave tiene <em>bola</em> en la misma posición inicial y en el del medio desplazo <em>bola</em>. Después interpolo y ya tengo una animación en la que <em>bola </em>se desplaza y vuelve a su posición una y otra vez.</p>
<p>Para adornar un poco le doy aceleración 100 al primer fotograma clave y -100 al segundo. Y una rotación CW x3 en el primer fotograma clave y de CCW x3 en el segundo.</p>
<p><img class="alignnone size-full wp-image-374" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-7.png" alt="aceleración" width="226" height="91" /></p>
<p>4º Volvemos a la escena, seleccionamos  &#8216;anima bola&#8217; y pulsamos F8 para <strong>volver a anidarlo</strong>. Yo he llamo a mi nuevo clip <em>estela bola</em>. Así que tenemos el siguiente esquema:</p>
<p><img class="alignnone size-full wp-image-371" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-4.png" alt="estela bola" width="314" height="31" /></p>
<p>5º Editamos <em>estela bola </em>y <strong>creamos la siguiente linea de tiempo</strong>:</p>
<p><img class="alignnone size-full wp-image-372" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-5.png" alt="línea de tiempo estela bola" width="213" height="122" /></p>
<p>Las capas llamadas <em>estela </em>son una copia del contenido de la capa llamada <em>bola</em>. Así tenemos el clip de película <em>anima bola</em> en 5 capas diferentes. En la última superior y el último fotograma he puesto un <em>stop()</em>. <strong>El único trozo de código de la animación</strong>.</p>
<p>En las capas llamadas <em>estela </em>selecciono el clip de película y le doy un Alfa del 30% y un filtro de desenfoque de 5px. en los ejes X e Y. Por lo que cada clip <em>anima bola</em> nos quedaría así:</p>
<p><img class="alignnone size-full wp-image-373" src="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/imagen-6.png" alt="anima bola" width="68" height="71" /></p>
<p>6º <strong>Publicamos </strong>y <a href="http://www.oxxigeno.com/blog/wp-content/uploads/2009/02/ejemplo2.swf" rel="shadowbox[post-366];width=640;height=385;">¡tachán!</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.oxxigeno.com/blog/2009/02/animaciones-en-flash-sin-actionscript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 2.112 seconds -->
