electroduendes.com

Por aquí dejo una clase que maneja precargas en serie en Actionscript 2.0, está implementada con LoadMovie para permitir cargar sonidos y demás. Es útil en galerías de imágenes donde las cargas en paralelo no son tan útiles porque hace falta ir mostrando el contenido según va cargando, en el orden de carga. Usa modelo de despachado de eventos, con lo que es muy fácil integrarla con otras clases.

import com.gskinner.events.GDispatcher;
import mx.utils.Delegate;
/**
 * @author �?lex Sánchez
 * http://www.electroduendes.com/
 * @version 1.1
 * @usage  Clase para cargar Jpgs o swfs en un contenedor en serie (una detrás
 * de otra). Suele ser útil para galerías de imágenes.
 * 
 * listeners:
 * 	- onLoadProgress; devuelve un objeto del tipo:
 * 	{type:"onLoadProgress", mc:MovieClip, progress:Number, total:Number, percent:Number};
 * 	
 * 	- onLoadActualStart; devuelve un objeto del tipo:
 * 	{type:"onLoadActualStart", mc:MovieClip}
 * 	
 * 	- onLoadActualComplete; devuelve un objeto del tipo:
 *  {type:"onLoadActualComplete", mc:MovieClip}
 * 	
 * 	- onLoadAllComplete; devuelve un objeto del tipo:
 * 	{type:"onLoadAllComplete"}
 * 	
 * <code>
 * 		import com.electroduendes.precarga.PrecargaSerie;
 * 		import mx.utils.Delegate;
 * 		
 * 		var precarga:PrecargaSerie = new PrecargaSerie();
 * 		var urls:Array = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg");
 * 		var clips:Array = new Array(_root.uno, 
 * 			_root.dos, _root.tres, _root.cuatro);
 * 		precarga.addEventListener("onLoadProgress", 
 * 			Delegate.create(this, progreso));
 * 		precarga.addEventListener("onLoadActualComplete", 
 * 			Delegate.create(this, fincarga));
 * 		precarga.addEventListener("onLoadAllComplete", 
 * 			Delegate.create(this, fintodo));
 * 		precarga.addEventListener("onLoadActualStart", 
 * 			Delegate.create(this, inicioCarga));
 * 		precarga.loadClips(urls, clips);
 * 		
 * 		function progreso(obj) {
 * 			trace("progreso despachado para mc "+obj.mc+ " al : "+obj.percent+"%");
 * 		}
 * 		function inicioCarga(obj){
 * 			trace("inicio de carga para el mc"+obj.mc);
 * 		}
 * 		function fincarga(obj) {
 * 			trace("fincarga despachada para movieclip: "+obj.mc);
 * 		}
 * 		
 * 		function fintodo() {
 * 			trace("fintodo despachado");
 * 		}	
 * </code>
 */
class com.electroduendes.precarga.PrecargaSerie {
 
