Flash Player 10: crear sonidos

Etiquetas: SampleDataEvent SAMPLE_DATA writeFloat

Una de las novedades de Flash CS4 es la posibilidad de generar sonidos dinámicamente. Para ello asignamos un evento de tipo sampleData a una instancia de Sound, y de esta manera este recibe el sonido de la función que hemos asociado al evento. Dentro de la función (a la que el sonido vá pidiendo mas datos periódicamente), vamos escribiendo datos en la propiedad "data" del evento. Estos datos serán los que pide el sonido al hacer buffer. Aquí dejo el código de un ejemplo sencillo, habrá que trastear más.
Por último, recuerdo que para ver este ejemplo hay que tener instalado Flash Play 10. Si no lo tienes, pulsa aquí

Flash: Comparativa entre distintas librerías de Tween

Etiquetas: Tweener

Hace poco encontré este gran post sobre los diferentes motores de Tween que hay en Flash. Incluye dos aplicaciones para probar las distintas librerías y ver el rendimiento en AS2 y AS3. El Tween de Flash sale muy mal parado, y Tweener vá detrás.
El ganador por puntos:TweenLite.

-Comparativa de Tweeners

Programar un botón en Flash Actionscript 3.0 (AS3)

Etiquetas: MouseEvent addEventListener CLICK MOUSE_OVER MOUSE_OUT

En Actionscript 2.0 existía la opción de crear un botón, hacer click encima y escribir código encima del propio objeto. En AS3 no existe la posibilidad de escribir código sobre clips de película ni botones, todo el código debe estar situado en la linea de tiempo o en clases. Esto puede parecer un inconveniente, pero a la hora de hacer desarrollos medianos/complejos hace las cosas mucho más sencillas.

