Mucho se habla hoy en día en el mundo de internet de HTML5. La tecnología que, según algunos, desplazará a Flash de su reinado actual.

Como manifesté varias veces en este blog, y en otros lados, no me parece que Flash desaparezca o quede en la historia, ya que a HTML5 le falta muchísimo para llegar a lo que es hoy en día Flash. Seguramente lo logre en menos tiempo del que dicen y sea una excelente “herramientas” (la cual uso y usaré) pero lo que muchos no quieren ver es que Flash en ese tiempo también va a crecer y mucho.

Por eso mismo Adobe está planeando en la versión 11 del Flash Player agregarle un moto 3D nativo. Que según los rumores será acelerado por las placas de video. Si esto es así y Adobe juega bien sus cartas estaremos frente a una nueva revolución de la web (como lo fue la aparición de los videos, también de la mano de Flash).

Seguro veremos miles de páginas con interfaces muy interesantes y sobre todo juegos online de altísimo nivel. Y quien dice en una segunda etapa en el futuro, más optimizada y mejoradas, lleguemos a ver juegos como el Word of Warcraft directamente en nuestros navegadores sin necesidad de instalarlos en nuestras computadoras.

En fin, flash no está muerto y sigue mejorando. Tal vez surjan nuevas tecnologías que nutran el mundo de la web, pero no significa que Flash no tenga mucho para dar aún!

También te puede interesar:

• JW Player desarrolla un reproductor para HTML5
• Presentación sobre HTML5
• Dreamwearver CS5 con HTML5
• Mundo Digital, Los pixeles nos atacan!
• Componentes para flash gratis

En un proyecto que estoy desarrollando en PaperVision3D surgió la necesidad de implementar input text para un formaulario, el cual esta en un material de un cubo.

Para los que tiene una idea de PaperVision3D saben que los cubo llevan un MaterialList, con 6 matriales distintos. Uno para cada cara del cubo.

En uno de ellos decidimos colocar un formaulario, que obviamente tiene muchos campos de texto para ser completados. Pero a la hora de hacer las pruebas me percaté que al hacer click sobre los campos no se activan para escribir en ellos. La solución a este problema es muy sencilla, pero tal ves, como pasa con las cosas sencillas, no es facil darse cuenta de la solución, por mas obvia que sea.

Lo que hay que hacer es agregarle un addListener a cada campo y en el metodo que llamamos con el listener reasiganar el foco del stage al mismo campo, como muestro a continuación.

1
2
3
4
5
6

texto_txt.addEventListener(MouseEvent.CLICK, onClickInput);
 
private function onClickInput(e:MouseEvent):void
{
     stage.focus = e.target;
}

El problema que tenemos con está técnica es que no podemos clickear y arrastrar para seleccionar una porción del texto, como tampoco podemos hacer click en el medio de una palabra para que el el cursor quede allí. El cursor siempre quedará al final del texto.

No es lo más comodo, pero si necesitamos usar un input text en un material de PaperVision3D creo que es una buena solución.

También te puede interesar:

• Como funciona BasicView de PaperVision 3D 2.0
• Carrusel 3d con PV3D (Video Tutorial)
• PaperVision3D, paquete de clases 3D para flash
• Nuevo Video: Creando una Galería de imágenes estilo Picasa
• Realidad Aumentada, una realidad en aumento

En lo que fue el 2009 se habló mucho y hubo pruebas de todo tipo, y hasta algunas empresas se animaron a usar la Realidad Aumentada. Esta tecnología se conoce o imagina desde hace muchísimos años. Simplemente nombrando los visores de Chi de Dragon Ball, ya vemos como la gente imaginaba algo que ya es una realidad. Precaria, pero realidad al fin.

En lo que es el 2010 no hay duda que esta tecnología va a aparecer por todos lados. Obviamente, está creciendo, por lo que no pretendamos algo futuristico, pero quien sabe. Lo seguro es que se hablara más que en el 2009 y se verán cosas nuevas y asombrosas.

Para el que no sabe que es la Realidad Aumentada, se trata de una tecnología de superposición de capas sobre video. Dando la posibilidad de ver información en el video sobre la realidad. Por eso mismo su nombre, porque aumenta la realidad y le agrega elementos, tanto información como cualquier cosa.
La utilidad más grande de esto es implementarlo a los dispositivos móviles, para poder tener información en todo momento. Hay un proyecto llamado Layar desarrollado para iPhone y Android que ya podemos bajar gratis para empezar a conocer y ver de qué se trata esto.

Layar nos permite ver a través de la cámara de nuestro celular elementos superpuestos sobre la realidad. Por ejemplo en “Abbey Road”, Londres podemos ver a los Beatles sobre la famosa peatonal en 3D como si estuvieran ahí.

