Flash 3D y webcam.

 Archivado en: Tutoriales, Flash 3D — info @ Nov 21st, 2008

En el siguiente tutorial, conseguiremos que Flash acceda a nuestra webcam y capture la imagen que recoja ésta en tiempo real.

Posteriormente jugaremos con la captura de vídeo y para visualizarlo en 3D. Analizamos el código…

Creamos las variables que vamos a necesitar.

Con la variable “camara” creamos un objeto Camera, y con las variables “video1, video2…” cargamos los archivos de vídeo. Finalmente creamos un MovieClip.

var camara:Camera = new Camera();
var video1:Video = new Video();
var video2:Video = new Video();
var video3:Video = new Video();
var video4:Video = new Video();
var contenedor:MovieClip=new MovieClip();

Estas clases anteriores (Video, Camera y MovieClip) se encuentran en los paquetes flash.display y flash.media, que deberíamos importarlo si esta programación estubiese en una clase externa a Flash. Dichos paquetes, vienen ya importados al trabajar en el entorno de la aplicación (en la línea de tiempo).
Colocamos en “camara” a una referencia al objeto Camera para poder capturar el vídeo.

camara=Camera.getCamera();

Indicamos la fuente de cada vídeo, que sería la camara.

video1.attachCamera(camara);
video2.attachCamera(camara);
video3.attachCamera(camara);
video4.attachCamera(camara);

Cada video lo anidamos en contendor, que recordemos es un MovieClip.

contenedor.addChild(video1);
contenedor.addChild(video2);
contenedor.addChild(video3);
contenedor.addChild(video4);

Para hecer visible el MovieClip contenedor, tenemos que añadirlo a la escena.

addChild(contenedor);

Posicionamos contenedor en el escenario, y cada video en contenedor.

contenedor.x=275;
video1.width=275;
video1.height=200;
video1.y=200;
video1.rotation=180;
video2.width=275;
video2.height=200;
video2.y=200;
video2.scaleX=- video1.scaleX;
video3.width=275;
video3.height=200;
video3.y=200;
video4.width=275;
video4.height=200;
video4.y=200;
video4.scaleY=- video3.scaleY;

Asignamos un evento ENTER_FRAME a contendor y la función de llamada.

contenedor.addEventListener(Event.ENTER_FRAME, girar);

Creamos la función que se va a llamar en cada ENTER_FRAME en concepto de bucle. Ésta hace que el contenedor esté girando en su eje vertical (Y).

function girar(e:Event) {
contenedor.rotationY++;
}

Ver muestra

Descargar archivos


 Tutorial 3D en Flash, realizar un cubo.

 Archivado en: ActionScript 3.0, Flash, Tutoriales, Flash 3D — info @ Nov 18th, 2008

Lo primero será bajarnos las clases de Papervision3D y en su versión 2.0. Podemos hacerlo en esta dirección: http://code.google.com/p/papervision3d/downloads/list

Posteriormente, en Flash, tenemos que agregar en la ventana de Configuración de ActionScript 3, la ruta de las clases que hemos bajado.


Importamos las clases que vamos a usar y que están en los paquetes correspondientes de flash y de papervision3d.  Recordamos que el asterisco (*) significa el comodín, para importar todas las clases de dicho paquete.

import flash.events.*;
import flash.display.*;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.core.proto.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.materials.*;

Ahora vamos a declarar las variables necesarias para el uso del 3D.  Son los objetos cámara, un visor para mostrar lo que se va a renderizar, una escena, y el objeto de renderización que utilizaremos más adelante.

var camara:Camera3D = new Camera3D();
var vista:Viewport3D = new Viewport3D(550, 400);
var escena:Scene3D = new Scene3D();
var render:BasicRenderEngine = new BasicRenderEngine();

