Centrar movieClip según evento mouse

Este ejemplo acomoda el objeto al centro del stage según donde se haga click. Ejemplo solicitado por mail, se los dejo a quien le pueda ser útil.

ActionScript
< view plain text >
  1. import flash.display.MovieClip;
  2. import flash.events.MouseEvent;
  3.  
  4. var _cuadrado:MovieClip = new MovieClip();
  5. _cuadrado.graphics.beginFill(0xFF0000,1);
  6. _cuadrado.graphics.drawRect(0,0,100,100);
  7. _cuadrado.graphics.endFill();
  8. this.addChild(_cuadrado);
  9.  
  10. var _pointer:MovieClip = new MovieClip();
  11. _pointer.graphics.beginFill(0xFFFFFF,1);
  12. _pointer.graphics.drawCircle(0,0,2);
  13. _pointer.graphics.endFill();
  14. _cuadrado.addChild(_pointer);
  15.  
  16. _cuadrado.addEventListener(MouseEvent.CLICK,onClic);
  17. function onClic(e:MouseEvent):void
  18. {
  19.     _pointer.x = (e.localX -  _pointer.width/2)+ _pointer.width/2;
  20.     _pointer.y = (e.localY -_pointer.height/2)+_pointer.height/2;
  21.     _cuadrado.x = ((_cuadrado.width - e.localX)-_cuadrado.width)+(stage.stageWidth/2);
  22.     _cuadrado.y = ((_cuadrado.height - e.localY)-_cuadrado.height)+(stage.stageHeight/2);
  23. }

Formatos de video. MPEG, FLV y AVI.

Como existe diferentes tipos de formato de imágenes tales como TPEG, TIFF, GIF etc. También para los videos, entender porque y como funcionan dichos formatos ayudara considerablemente lograr mejores resultados en nuestra Web.

Que es un vídeo MPEG:

Las siglas MPEG corresponden a Moving Picture Experts Group el cual es un grupo de trabajo encargado de impulsar estándares con respecto al uso de las imágenes.

Los videos en dicho formato tienen por característica una compresión que los hace más livianos al momento de transportar. El sistema de compresión consiste de la fragmentación de los datos y el almacenamiento de aquellos que son diferentes, los cuales se repitan son quitados logrando una mejora en el peso total del archivo.

En la antigüedad este sin dudas fue uno de los formatos más adecuados y prometedores para la Web. Actualmente se considera desestimado con respecto a otros formatos como H264 o OGG Theodora que prestan mejor calidad / rendimiento.

Que es un vídeo AVI:

El formato AVI (siglas en inglés de Audio Video Interleave) es el formato propuesto por Microsoft desde 1992 como contenedor de videos y audio.

El video o audio no necesariamente tiene que ser AVI, ya que este es un contenedor, el códec que interpreta el flujo puede reproducir otros formatos como DivX, MP3, AC3 etc.

La propiedad más importante de este formato es sin dudas su capacidad de contener varios flujos de información en el mismo fragmento de datos. Esta capacidad se denomina interleave y es la que nos da la posibilidad de cuando vemos una película poder cambiar el audio de un idioma a otro. Por ende quiere decir que el cuadro y el sonido van vinculados unos con  el otro.

Este formato aun sigue siendo muy popular dado que la distribución de películas hogareñas en su mayoría CD-ROM contó con versiones en AVI DviX logrando muy buena calidad sin requerir un DVD-R.

En la actualidad es muy raro ver la implementación de AVI en Web.

Que es un vídeo  FLV:

Flash Video es un formato contenedor a igual que AVI diseñado para transmitir video en la Web. El formato fue creado por la empresa Macromedia y continuado por Adobe después de su adquisición. Flash video puede ser reproducido por el Flash Player principalmente aunque si se instala los códec de ffdshow tambien se pueden reproducir en otros player como Windows media. Actualmente Flash Player se encuentra en casi toda la población de equipos por lo tanto es un formato muy popular lo que llevo a sitios como YouTube, Yahoo video y Google video a utilizarlo como reproductor estándar.

La calidad del video en general es buena, después de las version 8 se introdujo un nuevo códec de compresión On2 TrueMotion lo que incremento la calidad considerablemente. Las últimas versiones de FVL ya trabajan con soporte H264 brindando calidad en alta definición (HD).

¿Entonces que formato de vídeo usamos para Internet?