En la página de Layar podemos ver 4 opciones para empezar a probar el desarrollo sobre esta aplicación. Django-layar de James Turk, PorPOIse de Jen de Smit, LayarDoNet de Dylan Philips y Programmer Joe de Joe Ludwig.

Por otro lado totalmente distinto la Realidad Aumentada se uso bastante en la Web en el 2009. Para promocionar autos, películas y mucho más. Para ello una de las mejores opciones es ActionScript 3, PaperVision3D y la librería FLARToolKit. La cual nos permite con un patrón impreso sobre un papel y una webcam, generar elementos sobre el papel, con la posibilidad de mover el mismo, moviendo al mismo tiempo el objeto virtual.

Les dejo a continuación algunos videos de ejemplos y prometo en un futuro algunos tutoriales sobre el tema.

Ejemplo de Layar3D en un celular

Ejemplo de ActionScript3 con PaperVision3D y FLARToolKit

Ejemplo de aplicación de Realidad Aumentada sobre iPhone

También te puede interesar:

• Como funciona BasicView de PaperVision 3D 2.0
• PaperVision3D, paquete de clases 3D para flash
• Nuevo Video: Creando una Galería de imágenes estilo Picasa
• LoaderMax, el nuevo cargador inteligente en AS3 de GreenSock
• 10 Videos para entender y empezar a usar Flash Catalyst

En este tutorial quiero mostrarles como funciona la clase BasicView de PaperVision 3D 2.0.
Esta clase nos facilita muchisimo a la hora de empezar un nuevo proyecto con esta herramienta.

En proyectos de PV3D se repiten siempre varias acciones, como importar clases básicas como Camera, Scene, Viewport, etc.
También repetimos la creacion de funciones que son si o si necesarias. Como la que renderize nuestra escena en un enterFrame o la que inicie todo los objetos. Por eso, la gente de PV3D decidió acertadamente crear esta clase incluida en la versión 2.0. que se puede extender en cualquier clase y nos ahorra todos esos pasos comentados.

Acá les dejo un ejemplo de como se usaría, explicando en los comentarios algunos detalles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

package {
    import flash.events.Event;
    import org.papervision3d.view.BasicView; // importamos la clase
 
    public class ClasePrueba extends BasicView // extendemos nuestra clase a BasicView
    {
        public function ClasePrueba ()
        {
            stage.frameRate = 40; //seteamos los cuadros por segundos.
            init(); // este metodo inicia todos los elementos.
            startRendering(); // comenzamos a renderizar.
        }
 
        private function init():void
        {
            // dentro de este metodo creamos todos los elemento 3d y demás cosas antes de empezar a renderizar.
        }
 
        override protected function onRenderTick(e:Event=null):void
        {
            // este metodo lo reescribimos sobre el de BasicView, por eso usamos "override protected".
            // todo lo que pongamos dentro de este metodo sería como un EnterFrame, o sea podemos mover nuestros objetos desde aquí
            super.onRenderTick(); // es necesario llamar al super de la clase.
        }
    }
}

Espero quede claro, cualquier consulta pueden usar los comentarios o el twitter.
De a poco voy a ir agregando nuevas cosas sobre PV3D.

Saludos

También te puede interesar:

• PaperVision3D, paquete de clases 3D para flash
• Nuevo Video: Creando una Galería de imágenes estilo Picasa
• Usando Input text con PaperVision3D
• Realidad Aumentada, una realidad en aumento
• Usar Google Map con ActionScript 3

Haciendo unas pruebas y estudiando sobre PaperVision3D, encontrá esta técnica que utiliza el Flash Player desde la versión 9.0.115.0 en adelante y el AIR.
Se trata de Mip-Mapping. Esta tecnología se implementa creando versiones optimizadas de escala variable de cada mapa de bits (comenzando en un 50%).

Flash Player y AIR crean mapas MIP para los mapas de bits (archivos JPEG, GIF o PNG) que se pueden visualizar con la clase Loader de ActionScript 3.0, con un mapa de bits de la biblioteca de la herramienta de edición de Flash o mediante un objeto BitmapData. Flash Player crea mapas MIP para los mapas de bits que se visualizan utilizando la función loadMovie() de ActionScript 2.0.

Los mapas MIP no se aplican a objetos filtrados o clips de película almacenados en caché de mapa de bits. Sin embargo, los mapas MIP se aplican si dispone de transformaciones de mapa de bits en un objeto de visualización filtrado, aunque el mapa de bits esté en un contenido con máscara.

El mipmapping con Flash Player y AIR se realiza automáticamente, pero puede seguir algunas directrices para garantizar que sus imágenes aprovechan esta optimización:

