Archive for the ‘ AS3 ’ Category

Un sonido luego de otro

El año pasado hice un trabajo donde se necesitaba que se reproducieran unas imágenes y al mismo tiempo se escuchara una voz en voz describiendo la imagen.
El tema que eran varia galerías que eran cambiadas dinámicamente por lo que se requería que ésta pseudo película se generara en tiempo de ejecución.
El tema estaba en precargar todas las imágenes y todas los sonidos para que no haya pausas entre imagen e imagen.
Precargar la imágenes es relativamente facil ya que podes cargarlas usando un loadClip ya que son guardadas automáticamente en el caché.
El tema son los sonidos, como asegurarse que los sonidos son precargados de forma que no haya pausas. Hay un par de formas de hacerlo la que me resultó más práctica a mi fue:

La forma normal sería, manual y estática sería:

import flash.media.Sound;
import flash.media.SoundChannel;
 
var mySoundOne:Sound = new SoundOne();
var mySoundTwo:Sound = new SoundTwo();
var mySoundThree:Sound = new SoundThree();
 
var mySoundChannel:SoundChannel = mySoundOne.play();
mySoundChannel.addEventListener(Event.SOUND_COMPLETE, sound_1_Complete);
 
var mySoundChannel2:SoundChannel;
var mySoundChannel3:SoundChannel;
 
function sound_1_Complete(event:Event):void {
    trace("one complete");
    mySoundChannel2 = mySoundTwo.play();
    mySoundChannel2.addEventListener(Event.SOUND_COMPLETE, sound_2_Complete);
}
 
function sound_2_Complete(event:Event):void {
    trace("two complete");
    mySoundChannel3 = mySoundThree.play();
    mySoundChannel3.addEventListener(Event.SOUND_COMPLETE, sound_3_Complete);
}
 
function sound_3_Complete(event:Event):void {
    trace("three complete");
}

Hasta acá todo fácil, lo que fue una novedad para mi es que es posible meter objetos dentro de arrays, por lo que cree un array con sonidos (objetos) adentro y fui cargando un sonido después del otro, de forma que era automatizado, dinámico y que podía ser cambiado en tiempo de ejecución sin problemas.

var sounds:Array = [new SoundOne(), new SoundTwo(), new SoundThree()];
 
var channels:Array;
 
channels[0] = Sound(sounds[0]).play();
 
SoundChannel(channel[0]).addEventListener(Event.SOUND_COMPLETE, playNext);
 
function playNext(e:Event):void
 
{
 
var index:Number = channels.indexOf(e.currentTarget);
 
trace("played sound " + (index + 1));
 
if(index < sounds.lenth - 1)
 
{
 
index++;
 
channels[index] = Sound(sounds[index]).play();
 
SoundChannel(channels[index]).addEventListener(Event.SOUND_COMPLETE, playNext);
 
}
 
}
sounds.push(new SoundFour()); // sólo habría que asegurarse de llamar a esto antes que el sonido cuatro termine de reproducirse

Animando huesos con AS3 (bones y actionscript 3)

Éste tutorial es para dar una idea básica de lo que se puede hacer con los huesos y la cinemática inversa. Lo interesante es poder mover éstos huesos por código y así reaccionar en runtime de acuerdo a posición del mouse, ingreso del teclado o como abarca éste tutorial a la música.
Ejemplo final:

Esto requiero Flash player 9

Lo primero es elegir un objeto que querramos animar, en mi caso la mascota de Homestar Runner, que lo peuden bajar de brandsoftheworld. Luego tenemos que convertir en movieclips cada sección de nuestro objeto, por ejemplo: la cabeza, el tronco, la pierna derecha, la pierna izquierda.
Luego elegimos la herramienta “bones” (x) y empezamos a unir nuestros objetos.

