El trabajo de Yugop, wonder-wall, muestra una retícula de imágenes que reaccionan al cursor creciendo en función de la distancia de éste. La forma en que las imágenes se escalan, distorsionandose, delatan además una deformación de la imagen realizada con algún sistema de triangularización.

Ya está, ya la hemos liado, sólo necesitaba disponer de algo de tiempo para empezar a recoger el fruto de las semillas que el gusanillo de la curiosidad acababa de plantar :)

Hacía mucho tiempo que no había trasteado con comportamientos pseudofísicos y algo menos desde que había probado una clase de triangularización que formaba parte de Sandy en su más tierna infancia, pero cuando pude imaginar la retícula de imágenes sin las mismas -como una retícula de puntos que huyen del cursor- estos dos elementos crearon una imagen clarísima:

(Please open the article to see the flash file or player.)

Aquí está el fla y este es el código usado:

//
 
import flash.display.BitmapData;
 
const W:Number=stage.stageWidth;
const H:Number=stage.stageHeight;
 
var points_ar:Array=new Array();
var gridWidth:int=14;
var gridHeight:int=8;
var patternWidth:Number = W/(gridWidth-1);
var patternHeight:Number = H/(gridHeight-1);
var totalgrid:Number = gridWidth*gridHeight;
var mouseIsdown:Boolean=false;
 
var range = patternWidth*1.8;
var speed = 50;
var multispeed=1;
var holder:Sprite;
 
init(null);
 
function init(e:Event):void {
	removeEventListener(Event.ADDED_TO_STAGE, init);
 
	holder=new Sprite();
	addChild(holder);
 
	for (i=0; i<totalgrid; i++) {
		var step:Number = Math.floor(i/gridWidth);
		var resetx:Number = i-(step*gridWidth);
		var point:Telltale = new Telltale();
		holder.addChild(point);
		point.x =point.mix= (patternWidth*resetx);
		point.y =point.miy= (step*patternHeight);
		points_ar[i]=point;
	}
 
	stage.addEventListener(MouseEvent.MOUSE_MOVE, inHandler);
	stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
	stage.addEventListener(MouseEvent.MOUSE_UP, downHandler);
 
}
 
 
 
 
function repulsion(event:Event) {
	var ddx:Number=mouseX;
	var ddy:Number=mouseY;
	var ddd:Number=Math.sqrt(ddx*ddx+ddy*ddy);
 
	if (holder.hitTestPoint(mouseX, mouseY)) {
		multispeed+.1<1 ? multispeed+=.1 : multispeed;
	} else {
		multispeed-.1>0 ? multispeed-=.1 : multispeed;
	}
	holder.graphics.clear();
 
	var l:uint=points_ar.length;
	for (var i = 0; i < l; i++) {
		var point=points_ar[i];
		var dx = mouseX- point.x;
		var dy = mouseY - point.y;
		var distance = Math.sqrt(dx*dx + dy*dy);
 
		point.x=(point.x-(dx/distance)*(range/distance)*speed*multispeed)-((point.x-point.mix)/2);
		point.y=(point.y-(dy/distance)*(range/distance)*speed*multispeed)-((point.y-point.miy)/2);
		if (mouseIsdown) {
			holder.graphics.lineStyle(0,0x000000,.5);
			holder.graphics.moveTo(point.mix, point.miy);
			holder.graphics.lineTo(point.x, point.y);
		}
	}
 
}
 
function downHandler(e:MouseEvent):void {
	playwithme.visible=playwithme.visible==true ? false : playwithme.visible;
	mouseIsdown=!mouseIsdown;
}
function leaveHandler(e:Event):void {
	removeEventListener(Event.ENTER_FRAME, repulsion);
	stage.addEventListener(MouseEvent.MOUSE_MOVE, inHandler);
}
function inHandler(e:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, inHandler);
	stage.addEventListener(Event.MOUSE_LEAVE, leaveHandler);
	addEventListener(Event.ENTER_FRAME, repulsion);
}

Ya solo quedaba usar esos puntos para alimentar la clase de triangularización en versión AS3, de la que pude encontrar dos versiones en el blog de Sandy 3D, una de by Alex y otra by Carles Sanz, que fue la que usé.

Un clip invisible que sigue al puntero con cierta fricción era lo que faltaba para restarle brusquedad a las reacciones de los puntos.

(Please open the article to see the flash file or player.)