	private var numCargados:Number = 0;
	// número de objetos que ya están cargados
	private var actualProgress:Number = 0;
	// almacena el progreso de carga
	private var actualTotal:Number = 0;
	private var actualPercent:Number = 0;
	private var actualTarget:MovieClip = null;
	private var urlArray : Array;
	private var targetArray : Array;
	private var interval:Number = 0;
	var dispatchEvent:Function;
	var addEventListener:Function;
	var removeEventListener:Function;
	function PrecargaSerie(){
		GDispatcher.initialize(this);
	}
	/*
	 * inicia el proceso de carga
	 * @param urlArray el arrray de películas a cargar
	 * @param targetArray el array de contenedores (movieclips)
	 */
	function loadClips(urlArray:Array, targetArray:Array, type:String) {
 
			this.urlArray = urlArray;
			this.targetArray = targetArray;
			load();
	}
	/**
	* efectua el loadMovie. 
	* se va a ejecutar 'n veces' tantas como numCargados.
	*/
	private function load():Void {
		targetArray[numCargados].loadMovie(urlArray[numCargados]);
		// con el setInterval, nos aseguramos de que actualProgress sea > 0
		// guardamos la referencia actual en el atributo actualTarget
		actualTarget = targetArray[numCargados];
		interval = setInterval(Delegate.create(this, loadStart), 50);
	}
	/**
	* permite saber si la carga está iniciada
	* se usa porque la carga no devuelve 0 hasta que no se comienza a cargar
	*/
	private function loadStart():Void {
		actualProgress = targetArray[numCargados].getBytesLoaded();
		// si ya ha empezado a cargar...
		if (actualProgress>=0) {
			// limpiamos esta funcion
			clearInterval(interval);
			onLoadActualStart();
			// con esto conseguimos que actualProgress siempre esté actualizado
			interval = setInterval(Delegate.create(this,onLoadProgress), 50);
		}
	}
	/**
	* permite escuchar el porcentaje de la carga 
	* actualiza las propiedades tales como actualProgress, actualPercent.
	*/
	private function onLoadProgress():Void {
		actualProgress = actualTarget.getBytesLoaded();
		actualTotal = actualTarget.getBytesTotal();
		actualPercent = Math.round((actualProgress*100)/actualTotal);
 
		var eventObj:Object = { type:"onLoadProgress", 
					mc:MovieClip, 
					progress:Number, 
					total:Number,
					percent:Number
					};
		eventObj.mc = actualTarget;
		eventObj.progress = actualProgress;
		eventObj.total = actualTotal;
		eventObj.percent = actualPercent;
 
	  	//despacho evento para los preloaders
	  	dispatchEvent(eventObj);
		if (actualPercent>=100) {
			clearInterval(interval);
			actualProgress = 0;
			numCargados++;
			onLoadActualComplete(actualTarget);
			if (numCargados<targetarray .length) {
				load();
			} else {
				//acabamos!
				onLoadAllComplete();
			}
		}
	}
	/**
	* función que se ejecutará cuando empiece la precarga de
	* algún objeto
	* @param ref 
	* una referencia del objeto que se ha cargado
	*/
	public function onLoadActualStart():Void {
		var eventObj:Object = {type:"onLoadActualStart", mc:MovieClip};
		eventObj.mc = actualTarget;
		dispatchEvent(eventObj);
	}
	/**
	*
	* @usage función que se ejecutará cuando termine la precarga de
	* algún objeto
	* @param ref 
	* una referencia del objeto que se ha cargado
	*/
	private function onLoadActualComplete(ref:Object):Void {
		var eventObj:Object = {type:"onLoadActualComplete", mc:Object};
	  	//despacho evento
	  	eventObj.mc = actualTarget;
	  	dispatchEvent(eventObj);		
	}
	/**
	*
	* @usage función que se ejecutará cuando termine la precarga de
	* de el último objeto a cargar
	*/
	private function onLoadAllComplete():Void {	
		var eventObj:Object = {type:"onLoadAllComplete"};
	  	//despacho evento
	  	dispatchEvent(eventObj);
	}
	/**
	* @usage getter target array 
	* los contenidos
	* @return un array de clips
	*/
	public function getTargetArray():Array {
		return targetArray.slice();
	}
}

La antigua comunidad de desarrollo esmmug cambia de nombre y de dominio. Con un impresionante nuevo interface estilo workspace de Dreamweaver nos comentan el por qué del cambio, y nos prometen suculentas novedades.

Despues del éxito de los años anteriores, y tras pasearnos por Teruel, Madrid y Barcelona, éste año también hemos decidido hacer una quedada veraniega.

Para los que no lo conozcan, este evento es un encuentro que se lleva haciendo desde hace 3 años y que organiza el equipo de subflash sin ánimo de lucro. Se escoge un lugar dentro de la Península Ibérica y se pasan allí 3 dias asistiendo a diferentes talleres/ponencias. Este año el lugar designado por la organización para los Talleres Subflash 2006 es: OVIEDO – ASTURIAS.

Además del interés didáctico que ésto tiene, otra parte muy importante es el hecho de conocer a otras personas que comparten las mismas inquietudes.

Información e inscripciones, en el siguiente enlace:
[Talleres 2006]

Este verano y un año más, me honra participar en las ponencias. Hablaré sobre “sistemas de representación de redes sociales y de información”, sobre todo los aplicados a Flash. Tras este título aparentemente rruaro, os ofreceré una ponencia amena y liviana, con 0% de código y 100% de internet, donde repasaremos el auténtico fundamento de la web 2.0, las redes sociales, navegaremos por Internet para repasar hitos claves que han fundamentado este fenómeno, anécdotas del mismo, visitaremos novedosos experimentos que pretenden representar la maraña de información e interconexiones que generan las redes sociales y, posiblemente, os enseñaré alguno de mis experimentos. Todo esto en 45 ligeros minutos.
Además, como apoyo a las ponencias, a lo largo de este mes, trataré de volcar la mayor parte de experimentos y enlaces de interés que estoy recopilando al blog, con lo que si os interesa el tema, estad atentos, y por supuesto, no dejéis de ir a las ponencias.