Claro esta que para web lo ideal es usar Flash video, por sus prestaciones tanto en peso / calidad y la nueva disponibilidad de soportar video en HD. Pero no solo esas cualidades son las que lo destaca del resto, tenemos que considerar que Flash Video puede interactuar con el lenguaje de programación que interpreta el Flash Player (ActionScript).

Este ultimo nos abre un océano de posibilidades, desde la manipulación del tiempo, eventos, a interactividad. El video como secuencia lineal con Flash video ya no lo es mas, y pasa se ahora un medio interactivo con el usuario.

También Flash video cuenta con la posibilidad de manejar canales alpha (transparentes) para lograr montajes sobre fondos croma  y el poder transmitir en Flash video en modo streaming (vivo) a una cantidad de usuarios al mismo tiempo.

Actualmente es el formato de mayor uso, penetración y compatibilidad, desde películas, programas en vivo hasta salas de chat con audio y video, son las posibilidades que brinda Flash Video.

El reproductor de FLV.

Para reproducir un video en formato FLV, puede realizarlo desde una aplicación de terceros como por ejemplo Mplayer, o incorporar el video en un archivo FLA (Flash). También puede leerlos en modo streaming utilizando algún reproductor.

¿Como convierto archivos AVI, MPEG a FLV?

Cuando se instala el programa de desarrollo Adobe Flash, el mismo incluye una aplicación llamada Flash Video Encoder. Esta es la encargada de convertir formatos como AVI, MPEG, MOV, MP4, MP3 etc. a formato FLV.

También existen aplicaciones de conversión de terceros. Aunque lo recomendable es usar la de Adobe si es que queremos conseguir buenos resultados.

Es importante destacar que para convertir formatos de video a Flash video, es necesario tener instalado QuickTime, ya que este nos brindara de los códec secundarios que requiere el Flash Video Endoder.

Video en la Web, conceptos básicos.

El avance en compresores y ancho de banda disponible dieron origen a una explosión de aplicaciones y uso del video en la Web. Desde sitios como YouTube a sitios personales que interactúan con video logrando una mejor experiencia al navegar contenido multimedia.

El uso de video desde sus principios implicaba un gran problema a la hora de implementarse y reproducirse. El mismo requería no solo de plug-in o complementos especiales instalados en nuestro sistema. También consumía mucho ancho de banda con respecto a lo que se disponía años atrás. Actualmente quizás el peso de los videos no se vio reducido, al contrario, con respecto a nuevas tecnologías como el HD (Alta definición) se incrementó. También se amplio considerablemente la velocidad de descarga haciendo los videos mas accesibles y disponibles para el común de los usuarios.

¿Que necesito para ver videos?

Los requerimientos actuales para reproducir video desde un navegador no están lejos de los computadores más básicos. Pero es importante saber que una buena cantidad de memoria RAM y una placa de video de media calidad son los requerimientos básicos. Esto también requiere una conexión a Internet de por lo menos 512 kb/s si queremos ver video sin cortes a baja calidad. Actualmente se dispone de videos en formatos de mayor calidad como HD 240p, 360p, 720p y 1080p. Cuando mayor es la calidad mayor es el peso del video, por ende se requiere de mayor velocidad de descarga si es que no queremos percibir cortes.

Otro punto importante es el Software, requerimos de programas o lo que se conoce como Códec o decoder para visualizar los videos. En la actualidad contamos con diferentes formatos de videos, algunos más populares que otros.

Dichos códec son los encargados de descomprimir o interpretar el video y mostrarlo visualmente de manera correcta. Cuando no contamos con los adecuados puede pasar que no podamos abrir el archivo o solo escuchemos el audio y no veamos ninguna imagen.

Actualmente los códec mas comunes vienen incluidos en el SO (sistema operativo) aunque hay formatos como H264 que requieren por ejemplo instalar el Flash Player para poder visualizarlos desde la Web. También existen formatos como MOV o MP4  que pueden ser preproducidos por el player de Flash o el QuickTime de Apple.

¿Porque tantos formatos?

Los videos son una secuencia de imágenes a cierta cantidad de cuadros por segundos, es decir que si por analogía usamos el mismo criterio que las imágenes podemos llegar a la conclusión que cuando mayor es la calidad de cada imagen mayor es el peso total, cuando mas colores tenga una imagen mayor es el peso, cuando mas datos por píxel esta utilice, mayor es el peso.

