Archivo de la categoría ‘Tutoriales’

Duplicar un proyecto Flex

Publicado por Iván Gajate el 5 de Junio de 2010 en AS3, Flash, Tutoriales | 2 comentarios »

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.

copiar

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:

cambiar-nombreY listo, ya tenemos nuestro proyecto duplicado sin perder ninguna preferencia del proyecto :D

AS3 - Acortar frases

Publicado por Iván Gajate el 17 de Mayo de 2010 en AS3, Flash, Tutoriales | 3 comentarios »

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.

AS3 - xml.getElementsByClass

Publicado por Iván Gajate el 28 de Abril de 2010 en AS3, Flash, Tutoriales | No hay comentarios »

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.

AS3 - xml.getElementsByName

Publicado por Iván Gajate el 15 de Abril de 2010 en AS3, Flash, Tutoriales | 2 comentarios »

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.

Escribir tabulación en un campo de texto

Publicado por Iván Gajate el 18 de Marzo de 2010 en AS3, Eventos, Flash, Tutoriales | 1 comentario »

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, onFocusChange);

function onFocusChange(event:FocusEvent):void {
	event.preventDefault();

	miCampoTexto.appendText("\t");
	miCampoTexto.setSelection(miCampoTexto.length, miCampoTexto.length);
}

Skew MovieClip

Publicado por Iván Gajate el 15 de Agosto de 2009 en AS2, AS3, Flash, Tutoriales | No hay comentarios »

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:

t_single_skew

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;
}

htmlText y CSS

Publicado por Iván Gajate el 6 de Agosto de 2009 en AS2, AS3, Flash, Tutoriales | 6 comentarios »

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

htmltext1

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

Patrón Value Object

Publicado por Iván Gajate el 17 de Mayo de 2009 en AS3, Flash, Patrones de diseño, Tutoriales | No hay comentarios »

Este mini patrón de diseño, consiste simplemente en agrupar varios valores dentro de un objeto para enviarlo y recibirlo con mayor comodidad/seguridad.

Yo casi más que un patrón lo considero una buena costumbre de programación, y es que cuando tengo que pasarle a una función mas de 4 ó 5 parámetros, los meto todos en un objeto y hago que esta función sólo espere ese objeto como único parámetro.

// Sin Value Object
public function guardarDatos(nombre:String, apellidos:String, edad:uint, hombre:Boolean):void{
	//
}

// Con Value Object
public function guardarDatos(datos:Object):void{
	//
}

Esto, aparte de hacer el código más legible, hace nuestro programa escalable, pues si en un futuro queremos añadir un nuevo parámetro a la función, no tengo que cambiar su firma (public function guardarDatos(datos:Object):void), sino que le añado una nueva propiedad al objeto y listo, mi función sigue esperando un sólo parámetro.

Leer el resto de esta entrada

Namespaces en las Propiedades de Vinculación

Publicado por Iván Gajate el 6 de Mayo de 2009 en AS3, Flash, Tutoriales | No hay comentarios »

El otro día me di cuenta, casi por casualidad, de un detalle interesante a la hora de vincular los clips de película de la biblioteca.

Estaba yo con un proyecto que consistía en una home que carga secciones diferentes, y cada una era un proyecto de Flex (Eclipse + Flex, proyecto ActionScript).

Yo tengo la costumbre de crear un clip Escenario donde meto todas las cosas de diseño que apenas requieren de programación: los logos, fondos, animaciones iniciales… y así es mas fácil posicionarlas al pixel. Luego no tengo más que hacer un new Escenario() y ya lo tengo todo colocadito en el pixel exacto.

propiedades-de-vinculacion-1

 

Leer el resto de esta entrada

AS3 - Precargar la película principal

Publicado por Iván Gajate el 14 de Abril de 2009 en AS3, Flash, Tutoriales | 2 comentarios »

Hay varias formas de hacer precargas en AS3, pero la solución más sencilla es precargar nuestra peli principal desde otro swf que haga todo el trabajo sucio.

El método consiste en una peli ligera ‘precargador.swf’ que es la que se embebe en el html, y se le pasa como parámetro la peli que queremos cargar. Cuando se termine la carga, el precargador añade la peli principal al escenario y ésta funciona como si se hubiese cargado directamente en el html.

Así podemos trabajar en nuestra película principal sin preocuparnos de su precarga y sin cambiar nuestra rutina de trabajo, y cuando queramos verla online, tan solo hay que poner el precargador de 8 KB al lado :)
Leer el resto de esta entrada