Hay que señalar que el comportamiento no es exactamente igual, el original está mucho más trabajado, detectando el rollover sobre las imágenes para crear un escalón virtual que se salta cuando pasas de una imagen a otra y evitando de ese modo ambiguedades en el comportamiento de los puntos cuando te encuentras cerca de los límites de cada imagen.

Clicka sobre la película para comenzar y usa las teclas de dirección. Para reiniciarlo pulsa tecla arriba o haz click de nuevo.
(Please open the article to see the flash file or player.)

Productora: UVE digital producers
Agencia: MRM
Cliente: Heineken
Promoción: A un click de la final

En este caso he creado una clase utillería, ColorUtils, con métodos estáticos para pasar a blanco y negro (desaturate), así como para eliminar cualquier filtro aplicado y devolver el objeto a su estado original (restore).

//
package utils{
	import flash.display.DisplayObject;
	import flash.filters.ColorMatrixFilter;
 
	public class ColorUtils{
 
		public static function desaturate(target:DisplayObject):void{
			var el_ar:Array = [
			0.3, 0.59, 0.11, 0, 0, //R
			0.3, 0.59, 0.11, 0, 0, //G
			0.3, 0.59, 0.11, 0, 0, //B
			0, 0, 0, 1, 0]; //A
			var cm_filter:ColorMatrixFilter = new ColorMatrixFilter(el_ar);
			target.filters = [cm_filter];
		}
 
		public static function restore(target:DisplayObject):void{
			target.filters = null;
		}
	}
}
//

Para usar estos métodos, es suficiente con llamarlos como hacemos con cualquier método de la clase Math por ejemplo, pasando como parámetro el DisplayObject sobre el que queremos aplicar la transformación de color.

Así, para desaturar un MovieClip llamado item haríamos:

//
import utils.ColorUtils;
ColorUtils.desaturate(item);
//

Y para devolverlo a su estado original haríamos:

//
import utils.ColorUtils;
ColorUtils.restore(item);
//

var elasticidad:Number = .98;
var aceleracion:Number = .01;
var gravedad:Number = .9;
var color:Number = 0x9EA3A3;
var conteLinea:Shape;
var newx:Number=0;
var newy:Number=0;
 
function fDraw():void{
	conteLinea.graphics.clear();
	conteLinea.graphics.lineStyle(0, color);
	conteLinea.graphics.moveTo(pointA.x, pointA.y);
	conteLinea.graphics.curveTo(anchor.x, anchor.y, pointB.x, pointB.y);
}
 
function fInercia(event:Event):void {
	var targetx:Number = ((pointB.x-pointA.x)/2+pointA.x);
	var targety:Number = ((pointB.y-pointA.y)/2+pointA.y);
	newx = newx*elasticidad+(targetx-anchor.x)*aceleracion;
	newy = newy*elasticidad+(targety-anchor.y)*aceleracion+gravedad;
	anchor.x += newx;
	anchor.y += newy;
	fDraw();
	if (Math.abs(newx)<.01 && Math.abs(newy)<.01) {
		anchor.removeEventListener(Event.ENTER_FRAME, fInercia);
	}
 
}
 
function fPress(event:MouseEvent):void {
	stage.addEventListener(MouseEvent.MOUSE_UP,fRelease);
	color = 0xff0179;
	event.target.startDrag();
	anchor.addEventListener(Event.ENTER_FRAME, fInercia);
}
 
function fRelease(event:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_UP,fRelease);
	color = 0x9EA3A3;
	stopDrag();
}
 
function setListeners():void{
	pointA.addEventListener(MouseEvent.MOUSE_DOWN,fPress, false, 0, true);
	pointB.addEventListener(MouseEvent.MOUSE_DOWN,fPress, false, 0, true);
	pointA.addEventListener(MouseEvent.MOUSE_UP,fRelease, false, 0, true);
	pointB.addEventListener(MouseEvent.MOUSE_UP,fRelease, false, 0, true);
	anchor.addEventListener(Event.ENTER_FRAME, fInercia);
}
 
function fInit():void {
	conteLinea=new Shape();
	addChild(conteLinea);
	setListeners();
}
 
fInit();

Descarga los fuentes