Otro factor importante es el tamaño respecto a su alto y ancho, cuanto mas grande es la área del video mas Kb. ocupara.

Con este criterio  los formatos van a depender no solo por el medio que lo digitalizo sino también por el medio de transporte. Si el medio es un disco DVD el formato puede ser “.bov” a una calidad HD sin casi ningún tipo de compresión. En cambio si el medio es la web necesitamos un formato adecuado que asegure calidad / peso como el MP4 o FLV.

La compresión es el factor de bytes quitados que no son necesarios para almacenar un dato completo, ya que esos datos pueden ser reconstruidos al momento de descomprimir tomando otros datos similares o contiguos. Cuando mayor es factor de compresión, mayor es la cantidad de datos quitados del archivo original. Una compresión excesiva lleva a la perdida de datos y por ende menor calidad del video. Según con el método de compresión o códec que se utilice vamos a lograr los resultados buscados. Los formatos mas conocidos son .AVI y .MOV, cada uno de estos formatos cuenta con sus compresores como DIVX para .AVI o el H264 para los .MOV.

En conclusión a la hora de elegir el formato no hay nada a ciencia cierta que indique cual es el mejor, simplemente lo será el que se adecue a las circunstancias buscadas. Lo ideal es lograr menor peso y mayor calidad, si logramos esa ecuación cualquier formato será igual. Pero no olvidemos que formatos como H264 “MOV, MP4 y QT” tienden a lograr excelente calidad a menor peso.

Actualmente Adobe Flash soporta video en formato HD  es decir que entre el formato nativo FLV (Flash video) también actualmente con cualquier versión superior a la 10 del Flash Player podremos visualizar videos en formato .MOV, MP4, FLV, F4V o H264.

Ya como dijimos antes el formato será adecuado según el uso que queramos conseguir, si lo que queremos es mostrar un video en alta calidad a un tamaño razonable y medianamente con un peso liviano, usaremos MP4 o H264. En cambio si queremos un video de fondo de menor calidad y prioridad en el peso (poco peso), el formato adecuado será FLV. No quiere decir que los videos en FLV sean siempre de baja calidad, la calidad y el peso lo vamos a definir desde el Flash Encoder cuando preparemos nuestra película, en los capítulos siguientes veremos paso a paso dicho proceso de compresión.

Uno de los factores mas importantes que tiene los archivos en FLV es que soportan un canal alpha (transparencia) igual que los MOV, y también incorpora un sistema de marcadores mediante metas datos llamado cuepoint.

Los cuepoint son puntos de anclajes donde el video ejecuta un evento cuando la cabeza lectora pase por el mismo. Útil para subtítulos, interactividad o sincronismo de eventos.

TweenMax – TweenLite, movimiento, transiciones desde actionscript

Desde que flash es un lenguaje puramente OOP se incremento sustancialmente la disponibilidad de clases personalizadas. En este caso contamos con la clase Tween escrita por  Jack Doyle de fácil y excelentes resultados.