Desde mediados del año pasado se hablaba de que los sistemas de detección de movimiento en páginas web con flash a través de webcam, eran una realidad, pero personalmente, no había tenido tiempo hasta ahora de probarlos. Ahora que estoy más ocioso, me he puesto a investigar, y puedo decir que tampoco creo que se puedan hacer grandes historias, pero algun juego para pasar el rato ya podemos ver. En el ejemplo que pego, utilizo un vídeo grabado con mi webcam para enseñaros una posible aplicación.

[ webcam djembé ]

Para el experimento, he estado trasteando con algún algoritmo de motion detection. En concreto, he trasteado con la clase BitmapData, y los métodos getPixel y treshold. Adobe ha sacado un artículo-howto al respecto.

A raíz de un hilo en Subflash, un usuario comentaba su interés por el menú de una página de 24-7media.de, que tenía un efecto “pegadizo”. Cuando te acercabas a alguno de los elementos, parecía que se “pegaba” al ratón. Bien, como estoy haciendo algo de código parecido, me propuse sacarlo en un momentín.
Por aquí os lo dejo.

Y para la gente que me lee por rss y que no puede ver los flash que embebo, que sé que cada día sois más (gracias!), pego por aquí el enlace como de costumbre.

[jarrón de margaritas pegadizas]

Para aquellos interesados en el código: en Subflash trataremos el tema estos días.

Por último, si todavía no conocéis 24-7media.de, no os perdáis esta web creadora de escuela. Aun siendo ya un poco viejuna, me encanta esa atmósfera intrigante que te produce al visitarla.

Como bastantes de vosotros, flipé en colores con la web de LeoBurnett. El sistema de navegación suma dos factores a veces opuestos en esto del flash: además de un wow! por dentro te dices �?¡qué sencillo y útil!.

Pero el sistema tampoco es nuevo, en realidad ya estaba bastante visto. ¿entonces? ¿por qué ha tenido tanta repercusion? Supongo el hecho de que es una de las grandes agencias unido a una buena creatividad aplicada, la han hecho sitio del año en fwa

Al grano, que me enrollo más que las persianas. Me gustó tanto el sistema, que me propuse sacarlo. Y una vez sacado… �?¡solo se me ha ocurrido hacer una galería! Por aquí dejo algunos dibujicos, que de creatividad ando seco
Si se os ocurre alguna aplicación práctica para esto, ahí tenéis los comentarios.

[galería]

Estoy enfrascado en un trabajillo para pasar el rato, donde simulo la física de los pétalos de una margarita. Para el mismo, necesitaba generar todos los pétalos con actionscript para luego meterles las interacciones. Estaba trabajando en la parte gráfica, y para pruebas de color, hice este experimento que puede servir como salvapantallas. Creo que la parte gráfica de las margaritas me ha quedado mas o menos decente, a ver que tal cuando meta la física.

[margaritas]

Actualización: Esta clase es bastante antigua (2006 y as2). Recomiendo visitar la librería TweenMax si pretendes hacer blur mediante código.

Por aquí va una muy simple clase para hacer blurs (desenfocados) en Actionscript 2.o que hice hace tiempo, pensaba integrarla con las tweening ecuations, o con algún paquete de tweenings, pero por desidia no la he vuelto a tocar.

Antes de que coja polvo, o peor aún quede obsoleta, la libero, por si alguien se anima a mejorarla o le sirve de un aprieto.

Cositas estupendas de la clase:

- La velocidad se pasa en segundos, independiente del framerate

- Actionscript 2.0 & MTASC ready.

- Control de todos los argumentos de blurFilter. (blurx, blury, quality)

import mx.utils.Delegate;
/**
 * @author Alejandro Sánchez Marcos
 * @usage
 import com.electroduendes.tween.BlurTween;
 var blurTween:BlurTween = new BlurTween(mc);
 var initBlur:Object = {blurX:0, blurY:0, quality:3};
 var finalBlur:Object = {blurX:50, blurY:5, quality:3};
 a.onRelease = function() {
 	blurTween.tween(initBlur, finalBlur, 1);
 };
 b.onRelease = function() {
 	blurTween.tween(finalBlur, initBlur, 1);
 };
*
*/
class com.electroduendes.tween.BlurTween {
 