- Para la reproducción de vídeo, establezca la propiedad smoothing en true para el objeto Video.
- Para los mapas de bits, la propiedad smoothing no tiene que establecerse en true, pero las mejoras de calidad serán más visibles si los mapas de bits utilizan el suavizado.
- Utilice tamaños de mapa de bits que sean divisibles por 4 u 8 para imágenes bidimensionales (por ejemplo, 640 x 128, que se puede reducir del siguiente modo: 320 x 64 > 160 x 32 > 80 x 16 > 40 x 8 > 20 x 4 > 10 x 2 > 5 x 1) y 2^n para texturas tridimensionales. Los mapas MIP se generan a partir de mapas de bits de una anchura y altura de 2^n (por ejemplo, 256 x 256, 512 x 512, 1024 x 1024). El mipmapping se detiene cuando Flash Player o AIR encuentran una altura o anchura distinta.

Fuentes: Adobe Help y PaperVision3d Blog.

También te puede interesar:

• Prerelease del SDK de Adobe AIR para Android
• Preguntas frecuentes sobre el Multi-touch de Flash Player 10.1 – Lee Brimelow
• Text Layout Framework (TLF)
• 10 Videos para entender y empezar a usar Flash Catalyst
• Top 5 de novedades de Photoshop, Illustrator e InDesign

Carrusel 3d con PV3D (Video Tutorial)

Bien, como prometí, acá les cuelgo el segundo Video Tutorial.
En este caso se trata de como hacer un efecto ya conocido en el mundo de los desarrolladores web. Un carrusel 3d. Pero con la diferencia que en vez de usar pura trigonometría también vamos a usar la librería de Clases llamada PaperVision 3d (PV3D), que ya mensione en otro post.

La calidad de audio y la proligidad del video no es lo mejor, pero me parece más optimo sacar varios videos que se entiendan y no perder tanto tiempo en esos detalles, que a veces evitan que pueda publicar los videos, por falta de tiempo.

A su debido tiempo ire mejorando esos detalles. Así quedan videos más cortos y mejor editados.
Espero les sirva y escriban comentarios y dudas!.

Links:
Sitio de PaperVision 3d
Descargas de PV3D
PV3D 2.0 Beta

También te puede interesar:

• Nuevo Video: Creando una Galería de imágenes estilo Picasa
• Usando Input text con PaperVision3D
• Como funciona BasicView de PaperVision 3D 2.0
• Nuevo Video Tutorial – SWFAddress 2 con AS3
• Incrustar Flash con SWFObject 2.0 (Video Tutorial)

PaperVision3D es un paquete de clases 3D para flash, que nos permite generar una escena 3D en nuestro swf con objetos y camaras. Los cuales podemos mover en sus 3 ejes (X, Y, Z, ya que estamos hablando de 3D).
Esta es una herramienta muy potente que nos permite ampliar muchisimo el mundo de flash y tambien facilitarnos lo que ya existe, como por ejemplo el ya conocido y clasico carrusel 3D (del cual voy a hacer un videoTutorial, cuando este con mas tiempo, implementando PaperVision3D).

Les dejo un ejemplo muy rapido que hice y su codigo para que vean los simple que es su uso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//importamos las clases necesarias
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.materials.*;
import org.papervision3d.objects.*;
 
//creamos el contenedor de las escena
var contenedor:Sprite = new Sprite();
contenedor.x = stage.stageWidth * 0.5;
contenedor.y = stage.stageHeight * 0.5;
addChild(contenedor);
 
//creamos la escena3D
var escena:Scene3D = new Scene3D(contenedor);
 
//creamos la camara
var camara:Camera3D = new Camera3D();
camara.zoom = 15;
 
//creamos el material que toma un png de la libreria linkeado como Img
var material1:BitmapAssetMaterial = new BitmapAssetMaterial("Img");
material1.oneSide = false;
material1.smooth = true;
 
//creamos el plano y le agregamos el material
var p1:Plane = new Plane(material1, 200, 200, 3, 3);
escena.addChild(p1);
 
//generamos un enterFrame que le sume 2px a cada eje y rendereamos la camara
addEventListener(Event.ENTER_FRAME, onEnter);
 
function onEnter(e:Event):void
{
	p1.rotationY += 2;
	p1.rotationX += 2;
	p1.rotationZ += 2;
 
	//rendereamos la camara
	escena.renderCamera(camara);
}

Archivos del Ejemplo

Links:
Sitio Oficial
Blog
Descargas

También te puede interesar:

• Como funciona BasicView de PaperVision 3D 2.0
• Nuevo Video: Creando una Galería de imágenes estilo Picasa
• Usando Input text con PaperVision3D
• Realidad Aumentada, una realidad en aumento
• Usar Google Map con ActionScript 3