Además programar botones en AS3 no es más complicado que hacerlo en AS2, sólo tenemos que añadir el evento al objeto con addEventListener, indicar que evento añadimos ("Event.CLICK", "Event.MOUSE_DOWN, etc...) y crear la función que se vá a ejecutar cuando se reproduzca el event. Es decir, que traducido al castellano, lo que decimos es:

 

Colorear código con GeSHI

Etiquetas: highlight GeSHI

Ayer dejó de estar disponible la página que utilizaba para colorear el código.Normalmente mi forma de postear códigos era:

-Hacer el ejemplo en Flash

-Meterme en la página de Arul, pegar el código y generar código html+css con mi código actionscript coloreado.

-Almacenar el código html generado en la base de datos, junto al resto de textos del ejemplo, y crear un nuevo post.

Evidentemente esta no era la mejor manera de trabajar, pero cuando empecé con la web estuve mirando varias opciones y esa fué la que me resultó más sencilla. Sin embargo, ayer por la noche fuí a postear y ví la página de Arul caida, asi que me lancé a buscar una nueva solución para colorear el código. Despues de probar varias librerías, me quedé con esta:

-GeSHi - Generic Syntax Highlighter

-Documentación de GeSHI

Es realmente sencilla de utilizar, basta con bajar los ficheros php y subirlos a nuestro servidor para instalarla. Para colorear el código solo hay que crear una instancia de geshi, y pasar como parámetros el texto que queremos colorear y el lenguaje del texto (soporta más de 100 lenguajes: php, actionscript, etc..):

Detectar la inactividad del ratón con Flash Actionscript 3.0

Etiquetas: setTimeout clearTimeout MOUSE_MOVE

La siguiente clase genera un "detector de inactividad" del ratón. Básicamente consta de dos funciones: "ratonMovido", que se ejecuta cuando se mueve el ratón y pone a 0 el tiempo que ha pasado desde la última vez que se movió el ratón, y "ratonParado", que se ejecuta cuando ha pasado un tiempo t sin movimiento del ratón.

Utilizar clases con Actionscript 3.0: Parte II

Etiquetas: package import addEventListener

En este anterior post, mostraba como empezar a trabajar con clases en AS3. En este segundo tutorial, mostraré como podemos enlazar nuestros elementos de la biblioteca con sus clases correspondientes, y como insertar estos objetos en el escenario (haciendo algo "parecido" a lo que se hacía en AS2 con attachMovie.

Lo primero que voy a intentar explicar es como se "suelen" organizar las clases. Normalmente la clase principal (la que se asocia al documento, como vimos en el anterior tutorial) se deja en la misma carpeta que el .fla principal, y el resto de clases secundarias se ordenan en una serie de subcarpetas siguiendo esta estructura:

-Nombre del dominio invertido de la persona o empresa que crea el programa. Por ejemplo en mi caso tengo las clases en com/esedeerre/.. es decir, que siempre creo una carpeta com, que tiene dentro una carpeta esedeerre, que tiene dentro una serie de carpetas con los nombres de los paquetes (ahora veremos lo que es un paquete): "utilidades", "precargas", "sonido", etc...

Esta forma de nombrar las clases, garantiza que los nombres de paquete sean únicos. Por ejemplo si en una aplicación Flash usamos clases de Papervision, de Ape, propias y de Flash, y todas estuvieran nombradas de la misma manera, Flash tendría problemas para buscarlas. Utilizando esta estructura nos aseguramos que nuestras clases no se van "a pegar" con las de otros paquetes de clases.

Ahora que hemos visto como se suelen organizar las clases, vamos a ver como acceder a esas clases que están "escondidas" en carpetas. Si tenemos una clase en com/esedeerre/Bola.as, para acceder a ella tendremos que hacer:

 
import com.esedeerre.Bola
 

Dicho esto, creamos un documento nuevo de Flash(Actionscript 3.0) , y asociamos el escenario a la clase Main. Ahora vamos a crear un círculo, click encima, botón derecho, convertir en símbolo, y dejamos la pantalla como esta:

Lo que estamos haciendo es crear un clip de película con nombre de instancia Bola_mc. Lo asociamos a la clase com.esedeerre.Bola (que vamos a crear después), y le decimos a Flash que lo exporte en el primer fotograma y lo exporte para Actionscript.

Ahora que tenemos el clip de la clase "Bola", vamos a su archivo de clase. Creamos un nuevo Archivo de Actionscript y lo guardamos en una carpeta llamada esedeerre, que esté dentro de una carpera com, con el nombre de Bola.as.

En este archivo escribimos:

 
package com.esedeerre{
	import flash.display.MovieClip;
	public class Bola extends MovieClip {
		import flash.events.*;
		public function Bola():void {
			addEventListener(Event.ENTER_FRAME,mover);
		}
		private function mover(e:Event) {
			x+=5;
			if (x > 300) {
				x = 0;
			}
		}
	}
}
 

Lo que estamos haciendo es crear una clase Bola, que hereda de MovieClip. En la primera linea ponemos

package com.esedeerre{

porque hemos guardado el archivo Bola.as en com/esedeerre/. Si lo hubieramos guardado en la misma carpera que el fla, sólo tendríamos que poner package. Es decir. que le estamos indicando a Flash la ruta hasta el archivo Bola.as. El resto de lineas siguen la estructura que ya vimos en el primer tutorial. En este caso en la función constructora

 
public function Bola():void {
 

hemos añadido un evento enterframe para el objeto, asociado a la función mover. Esta función mueve 5 px hacia la derecha el objeto, y cuando llega a x=300 lo vuelve a colocar en 0.

Ahora que tenemos la clase Bola, vamos a crear la clase Main. Creamos un nuevo archivo de Actionscript, y escribimos:

 
package {
 
	import flash.display.MovieClip;
 
	public class Main extends MovieClip {
 
		import flash.text.TextField;
		import com.esedeerre.Bola;
 
		public function Main():void {
 
			var bola:Bola = new Bola();
			addChild(bola);
 
		}
	}
}
 

Como vemos, hemos tenido que importar la clase Bola para poder utilizarla. En la función constructora Main, creamos una nueva Bola y la añadimos al escenario:

 
var bola:Bola = new Bola();
addChild(bola);
 

Guardamos los dos archivos .as, publicamos el fla, y deberiamos nuestra bola moviéndose de izquierda a derecha.

Utilizar clases con Actionscript 3.0: Parte I

Etiquetas: class import extends MovieClip TextField

Ha pasado año y medio desde que salió Flash CS3 con el "nuevo" Actionscript 3.0, el 1 de Noviembre sale CS4 con algunas nuevas clases del lenguaje, y todavía muchos diseñadores (y algunos desarrolladores) se muestran reacios a dar el salto a AS3.

Personalmente creo que ese "miedo" al AS3 se perdería con un par de charlas sobre el lenguaje, y dando pistas sobre como se hacen los "basicos" (programar un botón, una carga externa, etc). Luego ya es cuestión de trastear y ver como un poco de organización en los desarrollos (que antes era "optativa", pero ahora está casi impuesta) puede ahorrarnos horas de correcciones y muchos quebraderos de cabeza.

Este tutorial va a ser el primero de una serie en la que intentaré explicar como se hacen los "básicos" en AS3.

En Actionscript 3.0 no podemos programar "encima de los objetos" como hacíamos en Actionscript 2.0. Es decir, que ya no existe eso de crear un botón y poner encima:

 
on(release){  
	trace("Me has pulsado");    
}
 

Ahora tenemos que crear el botón, ponerle un nombre en el panel de propiedades, y añadirle los eventos desde la linea de tiempo o desde un fichero .as externo.
La opción recomendada es trabajar con clases, asi que en este tutorial muestro como asociar un documento .fla con una clase principal.
Lo primero es crear un archivo Flash (Actionscript 3.0). Ahora tenemos que asociar el documento a la clase que haremos luego. En este caso la he llamado "Main". Este nombre tenemos que ponerlo en el campo "Clase de documento" del panel de propiedades:

Después creamos un campo de texto en el escenario y le ponemos el nombre "Texto_txt". Es este ejemplo vamos a hacer que desde la clase Main se ponga un texto en ese campo. Una vez que tenemos el fla preparado, lo guardamos en una carpeta.

Ahora vamos a crear la clase Main. Creamos un Archivo de Actionscript, y lo guardamos con el nombre "Main.as" en la misma carpeta que el fla. Es importante saber que le nombre del archivo tiene que ser el mismo que el nombre de la clase. En el fichero tenemos que escribir este código:

 
package {
 
	import flash.display.MovieClip;
 
	public class Main extends MovieClip {
 
		import flash.text.TextField;
 
		public function Main():void {
 
			Texto_txt.text = "Texto con clase";
 
		}
	}
}
 

La palabra package es la que abre siempre los documentos de clase. Puede ir seguido de la ruta hasta el archivo, pero eso ya lo veremos otro día. En la segunda linea vemos un import de la clase MovieClip. La clase asociada al stage, hereda las propiedades de la clase MovieClip, por lo que tenemos que importar esta clase antes de usarla en la tercera linea:

 
  public class Main extends MovieClip {
 

En esta linea estamos diciendo que vamos a crear la clase Main (que es el nombre que hemos puesto al archivo y en el panel de propiedades) , y que para esta clase vamos a utilizar como base la clase MovieClip. La siguiente linea:

 
import flash.text.TextField;
 

importa la clase TextField. En este ejemplo vamos a utilizar un campo de texto, por lo que antes de usarlo debemos "explicarle" a flash qué es un campo de texto importando la clase correspondiente (que es lo mismo que hacemos en la segunda linea con el MovieClip).

La siguiente linea

 
public function Main():void {
 

es la que crea la llamada función constructora de la clase. Esta función tiene que existir siempre, y tener el mismo nombre que la clase. La función constructora se ejecuta siempre que creamos un nuevo objeto de esa clase. Puede recibir parámetros, pero eso ya lo veremos más adelante. La última linea no tiene misterio, le decimos que ponga un texto en el campo que habíamos creado.

En resumen, hemos creado una clase asociada al escenario, que tiene que extender la clase MovieClip. Además la clase, la función constructora, y el archivo .as tienen que llamarse igual.

Ahora sólo falta publicar el fla para ver el campo con el texto.

Para cualquier duda podéis utilizar el formulario de contacto.

Imágenes ASCII con la clase asciify para Actionscript 3.0

Etiquetas: asciify TextFormat

Pierluigi Pesenti, autor del blog Oaxoa ha hecho una clase en Actionscript 3.0 para crear gráficos ascii a partir de clips de película. Se puede ver la documentación de la clase y descargar el .as de aquí.

Cargar GIFs animados en Flash con GIFPlayer

Etiquetas: byteArray GIFPlayer

Desde Actionscript se pueden cargar imágenes jpg, png o gif, pero en el caso de los gif, el player solo muestra el primer fotograma de la animación. Con la llegada de Actionscript 3.0 y la clase byteArray, se pueden abrir ficheros .gif y reconocer los distintos fotogramas para mostrarlos en el player. Esto es lo que han hecho los autores de byteArray.org con la clase as3gif. Aquí va un ejemplo de utilización y el resultado:

Flash: Transiciones con Tweener

Tweener es una librería para hacer transiciones en Flash (AS2 y AS3), que complementa a la clase Tween de Actionscript. Particularmente, Tween me dió siempre muchos problemas, sobre todo en la detección del final de las transiciones, y esto es algo que no pasa con Tweener. Más información en los siguientes enlaces:

-Página oficial de Tweener

-Documentación online de Tweener