En ocasiones nos encontramos con la necesidad de deshabilitar todos los elementos interactivos de nuestra película mientras por ejemplo esperamos una respuesta del servidor. En AS2 esto acostumbraba a hacerlo de una forma un tanto regular, aunque efectiva, consistente en colocar un botón del tamaño del escenario con el useHandCursor a false sobre todos los elementos de la película, para luego retirarlo una vez recibida la respuesta.

En AS3, y gracias al burbujeo de eventos, esto lo podemos solucionar de una forma muchísimo más elegante, con una sola línea y sin necesidad de “tapar” nada:

//
 
stage.mouseChildren = false;
 
//

Una evidencia más de la positiva evolución del lenguaje ;-)

//
stage.mouseChildren = false;
stage.tabEnabled = false;
//

Gracias por el dato!!

Productora: UVE digital producers
Agencia: Momentum
Dirección de arte: Agustín Ocampo
Cliente: Coca-Cola

Hasta ahora para hacer una precarga bastaba con añadir un par de fotogramas en los que situarla al principio de nuestra película. Acostumbrados a tener nuestra línea de tiempo, cuando desarrollamos un site en flex nos encontramos que al no tener línea de tiempo la tarea de elaborar la precarga más simple se convierte en un obstáculo.

Afortunadamente flex tiene unas tags propias (sí, sí, esas que van entre corchetes []), que se ejecutan en el momento de compilar y al igual que nos permiten establecer la velocidad de la película, el color de fondo, etc. también nos permite insertar fotogramas, de forma que podemos añadir esos añorados fotogramas donde situar nuestra precarga :)

Básicamente necesitaremos solo un par de cosas: una clase que maneje nuestra precarga y una de las mencionadas tags en la clase principal que añade un frame previo a la película en el cual se sitúa la clase de precarga.

La línea que debemos añadir en nuestra clase principal, justo depués de los imports, sería algo así:

[Frame(factoryClass="com.uveproducers.utils.Preload")]

La clase de precarga ya la elaboramos a nuestra medida, con la única objeción de que una vez realizada la carga llamemos a un método que coloque la clase principal de nuevo en su sitio:

private function init():void
        {
            var mainClass:Class = Class(getDefinitionByName("Main"));
            if(mainClass)
            {
                var app:Object = new mainClass();
                addChild(app as DisplayObject);
            }
        }

en mi caso, la forma en que lo apliqué en el site de coolShot, fue esta:

package com.uveproducers.utils
{
    import flash.display.DisplayObject;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.utils.getDefinitionByName;
 
   [SWF(backgroundColor="#262116",framerate="31")]
 
   public class Preload extends MovieClip
    {
        private var preloadHolder:Sprite;
        private var holderGraphicBar1:Sprite;
        private var holderGraphicBar2:Sprite;
 
        public function Preload()
        {
            stop();
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.stageFocusRect=false;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            preloadHolder=new Sprite();
            stage.addChild(preloadHolder);
            holderGraphicBar1=new Sprite();
            preloadHolder.addChild(holderGraphicBar1);
            holderGraphicBar2=new Sprite();
            preloadHolder.addChild(holderGraphicBar2);
            holderGraphicBar1.graphics.beginFill(0xE4DFD5,.3);
            holderGraphicBar1.graphics.drawRect(54, 68, 800, 2);
            holderGraphicBar1.graphics.endFill();
        }
 
        private function onEnterFrame(event:Event):void
        {
            holderGraphicBar2.graphics.clear();
            if(framesLoaded == totalFrames)
            {
                removeEventListener(Event.ENTER_FRAME, onEnterFrame);
                nextFrame();
                init();
            }
            else
            {
                var percent:Number = root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal;
                holderGraphicBar2.graphics.beginFill(0xE4DFD5);
                holderGraphicBar2.graphics.drawRect(54, 68, 800 * percent, 2);
                holderGraphicBar2.graphics.endFill();
            }
        }
 
        private function init():void
        {
            var mainClass:Class = Class(getDefinitionByName("Main"));
            if(mainClass)
            {
                var app:Object = new mainClass();
                addChild(app as DisplayObject);
            }
        }
    }
}

Nota: puede ser necesario que la clase principal compruebe que ha sido instanciada en el escenario antes de inicializarse, para lo cual podemos usar el evento ADDED_TO_STAGE

Por un lado la sensación de que estoy haciendo las cosas “reguleras”, porque parece que nadie las hace como yo, y por otro la dependencia de montar toda la parafernalia de flex para editar cualquier trabajo hecho en él.