	public var interval: Number = 40;
	private var filter:BlurFilter;
	private var blur_interval:Number;
	private var mc:MovieClip;
	private var quality : Number;
	private var counter : Number;
	private var iterations : Number;
	private var diferenceX:Number;
	private var diferenceY:Number;
 
	public function BlurTween(mc:MovieClip){
		this.mc = mc;
		filter = new BlurFilter();
	}
	public function tween(initBlur:Object, finalBlur:Object, seconds:Number) : Void {
		counter = 0;
		this.iterations = Math.ceil(seconds*1000/interval);
		// apply init blur
		filter.blurX = initBlur.blurX;
		filter.blurY = initBlur.blurY;
		filter.quality = initBlur.quality;
		mc.filters = [filter];
		// calculate difference
		diferenceX = finalBlur.blurX ���?? initBlur.blurX;
		diferenceY = finalBlur.blurY ���?? initBlur.blurY;
		this.quality = finalBlur.quality;
		// if we have something to blur or unblurâ�?�¦
		clearInterval(blur_interval);
		if (diferenceX!=0 && diferenceY!=0)
			blur_interval = setInterval(Delegate.create(this, applyTween), interval);
	}
	private function applyTween() : Void {
		counter++;
		filter.blurX += diferenceX/iterations;
		filter.blurY += diferenceY/iterations;
		filter.quality = quality;
		mc.filters = [filter];
		if (counter == iterations) clearInterval(blur_interval);
	}
}

[por aquí un ejemplo]

Está en ingles por mi propósito hace un año de empezar a codificar en este idioma. Sé que a los hispanohablantes nos cuesta algo trabajar con nombres de variables y comentarios en inglés, pero por contra tengo que decir que después de tener que pelearme con un ejemplo de un código que sólo encontré en un blog francés escrito en francés, al menos, por mayoría democrática debo acostumbrarme al inglés para el código que publico.

La gente de Flash, tiene pensado realizar mejoras en el editor de código, y nos ha pedido en éste post que les contemos cuales son las mejoras mas prioritarias a nuestro entender para “Blaze”.

Hace mucho que ya no codifico en el editor de Flash, pero por si algún día este editor mejora, éstas son para mí las, al menos imprescindibles:

1. Ability to check compile time errors without compiling, similar to Eclipse and Mtasc.

2. Class browser.

3. ctrl+click to open declaration.

Por cierto, si enviáis vuestras sugerencias, no os asustéis si en vuestro nombre aparece el del post anterior y viceversa. Al menos, a mí me ha pasado

Actualización: Este post puede ser útil si codificas en AS2. La clase sigue siendo fundamental para esta versión del lenguaje, pero para AS3 ya no es aplicable.

He visto gente que codifica muy bien, pero que todavía tiene que tocar su código genérico para adaptarlo a sus proyectos. Sobre todo, el problema suele estar en los eventos. Cuando hay que notificar a alguna funcion que un conjunto de cargas está completa, que un formulario está chequeado, o que un combo está seleccionado, ya empiezan los problemas. Para ellos, este post puede ser interesante. Sobre todo si no han trabajado nunca con EventDispatcher. Y para los que han trabajado y piensen que EventDispatcher, a veces se queda corta, puede que también.

Gskinner sacó (gracias Carlos ) hace tiempo una utilidad que mejoraba notablemente la clase EventDispatcher. Por si alguien no sabe de que hablo, EventDispatcher, y su mejora, GDispatcher es la navaja suiza que te permite descorchar la botella del vino con la que celebrarás o celebraste tu completo dominio de la encapsulación de tus clases, sobre todo las que llevan eventos. Esa manera tan estupenda de trabajar con listeners, que es tan “clara” en los UI Components y en la clase MovieClipLoader, se puede utilizar como un patrón de diseño para los mensajes que se envían tus clases (eventos).

�?¡Por fin podrás decir a tu jefe, - eh! estoy reutilizando! - y el te dirá… - eh, estupendo, en vez de para mañana, lo quiero para hoy! -

GDispatcher