Hola mundo en Away3d 2.2

Etiquetas: View3D Sphere render WireColorMaterial

Esta mañana me he bajado la librería Away3D, un motor de 3D para Actionscript 3.0. Por lo que he visto, la sintaxis es muy parecida a Papervision, y parece incluso más sencillo de utilizar.

Además, por las pruebas que he hecho con el suavizado, parece que el rendimiento es bastante superior (en PPV suavizar un material "mediano", provoca unos bajones de rendimiento enormes).

Para crear una escena de Away3D, tenemos que seguir los siguientes pasos:

-Crear una instancia de View3D y añadirla al escenario:

 
visor = new View3D({x:200,y:200})
addChild(visor);
 

-Crear los objetos que necesitemos, y añadirlos a la escena de la instancia View3D que hemos creado:

 
esfera = new Sphere({material:new WireColorMaterial(0x00cc00)})
visor.scene.addChild(esfera);
 

Galeria esférica en Actionscript 3.0 y Papervision GreatWhite (V2)

Esta es la segunda versión de la galeria esférica. Para mi gusto queda mejor. De todas formas, estoy trabajando es una tercera versión, con suavizado y sombras, que todavia no está terminada. De momento estas son las especificaciones de esta:

ESPECIFICACIONES

Lenguaje: Actionscript 3.0 y XML

Compatibilidad: Flash Player 9 o superior

Imágenes: Para esta demo he conectado la galería con la cuenta de Flickr de Lola

Peso: 68KB

Seguir el puntero del ratón en Actionscript 3.0

Etiquetas: MouseEvent MOUSE_MOVE Point localToGlobal mouseX mouseY

Este tutorial es muy sencillo, pero cuando empecé a aprender flash hace 5 o 6 años, estaban "de moda" los tutoriales de este tipo.

Se solía hacer para que una serie de letras siguieran al puntero, con diferentes movimientos y tipos de easing. Para crear un elemento que siga al puntero, sólo hay que seguir los siguientes pasos:

1/ Creamos el Símbolo (en este caso una mosca) y lo linkamos a una clase (en este caso "Seguidor")

2/En la clase Seguidor, añadimos un evento que detecte el movimiento del ratón:

 
stage.addEventListener(MouseEvent.MOUSE_MOVE,mover);
 

3/En la función mover, recogemos las coordenadas del ratón (que son las locales del objeto) y las convertimos en globales:

 
var punto:Point = localToGlobal(new Point(mouseX,mouseY));
 

4/Colocamos el objeto en el nuevo punto:

 
x = punto.x;
y = punto.y;
 

Función para comprobar la edad (Actionscript 2.0 y 3.0)

Etiquetas: Date getMonth getDate getFullYear

Esta función sirve para comprobar si la diferencia en años entre dos fechas, es mayor o igual que cierto número, pasado como parámetro.
Sirve para AS2 y AS3.

Por ejemplo, si tenemos que comprobar en un formulario si alguien tiene más de 18 años, tendremos que hacer lo siguiente:

 
 //Creo un objeto Date con los datos del formulario
var nacimiento:Date = new Date(1920, 6, 10);
//Creo un objeto Date con los datos de hoy
var hoy:Date = new Date();
//Llamo a la funcion, pasando como parametro la edad (18) que quiero comparar y 
//las dos fechas
trace(comprobarMayor(18,nacimiento,hoy));
 

La función comprobarMayor, consta de 3 lineas:

-En la primera, comprobamos si este año ya ha pasado la fecha metida en el formulario

-En la segunda, calculamos el número de años, que depende de si en el año en curso ha pasado la fecha o no.

-La tercera devuelve true si la persona tiene igual o mayor edad de la pasada como parámetro, y false si es menor.

La función es esta:

Como hacer una pizarra en Actionscript 3.0

Etiquetas: Shape lineStyle moveTo clear removeEventListener doubleClickEnabled

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:

pizarra.graphics.lineStyle(10,0x000000);

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

pizarra.graphics.moveTo(100,100);

Y ahora dibujamos la linea con lineTo:

pizarra.graphics.lineTo(200,200);

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

pizarra.graphics.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.

Añadidos comentarios

Acabo de subir una versión "con comentarios" de la web. Tengo que testear algunas cosas y probar diseños, pero parece que la cosa funciona. Como siempre, se agradecen los comentarios.

Diferencias entre MovieClip, Sprite y Shape

Etiquetas: Sprite Shape MovieClip

En Actionscript 3.0 tenemos la posibilidad de trabajar con varios tipos de display objects. Esto es un intento de explicar cuales son las diferencias entre ellos y para qué se pueden utilizar:

-MovieClip: La clase MovieClip hereda de la clase Sprite. Es decir: todos los atributos y métodos de Sprite, los tiene MovieClip. Además los MovieClips incluyen linea de tiempo, y las propiedades y métodos asociados. Por ejemplo MovieClip incluye los métodos play(), stop(), gotoAndPlay(), nextFrame(), etc... y las propiedades currentFrame, currentLabel, scenes, totalFrames, etc...

-Sprite: como un MovieClip pero sin linea de tiempo. Es decir, un Sprite puede utilizarse como contenedor de objetos, almacenar variables, y recibir eventos. Lo único que no se puede hacer es manipular su linea de tiempo, ya que no tiene.

-Shape: como un Sprite pero sin interactividad de ratón ni teclado. Tampoco pueden contener objetos de visualización secundarios. Se suelen utilizar para dibujar dentro de ellos, ya que poseen el atributo graphics.

Utilizar el Micrófono en Actionscript 3.0

Etiquetas: Microphone Security getMicrophone showSettings setLoopBack

Ejemplo de interacción con el micrófono en AS3. Para que funcione el ejemplo es importante permitir a Flash el acceso al micro en el cuadro de seguridad, y elegir el micro correcto en el combo correspondiente.

Materiales interactivos en Papervision GreatWhite, parte II

Etiquetas: Viewport3D BasicRenderEngine interactive animated MovieAssetMaterial

En Papervision greatWhite podemos añadir eventos a los elementos 3D .

Otra opción es crear los elementos 3D a partir de MovieClips interactivos que tienen asociados eventos. Por ejemplo, tenemos un MovieClip con tres botones dentro, y creamos una esfera con ese MovieClip como material. Para que se respeten los eventos de ese clip al convertirlo en material3D, debemos configurar los siguientes parámetros:

-al crear la instancia de Viewport3D debemos especificar que es interactivo:

 
//los parametros son: (ancho,alto,autoEscalar,interactivo) 
viewport = new Viewport3D(400,400,false,true);
 

-al crear el material debemos especificar que es interactivo y animado:

//los parametros son: (ID de linkage,transparente,animado)
var material:MovieAssetMaterial = new MovieAssetMaterial("MenuPPV",true,true);
material.interactive = true;

Tras el salto, el código completo y la demo.

Galería circular de imágenes en Actionscript 3.0

ESPECIFICACIONES

Lenguaje: Actionscript 3.0 y XML

Compatibilidad: Flash Player 9 o superior

Imágenes: Para esta demo he conectado la galería con la cuenta de Flickr de Lola

Peso: 36KB