Comentando con Fede un problema con un tooltip que extendía un símbolo y yo pretendía que fuera un singleton, y la lección de Fede sobre separar la vista (el símbolo) del controlador (el singleton) me di cuenta que eso es precisamente lo que hago en flex.

Lo que pasa no es que haga las cosas de una forma extraña en flex, sino que estoy haciendo algo que no había hecho antes, o al menos no por sistema como exige flex: en flex lo que hago es componer, separando la vista del controlador, mientras que en flash suelo extender directamente el símbolo de la librería.

Mira mamá, ya compongo!!!

XD

A ver si lo puedo explicar más claramente, presentando los dos escenarios: pongamos que tenemos un símbolo linkado como ToolTip en la librería.

En flash solía hacer una clase ToolTip.as que extendía el símbolo, asociándola al símbolo directamente desde el linkage de la librería. Para crear una instancia de un tooltip funcional hacía un new ToolTip() y un addChild() y listo.

En flex, como estamos tirando de símbolos “precompilados” empaquetados como un archivo swc, no se puede hacer esto limpiamente porque implica que la clase se compile con el símbolo desde flash a cada cambio. La solución es usar una clase con la funcionalidad (ToolTip.as es nuestro controlador) que a su vez usa la clase identificadora del símbolo (ToolTipSWC es la vista).

La vista es el símbolo de la librería, que tiene un id o linkage (por ejemplo ‘VistaSWC‘) que se corresponde con el nombre de la clase símbolo que instanciaremos con el controlador.

El controlador es una clase que usa una instancia de la vista (’VistaSWC‘) y que implementa sobre ella toda la funcionalidad.

package
{
	import flash.display.MovieClip;
	public class Controlador extends MovieClip
	{
 
		private var vista:VistaSWC;
 
		public function Controlador():void{
			vista=new VistaSWC();
			addChild(vista);
			Funcionalidad();
		}
		public function Funcionalidad(texto:String):void{
			vista.campo_txt.text=texto;
			vista.fondo_mc.width=vista.campo_txt.TextWidth;
		}
	}
}

De esta forma cuando hacemos:

	var controlador:Controlador=new Controlador();
	this.addChild(controlador);

Estamos creando un controlador que a su vez va a crear la vista que usa. El resultado que tenemos es el mismo pero además tenemos la ventaja de que al separar la vista del controlador, podríamos tener múltiples vistas.

Espera, ¿esto entonces es composición? pero… si eso sencillamente es una forma de programar, se hace exactamente igual en flash…

Esto me hizo ver que si organizas el fla para componer, separando la vista del controlador, ese fla con un poco de cuidado compilaría en flex. Y efectivamente, solo hay que tener en cuenta algunas cosas.

Como generar un proyecto publicable en flash y flex indistintamente

• La clase principal de la aplicación debe ser el document class de flash.
• Las librerías necesarias deben estar en la carpeta del proyecto, haciendo imports como lo haríamos en flash.

  Hay que evitar usar librerías que hayamos creado como tales en flex, ya que no he encontrado la forma de referenciarlas en flash. Lo mismo me pasa con los classpath propios que definamos en flash, que no se como tenerlos disponibles en flex. De cualquier manera, si lo que perseguimos es la portabilidad del proyecto, me parece más interesante que las librerías acompañen al proyecto para asegurarnos.

• Los simbolos de la librería deben ser solo “vista”

  Hay que separar la vista del controlador con composición para editar y compilar correctamente en flex.

• Exportar el swc en flash

  Para importarlo desde flex. En flex el nombre de clase definido en las opciones de vinculación de la librería de flash lo usaremos para acceder al asset (’VistaSWC’) del swc importado y sus propiedades.

• Otros factores a tener en cuenta

  Es necesario definir el background color y el framerate de la película en ambos editores, en flex con código y en flash desde el panel de propiedades.

• Exportar/importar el proyecto

  La forma más eficaz es un zip de toda la carpeta de proyecto. En flash encontraríamos el fla en la carpeta source como assets.fla. En flex importamos el proyecto, seleccionando la carpeta entera.

Descarga un ejemplo de proyecto compilable en flash y flex cualquier sugerencia para mejorar el sistema es bienvenida, y cualquier inconveniente que me comuniquéis lo añado a la lista para tenerlo en cuenta.

Inconvenientes

No se pueden hacer muchos “hacks” de flex del tipo de la precarga que publiqué, que flash no comprende.