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

Normalmente hacemos un tween de un MovieClip, cambiando sus propiedades x, y, alpha… pero se puede hacer un tween sobre cualquier propiedad numérica de cualquier objeto, como por ejemplo del objeto Point.

var p1:Point = new Point(0, 0);

TweenLite.to(p1, 1.5, {x:200, y:300});

Con esto, podríamos dibujar un paralelogramo que apareciese con un efecto mas interesante que un simple escalado.

Hacer clic sobre la imagen para refrescar:

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

Calculamos la posición de cada uno de sus vértices, con un efecto de rebote. Mientras se ejecuta redibujamos la figura con la API de dibujo de Flash.

Si ese mismo clip lo usamos para enmascarar una foto, el efecto es mejor:

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

Lo mejor es que si esa foto tiene algún filtro, como una sombra o un iluminado interior, el efecto se va adaptando a la nueva forma de la máscara.

Descargar Ejemplo

Para ordenar facilmente nuestros clips en el eje Z si usamos Flash CS4 o superior, podemos utilizar esta clase muy interesante de Ralph Hauwert

Usarla es super simple, solo hay que llamar a

SimpleZSorter.sortClips()

cada vez que queramos ordenarlos.

Mas explicaciones en el blog de Lee Brimelow

Descargar la clase SimpleZSorter

Via Jose Luís de Coconnut a través de ASNativos

De vuelta del Subflash de este año, dejo aquí unas fotitos y algún comentario del evento.

Este año lo he aprovechado mejor, ya conocía a mas gente de otros años y eso se nota, vas mas ‘a saco’

Cada año lo flipo mas con la organización del evento y la cantidad de regalos que hacen, sale rentable ir!

Camisetas muy guapas, libros super freakys, alojamientos gratuitos por parte de CDmon, suscripciones a Video2Brain, juegos…

Pero vayamos por pasos…

La noche del viernes al calor de unas cervezas, timba hasta muy de madrugada

Jugando al Poker

Jugando con el iPad

Leer el resto de esta entrada

Finde de frikeo

http://www.subflash.com/

Updated: …y ya hemos vuelto…

Ya vimos cómo hacer un preload en AS3 de nuestra película principal. Ahora he cambiado un poco los archivos para que resulte más fácil de utilizar y me quito de encima las cosas que no me gustaban de la anterior precarga, aunque la idea sigue siendo la misma: una peli externa que carga la principal.

Ahora va por eventos, y se gestiona todo desde la peli precarga.fla. Ahí cambias la gráfica de la precarga y lo que quieras que haga durante el progreso y cuando termine.

Ya no hay que meter parámetros propios en el html (a menos que se quiera claro). También recoge los parámetros de la url directamente y se los inyecta a la peli principal como flashvars.

Hay un parámetro que si que puede recibir para evitar la caché del navegador ‘avoidCache’ (por defecto a false).

Descargar ejemplo del Precargador

De los creadores de TweenLite, acaba de salir LoaderMax, un sistema de carga de archivos en cola.

Esta librería es estupenda para cargar todas las imágenes de una galería de imágenes, los sonidos de un player, o todos los xml que queramos a la vez, controlando el progreso de carga y cuándo se termina.

Existen otras alternativas como Bulkloader, pero aumentan el peso considerablemente y no me termina de convencer cómo están programadas.

Aún no he tenido tiempo de probar con detalle el LoaderMax, pero promete una integración sencilla en muy poco peso (10 Kb!)

Aquí un ejemplo básico de cómo se usa:

import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;

// Creo una cola de carga
var queue:LoaderMax = new LoaderMax({name:"mainQueue", maxConnections:1});

// Añado 20 imagenes a la cola
for(var i:uint=1; i<=20; i++){
	queue.append(new ImageLoader("imgs/IMG" + i + ".jpg", {name:"photo"+i, onComplete:imagenCargada}) );
}