Luego seleccionamos el frame que contiene nuestros moviclips unidos por los huesos que creamos y veremos que en el panel propiedades aparece el nombre del esqueleto que acabamos de crear. Ahí podemos darle un nuevo nombre a todo nuestro esqueleto, yo voy a utilizar el que me tocó por defecto.

Es importante que seleccionar el frame y no el moviclip ya que si seleccionamos un moviclip accedemos a las propiedades del hueso en sí pero no del esqueleto completo.

También es importante cambiar y el Type de authotime a runtime, lo que hace que los huesos se van a animen en tiempo de ejecución en vez de ser animados con tween o cuadro por cuadro dentro de Flash. Luego de tener el nombre del esqueleto si pasamos a seleccionar los huesos que queremos mover y le damos nombres, también en ésta parte podemos ajustar los ángulos que vamos a permitir que se mueva y varias otras propiedades, yo no cambié nada pero los resultados pueden variar.

Por último la parte del código.
Básicamente lo que tenemos que hacer es registrar el esqueleto y luego ligar a éste esqueleto los huesos que a su vez tienen dos puntos por lo cual tenemos que decir cual de dichos puntos queremos mover y lo podemos hacer en cualquier eje: x,y o z. El registro del esqueleto se hace una vez, y luego tenemos decidir cuantos huesos se van a mover.
En este caso lo que voy a hacer es cargar un sonido, analizar su espectro y mover el pie izquierdo con lo que haya en el canal izquierdo de la música y luego lo mismo con el derecho.

var tree:IKArmature = IKManager.getArmatureByName("Armature_5");
var right_leg:IKBone = tree.getBoneByName("ikBoneName9");
var left_leg:IKBone = tree.getBoneByName("ikBoneName10");
var cabeza:IKBone = tree.getBoneByName("ikNode_6");
 
// tailJoint mueve e punto del hueso, si queremos mover la cabeza del hueso debemos usar headJoint
 
//para la pierna derecha
var rtJ:IKJoint = right_leg.tailJoint;
var rposT: Point=rtJ.position;
var rikMover:IKMover = new IKMover(rtJ, rposT);
 
//para la pierna izquiera
var ltJ:IKJoint = left_leg.tailJoint;
var lposT: Point=ltJ.position;
var likMover:IKMover = new IKMover(ltJ,lposT);
 
// cargo un sonido para analizar su espectro y mover los huesos según éste.
var s:Sound = new Sound();
s.load(new URLRequest("http://digilabs.com.ar/wp-content/uploads/2010/06/loop.mp3"));
var sc:SoundChannel;
sc = s.play(0, 1000);
 
this.addEventListener(Event.ENTER_FRAME, aMoverLosHuesos);
 
function aMoverLosHuesos(eventArgs:Event)
{
	rposT.x=110+(sc.rightPeak* - 20); //110 es donde esta el punto en reposo
        //y 20 son la cantidad de pixeles que quiero que se mueva que es multiplicado por algo entre 0 y 1.
	lposT.x=50+(sc.leftPeak* + 30);
	rikMover.moveTo(rposT);
	likMover.moveTo(lposT);
}

Lo único que le agregué a mi ejemplo final fue un botón de start/stop para no volver loco a los que visiten digilabs
Como ejercicio estaría bueno agregar un hueso desde el cuello a la punta de la cabeza ya animar la cabeza también. Para ésto hace falta agregar un movieclip transparente en la punta de la cabeza de lo contrario no sería imposible “tirar un nuevo hueso”. Otra cosa seria analizar bien el espectro del sonido cargado y usar los bajos para mover ciertas partes y los altos para otras.

Libreria para carga de archivos externos en flash.

me encantan la librerías de cualquier lenguaje sobre todo las de Flash. Tweenlite es mi librería por defecto que utilizo en el 90 por ciento de mis proyectos. Esta semana empecé a usar una nueva librería que tiene mas utilidades y no se especializa en animaciones si no que se utiliza para hacer la carga de archivos externos. Lo que más me gustó de esta librería es que permite hacer optimizaciones de memoria en cualquier momento, cosa que nos podría ser útil en caso de estar desarrollando alguna aplicación para dispositivos móviles donde la memoria es acotada. Otra ventaja es que viene en dos gustos para los clásicos AS2 y para aquellos más atrevidos AS3.

