LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

25 junio, 2011
by LeoBaraldi
0 comments

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.

7 marzo, 2011
by LeoBaraldi
3 Comments

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.

10 enero, 2011
by LeoBaraldi
1 Comment

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;).

13 diciembre, 2010
by LeoBaraldi
6 Comments

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.

6 diciembre, 2010
by LeoBaraldi
2 Comments

Animación por medio de ActionScript 3, primera parte.

Las interpolaciones básicas en Flash realizadas manualmente son útiles para cuando es algo sencillo y rápido. Pero son tediosas si son muchos objetos, si esos objetos dependen de un evento, si sus cualidades son adquiridas dinámicamente etc. Para dar solución a esto recurrimos a la animación mediante el uso de código.

Cuando trabajamos con una extensa cantidad de objetos en nuestra lista de visualización y los mismos requieren movimiento o transformación de sus características como tamaño, transparencia o color, o detectar eventos como un clic del Mouse, la interpolación tradicional es una desventaja ya que la misma se vuelve excesivamente pesada e incontrolada en algún punto. También en muchos proyectos nos encontramos con la necesidad de mover elementos según su estado anterior por ejemplo la posición de un punto a otro aleatoriamente.

Ventajas
Sin dudas las ventajas son mucho mas a la hora de programar movimiento mediante código, lo seguro que si la experiencia es buena, es que jamás se vuelva a crear interpolaciones manuales, ya que descubrirá que al final se tiene mejor control sobre los objetos, mejor calidad y menos tiempo de corrección.

Veamos el ejemplo más simple: Se nos requiere mover un objeto en el escenario de un punto x a otro con un total de tiempo de 3 segundo para la animación completa.
En modo tradicional es muy simple, agregamos el objeto al escenario, creamos una interpolación de imagen, nos fijamos en cuantos cuadros por segundos esta la película y multiplicamos por ejemplo 24 cuadros por 3 segundo, esto nos da la cantidad total de nuestro próximo fotograma clave (key frame) donde finalizara nuestra interpolación.

Muy bien! El objetivo fue cumplido satisfactoriamente y nos podríamos sentir que algo tan simple no debería presentar problemas a ninguna persona que viese nuestra animación. Pero comienza a surgir los primeros problemas, como por ejemplo el equipo (hardware): Las animaciones manuales dependen mucho de el tipo de hardware donde se este ejecutando el player, en un equipo con poca memoria RAM y un video pobre, sin dudas que los cuadros por segundos que definimos en 24/s caerá abruptamente a mas de la mitad, por lo tanto nuestra animación estimada en 3 segundo finalizara en aproximadamente 5.
En la animación por código no sucede eso ya que se define la velocidad en cuadros o en tiempo, por lo tanto la sincronización es realizada por el player según las prestaciones de donde se ejecute.
Otro problema es si el cliente nos pide una modificación en la distancia recorrida. Aquí no solo vamos a tener que editar los puntos de inicio y fin sino también ajustar la cantidad de frames. En contrapartida desde código con unos 10 segundos de nuestro tiempo nos alcanzara para editar ese cambio.
Pero como la realidad supera la ficción nuestro cliente nos sugiere que el movimiento no sea tan lineal, que prefiere por ejemplo un rebote al final.
Hasta aquí en lo tradicional nos tomaría un buen rato entre frames y movimientos para lograr algo “parecido”. Desde código con solo indicar la física en una línea logramos resultados óptimos.

Principios Básicos
Cualquier tipo de animación mediante código requiere un medio donde ejecutarse linealmente, así como un objeto sobre el escenario utiliza la línea de tiempo, en código usaremos la constante ENTER_FRAME del paquete flash.events y hereda de Event, para desencadenar un evento por cada pasada del cabezal en un fotograma.

ActionScript
< view plain text >
  1. Pelicula_mc.addEventListener(Event.ENTER_FRAME,enterFrameEvent)

Aunque en la línea de tiempo solo tengamos 1 frame la película ejecutara la pasada del cabezal las veces que indiquemos en los fotogramas por segundos. Al crear un objeto como por ejemplo un movieClip desde Actionscript el mismo hereda su línea de tiempo (time line) propia con las mismas propiedades de la línea principal del escenario. Por ejemplo los frames por segundos. Utilizando el evento ENTER_FRAME podemos entonces aplicar por cada entrada a un frame una propiedad al objeto, como desplazarlo en un eje, por lógica ya estamos creando una interpolación de movimiento. Los eventos ENTER_FRAME son agregados a los objetos heredados de InteractiveObject (Stage, Sprite, MovieClip, TextField, etc.) mediante un listener (escuchadores), podemos tener cuantos escuchadores y objetos en el escenario o un ENTER_FRAME en el Stage para administrar todos los objetos.