Actualmente también podemos contar con clases personalizadas como la TweenMax o TweenLite creada por Jack Doyle (http://www.greensock.com) que son mucho mas completas. Estas clases no sólo tienen más propiedades, suavizados y efectos sino también que son ideales para controlar objetos diferentes a los heredados por InteractiveObject como por ejemplo sonido o fotogramas.

La diferencia entre la versión Max y Lite es simplemente su peso, por consecuencia en la versión Lite hay métodos que no están disponibles.

Descargada la clase e importada a nuestro Actionscript vamos a poder implementar su uso de la siguiente manera:

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. TweenLite.to(peli_mc, 1, {y:225, ease:Elastic.easeOut});

Como se ve, básicamente es lo mismo que la clase Tween de Adobe pero con la gran particularidad que sólo indicamos la posición final del objeto utilizando el método “to”. Esto es una ventaja sustancial a la hora de mover objetos mediante código cuando no sabemos la posición inicial que tendrán.

La estructura de uso es mediante una clase estática “TweenLite” o “TweenMax”, utilizamos el método “to” para indicar el movimiento y propiedades. En los paréntesis indicamos primero el objeto a mover, el tiempo en segundos (por defecto), ecepto que entre las llaves indiquemos useFrames:true el cual en ese caso la interpolación se completara teniendo en cuenta la cantidad de fotogramas. Las llaves {} indicamos las propiedades y métodos a utilizar separados los grupos por coma (,)

ActionScript
< view plain text >
  1. TweenLite.to( objeto, tiempo {métodos} )

Los easing también son similares a la clase Tween de Adobe con la diferencia que contamos con una cantidad superior de movimientos. En este caso utilizamos un movimiento elástico al final de la animación. Al importar todos los Easing tendremos disponibles los siguientes movimientos: Back, Bounce, Circ, Cubic, CustomEase, Elastic, FastEase, Linear, Quad, Quart, Quint y Strong con sus respectivos comportamientos (easeOut, easeIn, easeInOut).

Fíjese que el movimiento va indicado dentro de las {}, la clase utiliza esta nomenclatura para indicar el método y el valor. Si quisiéramos indicar una demora antes de iniciar la animación seria así: {delay:1}

ActionScript
< view plain text >
  1. TweenLite.from(peli_mc, 1, {y:225, ease:Elastic.easeOut,delay:1});

Podemos agregar cuantos métodos quisiéramos separados por coma(,) ejemplo:{y:10,x:45,delay:10, onComplete:listo}

También esta clase cuenta con una opción novedosa que es poder indicar posición final del objeto utilizando su posición actual, al contrario del ejemplo anterior. En ves de utilizar el método “to” lo reemplazamos por el método “from”.

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. TweenLite.from(peli_mc, 1, {y:225, ease:Elastic.easeOut});

El valor 225 del eje “y” ahora no es la posición final sino la inicial.

Controles

TweenMax o su versión lite dispone de métodos para controlar el estado del movimiento mientras este se realiza.

pause() y resume(): Pausan o reanudan la interpolación donde se encuentre actualmente.
Reverse (Boolean): Indica que debe ir en reversa la interpolación, si usa true indica que usa el mismo tiempo para reversa que el tiempo inicial.
useFrames (Boolean): indique true para utilizar frames como  unidad de tiempo y no segundos.
Delay (Number): Segundos de demora antes de realizar la animación.

Ejemplo como usar el método pause y resume: Es importante para este tipo de interpolación crear una variable con la referencia al tween.

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. //creamos una referencia
  4. var miTween:TweenMax = TweenMax.to(peli_mc,3,{y:300,ease:Quint.easeOut});
  5. var isToggle:Boolean = false;
  6.  
  7. stage.addEventListener(MouseEvent.CLICK,stageClic);
  8. function stageClic(e:MouseEvent):void
  9. {
  10. if (isToggle == false)
  11. {
  12. miTween.pause();
  13. }
  14. else
  15. {
  16. miTween.resume();
  17. }
  18. isToggle = ! isToggle;
  19. }

Este ejemplo pausa y reanuda la animación del objeto cada vez que hacemos click en el escenario.

Eventos:

Esta clase cuenta con un sin numero de controladores de eventos para facilitarnos la tarea de manipulación de objetos secuencialmente según el estado de los mismo.

Los eventos están relacionados a una función, siguiendo internamente los principios de la clase Event y sus listeners correspondientes. Así mismo la nomenclatura es muy fácil e intuitiva su uso.

El ejemplo siguiente se agrega un escuchador para cuando se completo la interpolación mediante el método onComplete.

ActionScript
< view plain text >
  1. TweenMax.to(peli_mc, 1, {y:300, ease:Quint.easeOut,onComplete:seCompleto});
  2. function seCompleto():void
  3. {
  4. trace("Interpolación completa");
  5. }

Eventos que podemos utilizar:

onStart: Ejecuta un evento cuando comienza la animación.
onStartParams: Cuando comienza la animación envía parámetros a la función relacionada.
onComplete: Ejecuta un evento cuando la animación finalizo.
onCompleteParams: Cuando finaliza la animación envía parámetros a la función relacionada.
onRepeat: Ejecuta un evento cada vez que la animación inicia un ciclo.
onReverseComplete: Ejecuta un evento cuando el movimiento en reversa llega a su fin.

La clase cuenta con mucho mas detectores de eventos y ello en su mayoría pueden recibir parámetros como el ejemplo de “onCompleteParams”. No se puede usar onComplete y onCompleteParams al mismo tiempo para detectar y enviar parámetros. Simplemente use onCompleteParams para detectar el final de la animación y entre paréntesis () envíe los valores como parámetros.

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. TweenMax.to(peli_mc, 1, {y:300, ease:Quint.easeOut,onCompleteParams:seCompleto (4)});
  4. function seCompleto(id:uint):void
  5. {
  6. trace(“parametro pasado: ”id);
  7. }

En conclusión la clase Tween de Adobe es ideal para interpolaciones básicas o iniciales. En contrapartida vamos a poder explotar mejor el código tanto con interpolaciones y efectos con paquetes personalizados como TweenMax, el uso al momento de programar justificará cual es el más adecuado.

Librerías de animación en ActionScript 3, animación en AS tercera parte

La animación mediante interpolación de movimiento es una tarea de tipo manual, la cual presenta dificultad si es que queremos animar objetos que son cargados dinámicamente o sus propiedades son relativas. Para ello se implementa paquetes para manejar movimiento, eventos y física sobre objetos desde el código.

Tween

Entre las clases nativas de Adobe Flash, contamos con una llamada Tween, la cual pertenece al paquete fl.transitions, dicha clase hereda de EventDispatcher > Object.

Nota: “EventDispatcher” Clase que se encarga de que los elementos cargados en la lista de visualización puedan manejar eventos.

La clase Tween nos dará la posibilidad de animar objetos, editar sus propiedades, como por ejemplo opacidad (alpha) o escala (scaleX) utilizando código. También es importante saber que dicha clase nos permite manipular el tipo de física para un objeto determinado (aceleración, desaceleración o rebote).

La clase Tween en la versión de AS3 se implementa de la misma manera que las versiones anteriores en AS2, pero cambia la escritura literal de sus propiedades, métodos y eventos.

Implementación básica

Se requieren en el escenario un MovieClip con el nombre de instancia peli_mc. Haga clic en el primer fotograma y coloque lo siguiente:

ActionScript
< view plain text >
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Elastic;
  3. var miTween:Tween = new Tween(peli_mc,"y",Elastic.easeOut,0,100,1,true)

Importamos la clase Tween “import fl.transitions.Tween;”
Esta es la clase encargada de darnos todas las posibilidades para mover y editar propiedades de un objeto, como por ejemplo un movieClip.

import fl.transitions.easing.Elastic;
Importamos la clase de suavizado de movimiento, cuando movamos un objeto con esta clase podremos indicar comportamientos físicos como aceleración, rebote o desaceleración tanto al inicio o final de la animación.

var miTween:Tween = new Tween(peli_mc,”y”,Elastic.easeOut,0,100,1,true)
Finalmente creamos el objeto pasando por parámetro los valores requeridos. En este caso el objeto se llama miTween y al llamar el constructor (new) pasamos los siguientes parámetros:

peli_mc (Objeto): Nombre de instancia o nombre de variable del objeto a modificar su propiedad. Es importante recordar que sólo se pueden afectar a objetos que hereden de la clase InteractiveObject, por ejemplo: MovieClip, Sprite, TextField, Stage, Loader y SimpleButton.

“y” (String): Cadena de texto que representa la propiedad a modificar, en este caso la posición en el eje Y.

Elastic.easeOut (Function): El tipo de suavizado del movimiento. Si quisiéramos que el movimiento se comporte como un elástico y rebote al final de la animación, ésta es la mejor opción, o en su defecto podemos usar las siguientes: Back, Bounce, Elastic, None, Regular y Strong las cuales debemos importarlas a todas si es que necesitamos disponer de ellas.

Fíjese que al final de la línea de código se agrego un asterisco (*), el cual indica cargar todos los paquetes de ese directorio. “import fl.transitions.easing.*;”

A estas propiedades de aceleración le sumamos el suavizado que queramos: easeIn, easeOut y easeInOut.

0 (Number): Valor inicial o comienzo de la propiedad “y”.

100 (Number): Valor final de la propiedad “y”.

1 (Number): Duración de la transición.

True (Boolean, por defecto false): indicador si vamos a sincronizar la transición con segundos como unidad de tiempo o con los fotogramas. True, para utilizar una medida de tiempo en segundo, false para utilizar una medida de tiempo expresada en fotogramas.

En el ejemplo anterior podemos ver que inmediatamente cuando compilamos el swf se ejecuta la animación del MovieClip en el eje “y”. Si quisiéramos controlar dicho movimiento desde un evento del mouse tendríamos que utilizar el método start(); para dar comienzo a la interpolación cuando hacemos clic en el MovieClip.

ActionScript
< view plain text >
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Elastic;
  3. var miTween:Tween = new Tween(peli_mc,"y",Elastic.easeOut,0,100,2,true);
  4. peli_mc.addEventListener(MouseEvent.CLICK,onClick);
  5. function onClick(e:MouseEvent):void
  6. {
  7. miTween.start();
  8. }

Ahora al hacer clic en el MovieClip ejecutamos la interpolación mediante el método start().
Los métodos más comunes que podemos utilizar son los siguientes:

  • start(): Inicializa la interpolación.
  • stop(): Detiene la interpolación.
  • resume: reanuda la interpolación donde se detuvo.
  • fforward: Adelanta la interpolación hasta el final.
  • rewind: Retrocede la interpolación al valor inicial.

También es importante recordar que la clase Tween cuenta con detectores de eventos que nos facilitarán la tarea de animar objetos y desencadenar acciones según los estados de los mismos.

ActionScript
< view plain text >
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Elastic;
  3. import fl.transitions.TweenEvent;
  4. var miTween:Tween = new Tween(peli_mc,"y",Elastic.easeOut,0,100,2,true);
  5. peli_mc.addEventListener(MouseEvent.CLICK,onClick);
  6. function onClick(e:MouseEvent):void
  7. {
  8. miTween.start();
  9. }
  10. miTween.addEventListener(TweenEvent.MOTION_FINISH,onTweenFinish);
  11. function onTweenFinish(e:TweenEvent):void
  12. {
  13. trace("movimiento finalizado");
  14. }

En el ejemplo aquí expresado se agrega un escuchador al evento que se dispare cuando la interpolación a finalizado por completo.

Otros eventos utilizados normalmente son:

  • MOTION_START: La interpolación a comenzado.
  • MOTION_STOP: Se detuvo la interpolación mediante el método stop().
  • MOTION_RESUME: Se reanudó la interpolación luego de una pausa.
  • MOTION_LOOP: Se completó un ciclo de un loop (yoyo).

Nota: se importó la clase TweenEvent para estos detectores de eventos. (import fl.transitions.TweenEvent;).

Efectos físicos con ActionScript 3, animación por AS segunda parte

Al mover objetos mediante código el siguiente paso será realizar sin dudas un efecto de física, como por ejemplo rebote, elasticidad o gravedad.

Para estos efectos no hay más opción que recurrir a las matemáticas y transcribir aquellas operaciones a funciones que simulen dicha realidad en un campo virtual.

Los efectos físicos sobre un objeto son innumerables, desde el movimiento lineal o ondulatorio, sea con aceleración o des aceleración en cualquiera de sus etapas inicial o final.
También sin dejar de lado todas las variantes que se pueden conseguir sumando gravedad y fricción de un objeto. Analizaremos los casos más comunes de la física, ya que los mismos son los mas recurrentes a la hora de realizar animaciones.

Aunque contemos con un solo fotograma el cabezal pasa por ese mismo cuantas veces indiquemos en los frames por segundos.

Aceleración

La aceleración de un objeto puede ser lineal y proporcional en su velocidad en la que se realiza el efecto. Un claro ejemplo de aceleración lineal es el siguiente.
Para este ejemplo se requiere un clip de película en el escenario con el nombre de instancia “peli_mc”.

ActionScript
< view plain text >
  1. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  2. function EventEnterFrame(e:Event):void
  3. {
  4. peli_mc.x +=  5;
  5. }
El movimiento lineal sea cualquiera su dirección se da proporcional e igual su velocidad de desplazamiento. (+=)
El movimiento lineal sea cualquiera su dirección se da proporcional e igual su velocidad de desplazamiento. (+=)

Aquí ya tenemos una simple interpolación donde el objeto se mueve linealmente y con una velocidad proporcional por cada pasada del cabezal.
Pero de seguro que la idea es lograr una aceleración y desaceleración del objeto, sea al principio, final o ambas.

Si por ejemplo queremos que un objeto de desplace a un punto indicado inicialmente rápido y se detenga gradualmente tendríamos que calcular la distancia entre ambos puntos, dividir la distancia en por un factor y a dicho resultado sumar a la posición actual del objeto, luego dividir ese segmento nuevamente por el mismo valor y sumar la posición actual del objeto, así sucesivamente hasta que no queda mas distancia. El ojo percibirá un efecto de desaceleración al final de la interpolación.

ActionScript
< view plain text >
  1. var destinoX:uint = stage.stageWidth - peli_mc.width;
  2. var velocidad:uint = 5;
  3. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  4. function EventEnterFrame(e:Event):void
  5. {
  6. peli_mc.x +=  (destinoX- peli_mc.x)/velocidad;
  7. }

Fíjese en el ejemplo que agregamos dos variables nuevas, una de ellas es el punto de destino final, el cual es el ancho del escenario menos el ancho del objeto.
El factor de velocidad, cuanto mas grande el numero el efecto demorara mas en completarse.

Cuando el objeto este mas próximo al destino final, su velocidad se reduce proporcional.

Elasticidad:

Este tipo de interpolación se destaca por el rebote en la animación, la que puede ser al inicio, final o en ambos extremos de la animación. El rebote esta dado por la multiplicación de sus valores relativos de posición por un factor asignado. Luego por cada ciclo repite los pasos de aceleración.

ActionScript
< view plain text >
  1. var destinoX:uint = stage.stageWidth - peli_mc.width;
  2. var velocidad:Number = 8;
  3. var locationObj:Number = 0;
  4. var rebote:Number = 0.8;
  5. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  6. function EventEnterFrame(e:Event):void
  7. {
  8. var distancia:Number(destinoX-peli_mc.x)/velocidad;
  9. locationObj +=  distancia;
  10. locationObj *=  rebote;
  11. peli_mc.x +=  locationObj;
  12. }
La elasticidad la simulación de un elástico, el objeto se pasa y vuelve de su destino final hasta detenerse. También puede darse en sentido inverso o en ambos.
La elasticidad la simulación de un elástico, el objeto se pasa y vuelve de su destino final hasta detenerse. También puede darse en sentido inverso o en ambos.

Gravedad:

El efecto de gravedad esta dado por varios factores que deben igualar la realidad de la vida cotidiana. Uno de ellos es el factor de fuerza y peso del objeto. También interviene un valor que representa el rebote del objeto para darnos una mejor experiencia sobre el efecto buscado.

Por lo tanto en este caso vamos a tener que declarar los valores iniciales como fuerza, peso y también los valores finales de tope o piso y también el factor de rebote. Sin dudas que si analizamos podemos ver como desde la animación simple lineal del primer ejemplo fuimos agregando efectos físicos sin muchos problemas y con resultados muy buenos sin incrementar la cantidad de frames de nuestra película.

ActionScript
< view plain text >
  1. var destinoY:uint = stage.stageHeight - peli_mc.height;
  2. var velocidad:Number = 0;
  3. var rebote:Number = 0.9;
  4. var gravedad:Number = 5;
  5. peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
  6. function EventEnterFrame(e:Event):void
  7. {
  8. velocidad = velocidad + gravedad ;
  9. peli_mc.y +=  velocidad/5;
  10. if (peli_mc.y &gt; destinoY) {
  11. peli_mc.y = destinoY ;
  12. velocidad *= -rebote ;
  13. }
  14. }

Como se puede observar aquí se declaran nuevas variables como velocidad, rebote y gravedad. La variable velocidad se va incrementando gradualmente mientras la animación se completa.

El rebote es el factor que se resta de la distancia por cada ciclo de movimiento, el mismo debe ser menor a 1 para que el objeto de la sensación de perdida de fuerza. Si lo dejamos el valor en 1 el objeto no deja de rebotar. Si en cambio lo incrementamos el objeto rebotara cada vez más lejos del límite o piso que indicamos.
La variable gravedad es la encargada de manejar la velocidad con la cual es atraído el objeto al punto final.

Nota: El punto final o destino fue definido en la línea.

ActionScript
< view plain text >
  1. var destinoY:uint = stage.stageHeight - peli_mc.height;

Estos tres principios básicos de física son los que mas se requieren a la hora de animación por código, o en su defecto son los más recurrentes para lograr otros efectos. Mezclando cualquiera de ellos o modificándolos levemente se puede lograr entornos muy realistas de simulación. No hay limites a la hora de simular formulas físicas en Actionscript, solo se requiere un poco de matemáticas y lógica.