// Controlo cuando se termina de cargar cada imagen
function imagenCargada(event:LoaderEvent):void {
    	var image:ContentDisplay = event.target.content;
	image.x = Math.random()*800;
	image.y = Math.random()*600;
	image.scaleX = image.scaleY = Math.random()*0.5;
	addChild(image);
}

// Comienzo la carga
queue.load();

Para descargarlo y ver mas ejemplos, ir a la página del LoaderMax

Hay una forma mucho más sencilla de hacerlo que la que publiqué hace un tiempo, basta con copiar y pegar el proyecto desde dentro de Eclipse (Flex).

Tenemos que tener abierto el proyecto, si no no funciona.

Cuando le demos a pegar, nos preguntará el nombre del proyecto. Es el momento de darle un nombre diferente para que no entre en conflicto con el anterior:

Y listo, ya tenemos nuestro proyecto duplicado sin perder ninguna preferencia del proyecto

Una funcioncilla muy útil si queremos recortar la longitud de una frase a un número máximo de caracteres.

Acorta la frase sin romper las palabras, si una palabra se queda a medias, devuelve la cadena hasta el principio de esa palabra, y añade puntos suspensivos (…) al final.

El típico ejemplo es un destacado de una noticia en el que sólo queremos mostrar las primeras palabras.

public static function shortenString(string:String, maxCharacters:uint, append:String="..."):String {
	if (string.length <= maxCharacters) {
		return string;
	}
	maxCharacters -= append.length;
	// Complete word after blank space
	if (string.substr(maxCharacters, 1) == " ") {
		return string.substr(0, maxCharacters) + append;
	}
	// Incomplete word
	string = string.substr(0, maxCharacters);
	var lastCharacter:Number = string.lastIndexOf(" ");
	string = string.substr(0, lastCharacter) + append;
	return string;
}

Se usaría así:

import es.yporqueno.utils.StringUtils;

var miTexto:String = "Vero eros et accumsan et iusto odio dignissim qui blandit praesent";

trace(shortenString(miTexto, 50));
// Vero eros et accumsan et iusto odio dignissim...

Este tipo de funciones las voy a ir recopilando en una clase StringUtils.

• Descargar StringUtils.as

Y la compañera de getElementsByName y getElementById es esta.

Supongamos que tenemos un xml con varios nodos con la misma definición de clase:

<div>
	<p class="parrafo">
		Esto es un párrafo
	</p>
	<form>
		<input type="checkbox" id="chk0">Leer</input> <br />
		<input type="checkbox" id="chk1">Montar en bici</input> <br />
		<input type="checkbox" id="chk2">Dormir</input> <br />
	</form>
	<p class="parrafo">
		Esto es otro párrafo diferente, pero con la misma clase
	</p>
</div>

Y queremos recuperarlos en forma de XMLList:

function getElementsByClass(data:XML, className:String):XMLList{
	return data.descendants().(hasOwnProperty("@class") && attribute("class")==className);
}

// Se usaria asi:
getElementsByClass(miXml, "parrafo");

Y devolvería esto:

<p class="parrafo">Esto es un párrafo</p>
<p class="parrafo">Esto es otro párrafo diferente, pero con la misma clase</p>

Este tipo de funciones las voy a ir recopilando en una clase XmlUtils.

• Descargar XmlUtils.as

La parejita de getElementById

Muy útil por ejemplo para obtener todos los checkBox de un xml:

<div>
	<form id="aficiones">
		<input type="checkbox" id="chk0" name="c0">Leer</input> <br />
		<input type="checkbox" id="chk1" name="c1">Montar en bici</input> <br />
		<input type="checkbox" id="chk2" name="c2">Dormir</input> <br />
	</form>
</div>

En este caso lo que nos interesa es un listado (XMLList) con todos los nodos del mismo tipo.

function getElementsByName(data:XML, name:String):XMLList{
	return data.descendants(name);
}

// Se usaria asi:
getElementsByName(miXml, "input");

Este tipo de funciones las voy a ir recopilando en una clase XmlUtils.

• Descargar XmlUtils.as