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

Flash: Imágenes rotativas en AS3

Etiquetas: setTimeout removeChild addEventListener URLRequest Loader

Esta clase, explica paso a paso como hacer en AS3 una carga de imágenes que van rotando cada cierto tiempo. Para ello se almacenan las urls en una matriz y se van cargando los archivos cada cierto tiempo.

Cambiar el color de un MovieClip con Actionscript 3.0

Etiquetas: ColorPicker ColorTransform ColorPickerEvent

La clase ColorTransform permite ajustar el color de los objetos de visualización. Este ejemplo muestra como cambiar el color de un MovieClip utilizando el componente ColorPicker de Flash.

Papervision GreatWhite: Tipos de Shader

Etiquetas: PointLight3D GouraudShader FlatShader CellShader PhongShader ShadedMaterial

Una de las novedades de Papervision GreatWhite son los ShadedMaterial.

Para utilizarlos basta con seguir los siguientes pasos:

Galeria de Flickr con Papervision GreatWhite, V2

Etiquetas: API Flickr Papervision GreatWhite

He "mejorado" la galeria de imágenes en 3D, añadiendo un menú lateral con todos los albums de usuario (en este caso Lola) y permitiendo la carga de las imágenes originales haciendo click en cada cubo.

Ver Galeria