BlocketPc :: Flash Lite y Mobile Web

En un proyecto flash lite en el que estoy trabajando, hemos detectado (con mucho que agradecer al ojo clínico de Valeria) que el uso de las conocidas tweens de Ladislav Zigo, tienen efectos colaterales que en según que casos pueden ser bastante negativos. No tanto por el peso del archivo, que lo aumentan en unas cuantas kb, sino algo más importante, el consumo de memoria que las tweens generan en nuestros proyectos para móvil.

Un primer paso para solventar este consumo, es reducir los ficheros de las tweens a lo estrictamente necesario, tanto el de la propia clase de Zigo, como el de las Easing Equations de Robert Penner, logrando una bajada en el peso del archivo, y no tan apreciable en el consumo de memoria. (En mi caso me quedé con tan solo un tipo de ecuación de Robert Penner y con la tween base y 3 shorcuts). Cuando de verdad vemos lo que nos están generando de peso extra es cuando quitamos las tweens totalmente de nuestro proyecto.

En el proyecto concreto del que os hablo, y deduciendo que el consumo de memoria es en cierta manera proporcional a la cantidad de movieclips que manejes en la aplicación (debido a que es un prototype de MovieClip), la reducción de consumo memoria es cercana a las 300kb, crucial si la aplicación ronda el límite de memoria marcado generalmente en torno a los 2000kb (aunque os últimos modelos tengan el limite al rededor de 2298kb, y otros en 2048kb), no tiene comparación estar estabilizado en 1700kb que en 2000kb.

Para solventar esto, y no perder la posibilidad de animar (aunque sea de una forma un poco más sencilla) los elementos de la aplicación, he implementado unas tweens 100% caseras, que ni siquiera he querido meter como clase, sino como objeto. La nanotween tiene la posibilidad de aplicarse a cualquier propiedad de un clip numérica, darle un delay antes de comenzar a ejecutarse y ejecutar un callback en su finalización. No soporta animación de diferentes propiedades de forma simultánea, y se autodestruye al terminar :), pero si soporta aplicarle dos tweens a la vez, siempre que la ejecución de las mismas no coincida en el tiempo, es decir, podemos decirle a un clip que cambie el alpha de 0 a 100 y que se mueva, siempre que no coincida en el tiempo (gran limitación lo sé, pero en mi caso no me hacia falta…).

Vais a ver que es muy concreta, lo bueno que tiene es que es fácilmente adaptable al ser tan solo 30 y pocas líneas de código, y bastante simple y evidente. En breve postearé una versión que soporte animación de diferentes propiedades de forma simultánea, aunque el mayor contratiempo que tendrá y que de momento no tengo pensado hacer, es que la animación se haga por tiempo, en vez de por enterFrame, es decir, poder decirle que tarde X segundos en realizarse.

Lo dicho, no pretende ser un sustituto de las tween de zigo o las fuse ni muchisimo menos, ni de otras tweens pensadas para entornos mas reducidos como las Tween Lite sino, que es una manera de aplicar tweens simples con delay y callback, que para muchos casos puede venir bien, con un uso ínfimo de kb y de memoria.

Finalmente se me ocurren muchos caminos para mejorarla, pero no en perjuicio del rendimiento, que en mi caso era el punto crítico de la aplicación.

• Añadir poder crear animaciones de diferentes propiedades de forma simultánea (la implementaré)
• Añadir diferentes tipos de ecuación para las animaciones
• Añadir que el movimiento sea por tiempo en vez de por enterFrame…

En breve tenemos pensado sacar una mini web para nuestros proyectos de código, y allí albergaremos el LayoutManager y esto, entre otras cosas (mientras si alguien la quiere solo tiene que pedírmela y se la envío en versión de andar por casa XD)… estad atentos!

Aqui os dejo una guarrada de código:

var tweenManager:Object = new Object();
tweenManager.createTween = function(clip:MovieClip, idTween:Number, prop:String, val:Number, callback:Object)
{
clearInterval(clip["intervalo_"+idTween]);
clip.propiedad = prop;
clip.valor = val;
clip.callback = callback;
clip.onEnterFrame = function ()
{
this[this.propiedad] += (this.valor - this[this.propiedad])/2;
if (Math.abs(this[this.propiedad] - this.valor) < 0.4)
{
this[this.propiedad] = this.valor;
delete this.onEnterFrame;
if (callback != undefined)
{
callback.func.apply (callback.scope, callback.args);
}
this.propiedad = null;
this.valor = null;
delete this.callback;
this.callback = null;
}
}
}
tweenManager.animar = function(clip:MovieClip, prop:String, val:Number, delay:Number, callback:Object):Void
{
if (clip.idTween == undefined)
{
clip.idTween = 0;
}
clip["intervalo_"+clip.idTween] = setInterval(this, “createTween”, (delay*1000), clip, clip.idTween, prop, val, callback);
clip.idTween++;
}

La manera de llamarla seria asi:

function onEndTween():Void
{
trace(”The end :)”);
}
var callback:Object = {scope:this, func:this.onEndTween, args:[]};
miclip._alpha = 0;
tweenManager.animar(miclip, “_alpha”, 100, 2, callback);