Más información en:

http://as3.casalib.org/releases/1.2.1/docs/

más formulas útiles.

Siguiendo con formulas útiles de mi post anterior y estudiando un poco algoritmos Euclidianos, cree un par de funciones para saber cual es la relación de aspecto de una imagen.

function getMCD(w:int, h:int):int{ 
return ((h != 0) ? arguments.callee(h, w % h): w); 
}
 
function getAspectRatio(w:uint, h:uint):String{ 
var mcd:Number = getMCD(w, h);
return [(w / mcd), (h / mcd)].join(":"); 
}

y estos son algunos testeos:

trace (getAspectRatio(320, 240)); // 4:3 
trace (getAspectRatio(540, 480)); // 9:8 
trace (getAspectRatio(550, 400)); // 11:8

validar email en AS3

He utilizado esta misma función en php, generalmente a mis formularios los valido desde el servidor mediante php, pero el que quiera ahorrarse un paso con AS3 puede hacer lo mismo

 Function emailValido(email:String):Boolean{
 
 
 
	var emailExpression:RegExp = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;
 
 
 
	return emailExpression.test(email);
}

Y estos serían algunos resultados:

@hotmail.com: false
pepe@hotmail.: false
paco@hotmail.hola.com: true
www.hotmail.com: false
paco@hola@hotmail.com: false
carmen@hotmail.com: true

Soma v2 AS3 MVC Framework

No se realmente si lo voy a utilizar en algún momento, pero es realmente increíble el trabajo que realizo esta persona. se trata de un framework que te permite armar sitio en AS3 fácilmente. Tiene como ventaja que tiene automatizado procesos comunes tales como: carga externa, estructurado de paginas, deep linking, etc. Está construido en AIR-Java y se vale de CSS y xml para darle estilo.
Hay un par de videos de como empezar y muestra que se puede lograr en 5 minutos.

http://www.soundstep.com/somaprotest/www/

Rayos y centellas Flashman!!!

lightning_test5La mejor clase que para rayos,electricidad,etc que he visto. Posee muchos parámetros que te deja manipularla fácilmente. definitivamente algo para mantener en la biblioteca de recursos. En el link hay varios ejemplos de distintos usos.

http://blog.oaxoa.com/2009/07/27/actionscript-3-as3-lightning-thunderbolt-electric-discharge-class/

emitter

Otro componente mas que permite emitir partículas en Flash usando AS3. la ventaja de éste es que tiene un panel que permite setear todo sin escribir ni una sola linea de código.

http://code.google.com/p/emitter/

Haciendo cosas difíciles más fáciles.

Hay mucha gente capaz en la comunidad desarrolladora de Flash, y los evangelistas de Adobe no son la excepción. De la mano de Ted Parick vienen estas tres clases para falicitar la carga de datos externos.
Las tres clases en cuestión son:

f.net.Load – Carga texto y tiene una llamada aun metodo y una llamada callback (que es una función que se ejecuta cuando es cargado).
f.net.Message – Simple callback para mensajes.
f.data.ObjectStore – Esta clase es para guardar objetos en una base de datos por ejemplo.

Mas datos en :

http://onflash.org/ted/2009/08/fdot-making-hard-things-easier.php

Crear una explosión de pixeles con ActionScript 3.0

previewTutorial en inglés de como crear un efecto de explosión utilización la clase bitmapData y TweenMax. Tambien se puede bajar el archivo ya terminado para utilizarlo. Y la clase TweenMax le dá mucha versatilidad para controlar la animación de los pixeles (rebobinar,etc)

http://flash.tutsplus.com/tutorials/effects/create-your-own-pixel-explosion-effect/