Acceso a la página en Facebook de esedeerre

Una de las cosas "pendientes" en esedeerre, era crear una sección de enlaces interesantes. Hasta ahora no lo hemos hecho para no "ensuciar" la web y mantener la visibilidad de los tutoriales.

Esto va a seguir asi en la web, pero hemos creado una página en Facebook para crear una página allí que aloje todos estos enlaces a otras páginas con noticias, tutoriales y snippets.

Acceso a la página en Facebook

Abrir una nueva ventana pasando parámetros por POST con navigateToURL

Etiquetas: navigateToURL

Este es un snippet para abrir un ventana con navigateToURL en Actionscript 3.0, pasando variables por "POST":

 
var peticion:URLRequest = new URLRequest("descarga.php");
var variables:URLVariables = new URLVariables();
variables.imagen = "ruta de la imagen";
peticion.method = URLRequestMethod.POST;
peticion.data = variables;
navigateToURL(peticion, "_blank");
 

Modificar el menú contextual (botón derecho) con Actionscript 3.0

Etiquetas: ContextMenu ContextMenuItem

Desde Actionscript podemos modificar los elementos del menú que aparece al pulsar sobre nuestra película con el botón derecho.

Para cambiar el menú, podemos seguir estos pasos:

-Crear una variable de tipo ContextMenu:

var menuDTRK:ContextMenu = new ContextMenu();

-Crear los elementos que vamos a añadir al menú. Estos elementos son de tipo ContextMenuItem, y el constructor recibe como parámetro el texto que vá a aparecer en el menú (hay otros 3 parámetros opcionales):

var quienes:ContextMenuItem = new ContextMenuItem("QUIENES SOMOS");
var trabajos:ContextMenuItem = new ContextMenuItem("TRABAJOS");

-Añadir los elementos que hemos creado al menú:

menuDTRK.customItems.push(quienes, trabajos);

-Poner listeners a los elementos del menú que hemos creado. Es decir, hemos creado las variables "quienes" y "trabajos", las hemos puesto en el menú, y ahora tenemos que decir que pasa cuando el usuario clica en ellas:

quienes.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, quienesSelect);
trabajos.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, trabajosSelect);
 

-Por último creamos las funciones que hemos dicho que se van a ejecutar. En este caso lo que yo hago es llamar a una función para cargar un archivo:

function quienesSelect(e:Event):void {
	cargarContenido("swf/quienes.swf")
}
 
function trabajosSelect(e:Event):void {
	cargarContenido("swf/galeria_dtrk.swf")
}

Otra opción que tenemos, es eliminar los elementos que vienen por defecto en el menú contextual (se eliminan todos menos "Configuración" y "Acerca de..."):

menuDTRK.hideBuiltInItems();

Faces (triángulos 3d) en Papervision3D

Etiquetas: geometry faces

Además de acceder a los vértices de un objeto en 3D, podemos acceder a los triángulos (caras) formados por estos vértices.

La matriz que contiene todos los triángulos de una figura se encuentra dentro de la propiedad geometry.faces del objeto.

Por ejemplo para recorrer todas las caras de un plano y poner a cada una un color aleatorio, podemos hacer:

 
for (var i:uint = 0; i < plane.geometry.faces.length; i++ ) {
    plane.geometry.faces[i].material = new ColorMaterial(Math.random() * 0xffffff);
}
 

Obteniendo algo parecido a esto:

Un par de detalles útiles a la hora de trabajar con las caras en Papervision son:

-cada cara tiene un id (propiedad id)numérico único. Este id nos puede valer por ejemplo para asociar en una matriz cada cara a un material.

-Si añadimos un evento de ratón a un objeto, el evento InteractiveScene3DEvent que se propaga tiene una propiedad face3d, que hace referencia a la cara que ha recibido el evento (por ejemplo un click)

Pixelar Textos en Papervision

Mezclando los experimentos con cubos y el de pixelizar imágenes, he hecho esta prueba para convertir textos en cubos 3D.

VER EJEMPLO EN MOVIMIENTO

El funcionamiento es sencillo.

1. Rellenar un campo de texto con la palabra que queremos "pixelizar":

2. Hacer un BitmapData con el texto, y dividirlo en cuadrados de lado n:

3. Repasar los cuadrados, y marcar los que tengan el pixel superior izquierdo de color negro:

4. Crear cubos en las coordenadas de los cuadrados que hemos marcado. Estos cubos pueden tener imágenes como material, colores, etc...

El resultado depende de varios factores. Podemos jugar con la tipografía utilizada, el tamaño de los cuadrados (a menor tamaño, mas precisión), el material de los cubos... Jugando con estos parámetros podemos conseguir cosas así (imágenes tras el salto):

Logo para realidad aumentada

Me gustaría recomendar un link que puede ser de gran utilidad para todos aquellos que tiramos del carro de la RA. De momento está solo en inglés en una fase beta pero el objetivo básico de esta iniciativa es identificar la RA cuando se encuentre en un entorno off-line.

Tiene toda la lógica. Ahora es una tecnología muy incipiente pero qué pasará cuando vayas por la calle y veas una marquesina de autobús con RA en la publicidad? O un packaging de un juguete o unas zapatillas, que visto a través de la cámara de tu móvil reproduce una u otra información?