ActionScript
< view plain text >
  1. this.addEventListener(Event.ENTER_FRAME,enterFrameEvent)
  2.  
  3. function enterFrameEvent (e:Event):void {
  4. trace("acción por cada pasada del cabezal")
  5. }

El evento ENTER_FRAME no cuenta con las fases de captura ni de propagación así que por lo tanto dicho evento se agrega a cualquier elemento heredado de InteractiveObject este o no en la lista de visualización.
Otra de las ventajas que se cuenta con la animación mediante código es el incremento de rendimiento que se logra con respeto a la animación tradicional.
El procesador y placa de video son mejor administrados por el FlashPlayer y en su ultma version 10.1 incorpora aceleración por hardware.
Es importante destacar que al agregar un listener ENTER_FRAME a un objeto este no deja de emitir el evento hasta que el mismo no sea removido, por lo tanto es una muy buena costumbre de que aquellos ENTER_FRAME que no utilicemos los removamos, esto incrementara el rendimiento del player.

ActionScript
< view plain text >
  1. stage.addEventListener(MouseEvent.CLICK,stageClick);
  2. stage.addEventListener(Event.ENTER_FRAME,enterFrameEvent);
  3.  
  4. function enterFrameEvent(e:Event):void
  5. {
  6. trace(this.mouseX);
  7. }
  8.  
  9. function stageClick(e:MouseEvent):void
  10. {
  11. stage.removeEventListener(Event.ENTER_FRAME,enterFrameEvent);
  12. trace("click")
  13. }

El siguiente ejemplo elimina el evento ENTER_FRAME al hacer clic en el escenario. Eliminado el evento nuevamente puede ser creado indefinidamente.

30 mayo, 2010
by LeoBaraldi
1 Comment

Listar adaptadores de red en AIR 2.0 NetworkInfo

La clase NetworkInfo es nueva dentro del paquete flash.net de Adobe AIR 2.0, esta clase nos permite listar los adaptadores de red que cuente nuestro SO y acceder a la información del mismo para poder manipular o comunicar con algún tipo de cliente o servidor.

Este ejemplo esta confeccionado desde Adobe Flash CS5 que entre esta novedad incluye muchas más que voy a ir ejemplificando.

ActionScript
< view plain text >
  1. //importamos las clases necesarias
  2. import flash.net.InterfaceAddress;
  3. import flash.net.NetworkInfo;
  4. import flash.net.NetworkInterface;
  5.  
  6. //creamos una variable NetworkInfo
  7. var adaptadorInfo:NetworkInfo = NetworkInfo.networkInfo;
  8. //guardamos todos los adaptadore de red en un Vector que es un conjunto
  9. //de elementos del mismo tipo
  10. var adaptadores:Vector.<NetworkInterface> = adaptadorInfo.findInterfaces();
  11.  
  12. //listamos en el panel de salida los datos de nuestros adaptadores de red
  13. if (adaptadores != null)
  14. {
  15.     trace("cantidad de adaptadores:"+adaptadores.length);
  16.     //
  17.     for each (var interfacesObj:NetworkInterface in adaptadores)
  18.     {
  19.         trace("//////////////////////////////////////////////////////");
  20.         trace("Nombre de visualización: "+interfacesObj.displayName);
  21.         trace("Nombre del adaptador: "+interfacesObj.name);
  22.         trace("MAC del adaptador:   "+interfacesObj.hardwareAddress);
  23.         //de esta manera optenemos las ip correspondiente a cada adaptador
  24.         //como tambien el la version de ip
  25.         for each (var direcciones:InterfaceAddress in interfacesObj.addresses)
  26.         {
  27.             trace("                 ip ---> "+direcciones.address);
  28.             trace("                 ip versión ---> "+direcciones.ipVersion);
  29.         }
  30.         trace("Estado: "+interfacesObj.active);
  31.         trace("Unidad máxima de transmición: "+interfacesObj.mtu);
  32.     }
  33. }
  34. else
  35. {
  36.     trace("no hay adaptadores de red en su sistema");
  37. }