¿Y por qué no? - Programación Flash

Todos conocemos los tweens como el TweenLite por ejemplo, que sirven para animar objetos de forma "suave" en un intervalo de tiempo dado.

Pero si queremos mover un objeto constantemente, los tweens no nos valen, pues no hay un intevalo de tiempo definido. Para hacer esto podemos usar las funciones en las que se basan todos los tweens, las de Robert Penner.

Descargar ejemplo Movimiento Curvo

// mover se ejecuta cada vez que muevo el deslizador
function mover(e:SliderEvent):void{
	// La bola azul sigue un movimiento lineal, su "x" es igual que su "y"
	bolaAzul.x = deslizador.value;
	bolaAzul.y = deslizador.value;

	// Utilizo la ecuacion Circular para el movimiento en el eje "y" de la bolaRoja
	// El valor del deslizador es el valor cambiante de la ecuacion.
	bolaRoja.x = deslizador.value;
	bolaRoja.y = Circular.easeOut(deslizador.value, 0, recorrido, recorrido);
}

En este caso la bola azul sigue un movimiento lineal, su x = y

En cambio la bola roja, sigue un movimiento curvo, donde su y es el valor "transformado" por la ecuación Circular.easeOut

Leer el resto de esta entrada

Recién llegado del Subflash 2009 en Alicante, como el año pasado.

Ya contaré mañana más detalles sobre las charlas, pero ahora quería resumir lo bien que me lo he pasado con todos. Ha sido fantástico encontrarse otra vez con 50 Flasheros/Flexeros/Diseñadores durante dos días compartiendo experiencias.

Además, este año he compartido coche y charla con Javi y Luis de ida y de vuelta y ha sido un viaje súper productivo, casi tanto con las charlas del fin de semana

Hemos avanzado ideas sobre nuestros proyectos, dudas sobre como trabajamos cada uno, inquietudes sobre la situación actual de Flash/ActionScript…

Las ganas de hacer cosas de Luis es admirable, y estamos planteando hacer un Domingo en la Mañana aquí en Madrid.

Aún no hemos concretado fecha ni lugar, pero apoyo totalmente la idea, y visto que diez horas de viaje se nos han quedado cortas, seguro que tema de conversación tenemos para un par de domingos por lo menos

En fin, que una gozada de fin de semana, y con un montón de ideas en la cabeza para investigar…

PD: Aquí un momento de esparcimiento

He re-encontrado este fantástico tutorial en Senócular sobre la clase Matrix. Es de AS2 pero sigue siendo exactamente igual en AS3.

http://www.senocular.com/flash/tutorials/transformmatrix/

Yo siempre me lio cuando quiero sesgar (skew) un clip de película, así que he escrito unas funciones muy simples para hacerlo más fácil:

import flash.geom.Matrix;

function setSkewX(mc:MovieClip, skewx:Number):void{
	var my_matrix = mc.transform.matrix;
	my_matrix.c = skewx;
	mc.transform.matrix = my_matrix;
}

function setSkewY(mc:MovieClip, skewy:Number):void{
	var my_matrix = mc.transform.matrix;
	my_matrix.b = skewy;
	mc.transform.matrix = my_matrix;
}

function getSkewX(mc:MovieClip):Number{
	return mc.transform.matrix.c;
}

function getSkewY(mc:MovieClip):Number{
	return mc.transform.matrix.b;
}

Cada vez le estoy cogiendo mas el gusto a esto de usar un texto con formato html en Flash. Ya vimos como se hacía, y yo no lo usaba demasiado porque había que crear la fuente el la biblioteca, y meter mas líneas de código, pero hoy en el curro me ha ahorrado mucho tiempo y veo que al final no son tantas líneas.

Yo antes para hacer algo como esto

donde sabía que eran cuatro títulos cortos, cada uno con un color, distintos tamaños y cuerpos y ya. Pues no me liaba, metía cuatro campos de texto con cuatro nombres y los seteaba de base de datos.

Pero como ya decía Ale Muñoz en Sofá Naranja, "Cualquier elemento de diseño puede existir cero, una o infinitas veces".

Lo que se traduce en mi diseño en que ya no son cuatro noticias, son infinitas, con un paginado muy mono debajo, unas banderitas a la izquierda de cada título y que si un título es muy largo fluya hacia abajo
Ha llegado el momento de dejarse de vaguerías y hacerlo bien: htmlText y CSS.

Leer el resto de esta entrada

