<?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>JaLeRu Blog &#187; Clase</title>
	<atom:link href="http://jestudio.cl/blog/tag/clase/feed/" rel="self" type="application/rss+xml" />
	<link>http://jestudio.cl/blog</link>
	<description></description>
	<lastBuildDate>Mon, 17 Jan 2011 22:16:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>Uso de la Clase Tween en As3</title>
		<link>http://jestudio.cl/blog/uso-de-la-clase-tween-en-as3/</link>
		<comments>http://jestudio.cl/blog/uso-de-la-clase-tween-en-as3/#comments</comments>
		<pubDate>Sat, 19 Apr 2008 16:40:49 +0000</pubDate>
		<dc:creator>JaLeRu</dc:creator>
				<category><![CDATA[Computación]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[As3]]></category>
		<category><![CDATA[Clase]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Tween]]></category>

		<guid isPermaLink="false">http://jestudio.cl/blog/?p=17</guid>
		<description><![CDATA[Hola, en este Tutorial les enseñaré cómo lograr un efecto de Easing Tween mediante Actionscript 3, ya que es una de las primeras cosas que aprendí solo en ActionScript 3. Primero debemos importar los paquetes necesarios: import fl.transitions.*; import fl.transitions.easing.*; Luego creamos un nuevo Sprite, en este caso dibujaremos un simple cuadrado. var box:Sprite= new [...]]]></description>
			<content:encoded><![CDATA[<p>
<object width="550" height="150">
<param name="movie" value="http://www.cristalab.com/images/tips/actionscript_3/efecto-easing/tween2.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#ffffff"></param>
<embed type="application/x-shockwave-flash" width="550" height="150" src="http://www.cristalab.com/images/tips/actionscript_3/efecto-easing/tween2.swf" quality="high" bgcolor="#ffffff" wmode="window" menu="false" ></embed>
</object>
</p>
<p>Hola, en este <a href="http://www.jestudio.cl/blog/index.php/category/tutoriales/" target="_blank">Tutorial</a> les enseñaré cómo lograr un efecto de Easing Tween mediante Actionscript 3, ya que es una de las primeras cosas que aprendí solo en ActionScript 3.</p>
<p>Primero debemos importar los paquetes necesarios:</p>
<pre>import fl.transitions.*;
import fl.transitions.easing.*;</pre>
<p>Luego creamos un nuevo Sprite, en este caso dibujaremos un simple cuadrado.</p>
<pre>var box:Sprite= new Sprite   //  Se crea
box.graphics.beginFill(Math.random()*0xffffff); // Se elije color
box.graphics.drawRect(0,0,100,100); // Dibujamos el cuadrado
box.graphics.endFill(); //Terminamos de dibujar
box.x=10  //Posición
box.y=10
addChild(box); // Lo enviamos al Stage.</pre>
<p>Comenzando ya con el Tween lo creamos, dándole las opciones de:</p>
<p>(Objeto,Propiedad,Método,Partida,Termino,Duracion,Animación)</p>
<p><strong>Objeto: </strong> Es el sprite que creamos en este caso. O sea, a lo que le queremos aplicar el Tween.</p>
<p><strong>Propiedad: </strong>Es La propiedad que queremos cambiarle, ya sea el x, el y o el alpha.</p>
<p><strong>Método: </strong>Es el tipo de Animación, existen varias. El modo de escribirla es: Movimiento.ease:</p>
<ul> <strong>Donde movimiento:</strong><strong><br />
None:</strong> Se mueve de el lugar a otro pero no le afectan los ease<strong><br />
Elastic:</strong> Efecto Elástico<br />
<strong>Bounce:</strong> Efecto de Rebote<br />
<strong>Regular:</strong> Se mueve de manera regular.<br />
<strong>Strong:</strong> Se mueve de una manera más fuerte.<br />
<strong>Back:</strong> Se mueve y Vuelve un poco<strong>y Ease:</strong></p>
<p><strong>easeIn():</strong> Parte lento</p>
<p><strong>easeinOut():</strong> Parte y Termina Lento</p>
<p><strong>easeOut():</strong> Termina Lento</ul>
<p><strong>Partida y Término</strong>, es donde empieza y donde termina la propiedad a la cual vamos animar.</p>
<p><strong>Duración :</strong> Es el tiempo que demorará en hacer la animación.</p>
<p>Por ultimo “Animación”, siempre déjenlo en true, ya que en false no la muestra.<br />
<span id="more-17"></span><br />
Esto resumido para crear el Tween es:<strong><br />
</strong></p>
<pre>var mover:Tween = new Tween(box,"x",Elastic.easeInOut, box.x, 400,3, true)</pre>
<p>Quedando luego nuestro código así:</p>
<pre>//Primero debemos importar los paquetes correspondientes:
import fl.transitions.*;
import fl.transitions.easing.*;
// Luego seleccionamos el RateFrame
stage.frameRate=30 // &lt;= Numero que uno desee
// Creamos el Sprite "box" así lo he llamado,y luego dibujamos en ella una caja
var box:Sprite= new Sprite   //  Se crea
box.graphics.beginFill(Math.random()*0xffffff); // Se elije color
box.graphics.drawRect(0,0,100,100); // Dibujamos el cuadrado
box.graphics.endFill(); //Terminamos de dibujar&lt;
box.x=10  //Posición
box.y=10
addChild(box); // Lo enviamos al Stage.
//Creamos el Easing
var mover:Tween = new Tween(box,"x",Elastic.easeInOut, box.x, 400,3, true)</pre>
<p>Con esto, al ver la película el cuadrado haría una animación pequeña.</p>
<p>También podemos detenerla, comenzarla o hacer que “loopee” o sea que la animación se repita constantemente. Para esto se ocupa:</p>
<pre>mover.stop() //Lo detiene
mover.start() //Lo Comienza
mover.looping=true // Para que se repita</pre>
<p>Lo otro interesante es que podemos agregarle Listeners, que se ocupan así:</p>
<pre>mover.addEventListener(TweenEvent.MOTION_FINISH, termino)
function termino (e:TweenEvent){trace("Termino");
}</pre>
<p>Con  todo esto logré hacer que el cuadrado, al terminar una animación,  vuelva a su estado original, con otra animación, y así repitiendo.</p>
<p>El código me quedó así:</p>
<pre>import fl.transitions.*;
import fl.transitions.easing.*; //Importo Paquetes
stage.frameRate=40
var box:Sprite= new Sprite();
box.graphics.beginFill(0xFF000);
box.graphics.drawRect(50,50,50,50);
box.graphics.endFill();
addChild(box);
//Creo un Tween
var mover:Tween = new Tween(box,"x",Elastic.easeInOut, 50, 350,5, true)
var mover2:Tween = new Tween(box,"x",Elastic.easeInOut, 350, 50,5, true)
mover2.stop();
//Creo un Listener
mover.addEventListener(TweenEvent.MOTION_FINISH, list); //En este caso es al terminar
mover2.addEventListener(TweenEvent.MOTION_FINISH, list3);
{
mover2.start();
}
function list3 (event:Event){
mover.start();}</pre>
<p>Ojalá se entienda y sirva de algo <img class="wp-smiley" src="http://www.jestudio.cl/blog/wp-includes/images/smilies/icon_smile.gif" alt=":D" /></p>
<p><strong>Ejemplos:</strong></p>
<p>(Click sobre el cuadro rojo para repetir);<strong></strong><br />

<object width="550" height="100">
<param name="movie" value="http://www.cristalab.com/images/tips/actionscript_3/efecto-easing/tween.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#ffffff"></param>
<embed type="application/x-shockwave-flash" width="550" height="100" src="http://www.cristalab.com/images/tips/actionscript_3/efecto-easing/tween.swf" quality="high" bgcolor="#ffffff" wmode="window" menu="false" ></embed>
</object>
</p>
<p>
<object width="550" height="150">
<param name="movie" value="http://www.cristalab.com/images/tips/actionscript_3/efecto-easing/tween2.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#ffffff"></param>
<embed type="application/x-shockwave-flash" width="550" height="150" src="http://www.cristalab.com/images/tips/actionscript_3/efecto-easing/tween2.swf" quality="high" bgcolor="#ffffff" wmode="window" menu="false" ></embed>
</object>
<strong></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://jestudio.cl/blog/uso-de-la-clase-tween-en-as3/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