Está claro, habrá que identificarlo con una identidad visual al igual que Bluetooth tiene su logo para indicar que conectándolo en tu móvil puedes descargarte cierta información o si ves el logo de Wi-Fi en el escaparate de un bar, sabes que tienes conexión a internet sin cables.

Será cuestión de ir integrándolo en cualquier trabajo relacionado con la tecnología, que funcione el boca-a-boca y se vaya standarizando como un referente más.

Ahí va: http://www.augmentedrealitylogo.com

Espero que os sea de utilidad. Desde luego a mí me lo resulta de cara a vender proyectos con Realidad Aumentada a mis clientes o agencias con las que trabajo. Da más empaque y seriedad al trabajo final y mayor confianza para apostar por 'esa cosa nueva' tan espectacular  :)

Buscamos colaboradores

Buscamos colaboradores

Buscamos desarrolladores Flash que tengan las siguientes características:

- Nivel senior en AS2 y AS3, programando con OOP

- Nociones de php. No es necesario que sea un crack pero si que esté familiarizado con envios de mails, bases de datos subida de archivos, etc....

- Que le guste su trabajo. Que cuando saquen Actionscript 4 esté deseando probarlo y no vaya llorando por las esquinas. Que cuando tenga que hacer algo que no ha hecho nunca no diga NO sino "lo miro y te cuento".

Puntos extra

- Que le haya echado un ojo a la API de android, o que se haya pegado con webs para iphone

- Experiencia desarrollando aplicaciones para facebook

Buscamos Freelance residentes en Madrid, para trabajar en nuestra oficina (al lado de la Plaza Mayor) o desde su casa.

Las condiciones estamos abiertos a negociarlas, pueden ser colaboraciones en proyectos puntuales o fees mensuales, todo es hablarlo.

Para que os hagáis una idea del tipo de trabajos que hacemos, estos son los últimos:

Samsung Impresoras

Loewe

Young & Rubicam

Mi mail es contacto@esedeerre.com

Prueba de rendimiento para Papervision y Box2D

Etiquetas: PointLight3D FlatShadeMaterial b2AABB

Lo dicho, prueba de rendimiento con Papervision GreatWhite y Box2D.

Un PointLight3D, 100 cubos, 4 de las caras con FlatShadeMaterial, y por detras una simulación de físicas con Box2D a 5 iteraciones.

Cuando pueda limpiar el código y optimizar, lo publico comentado.

Cualquier comentario sobre el rendimiento será bienvenido.

ver ejemplo en movimiento

Cambiar la visualización utilizando Vertex

Etiquetas: vertex

Siguiendo con el tema de los Vertex en Papervision GreatWhite, dejo este ejemplo de como nos pueden valer para cambiar la visualización de manera sencilla.

Con un switch de este tipo:

 
switch(visualizacion) {
	case 1:
		vertex.z += (Math.abs(mouseX - n3d[count].x) - vertex.z) / 10;
	break;
	case 2:
		vertex.z += (Math.abs(mouseX - n3d[count].x) - vertex.z) / vs[count]; 
	break;
	case 3:
		vertex.z += (Math.min(5 * Math.abs(mouseX - (stage.stageWidth - 1000)/2 - n3d[count].x) +  5 * Math.abs(mouseY - (stage.stageHeight - 400)/2 - n3d[count].y),500) - vertex.z) / vs[count]; 
	break
}

podemos cambiar la reacción de los vértices a los movimientos del ratón.

Posicionar vértices en Papervision3D

Etiquetas: vertex WireFrameMaterial

Los elementos 3D (planos, esferas, modelos 3d, etc) están compuestos de triángulos.

Por ejemplo, si creamos un plano en Papervision3D con un WireframeMaterial con la siguiente sintaxis:

 
var plano:Plane = new Plane(material, 100, 100, 4, 3)	
 

obtenemos un resultado parecido a este:

Los vértices de un objeto están almacenados en un Array (vertex) dentro de la propiedad geometry del objeto. Por ejemplo, en el caso de nuestro plano podemos recorrer los vértices con este bucle:

 
for each (var vertex:Vertex3D in plano.geometry.vertices) {
}
 

Los números que he colocado sobre la imagen anterior, indican el orden en el que aparecen los vértices en esta matriz. Podemos observar que un plano por n x m segmentos, tiene (n+1) x (m+1) vértices.

En nuestro caso, el plano de 4x3 segmentos, tiene 5x4 vértices, ordenados de abajo arriba y de izquierda a derecha.

Estos vértices tienen unas coordenadas, que dan a la malla la apariencia de plano, y se pueden modificar. Por ejemplo imaginemos que queremos hacer un carrusel circular compuesto por 8 planos.

Podemos crear los 8 planos, y distribuirlos en el círculo mirando al centro, con lo que obtendríamos algo asi (click en la imagen para ver):

El efecto es resulton, pero si nos fijamos, los planos aparecen rígidos y no se adaptan a la forma del círculo. Para solucionarlo, podemos posicionar los vértices de los planos en el círculo, en lugar de los propios planos, con lo que obtendríamos algo asi (click en la imagen para ver):

Aunque en principio puede parecer muy complejo "posicionar vértices", en realidad haciendo un par de ejemplos se entiende perfectamente, y en algunos proyectos puede mejorar mucho los resultados. Dejo los fuentes comentados, para poder probar las dos opciones y ver las diferencias.