Hoy me han pedido una función para dar formato a un número poniéndole los puntos de millar. Muy útil cuando se quiere poner precios que vienen de base de datos. Aquí va la función:

function puntoDeMillar(num:Number, separador:String=".", separadorDecimal:String=","):String {
	// Separo la parte entera de la decimal
	var entera:String = String(Math.floor(num));
	var decimal:String = "";
	var partes:Array = String(num).split(".");
	if (partes.length > 1) {
		decimal = separadorDecimal + partes[1];
	}
	var cadena:String = "";
	// Calculo el numero de bloques de tres digitos que tengo que hacer
	var bloques:Number = Math.floor(entera.length/3);
	if (bloques<1) {
		return entera;
	}
	// Pongo un separador (.) entre cada bloque
	for (var i = 0; i<bloques; i++) {
		cadena = entera.substr(-3*(i+1), 3)+cadena;
		if (i<bloques-1) {
			cadena = separador+cadena;
		}
	}
	// Pongo los primeros digitos a la izquierda del primer punto
	if (entera.length%3>0) {
		cadena = entera.substr(0, entera.length%3)+separador+cadena;
	}
	return cadena + decimal;
}

Para utilizarla

trace(puntoDeMillar(12345678.12));  // Devuelve 12.345.678,12

Por defecto pone un punto cada tres dígitos empezando por la derecha (respeta los decimales). Se puede pasar un segundo parámetro con el separador de miles que se quiera, y un tercero con el separador de decimales, ambos Strings. Sirve tanto para AS2 como AS3.

Hoy me ha tocado pegarme con los distintos suavizado de un campo de texto, pues tenía una animación que iba a trompicones, y el suavizado para animación me destrozaba la tipo. Normalmente cuando es un texto animado uso el Suavizado para animación y cuando es un texto que no se mueve el Suavizado para Legibilidad y obtengo buenos resultados, pero existe uno en el que puedo modificar los valores de grosor y nitidez de la fuente, el Suavizado Personalizado.

Me he hecho una utilidad para ver los resultados rápidamente, y sobre todo para ver la repercusión en un texto animado.

El Eje X modifica el Grosor, y el eje Y la Nitidez. He ampliado el campo de texto para que se vea mejor el cambio.

Descargar ejemplo Suavizado Personalizado

Si queremos un texto con formato en flash no es tan fácil como podría parecer. Al menos yo siempre tengo que andar buscando cómo lo hice la última vez

Leer el resto de esta entrada

Hay una propiedad de todos los objetos de visualización en Flash que se llama scrollRect y es su rectángulo de visualización, la zona que Flash nos enseña de ese objeto. Normalmente el rectángulo de visualización es de iguales dimensiones que el objeto, es decir, si yo tengo una imagen de 400×400, su rectángulo de visualización es de 400×400 empezando en la esquina superior izquierda de la imagen.

Leer el resto de esta entrada

Ya había hablado antes del TweenLite, una librería para hacer tweens de forma súper sencilla a la que estoy totalmente enganchado. Lo hago todo con ella.

Si se nos queda corta, podemos utilizar el TweenMax, que es exactamente igual, pero con más propiedades. Se basa en el primero, y añade cosas como la posibilidad de hacer tweens sobre filtros, movimientos con curvas Bezier, pausar un tween o hacerle un loop, así como acceder a muchas propiedades internas del tween.

Aquí se pueden ver los tweens con filtros sobre una imagen:

Como se basa en el TweenLite, sólo voy a poner las cosas que tiene diferente a éste:

Leer el resto de esta entrada

Algo que hago muy a menudo es asignar un valor a una variable si estoy trabajando en Flash y otro distinto si estoy en un html porque la web ya está online.

Por ejemplo para evitar la caché cuando cargamos archivos externos. Unas líneas muy útiles:

En AS3:

import flash.system.Capabilities;

var aleat:String ="";

// Si estoy en un navegador (Internet Explorer o FireFox) evito la cache.
if (Capabilities.playerType == "PlugIn" || Capabilities.playerType == "ActiveX") {
	aleat = "?a="+ Math.random();
}

var req:URLRequest = new URLRequest("fotos.swf"+aleat);

En AS2 es muy parecido:

var aleat:String ="";

// Si estoy en un navegador (Internet Explorer o FireFox) evito la cache.
if (System.capabilities.playerType == "PlugIn" || System.capabilities.playerType == "ActiveX") {
	aleat = "?a="+ Math.random();
}

getURL("fotos.swf"+aleat);