Hace tiempo que tenía pensado iniciar una sección de tutoriales, cosa que da mucha vida a este semicadáver de blog, pero hasta ahora nunca me había apetecido ponerme a hacerlos.
     Hoy por fin empezamos con una serie de tutoriales de Papervision3D, para todos aquéllos que quieran iniciarse en técnicas 3D en Flash.

     Motores 3D escritos en ActionScript para Flash y Flex hay unos cuantos. Away3D, Alternativa3D, Sandy3D y el que nos ocupa quizás sean los más famosos, pero no los únicos.

     Tutoriales de Papervision3D hay cientos por la red, no encontraréis aquí nada especialmente nuevo. Pero otro más nunca sobra, así que allá vamos.



     El IDE a usar para este tutorial es opcional, hay muchas alternativas, prácticamente cualquier entorno de desarrollo capaz de crear un archivo swf a partir de código ActionScript nos valdría. Vamos a publicar para Flash Player 9 ó 10 con AS3, así que si vamos a usar Adobe Flash, será necesaria la versión CS3, CS4 o la beta de CS5.

     Sin embargo, el editor de ActionScript de Flash es bastante limitado (aunque en CS5 parece que lo van a mejorar bastante), así que mejor usar Flex Builder, y mejor aún su nueva versión, que ahora han renombrado como Adobe Flash Builder 4, aún en versión beta también a la hora de escribir estas lineas, pero totalmente funcional (a mí al menos me va muy bien). Se puede descargar una versión de evaluación en Adobe Labs. Otras buenas opciones son FDT o FlashDevelop.

     En este tutorial vamos a usar Flash Builder 4, así que las capturas de pantalla serán de esta aplicación.

     Lógicamente, necesitaremos también las librerías de Papervision3D, es decir, una serie de clases en sus respectivos paquetes que posibilitarán crear un entorno 3D en nuestra aplicación Flash. La API de esta librería para AS3 la tenéis aquí.

     Para descargar las librerías hay tres opciones, descargar todas las clases en un zip, bajarlas precompiladas en un swc, o usar Subversion, un sistema de control de versiones con el que puedes tener fácilmente actualizadas las librerías. No vamos a entrar a desglosar las ventajas y desventajas de cada una de estas opciones, no es ese el propósito de este tutorial. En cualquier caso, una vez descargadas por cualquiera de estos métodos, tendremos disponible Papervision3D, o bien en una carpeta, o en un sólo archivo swc. Si lo hemos descargado en un zip, lo descomprimimos en algún lugar de nuestro disco duro que esté a mano. Vamos a crear un proyecto y linkarlas.

     Abrimos Flash Builder 4 (o el IDE que estemos usando) y creamos un nuevo proyecto ActionScript. Lo llamamos como queramos, por ejemplo: TutoPV3D01.



     Dejamos las opciones por defecto, es decir, el workspace en el que estemos trabajando, en mi caso C:websites2 (podemos cambiar el espacio de trabajo a través de File -> Switch Workspace), y le damos a terminar.



     Flash Builder nos crea una clase con el mismo nombre del proyecto, así que vamos a usarla ya que la tenemos. Además, nos la marca como aplicación por defecto. Ésta será la clase principal de nuestro proyecto. Como nuestro tutorial sólo va a requerir de una clase, además de la principal será la única.



     Vamos a añadir las librerías al Source Path, para tenerlas "disponibles" al escribir el código, y que el compilador las encuentre. Sobre nuestro proyecto, botón derecho del ratón -> propiedades.



     No nos va a hacer falta modificar casi nada para nuestra aplicación. En la ventana de propiedades, nos vamos a ActionScript Build Path.
     Si hemos descargado Papervision3D como un zip (y lo hemos descomprimido), o bien con Subversion, en la pestaña Source Path añadimos la carpeta con las fuentes de la librería, la ruta es donde-quiera-que-tengamos-la-carpeta/papervision3d_source/src.



     En caso de que hayamos descargado Papervision3D como un swc, lo añadimos desde la pestaña Library Path.

     Si estamos usando otro IDE que no sea Flash Builder, el proceso es muy similar, sólo hay que añadir al ClassPath o Source Path la ruta de las librerías.
     En el caso de que estemos usando Flash, podemos linkar las librerías a través de Edit->Preferences-> ActionScript-> ActionScript 3.0 Settings, y añadir la ruta en Source Path (Flash CS4) o en Class Path (si usamos Flash CS3).

     Para terminar con esta primera parte, vamos a echar un vistazo en el explorador de paquetes a las carpetas que Flash Builder nos ha creado.



    -  La carpeta [source path] src son las librerías de Papervision3D que acabamos de incluir en el proyecto.

     - La carpeta src (de source) es la que contiene las fuentes, es decir, los paquetes (en principio crea un paquete por defecto) y nuestras clases. Si desplegamos el paquete, veremos que contiene nuestra clase TutoPV3D01, que es la única que usaremos.

     - La carpeta Flex 4.0 es una referencia del IDE al SDK que vamos a usar para compilar, en nuestro caso Flex 4.0. Esto se puede configurar, pero para un proyecto AS3 es lo que necesitamos.

     - bin-debug contendrá nuestras aplicaciones publicadas tras compilarlas, es decir, nuestros swfs.

     - Y por último, en html-templates Flash Builder nos crea las plantillas html necesarias para incrustar nuestros swfs, además del código javascript necesario para que el navegador chequee la versión del flash player que se está usando, dando la posibilidad de actualizarla si tenemos una versión anterior a la que nuestra aplicación requerirá.

     Y hasta aquí por ahora. En el próximo tutorial de esta serie crearemos una pequeña animación introductoria.