Por comodidad para este caso vamos a meter todos los elementos en un nuevo objeto 3D, que llamaremos contenedor.  Esto no tiene por qué ser así, pero de esta forma tendremos la posibilidad de referirnos a todo el “objeto” 3D que vamos a realizar.

var contenedor:DisplayObject3D = new DisplayObject3D();

Definimos una variable para posteriormente usarla para el valor de transparencia de los materiales, en este caso un 20% (recordamos que debe ser un valor entre 0 y 1)

var transparencia = .2;

Cada cubo que vamos a hacer, tedrá un material asociado, que se ha de crear como una lista de materiales de las seis caras de un cubo.  Cada cara puede ser el material deseado.  Para este caso hemos usado un material de imagen (BitmapData) y cinco de color liso.

var material:MaterialsList = new MaterialsList({
front: new BitmapAssetMaterial(”foto”, true),
back: new ColorMaterial(0xFF0000, transparencia),
right: new ColorMaterial(0×00FF00, transparencia),
left: new ColorMaterial(0×333333, transparencia),
top: new ColorMaterial(0×0000FF, transparencia),
bottom: new ColorMaterial(0xFFFF00, transparencia)
});

Para el objeto BitmapData, que es usado en la clase BitmapAssetMaterial, es necesario crear una vinculación del símbolo (en el símbolo de la bibloteca pulsar el botón derecho y pulsar Vinculación) para ser usado en ActionScript y que extiende a la clase flash.display.BipmapData (la que sale por defecto).  En este ejemplo se le ha asignado el identificado o clase “foto”.

Ahora nos toca hacer los cubos.  Para ellos almacenamos en una variable la cantidad de cubos que vamos a hacer.  En otra el Array que almacenará cada uno de los cubos.  Definimos la variable “tam” para indicar el tamaño que tendrá cada cubo, para que vaya aumentando cada uno de forma progresiva.  Mediante el constructor Cubo, pasamos el material, el tamaño y los vértices.  Una vez hecho el cubo, lo incluimos en la lista como hijo del objeto “contenedor”.

var cant = 8;
var cubos: Array = new Array();
for (var i = 0; i<=cant; i++) {
var tam = (i+2)*10;
cubos[i] = new Cube(material, tam, tam,tam,2, 2, 2);
contenedor.addChild(cubos[i]);
}

Añadimos el visor (vista) con el tamaño definido arriba en su construcción, posicionamos la cámara, y añadimos el “contenedor” a la escena.

this.addChild(vista);
camara.z = -200;
escena.addChild(contenedor);

En la animación 3D en flash, hay que ir representando lo que se ha de ver en cada fotograma, por lo que aún siendo un proceso automático, hay que ordenar a que se renderice mediante el objeto “render” creado anteriormente.  Para esto, creamos el evento ENTER_FRAME para que nuestro flash 3D se renderice a cada instante (si es eso lo que queremos, siempre que algo cambie en nuestro visor).  La función que vamos a asociar a este evento es renderizar.

this.addEventListener(Event.ENTER_FRAME, renderizar);

Declaramos y definimos la función renderizar, que su objetivo es cambiar la rotación de los cubos, con una fórmula matemática fácilmente entendible, para que tengan una especie de deceleración con un rozamiento diferente según el tamaño del cubo.

Tras cambiar las rotaciones de los cubos, toca renderizar la escena.  Para esto hacen falta los objetos: render, escena, camara y vista, y mediante el método renderScene de la clase BasicRenderEngine redibujamos la escena en el visor.

function renderizar(e:Event):void {
for (var i=0; i<=cant; i++) {
var clip = cubos[i];
var roz=(i+2)*3;
clip.rotationY = ((clip.rotationY*roz)+((mouseX-200)/1))/(roz+1);
clip.rotationX = ((clip.rotationX*roz)+((mouseY-275)/1))/(roz+1);
}
camara.z = ((camara.z*8)+mouseY-500)/9;
render.renderScene(escena, camara, vista);
}

Ver muestra

Descargar archivos