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

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

Si tenemos un xml con etiquetas anidadas como esta:

<contenedor>
	<caja>
		<item id="expediente1">
			Contenido del expediente 1
		</item>
	</caja>
	<caja>
		<item id="expediente2">
			Contenido del expediente 2
		</item>
	</caja>
</contenedor>

Y queremos acceder directamente al nodo <item id=”expediente1”> podemos hacerlo con esta línea de E4X:

miXml.descendants().(hasOwnProperty("@id") && @id == "expediente1")[0]

Es fácil de entender, nos devolverá un XMList con todos los nodos que tengan el atributo “id”  y que id==”expediente1”. Y de ese nos quedamos con el primero.

Podemos meterla en una función para que sea más cómoda de usar:

function getElementById(data:XML, id:String):XML{
	return data.descendants().(hasOwnProperty("@id") && @id==id)[0];
}

// Se usaria asi:
getElementById(miXml, "expediente1");

La solución me la ha dado Joseba en la lista de AsNativos.

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

• Descargar XmlUtils.as

Si queremos insertar tabulaciones en un campo de texto o componente textArea de Flash, por defecto nos pasará el foco al siguiente campo de texto o botón.

Para evitar esto me ha dado la solución Ícaro Obregón en la lista de AsNativos, utilizando el método preventDefault() y luego haciendo un apaño para situar el cursor al final del texto, pues si no parecerá que no ha ocurrido nada.

miCampoTexto.addEventListener(FocusEvent.KEY_FOCUS_CHANGE, onTabPressed);

function onTabPressed(e:FocusEvent):void {
	e.preventDefault();
	var tf:TextField = e.target as TextField;
	var index:uint = tf.selectionEndIndex;
	tf.replaceText(index, index, "\t");
	tf.setSelection(index+1, index+1);
}

Esto siempre me lía mucho, así que lo tengo guardadito como oro en paño entre mis snippets. Lo comparto:

// 16711680 es el color rojo en hexadecimal
var colorHex:uint = 16711680;
var colorRGB:String = "0x" + colorHex.toString(16);  // 0xff0000

Y para hacer lo contrario:

// Rojo en RGB
var colorRBG:uint = 0xff0000;
var colorHex:uint = uint(colorRBG);  // 16711680

Atentos al tipado de datos. El color en rgb es de tipo uint, no String. aunque parezca raro.