En Actionscript 3.0 disponemos de dos operadores para verificar tipos: "as" e "is". Es decir, con estos operadores podemos comprobar, por ejemplo, si un elemento del escenario es de tipo Sprite, o si una variable es de tipo Number.

Para ver como funcionan estos dos operadores voy a utilizar un escenario sobre el que tengo 3 MovieClips de la clase "Cuadrado", que extiende de MovieClip, y 3 MovieClips de la clase "Circulo", que también extiende de MovieClip.

El operador is

Permite comprobar si una variable o expresión forma parte de un tipo de datos. No solo verifica si un objeto es una instancia de la clase especificada, sino también si es una subclase de ella o implementa la misma interfaz.

Por ejemplo, si en el escenario que hemos propuesto ponemos:

Obtenemos:

Como vemos, "parpadean" círculos y cuadrados, ya que todos son instancias de clases que heredan de DisplayObject. Sin embargo, si ponemos:

vemos que solamente parpadean los cuadrados, ya que los circulos no pertenecen a la misma clase ni heredan de "Cuadrado".

El operador as

También permite comprobar si un elemento es miembro de un tipo de datos. Sin embargo, en lugar de devolver true o false, devuelve el valor de la expresión en lugar de true, y null en lugar de false. Por ejemplo:

Uno de los primeros post que escribí, fue "Carga de imágenes y SWF en AS3 con Loader" . Básicamente era una explicación de los diferentes eventos disponibles para trabajar con Loader, y de como añadirlos al objeto. Esta es una explicación más "sencilla" de como cargar una imagen, o un SWF en Actionscript.

Lo primero que tenemos que hacer es crear un objeto tipo Loader. Los Loader son los encargados de cargar imágenes (JPG, PNG o GIF) y SWFs en Flash. Esto lo hacemos así:

Ahora que tenemos un "cargador", hay que pedirle que informe de los eventos de la carga. Hay muchos eventos, pero los principales son tres:

-Error al cargar la imagen (no se encuentra el archivo)

-Progreso de la imagen (nos informa del progreso de la carga)

-Imagen cargada (la imagen ya se ha cargado y podemos trabajar con ella).

Para que el Loader nos informe de estos eventos, tenemos que asociar cada uno a una función. Es decir, debemos decirle: "si la carga falla, ejecuta esta función, y si se carga, ejecuta esta". Esta charla, traducida a Actionscript 3.0 es:

Lo que hemos hecho es "añadir listener de los eventos". Como se puede ver, cada evento vá asociado a una función. El evento Event.COMPLETE, por ejemplo, está asociado a la función "imagenCargada". Estas funciones suelen tener esta apariencia:

Como se puede ver, cada función recibe un parámetro (al que hemos llamado "e", en este caso) que no servirá para obtener información del evento. Por ejemplo, cuando pongamos a cargar la foto, se comenzará a ejecutar periódicamente la función imagenProgreso hasta que termine la carga. Cada vez que Flash ejecute esa función, pasará como parámetro un "e distinto", que contendrá información sobre el progreso de carga en los atributos bytesLoaded y bytesTotal del evento.

Una vez que tenemos añadidos los eventos, tenemos que cargar la imagen mediante la función load:

Y listo. El loader que hemos creado se encargará de ejecutar las funciones asignadas a los eventos que le hemos asociado. El evento más importante es Event.COMPLETE, que ejecuta la función imagenCargada cuando el archivo termina de cargarse. Podemos acceder al archivo dentro del parámetro e.target.content den evento.

El código completo, sería el siguiente:

Existen dos maneras de crear una plano con dos caras en Papervision3D:

-Crear un cubo con una profundidad de 1pixel, y utilizar las caras delantera y trasera como caras del plano.

-Crear un contenedor DisplayObject3D, y meter dentro dos planos. El plano "b" debe tener una profundidad de 1 y una rotatión de -180º.

El segundo método es el que me parece más cómodo, ya que gestionar los materiales con un cubo es más engorroso que con un plano. Un ejemplo de plano con dos caras podrías ser:

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera más sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programación. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

-Imagen de cristal sin vaho:

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir serían los siguientes:

-Importar las dos imágenes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posición (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aquí tenemos un pequeño "problema", y es que al estar vacio, no nos va a aplicar bien la máscara. Por ello, antes de ponerlo como máscara, nos metemos dentro de "Mascara_mc" y dibujamos un pequeño cuadrado.

La linea de tiempo nos quedaría asi:

-Por último, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El código en Actionscript 3.0, y el resultado, son los siguientes:

Uno de los ejercicios típicos que se suelen hacer al comenzar a programar en Actionscript, es una pizarra.

En Actionscript 3.0 tenenmos que utilizar la clase Graphics. Podemos pintar dentro de cualquier objeto de visualización que tenga el atributo graphics (Shape, Sprite, MovieClip).

Lo primero que tenemos que hacer es definir el estilo de linea (color,grosor, etc) que vamos a utilizar en nuestro objeto. En este ejemplo vamos a dibujar en un Shape definido por la variable pizarra, por lo que podemos definir su estilo de linea asi:

Ahora tenemos el pincel en (0,0), con un grosor de 10 y color negro. Si queremos pintar una linea desde (100,100) hasta (200,200), tenemos que mover el pincel hasta (100,100). Para ello usamos la función moveTo(x,y);

Y ahora dibujamos la linea con lineTo:

Por último, si queremos borrar lo dibujado, utilizamos la función clear():

Hay que tener en cuenta que esta función borra además las definiciones de estilo de linea y relleno, por lo que antes de seguir dibujando debemos volver a hacerlas.

Para utilizar eventos de ratón sobre objetos en Papervision GreatWhite, tenemos que hacer tres cosas:

-Crear un objeto Viewport3D con el atributo interactive = true
/
-Crear un objeto y poner el atributo interactive de su material = true

-Añadir los eventos al objeto

El código comentado, tras el salto.

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:

 

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:

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:

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

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:

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:

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

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.

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.

Hace tiempo que está disponible la versión 2.0a de Papervision, bajo el nombre de Greatwhite. Hay algunos cambios respecto a la versión anterior, y ya han empezado a surgir tutoriales donde se explica como utilizar las nuevas clases y como se recomienda dividir los bloques de código. Esta es una plantilla básica de Papervision 2.0. En este caso creo un cubo y creo sobre él un efecto de "fluidez". Para que funcione hay que tener descargadas las clases de Papervision 2.0a, y haber indicado a Flash donde están guardadas.

Puedes verlo a pantalla completa aquí

El siguiente código controla los eventos de teclado "pulsar" (onKeyDown) y "soltar" (onKeyUp), devolviendo el código de la tecla con la que se ha interactuado.

Cuando empecé a aprender Flash, lo que más me llamaba la atención eran los experimentos de páginas como uncontrol. Con el tiempo he ido viendo que algunos de esos experimentos no son tan complicados como me parecían, sino que son una mezcla de imaginación y matemáticas. Este es el código para simular el movimiento de una cuerda oscilando, utilizando la función curveTo y un poco de matemáticas.

Este ejemplo muestra como crear un cubo con 6 tipos diferentes de materiales en Papervision (AS3). He utilizado los más básicos, en la wiki de Papervision se puede encontrar un listado completo con los materiales disponibles.

El código de este ejemplo sirve para cargar una imagen (jpg, gif o png) o swf controlando el proceso de carga. Para cargar otro tipo de archivos (por ejemplo XML o texto), hay que utilizar URLLoader.

Esta es una forma de indicar que valores queremos que tengan los parámetros de una función asociada a un addEventListener dentro del mismo addEventListener.